/* AI-led homepage — matches Figma "AI led homepage high fi" */

.aih-hero,
.aih-logos,
.aih-process,
.aih-outcomes,
.aih-solutions,
.aih-resources,
.aih-contact {
  font-family: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.aih-container {
  max-width: 1280px; /* 1216px of content + 2x32px gutters, as in Figma */
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box; /* so the gutters cannot push the module wider than the viewport */
}

/* ---------- Buttons ---------- */

.aih-btn {
  display: inline-block;
  padding: 15px 34px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, opacity .15s ease;
  border: 2px solid transparent;
}

.aih-btn:hover { transform: translateY(-2px); text-decoration: none; opacity: .94; }
.aih-btn--primary { background: #3ecf9a; color: #ffffff !important; border-color: #3ecf9a; }
.aih-btn--outline { background: transparent; color: #1a9c74 !important; border-color: #3ecf9a; }
.aih-btn--white { background: #ffffff; color: #1a1b3a !important; border-color: #ffffff; }
.aih-btn--secondary { background: #6d28d9; color: #ffffff !important; border-color: #6d28d9; }

/* ===================== HERO ===================== */

.aih-hero {
  position: relative;
  background: #ffffff;
  padding: 80px 0 40px;
  overflow: hidden;
  text-align: center;
}

.aih-hero__bg {
  position: absolute;
  inset: auto 0 0 0;
  height: 300px;
  opacity: .9;
  pointer-events: none;
}

.aih-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
  display: block;
}

.aih-hero__inner { position: relative; z-index: 1; }

.aih-hero__title {
  font-size: 48px;
  line-height: 1.12;
  font-weight: 700;
  color: #14152e;
  margin: 0 auto 24px;
  max-width: 980px;
}

.aih-gradient {
  background: linear-gradient(90deg, #a855f7 0%, #6366f1 45%, #22d3ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #6366f1;
}

.aih-hero__subtitle {
  font-size: 1.18rem;
  line-height: 1.6;
  color: #2c2d45;
  max-width: 900px;
  margin: 0 auto 36px;
}

.aih-hero__ctas {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

.aih-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  
  margin: 0 auto 18px;
}

.aih-hero-stat {
  /* Gradient border ring: a white layer fills the padding box, the gradient shows
     through the transparent border. Colours are hard-coded per box below. */
  --stat-gradient: linear-gradient(135deg, #b342d4 0%, #0021ff 100%); /* fallback: box 1 */
  border: 3px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    var(--stat-gradient) border-box;
  padding: 34px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Static, hard-coded gradient borders — per box, no fields.json involved */
.aih-hero__stats > .aih-hero-stat:nth-child(1) { --stat-gradient: linear-gradient(135deg, #b342d4 0%, #0021ff 100%); }
.aih-hero__stats > .aih-hero-stat:nth-child(2) { --stat-gradient: linear-gradient(135deg, #0021ff  0%, #6fc4ff 100%); }
.aih-hero__stats > .aih-hero-stat:nth-child(3) { --stat-gradient: linear-gradient(135deg, #2ab2ff 0%, #41f5d7 100%); }

.aih-hero-stat__number { font-size: 48px; font-weight: 700; color: #14152e; line-height: 1; }
.aih-hero-stat__label { color: #2c2d45; font-size: 13px; line-height: 1.45; }

.aih-hero__footnote {
    color: #6b7280;
    font-size: .9rem;
    margin: 50px 0 0 0;
    background: #fff;
    display: inline-block;
    padding: 5px;
}

/* ===================== LOGOS (auto-scrolling marquee) ===================== */

.aih-logos { background: #ffffff; padding: 40px 0; overflow: hidden; }

/* ===== Manual scrolling on every device: mobile swipe, desktop trackpad /
   shift-wheel / click-and-drag (the drag itself is wired up in module.js). ===== */
.aih-logos__marquee,
.aih-solutions__marquee {
  overflow-x: auto;                /* the row can be scrolled by hand */
  overflow-y: hidden;              /* …but never vertically */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;  /* a swipe past the end must not trigger browser back */
  scrollbar-width: none;           /* scrollable, just without a visible bar */
  -ms-overflow-style: none;
  scroll-behavior: auto;           /* module.js sets scrollLeft every frame: never animate it */
  cursor: grab;
}

.aih-logos__marquee::-webkit-scrollbar,
.aih-solutions__marquee::-webkit-scrollbar { display: none; width: 0; height: 0; }

.aih-logos__marquee.aih-marquee--dragging,
.aih-solutions__marquee.aih-marquee--dragging { cursor: grabbing; user-select: none; }

/* Once the visitor takes the row over by hand, module.js adds this class so the
   auto-slide stops: the two would otherwise fight over the same row. */
.aih-logos__marquee.aih-marquee--manual .aih-logos__track,
.aih-solutions__marquee.aih-marquee--manual .aih-solutions__track { animation: none; }

/* module.js runs the auto-slide itself so that the loop can wrap on an exact set
   boundary (no jerk, constant speed) and adds this class to switch the keyframes
   off. Without JavaScript — or in the moment before the script runs — the
   keyframe animation above is the fallback. */
.aih-logos__marquee.aih-marquee--js .aih-logos__track,
.aih-solutions__marquee.aih-marquee--js .aih-solutions__track { animation: none; }

/* The auto-slide moves the row with a transform, so give the track its own
   compositor layer and keep that motion smooth however slow the crawl is. */
.aih-logos__track,
.aih-solutions__track { will-change: transform; backface-visibility: hidden; }

/* Images inside the rows must not start the browser's own drag-and-drop */
.aih-logos__marquee img,
.aih-solutions__marquee img { -webkit-user-drag: none; user-select: none; }

.aih-logos__track {
  display: flex;
  width: max-content;
  animation: aih-marquee 32s linear infinite;
}

/* Pause on hover + honour reduced-motion */
.aih-logos__track:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .aih-logos__track { animation: none; } }

@keyframes aih-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); } /* one of the three sets => seamless loop */
}

.aih-logos__set {
  display: flex;
  align-items: center;
  justify-content: space-between; /* only bites when a short logo list is stretched by min-width */
  gap: 72px;
  padding-right: 72px;
  /* Three sets travel two set-widths before looping, so a set must always be at
     least half the viewport: that keeps the track wider than the screen at every
     point, which is what stops a blank gap appearing at the end of the cycle. */
  min-width: 50vw;
}

.aih-logos__set img { max-height: 96px; width: auto; display: block; }

.aih-logos__ph {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* ===================== PROCESS (blue) ===================== */

.aih-process {
   background-color: #3b4bf5;
    background-image: url(https://4244938.fs1.hubspotusercontent-eu1.net/hubfs/4244938/Benefits%20overview%20background.svg);
    padding: 50px 0;
    background-repeat: no-repeat;
    background-position: top right;

}

.aih-process__card {
  background: #ffffff;
  border-radius: 4px;
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
}

.aih-process__intro h2 {
  font-size: 28px;
  line-height: 1.2;
  color: #14152e;
  margin: 0 0 20px;
}

.aih-process__intro p { color: #2c2d45; line-height: 1.6; margin: 0; font-size: 14px; }

.aih-step { display: flex; gap: 20px; align-items: flex-start; }
.aih-step__num { font-size: 40px; font-weight: 700; color: #14152e; line-height: 1; min-width: 74px; }
.aih-step__icon { font-size: 2.2rem; min-width: 74px; }
.aih-step__body h3 { font-size: 21px; color: #14152e; margin: 0 0 6px; }
.aih-step__body p { color: #2c2d45; margin: 0; line-height: 1.55; font-size: 14px; }

/* Step arrows — the images are hard-coded here as static CSS backgrounds.
   The markup keeps an empty <span>, so there is no <img> and no field involved. */
.aih-step__arrow {
  display: block;
  width: 53px;
  height: 41px;
  margin: -12px 0 34px -2px; /* indent keeps the arrow centred under the step number column */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* fallback for any extra step: same as arrow 1 */
  background-image: url('https://4244938.fs1.hubspotusercontent-eu1.net/hubfs/4244938/Vector%20(2).svg');
}

/* Arrow after step 01 */
.aih-process__steps > .aih-step__arrow:nth-of-type(1) {
  background-image: url('https://4244938.fs1.hubspotusercontent-eu1.net/hubfs/4244938/Vector%20(2).svg');
}

/* Arrow after step 02 */
.aih-process__steps > .aih-step__arrow:nth-of-type(2) {
  background-image: url('https://4244938.fs1.hubspotusercontent-eu1.net/hubfs/4244938/Vector%20(3).svg');
}

/* Arrow after step 03 */
.aih-process__steps > .aih-step__arrow:nth-of-type(3) {
  background-image: url('https://4244938.fs1.hubspotusercontent-eu1.net/hubfs/4244938/Vector%20(4).svg');
}

.aih-step__icon img { width: 64px; height: 64px; display: block; object-fit: contain; }

/* ===================== OUTCOMES ===================== */

.aih-outcomes { background: #ffffff; padding: 80px 0 40px; }

.aih-section-heading {
  text-align: center;
  font-size: 28px;
  color: #14152e;
  margin: 0 auto 40px auto;
  font-weight: 700;
}

.aih-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
  max-width: 1160px;
  margin: 0 auto;
}

.aih-outcome-card {
  position: relative;
  isolation: isolate; /* keep the bar/overlay layers local to the card */
  overflow: hidden;
  border-radius: 10px;
  background: #ffffff;
  /* Neutral 1px outline (inset so it never fights the hover overlay) */
  box-shadow: inset 0 0 0 1px #eef0f7, 0 8px 24px rgba(20, 21, 46, .08);
  padding: 44px 28px 34px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Accent bar across the top edge — same colours, full width, corners follow the
   card radius (overflow:hidden clips it). Painted as a pseudo-element rather
   than a border so the hover overlay can cover it completely. */
.aih-outcome-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(90deg, var(--accent1, #f5c542), var(--accent2, #fbd75b));
  z-index: 1;
  pointer-events: none;
}

.aih-outcome-card:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 1px #eef0f7, 0 18px 40px rgba(20, 21, 46, .18);
}

/* Hover overlay (Figma Card interactions 9-11):
   the whole card flips to a gradient panel with the success story */
.aih-outcome-card__overlay {
  position: absolute;
  inset: 0; /* no card border now, so this covers the whole card incl. the top bar */
  z-index: 2;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* copy hangs from the top edge of the card */
  gap: 13px;
  padding: 30px 26px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.aih-outcome-card:hover .aih-outcome-card__overlay,
.aih-outcome-card:focus-within .aih-outcome-card__overlay {
  opacity: 1;
  visibility: visible;
}

.aih-outcome-card__chip {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  padding: 0;
  width: fit-content;
  margin-bottom: 4px;
}

.aih-outcome-card__chip img { max-height: 50px; max-width: 110px; object-fit: contain; display: block; }

.aih-outcome-card__overlay { color: #ffffff; }

/* Third card (Adra) sits on a yellow gradient, so its overlay copy is black.
   Static CSS: the field-driven markup renders no inline colour, so this is the
   only place the yellow card can be re-coloured. Positional by design — if the
   order of the outcome cards changes, the colours follow the position. */
.aih-outcomes__grid > .aih-outcome-card:nth-child(3) .aih-outcome-card__overlay { color: #14152e; }

.aih-outcome-card__overlay h4 { color: inherit; font-size: 20px; line-height: 1.3; margin: 0; font-weight: 700; }

.aih-outcome-card__overlay p { color: inherit; opacity: .92; font-size: 14px; line-height: 1.5; margin: 0; }

.aih-outcome-card__story{font-size: 14px; font-weight: 300;}

/* margin-top:auto pushes the divider + "View success story" onto the bottom edge
   of the card, regardless of how much copy sits above them. */
.aih-outcome-card__divider { display: block; height: 1px; background: currentColor; opacity: .55; margin: 8px 0 2px; margin-top: auto; }

.aih-outcome-card__story { color: inherit; font-weight: 600; font-size: .95rem; text-decoration: none; }
.aih-outcome-card__story:hover { text-decoration: underline; }

.aih-outcome-card__title { font-size: 28px; line-height: 1.2; margin: 0 0 22px; font-weight: 700; }

.aih-outcome-card__stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 3.4rem;
  font-weight: 700;
  color: #14152e;
  line-height: 1;
  margin-bottom: 16px;
}

.aih-outcome-card__icon { width: 56px; height: 64px; object-fit: contain; }

.aih-outcome-card__desc { color: #2c2d45; font-size: 1.02rem; line-height: 1.45; margin: 0 0 26px; }

.aih-outcome-card__logo { max-height: 44px; max-width: 130px; object-fit: contain; margin: 0 auto 26px; display: block; }

.aih-outcome-card__link { color: #14152e; font-size: 14px; text-decoration: none; }
.aih-outcome-card__link span { font-size: 1.05em; }

/* ===================== SOLUTIONS (full-width auto slider) ===================== */

.aih-solutions { background: #ffffff; padding: 40px 0 80px; }



.aih-solutions__marquee {
  /* clips the slider horizontally - see the shared scroll rule above for the
     swipe / drag behaviour that both marquees get */
  width: 100%;
  box-sizing: border-box;    /* so the 32px gutters stay inside the 100% width */
  padding: 32px 32px 48px;   /* 32px side gutters line the cards up with the heading */
  margin: -32px 0 -48px;     /* cancels the vertical padding: layout gap unchanged */
  /* Makes this element a query container so the cards can be sized from the
     visible row width (see .aih-solution-card): 1cqw = 1% of the padded row. */
  container-type: inline-size;
}

.aih-solutions__track {
  display: flex;
  width: max-content;
  animation: aih-solutions-marquee 40s linear infinite;
}

/* Stop sliding while the visitor is interacting */
.aih-solutions__marquee:hover .aih-solutions__track,
.aih-solutions__marquee:focus-within .aih-solutions__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .aih-solutions__track { animation: none; } }

@keyframes aih-solutions-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); } /* one of the three sets => seamless loop */
}

.aih-solutions__set {
  display: flex;
  justify-content: space-between; /* only bites when a short card list is stretched by min-width */
  /* gap == the 32px gutter on purpose: five cards + four gaps exactly fill the
     visible row, so the sixth card starts at the gutter edge and stays out of
     sight instead of peeking in */
  gap: 32px;
  padding-right: 32px; /* same seam between two sets as between two cards */
  /* See .aih-logos__set — the three sets must always out-span the viewport */
  min-width: 50vw;
}

.aih-solution-card {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  /* Five cards per screen: five cards + four 32px gaps fill the visible row, so
     width = (100cqw - 128px) / 5. `vw` is the fallback for browsers without
     container query units; the gutters are subtracted there too. */
  width: calc(20vw - 38.4px);
  width: calc(20cqw - 25.6px);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #eef0f7, 0 10px 26px rgba(20, 21, 46, .10);
  padding: 8px 0 26px; /* top strip reserved for the accent bar */
  text-align: center;
  overflow: hidden;
}

/* Per-card gradient top bar — same two accent colours, full width,
   rounded top corners clipped to the card radius */
.aih-solution-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--accent1, #3b82f6), var(--accent2, #60a5fa));
  z-index: 1;
  pointer-events: none;
}

.aih-solution-card__imglink { display: block; }
.aih-solution-card__imglink:hover { opacity: .92; }

.aih-solution-card__img {
  width: 100%;
  /* the illustration band scales with the card, holding the original 252x170
     proportion at every card width */
  height: auto;
  aspect-ratio: 252 / 170;
  object-fit: cover; padding: 20px;
  display: block;
  margin-bottom: 18px;
}
.aih-illus { width: 100%; height: 180px; }

.aih-solution-card__title {
  background: linear-gradient(90deg, var(--accent1, #3b82f6), var(--accent2, #60a5fa));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 1.25rem at 1440px (the card is 320px there), growing gently on wider
     screens so the title keeps up with the larger card */
  font-size: clamp(1.25rem, .5vw + .8rem, 1.6rem);
  line-height: 1.25;
  margin: 0;
  padding: 0 14px;
  font-weight: 700;
}

/* Non-webkit fallback (HubSpot uses Chromium, but be safe) */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .aih-solution-card__title { background: none; -webkit-text-fill-color: currentColor; color: var(--accent1, #3b82f6); }
}

.aih-solution-card__title a {
  color: inherit;
  text-decoration: none;
  -webkit-text-fill-color: inherit;
  transition: opacity .15s ease; font-weight: 700;
} 

.aih-solution-card__title a:hover { opacity: .8; text-decoration: none; }

.aih-solutions__cta { text-align: center; margin-top: 46px; }

/* ===================== AWARDS (blue) ===================== */

.aih-awards {
    background-color: #3b4bf5;
    background-image: url(https://4244938.fs1.hubspotusercontent-eu1.net/hubfs/4244938/Benefits%20overview%20background.svg);
    padding: 50px 0;
    background-repeat: no-repeat;
    background-position: top right;
}

.aih-awards__inner {
  display: grid;
  grid-template-columns: 0.8fr 2.2fr;
  gap: 48px;
  align-items: center;
}

.aih-awards__text h2 { color: #ffffff; font-size: 2.1rem; line-height: 1.2; margin: 0 0 26px; }

.aih-awards__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.aih-award-card {
  background: #16182b;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(10, 12, 40, .22);
}

.aih-award-card__img { width: 100%; height: 190px; object-fit: cover; display: block; }

.aih-award-card__img--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4rem;
  background: linear-gradient(135deg, #6d28d9, #3b4bf5);
}

.aih-award-card__body { background: #16182b; padding: 20px; }
.aih-award-card__body h4 { color: #ffffff; font-size: 15px; line-height: 1.35; margin: 0 0 8px; }
.aih-award-card__body p { color: #c9cddb; font-size: 15px; font-style: italic; margin: 0; }

/* ===================== RESOURCES ===================== */

.aih-resources { background: #ffffff; padding: 80px 0 50px; }

.aih-resources__heading { font-size: 28px; line-height: 1.2; font-weight: 700; color: #14152e; margin: 0 0 38px; }

.aih-resources__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 26px;
  align-items: start;
}

.aih-resources__side { display: grid; gap: 26px; }

.aih-resource-card {
  background: #ffffff;
  border: none;
  border-radius: 0; /* square cards, desktop and mobile */
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(20, 21, 46, .05);
}

.aih-resource-card__img { width: 100%; height: 240px; object-fit: cover; display: block; }
.aih-resource-card--feature .aih-resource-card__img { height: 319px; }

/* Side cards: the image stretches to the full card height so it meets the top
   and bottom edges (object-fit:cover keeps the crop clean when the text column
   is taller). */
.aih-resource-card--row .aih-resource-card__img { height: 100%; min-height: 200px; }

.aih-resource-card__img--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(140deg, #f3f4f8 0%, #e9ebf4 60%, #6d28d9 60%, #8b5cf6 100%);
  color: #14152e;
  font-size: 1.3rem;
  font-weight: 700;
}

.aih-resource-card__img--small { height: 100%; min-height: 200px; }

.aih-resource-card__body { padding: 26px 24px; }
.aih-resource-card__body h3 { font-size: 20px; font-weight: 700; color: #14152e; line-height: 1.3; margin: 0 0 12px; }
.aih-resource-card__body p { color: #2c2d45; font-size: 14px; line-height: 1.6; margin: 0 0 18px; }

.aih-resource-card__link { color: #14152e; font-weight: 600; font-size: 14px; text-decoration: none; }
.aih-resource-card__link:hover { text-decoration: underline; }

.aih-resource-card--row {
  display: grid;
  grid-template-columns: 40% 1fr;
}

.aih-resources__cta { margin-top: 40px; }

/* ===================== BOOK A CALL ===================== */

/* Half background, as in the Figma: the dark strip sits behind the bottom half of
   the section only, so the white card straddles the colour change — its top half
   on the page, its bottom half on the dark. The card fills the section, so 50%
   of the section is the card's own middle line. A hard stop (both stops at 50%)
   keeps the edge crisp rather than fading; the top half is left transparent, so
   it follows whatever the page background is. */
.aih-contact {
  background-image: linear-gradient(to bottom, transparent 50%, #191919 50%);
  padding: 0 0 0;
}

.aih-contact__card {
    background: #ffffff;
    border-radius: 0;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
    align-items: center;
    padding: 48px 56px 56px;
    margin-top: 0;
    box-shadow: 0 0 10px #00000026;
}

.aih-contact__img { width: 100%; max-width: 300px; margin:0 auto; height: auto; }
.aih-contact__img--ph svg { width: 100%; height: auto; max-width: 320px; }

.aih-contact__text h2 { font-size: 40px; color: #14152e; margin: 0 0 14px; }
.aih-contact__text p { color: #2c2d45; font-size: 14px; line-height: 1.55; margin: 0 0 26px; }

.aih-solution-card{transition:all 0.5s}
.aih-solution-card:hover .aih-solution-card__img{ scale:1.05}

/* ===================== MOBILE ===================== */

@media (max-width: 980px) {
  .aih-hero__title { font-size: 2.3rem; }
  .aih-hero__stats { grid-template-columns: 1fr; }
  .aih-process__card { grid-template-columns: 1fr; padding: 40px 28px; gap: 34px; }
  .aih-process__intro h2 { font-size: 1.7rem; }

  /* --- Solutions: manual swipe on mobile instead of the auto-slide marquee --- */
  .aih-solutions__marquee {
    overflow-x: auto;            /* scroll it with a finger / trackpad */
    overflow-y: hidden;          /* still clip vertically so nothing bleeds out */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 32px;
  }
  .aih-solutions__track { animation: none; } /* no auto-slide on mobile */
  .aih-solutions__set { padding-left: 0; padding-right: 0; } /* the marquee's own 32px gutter already lines the first card up */
  .aih-solutions__set[aria-hidden="true"] { display: none; } /* drop the duplicated set: nothing loops any more */
  /* one card and a bit per screen on a phone, as before the desktop 4-up sizing */
  .aih-solution-card { flex: 0 0 252px; width: 252px; scroll-snap-align: start; }

  /* --- Awards: heading, swipeable card row, full-width CTA underneath --- */
  .aih-awards__inner { display: flex; flex-direction: column; gap: 0; }
  .aih-awards__text { display: contents; } /* h2 stays a sibling of the card row so order: can move the button below it */
  .aih-awards__text h2 { order: 1; margin: 0 0 22px; }
  .aih-awards__cards,
  .aih-resources__grid {
    display: flex;
    gap: 16px;
    box-sizing: border-box;
    width: calc(100% + 64px); /* explicit, so the % card widths resolve predictably */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 32px;
    /* bleed past the container padding so cards swipe to the screen edge,
       and pad vertically so overflow-x doesn't clip the card shadows */
    padding: 16px 32px 32px;
    margin: -16px -32px -32px;
  }
  /* The three swipe rows scroll by touch with no visible scrollbar (mobile only) */
  .aih-solutions__marquee,
  .aih-awards__cards,
  .aih-resources__grid { scrollbar-width: none; -ms-overflow-style: none; }
  .aih-solutions__marquee::-webkit-scrollbar,
  .aih-awards__cards::-webkit-scrollbar,
  .aih-resources__grid::-webkit-scrollbar { display: none; width: 0; height: 0; }

  .aih-awards__cards { order: 2; }
  .aih-award-card,
  .aih-resource-card { flex: 0 0 72%; scroll-snap-align: start; }
  .aih-award-card__img { height: 140px; aspect-ratio: 2 / 1; }
  .aih-awards__text .aih-btn { order: 3; display: block; box-sizing: border-box; width: 100%; text-align: center; margin-top: 26px; }

  /* --- Resources: heading, swipeable row of equal-height cards, full-width CTA --- */
  .aih-resources__heading { font-size: 26px; margin: 0 0 24px; }
  .aih-resources__grid { align-items: stretch; } /* overrides the desktop align-items:start so every card ends at the same height */
  .aih-resources__side { display: contents; } /* the two side cards join the swipe row */
  /* stack each card's image above its text, then let the body take the
     leftover height so the "Find out more" link sits on the bottom edge */
  .aih-resource-card,
  .aih-resource-card--row { display: flex; flex-direction: column; }
  /* one fixed 195px image band on every card, real photos and placeholders alike */
  .aih-resource-card__img,
  .aih-resource-card--feature .aih-resource-card__img,
  .aih-resource-card--row .aih-resource-card__img,
  .aih-resource-card__img--small { height: 195px; min-height: 0; aspect-ratio: auto; }
  .aih-resource-card__body { flex: 1; display: flex; flex-direction: column; padding: 18px 18px 20px; }
  .aih-resource-card__body h3 { font-size: 17px; margin: 0 0 10px; }
  .aih-resource-card__body p { display: none; } /* descriptions are mobile-hidden; the field still renders on desktop */
  .aih-resource-card__link { font-size: 14px; margin-top: auto; } /* pinned to the bottom of every equal-height card */
  .aih-resources__cta { margin-top: 30px; }
  .aih-resources__cta .aih-btn { display: block; box-sizing: border-box; width: 100%; text-align: center; }

  .aih-contact__card { grid-template-columns: 1fr; padding: 36px 24px; }
  .aih-section-heading { font-size: 1.7rem; }
}

@media (max-width: 560px) {
  .aih-step{margin-bottom:30px;}
  .aih-hero { padding: 50px 0 30px; }
  .aih-hero__title { font-size: 28px; }
  .aih-hero-stat__number { font-size: 2.6rem; }
  .aih-outcome-card__stat { font-size: 2.6rem; }
  .aih-outcome-card__overlay { padding: 22px 18px; gap: 10px; }
  .aih-outcome-card__overlay h4 { font-size: 1.05rem; }
  .aih-hero-stat{flex-direction:row; text-align:left}
  .aih-hero-stat__number{display:flex; white-space:nowrap}
}

/* ===================== SCROLL REVEAL ===================== */

.aih-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
.aih-reveal.aih-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .aih-reveal { opacity: 1; transform: none; transition: none; }
}

.aih-resource-card__link, .aih-outcome-card__story { display:inline-flex; align-items:center; gap:8px; }
.aih-card-arrow { width:14px; height:14px; object-fit:contain; opacity:0; transform:translateX(-6px); transition:opacity .35s ease, transform .35s ease; }
.aih-resource-card .aih-card-arrow { filter:none; }
.aih-outcome-card .aih-card-arrow { filter:brightness(0) invert(1); }
.aih-resource-card:hover .aih-card-arrow, .aih-resource-card:focus-within .aih-card-arrow, .aih-outcome-card:hover .aih-card-arrow, .aih-outcome-card:focus-within .aih-card-arrow { opacity:1; transform:translateX(0); }
.aih-resource-card__img { transition:transform .5s ease; }
.aih-resource-card:hover .aih-resource-card__img { transform:scale(1.035); }

.aih-outcome-card__link { display:inline-flex; align-items:center; gap:8px; transition:color .25s ease; }
.aih-outcome-card__link .aih-card-arrow { filter:brightness(0) invert(1); opacity:0; transform:translateX(-6px); transition:opacity .35s ease, transform .35s ease; }
.aih-outcome-card:hover .aih-outcome-card__link .aih-card-arrow, .aih-outcome-card:focus-within .aih-outcome-card__link .aih-card-arrow { opacity:1; transform:translateX(0); }

.aih-outcome-card__overlay .aih-outcome-card__story { display:inline-flex; align-items:center; gap:8px; }
.aih-outcome-card__overlay .aih-outcome-card__story .aih-card-arrow { opacity:0; transform:translateX(-8px); transition:opacity .4s ease, transform .4s ease; filter:brightness(0) invert(1); }
.aih-outcome-card:hover .aih-outcome-card__overlay .aih-outcome-card__story .aih-card-arrow, .aih-outcome-card:focus-within .aih-outcome-card__overlay .aih-outcome-card__story .aih-card-arrow { opacity:1; transform:translateX(0); }

.aih-outcome-card__overlay .aih-outcome-card__story, .aih-outcome-card__overlay .aih-outcome-card__story:hover, .aih-outcome-card__overlay .aih-outcome-card__story:focus { color:#fff; text-decoration:none; }

.aih-outcome-card__link { display:inline-flex; align-items:center; gap:8px; color:#14152e; text-decoration:none; }
.aih-outcome-card__link:hover { text-decoration:none; }
.aih-outcome-card__link .aih-card-arrow { opacity:0; transform:translateX(-8px); transition:opacity .4s ease, transform .4s ease; filter:none; }
.aih-outcome-card:hover .aih-outcome-card__link .aih-card-arrow, .aih-outcome-card:focus-within .aih-outcome-card__link .aih-card-arrow { opacity:1; transform:translateX(0); }

/* Match the Caseload Manager success-story chevron */
.aih-outcome-card__overlay .aih-outcome-card__story .aih-card-arrow { opacity:1; transform:translateX(0); width:14px; height:14px; filter:brightness(0) invert(1); transition:transform .3s ease; }
.aih-outcome-card:hover .aih-outcome-card__overlay .aih-outcome-card__story .aih-card-arrow, .aih-outcome-card:focus-within .aih-outcome-card__overlay .aih-outcome-card__story .aih-card-arrow { transform:translateX(4px); }

/* "view results" keeps a rotate arrow in the card's own colour: the icon is
   supplied pre-coloured per card, so it stays visible and must not be inverted
   or faded in the way the generic .aih-card-arrow reveal is. */
.aih-outcome-card__link .aih-card-arrow { display:inline-block; flex:0 0 auto; width:16px; height:16px; opacity:1; transform:none; filter:none; }

.aih-solution-card__img { transition: all .5s ease; }
.aih-solution-card:hover .aih-solution-card__img { transform:scale(1.04); }

/* September 2026 design review: preserve the current module and correct scoped details. */
.aih-hero-stat__number, .aih-step__num, .aih-outcome-card__stat { font-family: "Axiforma", sans-serif; font-weight: 700; }
.aih-hero-stat { padding: 24px; gap: 16px; }
.aih-hero-stat__number { font-size: 48px; line-height: 1.1; }
.aih-hero-stat__label { font-family: "Axiforma-Book", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; }
.aih-hero__subtitle { font-family: "Axiforma-Book", sans-serif; font-size: 18px; line-height: 1.5; }
.aih-outcome-card__overlay { opacity: 1; transform: translateY(-101%); transition: transform .35s ease, visibility .35s; }
.aih-outcome-card:hover .aih-outcome-card__overlay, .aih-outcome-card:focus-within .aih-outcome-card__overlay { transform: translateY(0); visibility: visible; }
.aih-solution-card__img { object-fit: contain; box-sizing: border-box; }
.aih-step { min-height: 120px; }
.aih-step__num { position: relative; }
.aih-step__num::after { content: ""; position: absolute; top: calc(100% + 10px); left: 0; width: 53px; height: 41px; background: url('https://4244938.fs1.hubspotusercontent-eu1.net/hubfs/4244938/Vector%20(2).svg') center / contain no-repeat; }
.aih-step:nth-of-type(2) .aih-step__num::after { background-image: url('https://4244938.fs1.hubspotusercontent-eu1.net/hubfs/4244938/Vector%20(3).svg'); }
.aih-step:nth-of-type(3) .aih-step__num::after { background-image: url('https://4244938.fs1.hubspotusercontent-eu1.net/hubfs/4244938/Vector%20(4).svg'); }
.aih-step__arrow { display: none; }
.aih-step--last { min-height: 0; }
@media (max-width: 980px) {
 .aih-process__intro h2 { font-size: 21px; line-height: 1.1; }
 .aih-hero__ctas { flex-direction: column; align-items: stretch; }
 .aih-hero__ctas .aih-btn { width: 100%; box-sizing: border-box; }
 .aih-contact__text { text-align: center; }
 .aih-contact__text h2 { font-size: 28px; line-height: 1.1; }
 .aih-contact__text p { font-family: "Axiforma-Book", sans-serif; font-size: 12px; line-height: 1.5; }
 .aih-contact__text .aih-btn { display: block; width: 100%; box-sizing: border-box; padding: 12px 24px; font-size: 14px; }
 .aih-step { min-height: 130px; }
 .aih-step--last { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .aih-outcome-card__overlay { transition: none; } }

/* Figma mobile hero body: 14px / 150%. */
@media (max-width: 980px) { .aih-hero__subtitle { font-size:14px; line-height:1.5; } }

/* Mobile awards background aligned to the supplied reference. */
@media (max-width: 980px) { .aih-awards { background-position: center center; background-size: cover; } }

@media (max-width: 980px) { .aih-awards { width:100%; box-sizing:border-box; overflow:hidden; } }

@media (max-width: 980px) { .aih-awards { width:100vw; max-width:100vw; } .aih-awards__inner { min-width:0; } .aih-awards__cards { min-width:0; } }

/* Mobile story card refinements from supplied reference. */
@media (max-width: 980px) { .aih-award-card__img { height:140px; aspect-ratio:auto; } .aih-awards__text .aih-btn { color:#16182b; } }

/* Mobile Adra outcome card only: dark story link on the yellow card. */
@media (max-width: 980px) { .aih-outcome-card:nth-child(3) .aih-outcome-card__story { color:#16182b !important; } }

/* Mobile Adra outcome card arrow: black arrow only on the third card. */
@media (max-width: 980px) { .aih-outcome-card:nth-child(3) .aih-outcome-card__story .aih-card-arrow { filter: brightness(0); } }

/* Mobile hero background height. */
@media (max-width: 980px) { .aih-hero__bg { height:170px; } }

/* Mobile hero stats match the Figma card dimensions. */
@media (max-width: 980px) { .aih-hero-stat { width:255px; height:76px; min-height:76px; padding:16px 24px; box-sizing:border-box; margin-left:auto; margin-right:auto; display:flex; align-items:center; gap:12px; } .aih-hero-stat__number { flex:0 0 auto; } .aih-hero-stat__label { flex:1 1 auto; } }

/* Figma mobile frame: stat cards start at 46px on the 375px canvas. */
@media (max-width: 980px) { .aih-hero-stat { margin-left:46px; margin-right:0; } }

/* Home hero statistics: Figma mobile card proportions and readable labels. */
@media (max-width: 767px) {
  .aih-hero__stats { width: calc(100% + 16px); margin-left: -8px; gap: 16px; }
  .aih-hero-stat { width: 100%; height: auto; min-height: 96px; margin: 0; padding: 18px 30px; gap: 16px; }
  .aih-hero-stat:nth-child(n + 2) { min-height: 112px; }
  .aih-hero-stat__label { min-width: 0; font-size: 14px; line-height: 1.5; }
}

@media (max-width: 767px) {
  .aih-hero-stat { padding-right: 24px; }
  .aih-hero-stat__number { font-size: 40px; }
}

/* Keep stat numbers beside their labels on tablets; prior tablet CSS stacked them. */
@media (min-width: 768px) and (max-width: 980px) {
  .aih-hero__stats { gap: 16px; }
  .aih-hero-stat { width: min(100%, 480px); height: auto; min-height: 96px; margin: 0 auto; padding: 18px 30px; flex-direction: row; gap: 16px; }
  .aih-hero-stat__label { min-width: 0; font-size: 14px; line-height: 1.5; }
}
@media (max-width: 767px) { .aih-hero-stat:nth-child(3) .aih-hero-stat__label { max-width: 150px; } }

/* Adra success story link stays dark on the yellow outcome card at every viewport. */
.aih-outcome-card:nth-child(3) .aih-outcome-card__story { color: #16182b !important; }
.aih-outcome-card:nth-child(3) .aih-outcome-card__story .aih-card-arrow { filter: brightness(0) !important; }