/* =============================================
   HOMEPAGE STYLES  (load with base.css)
   ============================================= */

/* (type-scale variables live in base.css :root, shared across all pages) */

/* =============================================
   HERO BANNER (teal top section)
   ============================================= */
.hero-banner {
  position: relative;
  width: 100%;
  /* Figma: 1920 × 734 layer (aspect-ratio 2.62) */
  aspect-ratio: 1920 / 734;
  min-height: 340px;   /* floor so the banner never collapses / clips on small screens */
  /* teal shows while video loads */
  background: #4ab3b8;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* top  |  sides (--pad)  |  bottom (Figma: 132.57px @1920 = 6.9vw, scales with the banner) */
  padding: clamp(32px, 4vw, 60px) var(--pad) max(40px, 6.9vw);
  overflow: hidden;
}
.hero-banner__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.hero-banner__overlay {
  /* Figma: flat 20% black overlay over the video/photo (the ".baby" layer) */
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  pointer-events: none;
}
.hero-banner__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
.hero-banner__logo img {
  height: 68px;
  width: auto;
}
.hero-banner__menu {
  background: none;
  border: none;
  cursor: pointer;
  width: 39px;
  height: 39px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 4px;
}
.hero-banner__menu span {
  display: block;
  width: 100%;
  height: 3px;
  background: white;
  border-radius: 2px;
}
.hero-banner__subtitle {
  /* Figma proportional scale: 76.19px @1920, 60px @1512 (= 3.9683vw), 42px floor (mobile) */
  font-size: clamp(42px, 3.9683vw, 76.19px);
  line-height: 1.24;
  font-weight: 400;
  color: white;
  position: relative;
  z-index: 2;
}


/* =============================================
   HERO SECTION
   ============================================= */
.hero {
  background: var(--white);
  padding-bottom: 60px;
}
.hero__inner {
  display: flex;
  align-items: flex-start;   /* top-aligned; text may run taller than the image, that's fine */
  gap: 48px;
  padding: clamp(32px, 4vw, 60px) var(--pad) 0;
  min-height: 0;
  padding-bottom: 100px;
}
.hero__left {
  flex: 0 0 clamp(260px, 44%, 603px);
  min-width: 0;
  aspect-ratio: 1 / 1;   /* clean square — illustration sits centered inside */
  background: #FFE8CB;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5%;   /* peach shows around the smaller illustration (Figma) */
}
.hero__left img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;   /* transparent PNG scaled down, not cropped */
}
.hero__right {
  flex: 1;
  padding-top: 10px;
}
.hero__right h1 {
  font-size: var(--fs-header);   /* 53.33 / 42 / 32 */
  line-height: 1.2;
  font-weight: 400;
  margin-bottom: 32px;
  color: var(--black);
}
.hero__right p {
  font-size: var(--fs-normal);   /* 25.40 / 20 / 18 */
  line-height: 1.5;
  color: #333;
}
.hero__subtitle {
  font-size: 42px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--black);
  padding: 0 var(--pad);
  margin-top: 40px;
}
.hero__divider {
  border: none;
  border-top: 1px solid #ddd;
  margin: 20px var(--pad) 0;
}

/* =============================================
   ART CONCERNS SECTION
   ============================================= */
.art-concerns {
  position: relative;
  /* vertical spacing via margin so tiles start flush at top of content area */
  margin: clamp(40px, 6vw, 80px) 0;
  padding: 0 var(--pad);
}
.art-concerns__text {
  position: absolute;
  top: -50px;
  left: var(--pad);
  /* occupy ~4 of the 9 tile columns so text sits over the empty area of row 1 */
  width: calc((100% - 2 * var(--pad)) * 4 / 9);
  z-index: 2;
  background: white;
  padding-bottom: 12px;
  padding-right: 16px;
}
.art-concerns__text h2 {
  font-size: var(--fs-header);   /* 53.33 / 42 / 32 */
  line-height: 1.1;
  font-weight: 400;
  margin-bottom: 30px;
}
.art-concerns__text .label {
  font-size: var(--fs-normal);   /* 25.40 / 20 / 18 */
  line-height: 1.2;
  font-weight: 400;
  color: var(--black);
}
.art-concerns__tiles {
  display: flex;
  flex-direction: column;
}
.tiles-row {
  display: flex;
  gap: 0;
}
.tiles-row--right {
  justify-content: flex-end;
}
.tiles-row--left {
  justify-content: flex-start;
}
.tile {
  /* each tile = 1/9 of the tile container (full content width) */
  width: calc(100% / 9);
  aspect-ratio: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex-grow: 0;
  position: relative;
  cursor: pointer;
  transition: filter 0.2s ease;
}
/* Tiles start hidden and reveal one-by-one when the grid scrolls into view
   (per-tile transition-delay is set in JS by DOM order). */
.art-concerns__tiles .tile {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.45s ease, transform 0.45s ease, filter 0.2s ease;
}
.art-concerns__tiles.is-in .tile {
  opacity: 1;
  transform: translateY(0);
}
.tile img {
  /* 46% = Figma's 67px icon in 145px tile; source PNGs are 80px so we always downscale = crisp */
  width: 46%;
  height: 46%;
  object-fit: contain;
  transition: opacity 0.3s ease;
}
/* Hover: icon fades out, label fades in (dark scrim keeps text readable on
   both light and dark tiles) */
.tile__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 20px;
  line-height: 1.15;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tile:hover img,
.tile:focus-within img,
.tile.is-active img { opacity: 0; }
.tile:hover .tile__text,
.tile:focus-within .tile__text,
.tile.is-active .tile__text { opacity: 1; }

/* =============================================
   WHAT WE OFFER — STICKY HEADER
   ============================================= */
.what-we-offer-header {
  background: var(--white);
  padding: 40px var(--pad);
}
.what-we-offer-header h2 {
  font-size: var(--fs-header);   /* 53.33 / 42 / 32 */
  line-height: 1.1;
  font-weight: 400;
  margin-bottom: 31px;
}
.what-we-offer-header p {
  font-size: var(--fs-normal);   /* 25.40 / 20 / 18 */
  line-height: 1.2;
  font-weight: 400;
}

/* =============================================
   FEATURE CARDS
   ============================================= */
.feature-cards-track {
  position: relative;
}
.feature-cards {
  position: relative;
  padding: 80px 44px 0;
  /* IMPORTANT: no overflow:hidden here — it would break the sticky cards */
}
.feature-card {
  position: sticky;
  min-height: 517px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 10px;
}
/* Cards stick below the fixed navbar (--nav-offset) so the first card's top
   stays fully visible. Each card sticks one --peek lower than the one before,
   keeping a sliver of the previous card visible. The last card covers them all. */
.feature-cards { --nav-offset: 125px; --peek: 103px; }   /* each card now covers ~80% of the one below (was 207 ≈ 60%) */
/* Each higher card sits a little wider than the one below — looks bigger as they stack (desktop) */
.feature-card:nth-child(1) { top: var(--nav-offset);                        z-index: 1; margin-inline: 0;     }
.feature-card:nth-child(2) { top: calc(var(--nav-offset) + var(--peek));    z-index: 2; margin-inline: -12px; }
.feature-card:nth-child(3) { top: calc(var(--nav-offset) + var(--peek) * 2); z-index: 3; margin-inline: -24px; }
.feature-card:nth-child(4) { top: var(--nav-offset);                        z-index: 4; margin-bottom: 0; margin-inline: -36px; }
.feature-card--blue   { background: #b3ddff; }
.feature-card--peach  { background: #ffd0bb; }
.feature-card--yellow { background: #ffeaa0; }
.feature-card--gray   { background: #e7e9ea; }

.feature-card__text {
  flex: 1;
  padding: clamp(32px, 4vw, 60px);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* text block sits almost-centered, not hard against the edges */
  align-items: center;
}
.feature-card__text p {
  font-size: var(--fs-card);   /* 40.63 / 32 / 24 */
  line-height: 1.19;
  font-weight: 400;
  color: var(--black);
  white-space: pre-wrap;
  max-width: 520px;
}
.feature-card__text p strong {
  font-weight: 700;
}
.feature-card__image {
  flex: 0 0 clamp(220px, 38%, 534px);
  min-width: 0;
  aspect-ratio: 534 / 508;
  position: relative;
  overflow: hidden;
}
.feature-card__image img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}
.feature-card--blue   .feature-card__image img { width: 97%; height: 100%; top: 0; left: 3%; }
.feature-card--peach  .feature-card__image img { width: 100%; height: 77%; top: 17%; left: 0; }
.feature-card--yellow .feature-card__image img { width: 124%; height: 73%; top: 19%; left: -13%; }
.feature-card--gray   .feature-card__image img { width: 101%; height: 72%; top: 14%; left: -0.4%; }

.feature-card__circle {
  position: absolute;
  left: -80px;
  bottom: 0;
  width: 388px;
  height: 388px;
  opacity: 0.6;
  pointer-events: none;
}

/* =============================================
   HIGHLIGHTS AT A GLANCE
   ============================================= */
.highlights {
  background: var(--white);
  padding: 80px 0;
  display: flex;
  align-items: flex-start;
  gap: 165px;
}
/* Highlights section: no fade-in — the heading and rows render immediately. */
.highlights .fade-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.highlights__label {
  flex: 0 0 clamp(200px, 32%, 460px);
  /* left = var(--pad) so the heading lines up with the "What we offer" heading */
  padding: clamp(32px, 5vw, 68px) clamp(20px, 3.5vw, 52px) 0 var(--pad);
  position: sticky;
  top: 80px;
  align-self: flex-start;
  padding-top: 25px;
}
.highlights__label h2 {
  font-size: var(--fs-header);   /* 53.33 / 42 / 32 */
  line-height: 1.1;
  font-weight: 400;
}
.highlights__list {
  flex: 1;
  border-left: 2px solid #eee;
}
.highlights__row {
  /* button/link reset */
  appearance: none;
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  color: inherit;
  width: 100%;
  /* layout */
  display: flex;
  align-items: center;
  min-height: clamp(72px, 7vw, 100px);
  cursor: pointer;
  transition: background 0.2s ease;
}
.highlights__row:hover { background: #d8e3f6; }
.highlights__row:focus-visible {
  outline: 2px solid #006cb5;
  outline-offset: -2px;
}
.highlights__icon {
  flex: 0 0 clamp(72px, 7vw, 100px);
  height: clamp(72px, 7vw, 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.highlights__icon img {
  width: 63px;
  height: 63px;
  object-fit: contain;
}
.highlights__row--double .highlights__icon-wrap {
  display: flex;
}
.highlights__row--double .highlights__icon { width: 100px; }

/* Icon tile background colours (Figma, in row order) */
.highlights__row[data-popup="demographics"]      .highlights__icon                { background: #006D89; }
.highlights__row[data-popup="calendar-schedule"] .highlights__icon:nth-child(1)   { background: #A2DFFF; }
.highlights__row[data-popup="calendar-schedule"] .highlights__icon:nth-child(2)   { background: #DBA7FF; }
.highlights__row[data-popup="male"]              .highlights__icon                { background: #00659A; }
.highlights__row[data-popup="female"]            .highlights__icon                { background: #00ADD7; }
.highlights__row[data-popup="treatment-plan"]    .highlights__icon                { background: #01695E; }
.highlights__row[data-popup="art-cycle"]         .highlights__icon                { background: #003D1E; }
.highlights__row[data-popup="cryo"]              .highlights__icon                { background: #00D6D8; }
.highlights__row[data-popup="genetics"]          .highlights__icon                { background: #EDDF00; }
.highlights__row[data-popup="ob"]                .highlights__icon                { background: #FA3B81; }
.highlights__row[data-popup="accounts"]          .highlights__icon                { background: #FF98A6; }
.highlights__row[data-popup="stats"]             .highlights__icon                { background: #84137A; }
.highlights__row[data-popup="timeline"]          .highlights__icon                { background: #7233CF; }

/* Unified typography for every list item */
.highlights__name {
  /* card scale but with a 21.26px mobile floor (Figma) */
  font-size: clamp(21.26px, 2.1164vw, 40.6349px);   /* 40.63 / 32 / 21.26 */
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0;
  padding-left: clamp(16px, 2.5vw, 33px);
  color: var(--black);
  transition: transform 0.25s ease;
}
/* Hover: text slides slightly to the right */
.highlights__row:hover .highlights__name,
.highlights__row:focus-visible .highlights__name {
  transform: translateX(10px);
}

/* =============================================
   HIGHLIGHTS POPUP / MODAL
   Reusable accessible modal; popup layouts match
   Figma nodes 1125:2201–2389 exactly.
   ============================================= */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.popup-overlay[hidden] { display: none; }
.popup-overlay.is-open { opacity: 1; }
.popup {
  position: relative;
  width: 577px;
  max-width: calc(100vw - 32px);
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
  padding: 60px;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.25s ease;
}
.popup-overlay.is-open .popup { transform: translateY(0) scale(1); }

/* ---- Exact Figma popup layout (nodes 1125:2201 …) ---- */
.hpop {
  display: flex;
  flex-direction: column;
  gap: 30px;
  font-family: "Segoe UI", var(--font, system-ui), sans-serif;
}
.hpop__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.hpop__titles { display: flex; flex-direction: column; gap: 19px; }
.hpop__lead { display: flex; align-items: flex-end; gap: 20px; }
.hpop__icon { display: block; flex-shrink: 0; object-fit: contain; }
.hpop__title {
  font-size: 37.5px;
  line-height: 50px;
  font-weight: 400;
  color: #000;
  white-space: nowrap;
}
.hpop__next {
  flex-shrink: 0;
  width: 39.537px;
  height: 39.537px;
  border-radius: 50%;
  background: #006cb5;
  border: 0.664px solid #006cb5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.hpop__next:hover { filter: brightness(1.1); }
.hpop__next:focus-visible { outline: 2px solid #006cb5; outline-offset: 2px; }
.hpop__next img { width: 12px; height: 12px; display: block; }
.hpop__list { list-style: none; margin: 0; padding: 0; }
.hpop__list li {
  font-size: 18px;
  line-height: 24px;
  color: #000;
  margin-bottom: 20px;
}
.hpop__list li:last-child { margin-bottom: 0; }
.hpop__sub { color: #989898; font-size: 16px; }
.hpop__sup { font-size: 11.61px; vertical-align: super; line-height: 0; }

@media (prefers-reduced-motion: reduce) {
  .popup-overlay, .popup { transition: none; }
}
@media (max-width: 600px) {
  .popup { padding: 36px 24px; }
  .hpop { gap: 24px; }
  .hpop__title { font-size: 28px; line-height: 36px; }
  .hpop__icon { width: auto !important; height: auto !important; max-width: 48px; max-height: 48px; }
  .hpop__titles { gap: 14px; }
}

/* =============================================
   OUR TEAMS & SERVICES
   ============================================= */
.teams {
  background: var(--gray-bg);
  padding: clamp(50px, 6.5vw, 93px) var(--pad) clamp(60px, 8vw, 120px);
}
.section-header {
  margin-bottom: 70px;
}
.section-header h2 {
  font-size: var(--fs-header);   /* 53.33 / 42 / 32 */
  line-height: 1.1;
  font-weight: 400;
  margin-bottom: 31px;
}
.section-header p {
  font-size: var(--fs-normal);   /* 25.40 / 20 / 18 */
  line-height: 1.2;
  font-weight: 400;
}
.teams__cards {
  display: flex;
  gap: 21px;
}
.teams__card {
  flex: 1;
  overflow: hidden;
  position: relative;
  padding: clamp(16px, 2vw, 20px);
  /* Height tracks width (Figma: 820.32 × 653.97 @1920 → 653.97/1920 = 34.06vw).
     A floor, so taller content can still grow the card instead of clipping. */
  min-height: 34.06vw;
}
.teams__card--blue { background: #1a7eab; }
.teams__card--red  { background: #d84c0c; }

.teams__card-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 50px;
}
.teams__card-header-icon {
  width: 92px;
  height: 92px;
  overflow: hidden;
  flex-shrink: 0;
}
.teams__card-header-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.teams__card-title {
  font-size: var(--fs-card);   /* 40.63 / 32 / 24 */
  line-height: 1.31;
  color: var(--white);
  font-weight: 400;
}
.teams__services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
.teams__service {
  display: flex;
  align-items: center;
  gap: 15px;
}
.teams__service-icon {
  width: 70px;
  height: 70px;
  border: 1px solid var(--white);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 9px;
}
.teams__service-icon img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}
.teams__service-label {
  font-size: var(--fs-normal);   /* 25.40 / 20 / 18 */
  line-height: 1.5;
  color: var(--white);
  font-weight: 400;
}

/* =============================================
   AN ELABORATE INTEGRATION
   ============================================= */
.integration {
  position: relative;
  background: var(--white);
  padding: 50px 0 80px;
}
/* Light-blue rounded panel sits BEHIND the header, nav and the upper part of
   the cards; the cards overflow below it onto the white page. */
.integration__panel {
  position: absolute;
  top: 50px;
  left: 40px;
  right: 40px;
  height: 645px;
  background: var(--integ-bg);
  z-index: 0;
}
.integration__content {
  position: relative;
  z-index: 1;
  padding-top: 100px;
}
.integration__title {
  text-align: center;
  font-size: var(--fs-header);   /* 53.33 / 42 / 32 */
  line-height: 1.1;
  font-weight: 400;
  color: #000;
  margin-bottom: 39px;
          padding: 0px 20px;
}
.slider-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 39px;
}
.slider-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid #9fb0cc;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}
.slider-btn:hover { background: rgba(255, 255, 255, 0.55); border-color: #000; }
.slider-btn:focus-visible { outline: 2px solid #006cb5; outline-offset: 2px; }
.slider-btn img { width: 15px; height: 16px; }

.integration__track-wrap {
  overflow-x: hidden;
  margin: 0 40px 0 76px;
  height: 435px;
}
.integration__track {
  display: flex;
  gap: 30px;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.integ-card {
  width: 650px;
  height: 435px;
  flex-shrink: 0;
  background: transparent;
  position: relative;   /* anchor for the persistent arrow */
}
.integ-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
}
/* Faces crossfade (no 3D flip): front = screenshot, back = features + brands.
   Revealed on hover (and on tap for touch devices via .is-shown). */
.integ-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fbfbfb;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.integ-card__front { opacity: 1; }
.integ-card__back  { pointer-events: none; }
.integ-card:hover .integ-card__front,
.integ-card.is-shown .integ-card__front { opacity: 0; pointer-events: none; }
.integ-card:hover .integ-card__back,
.integ-card.is-shown .integ-card__back  { opacity: 1; pointer-events: auto; }
/* per-face arrows are replaced by one persistent arrow (.integ-card__go) */
.integ-card__face .integ-card__arrow { display: none; }
/* persistent twisted arrow — rotates from up to right on hover; click → Products */
.integ-card__go {
  position: absolute;
  top: 32px;
  right: 32px;
  z-index: 3;
  width: 26px;
  height: 26px;
  cursor: pointer;
  transition: transform 0.45s ease;
}
.integ-card__go img { width: 100%; height: 100%; display: block; }
.integ-card:hover .integ-card__go,
.integ-card.is-shown .integ-card__go { transform: rotate(45deg); }
.integ-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 32px 32px 0;
}
.integ-card__title {
  font-size: var(--fs-card);   /* 40.63 / 32 / 24 */
  line-height: 1.2;
  color: #000;
  font-weight: 400;
}
.integ-card__arrow { width: 26px; height: 26px; flex-shrink: 0; margin-top: 2px; cursor: pointer; transition: transform 0.2s ease; }
.integ-card__arrow:hover { transform: translate(2px, -2px); }
.integ-card__arrow svg { width: 100%; height: 100%; display: block; }
.integ-card__img {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  padding: 16px 40px 32px;
}
/* Back face: feature list + clickable brand logos */
.integ-card__feats { list-style: none; padding: 24px 36px 0; }
.integ-card__feats li { font-size: 21px; line-height: 1.6; color: #000; }
.integ-card__feats--cols { display: flex; gap: 44px; padding: 24px 36px 0; }
.integ-card__feats--cols .integ-card__col { list-style: none; flex: 0 0 auto; min-width: 150px; }
.integ-card__brands {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 25px;
  padding: 20px 40px 30px;
}
.integ-card__brands a { display: inline-flex; align-items: center; justify-content: center; }
.integ-card__brands img {
  max-height: 30px;
  max-width: 122px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}
.integ-card__brands a:hover img { transform: scale(1.07); }

/* =============================================
   ENDORSED BY EXPERIENCE
   ============================================= */
.endorsed {
  background: var(--gray-bg);
  padding: 100px 0 60px;
  overflow: hidden;
}
.endorsed__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--pad);
  margin-bottom: 40px;
}
.endorsed__header h2 {
  font-size: var(--fs-header);   /* 53.33 / 42 / 32 */
  line-height: 1.1;
  font-weight: 400;
  color: #000;
  text-align: center;
  margin-bottom: 39px;
}
.endorsed__track-wrap {
  overflow: hidden;
  padding: 0 var(--pad);
}
.endorsed__track {
  display: flex;
  gap: 30px;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Touch devices: the sliders scroll natively (set up in JS) — hide the scrollbar */
@media (hover: none) {
  .integration__track-wrap,
  .endorsed__track-wrap {
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* old Edge */
  }
  .integration__track-wrap::-webkit-scrollbar,
  .endorsed__track-wrap::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
}
.client-card {
  display: flex;
  width: clamp(300px, 52vw, 773px);
  flex-shrink: 0;
}
.client-card__logo-wrap {
  flex: 0 0 40%;
  min-height: 265px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.client-card__logo {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
}
.client-card__info {
  flex: 1;
  min-width: 0;   /* let the info shrink within the card instead of overflowing into the gap */
  background: var(--integ-bg);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
}
.client-card__name {
  font-size: var(--fs-card);     /* 40.63 / 32 / 24 */
  line-height: 1.15;
  font-weight: 400;
  color: #000;
  margin-bottom: 10px;
}
.client-card__country {
  font-size: var(--fs-normal);   /* 25.40 / 20 / 18 */
  line-height: 1.2;
  font-weight: 700;
  color: #006cb5;
  margin-bottom: 16px;
}
.client-card__desc {
  font-size: clamp(16px, 1.0583vw, 20.32px);   /* 20.32 / 16 (quote) */
  line-height: 1.5;
  color: #000;
  flex: 1;
}
.client-card__stats {
  display: flex;
  gap: 50px;
  margin-top: auto;
  padding-top: 28px;
}
.client-card__stat-label {
  font-size: clamp(14px, 0.9271vw, 17.8px);   /* 17.8 / 14 */
  line-height: 1.33;
  font-weight: 700;
  color: #006cb5;
  margin-bottom: 6px;
}
.client-card__stat-value {
  font-size: var(--fs-header);   /* 53.33 / 42 / 32 */
  line-height: 1.2;
  font-weight: 400;
  color: #006cb5;
}

/* =============================================
   CTA BUTTON
   ============================================= */
/* Floating "Request a Demo" CTA — overlaps the bottom-right of the cards */
.cta-btn {
  position: fixed;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vw, 40px);
  z-index: 400;            /* above content, below the menu overlay (500) */
  display: inline-block;
  background: var(--blue-cta);
  color: var(--white);
  border: 1px solid var(--blue-cta);
  border-radius: 999px;
  padding: 13px 30px;
  font-size: 15px;
  line-height: 1.2;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  white-space: nowrap;
}
.cta-btn:hover {
  background: #44a3b4;
  border-color: #44a3b4;
  transform: translateY(-2px);
}


/* =============================================
   RESPONSIVE — TABLET (≤1200px / ≤1100px)
   ============================================= */
@media (max-width: 1200px) {
  /* Below 1200px the intro stacks into one column — image on top, text below.
     The square image stays capped + centered so the illustration fills cleanly (no crop). */
  .hero__inner { flex-direction: column; align-items: stretch; gap: 14px; padding-bottom: 50px;}
  .hero__left { flex: 0 0 auto; width: 100%; max-width: 600px; margin-inline: auto; }
  .hero-banner {gap: 300px;    min-height: 575px;}
  .hero {
    background: var(--white);
    padding-bottom: 30px;
}

.art-concerns__text h2 {

    margin-bottom: 22px;
}
}

@media (max-width: 1100px) {
  .feature-card__text { padding: 40px 40px 40px 50px; }
  .teams__services { gap: 30px; }

  /* Highlights: stack (label on top) from tablet down, with fluid icon sizing */
  .highlights {
    flex-direction: column;
    align-items: stretch;
    padding: clamp(40px, 6vw, 60px) var(--pad);
    gap: 0px !important;
  }
  .highlights__label { flex: 0 0 auto; width: 100%; padding: 0 0 20px; position: static; }
  .highlights__list { border-left: none; width: 100%; }
  .highlights__row { min-height: clamp(50px, 7.5vw, 78px); }
  .highlights__icon {
    flex: 0 0 clamp(55px, 6.5vw, 64px);
    height: clamp(55px, 6.5vw, 64px);
  }
  .highlights__icon img { width: 72%; height: 72%; }
  .highlights__row--double .highlights__icon { width: clamp(50px, 6.5vw, 64px); }
}

/* =============================================
   HOMEPAGE RESPONSIVE — MOBILE
   ============================================= */
@media (max-width: 870px) {
  /* ---- Mobile font sizes (Figma iPhone design, node 3003:1755) ---- */
  .hero-banner__subtitle { font-size: 42px; line-height: 52px; }
  .hero-banner__logo img {         width: 191px;
        height: 44px; }
.hero-banner{padding-top:15px !important}
  .hero__right h1 { font-size: 32px; line-height: 42px;margin-bottom: 22px; }
  .hero__right p { font-size: 18px; line-height: 24px; margin-bottom: 6px; }
  .hero__subtitle { font-size: 32px; }

  .what-we-offer-header h2 { font-size: 32px; line-height: 42px;    margin-bottom: 25px; }
  .what-we-offer-header p { font-size: 18px; line-height: 24px; }
.what-we-offer-header {
    
    padding-bottom: 0px;
}
  .art-concerns__text { position: static; width: 100%; margin-bottom: 24px; }
  .art-concerns__text h2 { font-size: 32px; line-height: 42px; }
  .art-concerns__text .label { font-size: 18px; }
  .tile__text { font-size: 13px; }
  .art-concerns__tiles { display: grid; grid-template-columns: repeat(5, 1fr); flex-direction: unset; }
  .tiles-row { display: contents; }
  .tile { width: auto; flex: none; aspect-ratio: 1; }

  .feature-cards { padding: 60px 16px 0; --nav-offset: 95px; --peek: 103px; }   /* same overlap as desktop */
  .feature-card { margin-bottom: 20px; flex-direction: column; border-radius: 10px;}
  .feature-card:nth-child(n) { margin-inline: 0; }   /* stacked: no progressive widening */
  .feature-card__text { padding: 40px 24px; }
  .feature-card__text p { font-size: 24px; line-height: 32px; }
  .feature-card__image { flex: 0 0 auto; width: 100%; aspect-ratio: 4 / 3; }
  .feature-card__circle { display: none; }

  .highlights__label h2 { font-size: 32px; line-height: 42px; }
  .highlights__name { font-size: 21.26px; }
.section-header {
    margin-bottom: 35px;
}
.teams__card-header-icon {
    width: 54px;
    height: 54px;
  
}

.integ-card__go {
    position: absolute;
    top: 32px;
    right: 32px;
    z-index: 3;
    width: 16px;
    height: 16px;
    cursor: pointer;
    transition: transform 0.45s ease;
}

  .teams__cards { flex-direction: column; }
  .teams__card { min-height: auto; }   /* stacked: content height, not the wide-layout proportion */
  .section-header h2 { font-size: 32px; line-height: 42px;margin-bottom: 20px; }
  .section-header p { font-size: 18px; line-height: 24px; }
  .teams__card-title { font-size: 24px; }
  /* Compact 2-column service grid on mobile — keeps each card's height/width in check,
     labels wrap (incl. the longer last items) instead of forcing a single tall column */
  .teams__services { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
  .teams__service { align-items: flex-start; gap: 9px; }
  .teams__service-icon { width: 40px; height: 40px; padding: 6px; }
  .teams__service-icon img { width: 100%; height: 100%; }
  .teams__service-label { font-size: 14px; line-height: 1.25; flex: 1; min-width: 0; overflow-wrap: break-word; }

  .integration { padding: 30px 0 50px; }
  .integration__panel { top: 30px; left: 16px; right: 16px; height: 360px; }
  .integration__content { padding-top: 50px; }
  .integration__title { font-size: 32px; line-height: 40px; margin-bottom: 32px; }
  .slider-nav { margin-bottom: 40px; }
  .integration__track-wrap { margin: 0 16px; height: auto; }
  /* Tablet (469–870px): one full-width card per view — no 440px cap, so there's
     no awkward right-hand gap. Phones (≤468px) restore the bleed below. */
  .integ-card { width: 100%; height: auto; aspect-ratio: 650 / 435; }
  .integ-card__title { font-size: 24px; }
  .integ-card__img { padding: 12px 24px 24px; }
  .integ-card__header { padding: 22px 22px 0; }
  .integ-card__feats, .integ-card__feats--cols { padding: 16px 24px 0; }
  .integ-card__feats--cols { gap: 24px; }
  .integ-card__feats--cols .integ-card__col { min-width: 0; }
  .integ-card__feats li { font-size: 16px; line-height: 1.5; }
  .integ-card__brands { gap: 18px; padding: 14px 22px 22px; }
  .integ-card__brands img { max-height: 22px; max-width: 72px; }

  .endorsed { padding: 50px 0; }
  .endorsed__track-wrap { padding-right: 0; }   /* cards bleed off the right edge on mobile */
  .endorsed__header h2 { font-size: 32px; line-height: 40px; margin-bottom: 24px; }
  /* keep the logo + info side-by-side on mobile; every card the same width, next one peeks (bleed) */
  .client-card { flex-direction: row; flex: 0 0 clamp(300px, 135vw, 560px); width: auto; }
  .client-card__logo-wrap { flex: 0 0 58%; width: auto; min-height: auto; }
  .client-card__info { padding: 20px 22px; }
  .client-card__name { font-size: 24px; line-height: 28px; }
  /* narrow info column: let the stats wrap + shrink instead of clipping at the edge */
  .client-card__stats { gap: 16px; flex-wrap: wrap; }
  .client-card__stats > div { min-width: 0; }
  .client-card__stat-value { font-size: 28px; line-height: 34px; }
  .cta-btn { padding: 11px 24px; font-size: 13px; }
}

/* =============================================
   HOMEPAGE RESPONSIVE — PHONE (integration slider)
   Matches Figma node 3006:2976: the blue panel is full-bleed, the card is
   inset on the left, bleeds off the right edge (next card peeks), and there's
   breathing room below the card.
   ============================================= */
@media (max-width: 468px) {
  /* Full-bleed blue: drop the inset absolute panel and paint the content area
     instead, so the panel reaches both screen edges and we can add a bottom gap. */
  .integration__panel { display: none; }
  .integration__content {
    background: var(--integ-bg);
    padding: 40px 0 40px;        /* top = space above title; bottom = blue gap under the card */
  }
  .integration__title { margin-bottom: 28px; }
  .slider-nav { margin-bottom: 36px; }
  /* Left inset only — the track runs to the right screen edge so cards bleed off it. */
  .integration__track-wrap { margin: 0 0 0 16px; }
  .integ-card { width: calc(100vw - 16px); }
}

@media (max-width: 480px) {
  .art-concerns__tiles { grid-template-columns: repeat(4, 1fr); }
}