/* ==========================================================================
   Gen Art Health — stylesheet
   Design tokens, layout, components, motion, responsive rules and RTL.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Brand palette, colour-sampled directly from the actual Gen Art Health
     mark (the DNA figure's blue strand and green wordmark) rather than
     approximated by eye. paper is the page's one true neutral (a cool
     porcelain, not cream); surface/blue-light are reserved for small,
     deliberate panels; teal is the primary accent (from the mark's green),
     blue the secondary (from the mark's navy), mint a brighter lift of the
     same green tuned for use on dark surfaces (spotlight stage, dots). */
  --paper:#F3F7F6;
  --surface:#EAF1EF;
  --ink:#0D2436;
  --blue:#0167B6;
  --blue-light:#E6EEF5;
  --mint:#37AA77;
  --teal:#2D8B61;

  /* Whisper-level accent washes for section atmosphere, a barely-there tint,
     not a colour block. Used for the fixed body atmosphere and the softened
     section transitions below. */
  --wash-blue: rgba(1,103,182,.038);
  --wash-mint: rgba(55,170,119,.034);

  --ink-soft: rgba(13,36,54,.68);
  --ink-faint: rgba(13,36,54,.48);
  --hairline: rgba(13,36,54,.09);
  --hairline-light: rgba(243,247,246,.22);

  --font-display:'Montserrat', 'Segoe UI', sans-serif;
  --font-body:'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ar:'IBM Plex Sans Arabic', 'Montserrat', sans-serif;

  --fs-h1: clamp(2.5rem, 5.4vw, 4.4rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 2.9rem);
  --fs-h3: clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-eyebrow: .78rem;

  --sp-1:.5rem; --sp-2:.75rem; --sp-3:1.25rem; --sp-4:1.75rem;
  --sp-5:2.5rem; --sp-6:3.5rem; --sp-7:5rem; --sp-8:7rem; --sp-9:9rem;

  /* Tightened ~22% from the original clamp(4.5rem, 9vw, 8.5rem) — same section
     rhythm, less dead air between sections at every viewport. */
  --section-pad: clamp(3.75rem, 7.5vw, 6.5rem);
  --container: 1360px;
  --container-narrow: 800px;

  /* A tighter, more engineered radius scale than a typical soft rounded
     template, reads closer to instrument/lab-panel precision. */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 18px;
  --radius-full: 999px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .35s;
  --dur-med: .6s;

  --shadow-soft: 0 20px 45px -24px rgba(13,36,54,.32), 0 10px 24px -14px rgba(45,139,97,.28);
  --shadow-card: 0 1px 0 rgba(13,36,54,.05), 0 16px 40px -28px rgba(13,36,54,.35);

  --header-h: 72px;

  /* Shared fine-grain noise texture, reused across the body overlay and the
     hero/about reference art layers so the SVG data URI isn't duplicated. */
  --noise-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width: 640px){
  :root{ --header-h: 60px; }
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ scroll-behavior:smooth; }
html,body{ height:100%; }
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html[lang="ar"] body{ font-family:var(--font-ar); }

img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; padding:0; }
input,textarea,select{ font:inherit; color:inherit; }
svg{ display:block; }

h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.12; letter-spacing:-.01em; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3{ font-family:var(--font-ar); font-weight:700; letter-spacing:0; }

/* Focus visibility */
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:4px; }

/* Skip link */
.skip-link{
  position:fixed; top:-60px; left:1rem; z-index:1000;
  background:var(--ink); color:var(--paper); padding:.8rem 1.4rem;
  border-radius:var(--radius-s); transition:top .25s var(--ease);
}
.skip-link:focus{ top:1rem; }

/* Whole-page atmosphere: three very soft, fixed colour blooms sitting behind
   every section. The goal is a page that never reads as a single flat colour
   without ever showing an "effect" — each layer is under 5% opacity. Static
   (no animation) is the deliberate choice here: it reads calmer than a
   drifting version and costs nothing on scroll. Opaque section backgrounds
   (e.g. .contact) simply cover it, which is correct — this is ambience for
   the light sections only. (A dot-field layer used to sit here too, but at
   normal viewing distance it read as dust/specks across the whole page
   rather than texture, so it's gone — the colour blooms alone now carry it.) */
body::after{
  /* z-index:-2 — the true base layer, sitting behind the hero's own blob
     decorations (z-index:-1) too, so nothing decorative ever doubles up. */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-2;
  background-image:
    radial-gradient(50% 42% at 10% 6%, var(--wash-blue), transparent 70%),
    radial-gradient(46% 40% at 92% 14%, var(--wash-mint), transparent 70%),
    radial-gradient(44% 38% at 46% 98%, var(--wash-blue), transparent 72%);
}

/* Grain overlay — sits above all content as a fine full-page texture. */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:2;
  opacity:.03; mix-blend-mode:overlay;
  background-image:var(--noise-svg);
}

/* ---------- Layout helpers ---------- */
.section{ padding-block:var(--section-pad); position:relative; }
.section__inner{ max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem, 4vw, 3rem); }
.section__inner--narrow{ max-width:var(--container-narrow); }

.eyebrow{
  display:inline-block; font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal); margin-bottom:var(--sp-3);
}
.section__title{ font-size:var(--fs-h2); max-width:26ch; margin-bottom:var(--sp-4); }
.section__title--center{ max-width:34ch; margin-inline:auto; text-align:center; }
.section__desc{ max-width:52ch; color:var(--ink-soft); font-size:var(--fs-lead); margin-bottom:var(--sp-5); }
.section__note{
  margin-top:var(--sp-5); max-width:60ch; margin-inline:auto; text-align:center;
  font-size:var(--fs-small); color:var(--ink-faint); line-height:1.7;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.9rem; border-radius:var(--radius-full);
  font-size:var(--fs-small); font-weight:600; letter-spacing:.01em;
  transition:transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn--primary{ background:var(--ink); color:var(--paper); box-shadow:var(--shadow-soft); }
.btn--primary:hover{ background:#0A1D2C; transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--hairline); }
.btn--ghost:hover{ background:var(--surface); transform:translateY(-2px); }
.btn--small{ padding:.7rem 1.5rem; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.6rem; font-size:var(--fs-small); font-weight:600;
  border-bottom:1px solid transparent; padding-block:.2rem;
}
.link-arrow svg{ transition:transform var(--dur-fast) var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }
html[dir="rtl"] .link-arrow:hover svg{ transform:translateX(-4px) scaleX(-1); }
html[dir="rtl"] .link-arrow svg{ transform:scaleX(-1); }

/* ==========================================================================
   Media / reference art system
   .media          → universal skeleton (gradient wash) shown behind any photo
                      slot while no <img src> is set, or while a real photo
                      is loading. Safe to keep forever — a loaded photo fully
                      covers it.
   .media--reference → the richer, art-directed placeholder composition used
                      until real photography is supplied (hero + about have
                      their own variants below). Remove this ONE class — and
                      delete the <span class="media__ref-label"> if present —
                      once assets/images/<file>.webp exists and the <img>'s
                      data-src has been changed to src. See README.md.
   ========================================================================== */
.media{
  position:relative; overflow:hidden; border-radius:var(--radius-l);
  background:
    radial-gradient(120% 140% at 20% 15%, rgba(231,160,136,.9), transparent 60%),
    radial-gradient(130% 130% at 85% 90%, rgba(1,103,182,.75), transparent 55%),
    linear-gradient(150deg, var(--surface), var(--blue-light));
}
.media::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 60%, rgba(13,36,54,.08));
}
.media__img{
  width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity .7s var(--ease);
}
.media__img.is-loaded{ opacity:1; }

/* Reveal-up animation (scroll & load) */
.reveal-up{ opacity:0; transform:translateY(18px); }
[data-observe]{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-observe].is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:no-preference){
  .hero__title .reveal-up,
  .hero__desc.reveal-up,
  .hero__ctas.reveal-up,
  .hero__meta.reveal-up,
  .hero__content .eyebrow.reveal-up{
    animation:revealUp .9s var(--ease) forwards;
    animation-delay:calc(var(--d, 0) * .12s);
  }
}
@keyframes revealUp{ to{ opacity:1; transform:translateY(0); } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal-up,[data-observe]{ opacity:1; transform:none; animation:none; transition:none; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   Header
   ========================================================================== */
/* Genuinely graduated blur, built from two stacked layers so the blur AMOUNT
   itself changes top-to-bottom (not just the tint colour on top of it):
     ::before — a permanent, full-height BASE blur. This is the floor: it
       guarantees nothing behind the header is ever fully sharp, anywhere.
     ::after  — an ADDITIONAL, stronger blur, masked to fade out by ~85% of
       the header's height. Because it paints on top of the already-blurred
       ::before, its own backdrop-filter blurs THAT output further, so the
       two compound near the top (strong) and ease back to just the base
       layer near the bottom (soft) — a real blur gradient, with no point
       where raw sharp content can peek through.
   .header itself stays background:none so header__inner (logo/nav/actions),
   a normal-flow child promoted with z-index below, paints above both. */
.header{
  position:fixed; inset-inline:0; top:0; z-index:200;
  height:var(--header-h);
  display:flex; align-items:center;
  box-shadow:0 20px 40px -28px rgba(13,36,54,0);
  border-bottom:1px solid transparent;
  transition:box-shadow .4s var(--ease), border-color .4s var(--ease);
}
/* This layer is taller than .header itself (height extends var(--overhang)
   past the header's own bottom edge) and fades to nothing across that extra
   strip. backdrop-filter can only ever blur inside an element's own box, so
   without this overhang the base blur simply STOPS dead at the header's
   edge — a hard line. Extending the box and fading it out there instead
   turns that hard edge into a soft, gradual dissolve into the page below. */
.header{ --overhang:20px; }
.header::before{
  content:""; position:absolute; inset-inline:0; top:0; pointer-events:none;
  height:calc(var(--header-h) + var(--overhang));
  background:linear-gradient(180deg,
    rgba(243,247,246,.4) 0, rgba(243,247,246,.2) var(--header-h), transparent calc(var(--header-h) + var(--overhang)));
  backdrop-filter:blur(6px) saturate(130%);
  -webkit-backdrop-filter:blur(6px) saturate(130%);
  -webkit-mask-image:linear-gradient(180deg, #000 0, #000 var(--header-h), transparent calc(var(--header-h) + var(--overhang)));
  mask-image:linear-gradient(180deg, #000 0, #000 var(--header-h), transparent calc(var(--header-h) + var(--overhang)));
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease),
             -webkit-mask-image .4s var(--ease), mask-image .4s var(--ease);
}
.header::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(243,247,246,.7) 0%,
    rgba(243,247,246,.24) 65%,
    transparent 100%);
  backdrop-filter:blur(9px) saturate(155%);
  -webkit-backdrop-filter:blur(9px) saturate(155%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 40%, transparent 85%);
  mask-image:linear-gradient(180deg, #000 0%, #000 40%, transparent 85%);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease),
             -webkit-mask-image .4s var(--ease), mask-image .4s var(--ease);
}
.header.is-scrolled{ box-shadow:0 20px 40px -28px rgba(13,36,54,.28); border-color:var(--hairline); }
.header.is-scrolled::before{
  background:linear-gradient(180deg, rgba(243,247,246,.68) 0%, rgba(243,247,246,.4) 100%);
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
}
.header.is-scrolled::after{
  background:linear-gradient(180deg,
    rgba(243,247,246,.94) 0%,
    rgba(243,247,246,.55) 65%,
    transparent 100%);
  backdrop-filter:blur(15px) saturate(175%);
  -webkit-backdrop-filter:blur(15px) saturate(175%);
}

@media (max-width:640px){
  /* Lighter blur on mobile GPUs — both layers scaled down proportionally. */
  .header::before{ backdrop-filter:blur(5px) saturate(125%); -webkit-backdrop-filter:blur(5px) saturate(125%); }
  .header::after{ backdrop-filter:blur(6px) saturate(145%); -webkit-backdrop-filter:blur(6px) saturate(145%); }
  .header.is-scrolled::before{ backdrop-filter:blur(8px) saturate(140%); -webkit-backdrop-filter:blur(8px) saturate(140%); }
  .header.is-scrolled::after{ backdrop-filter:blur(10px) saturate(160%); -webkit-backdrop-filter:blur(10px) saturate(160%); }
}
.header__inner{
  /* position + z-index give this its own compositing layer, separate from
     ::before's backdrop-filter — without it, Chromium/Safari can bleed the
     blur onto this content too (logo/CTA rendering soft while nav text,
     oddly, stays sharp). */
  position:relative; z-index:1;
  width:100%; max-width:var(--container); margin-inline:auto;
  padding-inline:clamp(1.25rem, 4vw, 3rem);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}

.logo{ display:flex; align-items:center; gap:.6rem; }
.logo__mark{ color:var(--teal); display:flex; }
.logo__text{ font-family:var(--font-display); font-size:1.25rem; letter-spacing:.01em; color:var(--ink); }
html[lang="ar"] .logo__text{ font-family:var(--font-ar); font-weight:700; }
.logo__text--light{ color:var(--paper); font-size:1.4rem; }
.logo__img{ display:block; height:52px; width:auto; }

.nav__list{ display:flex; align-items:center; gap:clamp(1.1rem,2vw,2.1rem); }
.nav__link{
  position:relative; font-size:var(--fs-small); font-weight:600; color:var(--ink-soft);
  padding-block:.4rem; transition:color .25s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--teal); transform:scaleX(0); transform-origin:center;
  transition:transform .3s var(--ease);
}
.nav__link:hover, .nav__link.is-active{ color:var(--ink); }
.nav__link.is-active::after{ transform:scaleX(1); }

.header__actions{ display:flex; align-items:center; gap:1.1rem; }

.lang-switch{ display:flex; align-items:center; border:1px solid var(--hairline); border-radius:var(--radius-full); padding:3px; }
.lang-switch__btn{
  padding:.32rem .75rem; font-size:.72rem; font-weight:700; letter-spacing:.04em;
  border-radius:var(--radius-full); color:var(--ink-faint); transition:all .25s var(--ease);
}
.lang-switch__btn.is-active{ background:var(--ink); color:var(--paper); }

/* Hamburger */
.hamburger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; align-items:flex-end; }
.hamburger__bar{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:width .3s var(--ease), background-color .3s var(--ease); }
.hamburger__bar:nth-child(1){ width:26px; }
.hamburger__bar:nth-child(2){ width:26px; }
.hamburger__bar:nth-child(3){ width:16px; }
.hamburger:hover .hamburger__bar,
.hamburger:focus-visible .hamburger__bar{ width:26px; }

@media (max-width:1180px){
  /* The full nav + lang switch + CTA button don't fit comfortably between ~901–1180px
     (long labels like "How It Works" wrap to two lines) — switch to the hamburger earlier. */
  .nav{ display:none; }
  .header__cta{ display:none; }
  .hamburger{ display:flex; }
}
@media (max-width:640px){
  .header__inner{ padding-inline:1.1rem; gap:.6rem; }
  .header__actions{ gap:.6rem; }
  .logo__text{ font-size:1.05rem; }
  .logo__img{ height:40px; }
  .lang-switch__btn{ padding:.28rem .55rem; font-size:.68rem; }
  .hamburger{ width:34px; }
}
@media (max-width:340px){
  .logo__text{ font-size:.92rem; }
  .logo__img{ height:36px; }
}

/* ---------- Mobile overlay menu ---------- */
/* A translucent frosted-glass panel: the backdrop blur amount itself
   animates in on open (0 → 22px) rather than just fading a near-opaque
   tint, so the page behind visibly comes into (out of) focus. */
.mobile-menu{
  position:fixed; inset:0; z-index:400;
  background:rgba(243,247,246,.62);
  -webkit-backdrop-filter:blur(0px) saturate(160%);
  backdrop-filter:blur(0px) saturate(160%);
  display:flex; flex-direction:column;
  padding-block:4.75rem 2.25rem;
  opacity:0; visibility:hidden; transform:scale(1.035);
  transition:opacity .4s var(--ease), transform .4s var(--ease),
             -webkit-backdrop-filter .45s var(--ease), backdrop-filter .45s var(--ease),
             visibility 0s linear .4s;
}
.mobile-menu[hidden]{ display:flex; }
.mobile-menu.is-open{
  opacity:1; visibility:visible; transform:scale(1);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  transition:opacity .4s var(--ease), transform .4s var(--ease),
             -webkit-backdrop-filter .45s var(--ease), backdrop-filter .45s var(--ease);
}
.mobile-menu__close{
  position:absolute; top:1.4rem; inset-inline-end:1.4rem; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
}
/* Nav + CTA occupy the flexible middle space and stay centred within it;
   the social row (below) is a separate flow sibling, so it settles at the
   very bottom of the screen instead of trailing the centred group. */
.mobile-menu__center{
  flex:1; min-height:0; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-5);
}
.mobile-menu__nav ul{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.mobile-menu__nav a{ font-family:var(--font-display); font-size:clamp(1.8rem,7vw,2.6rem); color:var(--ink); }
html[lang="ar"] .mobile-menu__nav a{ font-family:var(--font-ar); font-weight:700; }
.mobile-menu__cta{ margin-top:.5rem; }
.mobile-menu__social{ display:flex; justify-content:center; gap:1.4rem; width:100%; flex-shrink:0; }
.mobile-menu__social a{ color:var(--ink-soft); transition:color .25s var(--ease), transform .25s var(--ease); }
.mobile-menu__social a:hover{ color:var(--ink); transform:translateY(-2px); }

body.menu-open{ overflow:hidden; }

@media (min-width:901px){ .mobile-menu{ display:none !important; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:var(--header-h); overflow:hidden;
  isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero__blob{
  position:absolute; border-radius:50%; filter:blur(70px);
}
.hero__blob--a{
  width:52vw; height:52vw; top:-14vw; inset-inline-end:-14vw;
  background:radial-gradient(circle, rgba(231,160,136,.55), transparent 70%);
}
.hero__blob--b{
  width:44vw; height:44vw; bottom:-18vw; inset-inline-start:-12vw;
  background:radial-gradient(circle, rgba(1,103,182,.45), transparent 70%);
}
@media (prefers-reduced-motion:no-preference){
  .hero__blob--a{ animation:driftA 26s ease-in-out infinite alternate; }
  .hero__blob--b{ animation:driftB 30s ease-in-out infinite alternate; }
}
@keyframes driftA{ to{ transform:translate(-3%, 4%) scale(1.06); } }
@keyframes driftB{ to{ transform:translate(4%, -3%) scale(1.08); } }

.hero__grid{
  position:absolute; width:280px; height:280px; inset-inline-start:-40px; bottom:-40px;
  background-image:radial-gradient(circle, rgba(13,36,54,.14) 1px, transparent 1px);
  background-size:26px 26px; opacity:.5;
}

.hero__inner{
  max-width:var(--container); margin-inline:auto; width:100%;
  padding-inline:clamp(1.25rem, 4vw, 3rem);
  display:grid; grid-template-columns:1fr; gap:var(--sp-7);
  padding-block:var(--sp-6);
}
@media (min-width:1000px){
  .hero__inner{ grid-template-columns:.92fr 1fr; align-items:center; gap:var(--sp-6); }
}

.hero__title{ font-size:var(--fs-h1); margin-block:var(--sp-3); }
.hero__title span{ display:block; }
.hero__desc{ font-size:var(--fs-lead); color:var(--ink-soft); max-width:46ch; margin-bottom:var(--sp-5); }
.hero__ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-6); }

.hero__meta{
  display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--hairline);
}
.hero__meta li{
  font-size:.82rem; color:var(--ink-faint); font-weight:600;
  padding:.9rem 1.4rem .9rem 0; border-inline-end:1px solid var(--hairline); padding-inline-end:1.4rem;
}
.hero__meta li:first-child{ padding-inline-start:0; }
.hero__meta li:last-child{ border-inline-end:0; }

.hero__visual{ position:relative; min-height:340px; }
.hero__photo{
  position:relative; aspect-ratio:4/5; width:min(100%, 460px); margin-inline:auto;
  border-radius:38% 62% 63% 37% / 56% 38% 62% 44%;
  isolation:isolate;
}
@media (min-width:1000px){
  .hero__photo{ margin-inline-end:calc(-1 * clamp(0px, 4vw, 60px)); margin-inline-start:auto; }
}
/* Mobile crop: shorter/wider frame reads better under the stacked text column
   than the tall desktop editorial crop. */
@media (max-width:640px){
  .hero__photo{
    aspect-ratio:4/3;
    border-radius:46% 54% 50% 50% / 48% 44% 56% 52%;
  }
}

/* Fine dot-grid + grain, so the fallback placeholder reads as a considered
   specimen/sample mark rather than a plain decorative gradient. Sits above the
   .media gradient but below the real <img> once a photo is supplied — kept
   permanently (not reference-only): a faint texture over a real photo is a
   deliberate, restrained brand touch, not just a loading-state artefact. */
.hero__photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit;
  background-image:
    radial-gradient(circle, rgba(13,36,54,.16) 1px, transparent 1px),
    var(--noise-svg);
  background-size:16px 16px, 140px 140px;
  background-position:center, center;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 40%, #000 55%, transparent 78%);
  mask-image:radial-gradient(120% 120% at 50% 40%, #000 55%, transparent 78%);
  opacity:.5;
  mix-blend-mode:overlay;
}
.hero__photo .media__img{
  position:relative; z-index:2;
  /* Tuned for hero-mother-baby.webp: both faces sit centred, mother's higher
     and baby's lower — 40% keeps both in frame at the 4/5 and 4/3 crops below. */
  object-position:50% 40%;
}
@media (max-width:640px){
  .hero__photo .media__img{ object-position:50% 40%; }
}

/* Placeholder-only composition: soft abstract forms suggesting where the
   mother's and baby's faces will sit, a warm skin-adjacent blush and the
   editorial wash — replaced entirely once a real <img src> covers it.
   Remove the "media--reference" class (see README) once the real photo ships. */
.hero__photo.media--reference{
  background:
    radial-gradient(34% 26% at 60% 80%, rgba(45,139,97,.34), transparent 70%),
    radial-gradient(44% 52% at 66% 36%, rgba(13,36,54,.13), transparent 72%),
    radial-gradient(58% 42% at 54% 28%, rgba(224,178,150,.38), transparent 70%),
    radial-gradient(120% 140% at 20% 15%, rgba(231,160,136,.9), transparent 60%),
    radial-gradient(130% 130% at 85% 90%, rgba(1,103,182,.75), transparent 55%),
    linear-gradient(150deg, var(--surface), var(--blue-light));
}
.hero__dot{ position:absolute; border-radius:50%; background:var(--blue); opacity:.5; }
.hero__dot--1{ width:10px; height:10px; top:10%; inset-inline-end:6%; }
.hero__dot--2{ width:6px; height:6px; bottom:16%; inset-inline-start:2%; background:var(--teal); }
.hero__dot--3{ width:14px; height:14px; top:44%; inset-inline-end:-2%; background:var(--mint); opacity:.6; }

@media (prefers-reduced-motion:no-preference){
  .hero__dot{ animation:floatDot 7s ease-in-out infinite; }
  .hero__dot--2{ animation-duration:9s; animation-delay:.6s; }
  .hero__dot--3{ animation-duration:8s; animation-delay:1.2s; }
}
@keyframes floatDot{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

.hero__scroll{
  position:absolute; bottom:clamp(1rem,3vh,2rem); inset-inline-start:50%; transform:translateX(-50%);
  width:1px; height:52px; display:flex; justify-content:center;
}
.hero__scroll-line{ width:1px; height:100%; background:linear-gradient(var(--ink-faint), transparent); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:""; position:absolute; top:-40%; left:0; width:100%; height:40%; background:var(--teal);
}
@media (prefers-reduced-motion:no-preference){
  .hero__scroll-line::after{ animation:scrollDrip 2.2s ease-in-out infinite; }
}
@keyframes scrollDrip{ 0%{ top:-40%; } 60%,100%{ top:100%; } }

/* ==========================================================================
   Trust strip
   ========================================================================== */
/* A whisper of sage rather than a flat cream band — defined mostly by the
   hairline rules, not by colour. */
.trust-strip{ border-block:1px solid var(--hairline); background:var(--wash-blue); }
.trust-strip__list{
  max-width:var(--container); margin-inline:auto; padding:var(--sp-4) clamp(1.25rem,4vw,3rem);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-4);
}
.trust-strip__list li{ display:flex; align-items:center; gap:.6rem; font-size:.82rem; font-weight:600; color:var(--ink-soft); }
.trust-strip__list svg{ color:var(--teal); flex-shrink:0; }

@media (max-width:640px){
  /* space-between + wrap left this reading as a lopsided, uneven grid on
     narrow screens (one item alone on a row, two others pushed apart on the
     next) — a plain single-column stack reads far cleaner at this width. */
  .trust-strip__list{ flex-direction:column; align-items:flex-start; gap:.9rem; }
}

/* ==========================================================================
   NIPT Plus
   ========================================================================== */
.nipt__grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-7); }
/* align-items:center — not :start — so the shorter infographic panel sits
   centred against the taller left column's total height. Pure grid alignment,
   no fixed margin: stays balanced however tall the left copy ends up being. */
@media (min-width:960px){ .nipt__grid{ grid-template-columns:1fr .85fr; align-items:center; } }

.check-list{ display:flex; flex-direction:column; gap:1rem; margin-bottom:var(--sp-5); }
.check-list li{ display:flex; align-items:flex-start; gap:.8rem; font-size:.95rem; color:var(--ink); }
.check-list li::before{
  content:""; flex-shrink:0; width:6px; height:6px; margin-top:.55em; border-radius:50%;
  background:var(--blue); box-shadow:0 0 0 4px var(--blue-light);
  transition:box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.check-list li:hover::before{ background:var(--teal); box-shadow:0 0 0 5px var(--blue-light); }

/* Sits as a centred info band under the two-column grid, not tucked into the
   left column — see .nipt__noterow below. */
.medical-note{
  display:flex; gap:1rem; align-items:flex-start; padding:1.15rem 1.5rem;
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);
  font-size:.85rem; color:var(--ink-soft); line-height:1.65;
  text-align:start;
}
.medical-note svg{
  flex-shrink:0; width:16px; height:16px; padding:.5rem; box-sizing:content-box;
  border-radius:50%; background:var(--surface); color:var(--teal);
}
.nipt__noterow{ display:flex; justify-content:center; margin-top:var(--sp-6); }
.nipt__noterow .medical-note{ max-width:62ch; }

.nipt__infographic{
  background:linear-gradient(165deg, var(--wash-blue), var(--paper) 60%);
  border:1px solid var(--hairline); border-radius:var(--radius-l);
  padding:var(--sp-6) var(--sp-5);
}
.infographic__track{ position:relative; display:flex; flex-direction:column; gap:var(--sp-6); padding-inline-start:2.6rem; }
/* height:100% is required: an <svg> is a replaced element, so without it the
   browser sizes the line from its viewBox aspect ratio (20:400) instead of
   stretching between top/bottom — that's what let it run on past the last
   node and out the bottom of the panel. */
.infographic__line{ position:absolute; inset-inline-start:0; top:6px; bottom:6px; width:20px; height:calc(100% - 12px); overflow:visible; }
.infographic__line path{
  fill:none; stroke:var(--teal); stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:400; stroke-dashoffset:400; transition:stroke-dashoffset 1.4s var(--ease);
}
.nipt__infographic.is-visible .infographic__line path{ stroke-dashoffset:0; }

.infographic__stage{ position:relative; padding-block:.2rem; transition:transform .3s var(--ease); }
.infographic__stage:hover{ transform:translateX(3px); }
.infographic__node{
  position:absolute; inset-inline-start:-2.6rem; top:0;
  width:22px; height:22px; border-radius:50%; background:var(--ink); color:var(--paper);
  font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 4px var(--surface);
  transform:scale(.6); opacity:0; transition:transform .5s var(--ease), opacity .5s var(--ease), box-shadow .3s var(--ease);
  transition-delay:calc(var(--i,0) * .15s);
}
.infographic__stage:hover .infographic__node{ box-shadow:0 0 0 4px var(--blue-light); }
.infographic__stage:nth-child(2) .infographic__node{ --i:1; }
.infographic__stage:nth-child(3) .infographic__node{ --i:2; }
.infographic__stage:nth-child(4) .infographic__node{ --i:3; }
.infographic__stage:nth-child(5) .infographic__node{ --i:4; }
.nipt__infographic.is-visible .infographic__node{ transform:scale(1); opacity:1; }
.infographic__stage p{ font-weight:600; font-size:.98rem; padding-top:.15rem; }

/* ==========================================================================
   Card base (still used by .card--screening — see Screening areas below)
   ========================================================================== */
.card{
  background:var(--paper); border-radius:var(--radius-m); padding:var(--sp-5);
  border:1px solid var(--hairline); transition:transform .4s var(--ease), box-shadow .4s var(--ease), background-color .4s var(--ease);
}

/* ==========================================================================
   Features → interactive feature spotlight
   Deliberately NOT a four-card grid (that pattern already belongs to the
   "How It Works" timeline directly below) — one large active feature stage
   plus a slim navigation rail, so the two sections read differently.
   ========================================================================== */
/* Barely-there sage wash easing in and back out to bone — a section that
   reads as "quietly different" from its neighbours, not a visible band. */
.spotlight-section{
  background:linear-gradient(180deg,
    var(--paper) 0%, var(--wash-blue) 30%, var(--wash-blue) 70%, var(--paper) 100%);
}

.spotlight{ display:grid; grid-template-columns:1fr; gap:var(--sp-6); }
@media (min-width:961px){
  .spotlight{ grid-template-columns:.62fr 1fr; gap:var(--sp-8); align-items:start; }
  .spotlight__intro{ position:sticky; top:calc(var(--header-h) + 2.5rem); }
}
.spotlight__desc{ color:var(--ink-soft); font-size:.98rem; line-height:1.7; max-width:32ch; margin-top:.35rem; }
.spotlight__thread{ width:150px; height:auto; color:var(--teal); opacity:.4; margin-top:var(--sp-5); }

.spotlight__panel{ display:flex; flex-direction:column; gap:var(--sp-5); }

/* ---------- Stage: large active feature (desktop) ---------- */
.spotlight__stage{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--ink); color:var(--paper);
  border:1px solid rgba(243,247,246,.1); border-radius:var(--radius-l);
  padding:clamp(2.2rem,4vw,3.4rem);
}
.spotlight__deco{ position:absolute; inset:0; width:100%; height:100%; color:rgba(243,247,246,.18); pointer-events:none; z-index:0; }
.spotlight__decopath{ stroke-dasharray:340; stroke-dashoffset:340; transition:stroke-dashoffset 1.1s var(--ease); }
.spotlight.is-ready .spotlight__decopath{ stroke-dashoffset:0; }

/* No-JS fallback: panes stack as a plain, fully-readable list. */
.spotlight__pane{ position:relative; z-index:1; }
.spotlight__pane + .spotlight__pane{ margin-top:2.2rem; padding-top:2.2rem; border-top:1px solid rgba(243,247,246,.14); }

/* JS-enhanced: panes overlap in one grid cell and crossfade/slide between states. */
.spotlight.is-ready .spotlight__stage{ display:grid; min-height:300px; }
.spotlight.is-ready .spotlight__pane{
  grid-area:1/1; margin:0; padding-top:0; border-top:0;
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.spotlight.is-ready .spotlight__pane.is-active{ opacity:1; transform:translateY(0); pointer-events:auto; z-index:2; }
.spotlight.is-ready .spotlight__pane.is-leaving{ opacity:0; transform:translateY(-10px); }

.spotlight__icon{ display:flex; margin-bottom:1rem; color:var(--mint); }
.spotlight.is-ready .spotlight__icon{ opacity:.7; transform:scale(.82) rotate(-8deg); transition:transform .5s var(--ease) .04s, opacity .5s var(--ease) .04s; }
.spotlight.is-ready .spotlight__pane.is-active .spotlight__icon{ opacity:1; transform:scale(1) rotate(0deg); }

.spotlight__title{ font-size:clamp(1.4rem,2.4vw,1.9rem); color:var(--paper); margin-bottom:.6rem; }
.spotlight__text{ color:rgba(243,247,246,.74); font-size:1rem; line-height:1.75; max-width:42ch; }

/* ---------- Rail: compact nav (desktop) / accordion (mobile) ---------- */
.spotlight__rail{ position:relative; display:flex; flex-wrap:wrap; gap:var(--sp-4) var(--sp-5); padding-top:1.6rem; }
.spotlight__railtrack{ position:absolute; top:0; inset-inline:0; height:1px; background:var(--hairline); display:block; }
.spotlight__railfill{ position:absolute; top:0; inset-inline-start:0; height:1px; width:25%; background:linear-gradient(90deg,var(--teal),var(--blue)); transition:width .5s var(--ease); }

.spotlight__item{ flex:1 1 190px; }
.spotlight__trigger{
  display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; width:100%; text-align:start;
  color:var(--ink-faint); transition:color .3s var(--ease);
}
.spotlight__trigger:hover{ color:var(--ink); }
.spotlight__trigger.is-active{ color:var(--ink); }
.spotlight__triggerdot{
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--hairline); background:transparent;
  transition:width .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.spotlight__trigger:hover .spotlight__triggerdot{ border-color:var(--blue); }
.spotlight__trigger.is-active .spotlight__triggerdot{ width:10px; height:10px; border-color:var(--teal); background:var(--teal); box-shadow:0 0 0 4px var(--blue-light); }
.spotlight__triggericon{ display:none; }
.spotlight__triggerlabel{ font-size:.92rem; font-weight:600; }

/* No-JS fallback: the answer text is plainly visible under every trigger. */
.spotlight__answer p{ padding-top:.75rem; color:var(--ink-soft); font-size:.92rem; line-height:1.7; max-width:56ch; }
@media (min-width:641px){
  .spotlight.is-ready .spotlight__answer{ display:none; }
}

@media (max-width:640px){
  /* !important: must always win over ".is-ready .spotlight__stage{display:grid}",
     which otherwise outranks this on specificity alone. */
  .spotlight__stage{ display:none !important; }
  .spotlight__rail{ display:block; padding-top:0; }
  .spotlight__railtrack,.spotlight__railfill{ display:none; }
  .spotlight__item{ border-top:1px solid var(--hairline); transition:border-color .3s var(--ease); }
  .spotlight__item:first-child{ border-top:1px solid var(--hairline); }
  .spotlight__item.is-active{ border-top-color:var(--teal); }
  .spotlight__trigger{ flex-direction:row; align-items:center; gap:.9rem; padding:1.1rem 0; color:var(--ink); }
  .spotlight__triggericon{ display:flex; color:var(--ink-soft); flex-shrink:0; }
  .spotlight__trigger.is-active .spotlight__triggericon{ color:var(--ink); }
  .spotlight__triggerlabel{ flex:1; font-size:1rem; }
  .spotlight.is-ready .spotlight__answer{ overflow:hidden; height:0; transition:height .4s var(--ease); }
  .spotlight.is-ready .spotlight__answer p{ padding-bottom:1.1rem; }
}

/* ==========================================================================
   How it works — timeline
   ========================================================================== */
.timeline{ margin-top:var(--sp-7); }
.timeline__rail{ position:relative; height:20px; margin-bottom:var(--sp-6); }
.timeline__thread{ position:absolute; inset:0; width:100%; height:100%; color:var(--hairline); }
.timeline__fill{
  position:absolute; inset-block:0; inset-inline-start:0; width:0%;
  background:linear-gradient(90deg, var(--teal), var(--blue));
  clip-path:polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
  transition:width .15s linear;
}
.timeline__list{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); }
.timeline__step{ position:relative; padding-top:var(--sp-3); border-top:2px solid var(--hairline); }
.timeline__index{ display:block; font-family:var(--font-display); font-size:1.6rem; color:var(--ink); margin-bottom:.6rem; }
.timeline__step h3{ font-size:var(--fs-h3); margin-bottom:.5rem; }
.timeline__step p{ font-size:.9rem; color:var(--ink-soft); line-height:1.65; }

@media (max-width:900px){
  .timeline__rail{
    position:absolute; width:2px; height:calc(100% - 8px); inset-inline-start:9px; top:4px;
    background:var(--hairline);
  }
  .timeline__thread{ display:none; }
  .timeline__fill{ inset-block:0; inset-inline-start:0; width:2px !important; height:0%;
    clip-path:none; transition:height .15s linear; }
  .timeline{ position:relative; padding-inline-start:2.6rem; }
  .timeline__list{ grid-template-columns:1fr; gap:var(--sp-6); }
  .timeline__step{ border-top:0; padding-inline-start:.4rem; padding-top:0; }
}

/* ==========================================================================
   Screening areas
   ========================================================================== */
/* Flex-wrap instead of a fixed 3-column grid: with 5 cards a grid leaves an
   awkward empty gap in the last row — this centers whatever row remains. */
.screening__grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-4); margin-top:var(--sp-6); }
.card--screening{ flex:1 1 320px; max-width:380px; }
.card--screening{ background:var(--blue-light); border:none; }
.card--screening:hover{ transform:translateY(-4px); }
.card--screening h3{ font-family:var(--font-display); font-size:1.2rem; margin-bottom:.5rem; }
html[lang="ar"] .card--screening h3{ font-family:var(--font-ar); }
.card--screening p{ font-size:.88rem; color:#164A42; line-height:1.65; }

/* ==========================================================================
   About
   ========================================================================== */
.about__grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-7); align-items:center; }
@media (min-width:960px){ .about__grid{ grid-template-columns:1fr .9fr; } }
.about__text p{ color:var(--ink-soft); font-size:var(--fs-lead); line-height:1.7; }
.about__text p + p{ margin-top:1rem; }
.about__text p:last-of-type{ margin-bottom:var(--sp-5); }
.values-list{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.5rem; margin-top:var(--sp-5); }
.values-list li{ font-size:.85rem; font-weight:700; letter-spacing:.02em; padding-top:.9rem; border-top:1px solid var(--hairline); }

.about__visual{ position:relative; }
.about__photo{ position:relative; aspect-ratio:4/3; border-radius:var(--radius-l); isolation:isolate; }
/* about-consultation.webp is close to 3:2; object-fit:cover trims the sides
   to this box's 4:3 while keeping both people centred in frame. */
.about__photo .media__img{ position:relative; z-index:2; object-position:center; }
/* Subtle glass-panel seams + grain, permanent (see hero__photo::after note above). */
.about__photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  background-image:
    repeating-linear-gradient(100deg, rgba(13,36,54,.05) 0 1px, transparent 1px 140px),
    var(--noise-svg);
  background-size:auto, 140px 140px;
  opacity:.55;
  mix-blend-mode:overlay;
}
/* Placeholder-only composition: cool lab-light wash, a soft instrument-panel
   glow and a glass reflection streak — no faces, an architectural/scientific
   impression instead. Remove the "media--reference" class once the real
   about-lab photo ships (see README). */
.about__photo.media--reference{
  background:
    linear-gradient(102deg, transparent 32%, rgba(255,255,255,.4) 46%, transparent 62%),
    radial-gradient(90% 70% at 78% 8%, rgba(220,231,223,.95), transparent 60%),
    radial-gradient(120% 60% at 50% 108%, rgba(255,255,255,.4), transparent 62%),
    radial-gradient(80% 80% at 12% 92%, rgba(231,160,136,.55), transparent 55%),
    linear-gradient(160deg, var(--blue-light), var(--surface));
}
.about__lines{ position:absolute; z-index:3; width:120px; height:120px; bottom:-30px; inset-inline-start:-30px; color:var(--teal); opacity:.6; }

.stats{ margin-top:var(--sp-7); border-top:1px solid var(--hairline); }
.stats__grid{ display:grid; grid-template-columns:repeat(3,1fr); padding-block:var(--sp-6); }
.stats__item{ text-align:center; border-inline-start:1px solid var(--hairline); padding-inline:1rem; }
.stats__item:first-child{ border-inline-start:0; }
.stats__big{ font-family:var(--font-display); font-size:clamp(1.3rem, 2.4vw, 1.9rem); }
html[lang="ar"] .stats__big{ font-family:var(--font-ar); font-weight:700; }
@media (max-width:640px){
  .stats__grid{ grid-template-columns:1fr; gap:var(--sp-4); }
  .stats__item{ border-inline-start:0; border-top:1px solid var(--hairline); padding-top:var(--sp-4); }
  .stats__item:first-child{ border-top:0; padding-top:0; }
}

/* ==========================================================================
   FAQ / Accordion
   ========================================================================== */
/* Same quiet-rhythm treatment as .spotlight-section, at half strength — just
   enough that FAQ doesn't sit on the identical flat bone as its neighbours. */
.faq{
  background:linear-gradient(180deg,
    var(--paper) 0%, var(--wash-mint) 25%, var(--wash-mint) 75%, var(--paper) 100%);
  /* The generic .section padding-block stacks with the preceding stats block's
     own bottom padding, leaving an oversized gap above the title. Trim FAQ's
     top padding specifically (still a clamp off the same scale, ~38% smaller
     at desktop) rather than touching the shared --section-pad token used
     sitewide or the About/stats section above it. */
  padding-block-start:clamp(2.25rem, 4.5vw, 4rem);
}
.faq .section__title{ margin-bottom:var(--sp-6); letter-spacing:-.015em; }

.accordion{ margin-top:var(--sp-6); border-top:1px solid var(--hairline); }
.accordion__item{ border-bottom:1px solid var(--hairline); transition:border-color .3s var(--ease); }
/* Higher specificity than the generic [data-observe] rule so this shorter,
   lighter rise wins over the sitewide 24px one. */
.accordion__item[data-observe]{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), border-color .3s var(--ease);
}
.accordion__item[data-observe].is-visible{ opacity:1; transform:none; }
/* Gentle cascading reveal for whichever rows are already near the viewport
   when the section first appears — later items simply reveal individually
   as the user scrolls to them (see initScrollReveal in main.js). */
.accordion__item:nth-child(1){ transition-delay:.02s; }
.accordion__item:nth-child(2){ transition-delay:.08s; }
.accordion__item:nth-child(3){ transition-delay:.14s; }
.accordion__item:nth-child(4){ transition-delay:.2s; }
.accordion__item:nth-child(5){ transition-delay:.26s; }

.accordion__trigger{
  position:relative; width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.35rem .25rem; padding-inline-start:1.1rem; text-align:start;
  font-family:var(--font-body); font-size:1.04rem; font-weight:500; letter-spacing:-.005em;
  color:var(--ink); transition:padding-inline-start .3s var(--ease);
}
/* Text stays full-contrast ink at all times — the hover/open cue is a thin
   gold rail on the leading edge, not a text-colour change (gold-on-cream
   text measures well under WCAG's 4.5:1, so the accent lives here instead). */
.accordion__trigger::before{
  content:""; position:absolute; inset-block:.4rem; inset-inline-start:0; width:2px;
  background:var(--teal); border-radius:var(--radius-full);
  transform:scaleY(0); transition:transform .3s var(--ease); pointer-events:none;
}
.accordion__trigger:hover{ padding-inline-start:1.4rem; }
.accordion__trigger:hover::before,
.accordion__trigger[aria-expanded="true"]::before{ transform:scaleY(1); }
.accordion__trigger[aria-expanded="true"]{ font-weight:600; }

.accordion__icon{
  position:relative; z-index:1; flex-shrink:0; width:30px; height:30px; border-radius:50%;
  transition:background-color .3s var(--ease);
}
.accordion__trigger:hover .accordion__icon,
.accordion__trigger[aria-expanded="true"] .accordion__icon{ background:var(--paper); }
.accordion__icon::before,.accordion__icon::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--ink); border-radius:1px;
  transition:transform .4s var(--ease), background-color .3s var(--ease);
}
.accordion__icon::before{ width:11px; height:1.3px; transform:translate(-50%,-50%); }
.accordion__icon::after{ width:1.3px; height:11px; transform:translate(-50%,-50%); }
.accordion__trigger[aria-expanded="true"] .accordion__icon{ transform:rotate(45deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::before,
.accordion__trigger[aria-expanded="true"] .accordion__icon::after{ background:var(--teal); }

.accordion__panel{
  position:relative; z-index:1; overflow:hidden; height:0; transition:height .45s var(--ease);
}
.accordion__panel p{
  padding:0 .25rem var(--sp-5); color:var(--ink-soft); font-size:.96rem; max-width:62ch; line-height:1.8;
  opacity:0; transform:translateY(-6px); transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.accordion__panel.is-open p{ opacity:1; transform:none; transition-delay:.08s; }
.accordion__panel[hidden]{ display:block; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{ position:relative; background:var(--ink); color:var(--paper); overflow:hidden; }
.contact__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 85% 10%, rgba(45,139,97,.28), transparent 70%),
    radial-gradient(50% 50% at 5% 90%, rgba(1,103,182,.2), transparent 70%);
}
.contact .section__title{ color:var(--paper); }
.contact__grid{ position:relative; display:grid; grid-template-columns:1fr; gap:var(--sp-7); }
@media (min-width:960px){ .contact__grid{ grid-template-columns:1fr .95fr; } }
.contact__intro p{ color:rgba(243,247,246,.75); max-width:44ch; margin-bottom:var(--sp-5); }
.contact__ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:var(--sp-6); }
.contact .btn--primary{ background:var(--teal); color:var(--ink); }
.contact .btn--primary:hover{ background:#2FAE9C; }
.contact .btn--ghost{ border-color:rgba(243,247,246,.3); color:var(--paper); }
.contact .btn--ghost:hover{ background:rgba(243,247,246,.08); }

.contact__details{ display:flex; flex-direction:column; gap:.9rem; border-top:1px solid var(--hairline-light); padding-top:var(--sp-4); }
.contact__details li{ display:flex; gap:1rem; font-size:.92rem; }
.contact__label{ width:88px; flex-shrink:0; color:rgba(243,247,246,.5); font-weight:600; }
.contact__details a:hover{ color:var(--teal); }

.form{
  background:rgba(243,247,246,.06); border:1px solid rgba(243,247,246,.14);
  border-radius:var(--radius-l); padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3);
  backdrop-filter:blur(6px);
}
.form__field{ display:flex; flex-direction:column; gap:.45rem; }
.form__field label{ font-size:.8rem; font-weight:600; color:rgba(243,247,246,.75); }
.form__field input, .form__field select, .form__field textarea{
  background:rgba(243,247,246,.08); border:1px solid rgba(243,247,246,.2); border-radius:var(--radius-s);
  padding:.8rem 1rem; color:var(--paper);
}
.form__field input::placeholder, .form__field textarea::placeholder{ color:rgba(243,247,246,.4); }
.form__field select option{ color:var(--ink); }
.form__field input:focus, .form__field select:focus, .form__field textarea:focus{ border-color:var(--teal); }
.form__field textarea{ resize:vertical; min-height:100px; }
.form__field--checkbox{ flex-direction:row; align-items:flex-start; gap:.7rem; }
.form__field--checkbox input{ margin-top:.25rem; width:16px; height:16px; accent-color:var(--teal); flex-shrink:0; }
.form__field--checkbox label{ font-weight:400; font-size:.85rem; line-height:1.5; }

.form__error{ display:none; font-size:.78rem; color:#D64545; }
.form__error.is-visible{ display:block; }
.form__field:has(.form__error.is-visible) input,
.form__field:has(.form__error.is-visible) textarea{ border-color:#C23B3B; }

.form__submit{ margin-top:.5rem; }
.form__status{
  font-size:.85rem; padding:.9rem 1.1rem; border-radius:var(--radius-s);
  background:rgba(1,103,182,.16); border:1px solid rgba(1,103,182,.35);
}
.form__status[hidden]{ display:none; }

/* ==========================================================================
   WhatsApp floating button
   ========================================================================== */
.whatsapp-fab{
  /* Pinned to the physical bottom-right corner (not the RTL logical trailing edge) —
     WhatsApp's own launcher convention stays put regardless of page language. */
  position:fixed; z-index:150;
  right:max(1.25rem, env(safe-area-inset-right));
  bottom:max(1.25rem, env(safe-area-inset-bottom));
  width:56px; height:56px; border-radius:50%;
  background:#1f8a5c; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -12px rgba(31,138,92,.55);
}
@media (prefers-reduced-motion:no-preference){
  .whatsapp-fab{ animation:breathe 3.4s ease-in-out infinite; }
}
@keyframes breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
.whatsapp-fab:hover{ background:#1a7850; }

/* ==========================================================================
   Cookie notice — full-width dark bar, flush with the very bottom edge so
   it's unmistakably a bottom banner rather than a floating card that can
   get lost against the page. z-index sits just under the WhatsApp fab so
   the fab visibly floats on top of the bar instead of disappearing behind
   it; the bar's own end-padding keeps its text/buttons clear of the fab's
   footprint so nothing sits underneath it unreachable.
   ========================================================================== */
.cookie-banner{
  position:fixed; z-index:140;
  inset-inline:0; bottom:0;
}
.cookie-banner__inner{
  background:var(--ink); color:rgba(243,247,246,.85);
  border-top:1px solid rgba(243,247,246,.14);
  box-shadow:0 -18px 44px -26px rgba(13,36,54,.5);
  padding:1.15rem clamp(1.25rem,4vw,3rem);
  padding-inline-end:calc(clamp(1.25rem,4vw,3rem) + 88px);
  padding-bottom:calc(1.15rem + env(safe-area-inset-bottom));
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.75rem;
  opacity:0; transform:translateY(100%);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.cookie-banner.is-visible .cookie-banner__inner{ opacity:1; transform:translateY(0); }
.cookie-banner p{ flex:1 1 260px; margin:0; font-size:.86rem; line-height:1.6; color:rgba(243,247,246,.72); }
.cookie-banner__actions{ display:flex; align-items:center; gap:.5rem; flex-shrink:0; margin-inline-start:auto; }
.cookie-banner__decline{
  font-size:.82rem; font-weight:600; color:rgba(243,247,246,.55);
  padding:.75rem 1.05rem; border-radius:var(--radius-full);
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.cookie-banner__decline:hover{ color:#fff; background:rgba(243,247,246,.1); }
.cookie-banner__accept{
  background:var(--paper); color:var(--ink);
  padding:.75rem 1.6rem; border-radius:var(--radius-full);
  font-size:.85rem; font-weight:600;
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.cookie-banner__accept:hover{ background:#fff; transform:translateY(-2px); }

@media (max-width:480px){
  .cookie-banner__inner{ flex-direction:column; flex-wrap:nowrap; align-items:stretch; text-align:start; }
  /* flex-basis:260px on .cookie-banner p was sized for the row layout's width
     (main axis); in this column layout the main axis is height, so it must
     be reset here or the paragraph inflates to a 260px-tall box. */
  .cookie-banner p{ flex:auto; }
  .cookie-banner__actions{ margin-inline-start:0; justify-content:flex-end; width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .cookie-banner__inner{ transition:none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  background:var(--ink); color:rgba(243,247,246,.75); padding-top:var(--sp-5);
  padding-bottom:calc(.75rem + env(safe-area-inset-bottom));
}
.footer__inner{
  max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem);
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--sp-6);
}
@media (max-width:760px){ .footer__inner{ grid-template-columns:1fr; gap:var(--sp-5); } }
.footer__logo-img{ display:block; height:108px; width:auto; }
.footer__col--brand p{ margin-block:.9rem; max-width:34ch; font-size:.9rem; line-height:1.7; }
.footer__location{ font-size:.85rem; color:rgba(243,247,246,.5); }
.footer__col h3{ font-family:var(--font-body); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(243,247,246,.5); margin-bottom:1rem; }
.footer__col ul{ display:flex; flex-direction:column; gap:.65rem; }
.footer__col ul li{ display:flex; align-items:center; gap:.55rem; }
.footer__col a{ font-size:.92rem; }
.footer__col a:hover{ color:var(--teal); }
.footer__icon{ flex-shrink:0; color:rgba(243,247,246,.45); }

.footer__bottom{
  max-width:var(--container); margin-inline:auto;
  padding-inline-start:clamp(1.25rem,4vw,3rem);
  /* extra clearance on this side so the fixed, physically-bottom-right WhatsApp
     button never sits on top of this right-aligned line */
  padding-inline-end:calc(clamp(1.25rem,4vw,3rem) + 88px);
  margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--hairline-light);
  display:flex; justify-content:flex-end;
  font-size:.78rem; color:rgba(243,247,246,.4);
}

/* ==========================================================================
   RTL specific tweaks
   ========================================================================== */
html[dir="rtl"] .about__lines{ transform:scaleX(-1); }
html[dir="rtl"] .infographic__node{ inset-inline-start:auto; }

/* ==========================================================================
   Small-screen safety
   ========================================================================== */
@media (max-width:400px){
  .hero__ctas{ flex-direction:column; align-items:stretch; }
  .hero__ctas .btn{ width:100%; }
  .contact__ctas{ flex-direction:column; }
  .contact__ctas .btn{ width:100%; }
}

/* ==========================================================================
   2026-08 visual refresh — hero + FAQ
   Based on the approved entrance and FAQ references. This block intentionally
   overrides the older component rules without changing the site's structure.
   ========================================================================== */

:root{
  --hero-surface: rgba(255,255,255,.58);
  --hero-line: rgba(13,36,54,.075);
}

/* A calmer glass header: crisp content, soft wash, no heavy grey band. */
.header{
  border-bottom-color:transparent;
  box-shadow:none;
}
.header{ --overhang:12px; }
.header::before{
  height:calc(var(--header-h) + var(--overhang));
  background:linear-gradient(180deg,
    rgba(243,247,246,.90) 0%,
    rgba(243,247,246,.72) 68%,
    rgba(243,247,246,0) 100%);
  backdrop-filter:blur(12px) saturate(145%);
  -webkit-backdrop-filter:blur(12px) saturate(145%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%);
}
.header::after{
  inset:0 0 auto;
  height:var(--header-h);
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0));
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  -webkit-mask-image:none;
  mask-image:none;
}
.header.is-scrolled{
  border-bottom-color:rgba(13,36,54,.06);
  box-shadow:0 16px 36px -32px rgba(13,36,54,.45);
}
.header.is-scrolled::before{
  background:linear-gradient(180deg,
    rgba(243,247,246,.97) 0%,
    rgba(243,247,246,.84) 72%,
    rgba(243,247,246,0) 100%);
  backdrop-filter:blur(16px) saturate(155%);
  -webkit-backdrop-filter:blur(16px) saturate(155%);
}
.header.is-scrolled::after{
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* HERO — editorial two-column composition with a cleaner architectural frame. */
.hero{
  min-height:100svh;
  padding-top:var(--header-h);
  background:
    radial-gradient(58% 68% at 88% 20%, rgba(231,160,136,.20), transparent 70%),
    radial-gradient(46% 52% at 6% 88%, rgba(1,103,182,.16), transparent 72%);
}
.hero__bg{ opacity:.72; }
.hero__blob{ filter:blur(95px); opacity:.52; }
.hero__blob--a{ width:46vw; height:46vw; top:-17vw; inset-inline-end:-10vw; }
.hero__blob--b{ width:38vw; height:38vw; bottom:-15vw; inset-inline-start:-11vw; }
.hero__grid{
  width:230px; height:230px; inset-inline-start:-50px; bottom:-55px;
  background-size:31px 31px; opacity:.13;
}
.hero__inner{
  padding-block:clamp(3rem,7vh,5.8rem) clamp(4.5rem,8vh,7rem);
  gap:clamp(3rem,6vw,6.2rem);
}
@media (min-width:1000px){
  .hero__inner{
    grid-template-columns:minmax(0,.92fr) minmax(460px,1.08fr);
    align-items:center;
  }
}
.hero__content{ position:relative; z-index:2; }
.hero__content .eyebrow{
  margin-bottom:clamp(1.4rem,2.5vw,2rem);
  letter-spacing:.13em;
}
.hero__title{
  max-width:12.5ch;
  font-size:clamp(3.15rem,5.6vw,5.15rem);
  line-height:.98;
  letter-spacing:-.034em;
  margin:0 0 clamp(1.45rem,2.3vw,2rem);
  text-wrap:balance;
}
.hero__title span{ display:inline; }
.hero__title span + span::before{ content:" "; }
.hero__desc{
  max-width:48ch;
  font-size:clamp(1rem,1.3vw,1.16rem);
  line-height:1.75;
  margin-bottom:clamp(1.8rem,3vw,2.6rem);
  text-wrap:pretty;
}
.hero__ctas{
  gap:clamp(1.25rem,2.2vw,2rem);
  margin-bottom:clamp(2rem,3.2vw,2.8rem);
}
.hero__ctas .btn{ min-height:50px; padding-inline:1.8rem; }

/* Modern compact benefit chips from the approved reference. */
.hero__meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.7rem;
  max-width:590px;
  border:0;
}
.hero__meta li{
  min-height:66px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  align-items:center;
  gap:.7rem;
  padding:.78rem .9rem;
  border:1px solid rgba(13,36,54,.075);
  border-radius:15px;
  background:rgba(255,255,255,.56);
  color:var(--ink-soft);
  font-size:.76rem;
  font-weight:600;
  line-height:1.35;
  box-shadow:0 12px 34px -30px rgba(13,36,54,.48);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .28s var(--ease), border-color .28s var(--ease), background-color .28s var(--ease);
}
.hero__meta li:first-child,
.hero__meta li:last-child{ padding-inline:.9rem; border-inline-end:1px solid rgba(13,36,54,.075); }
.hero__meta li:hover{
  transform:translateY(-3px);
  border-color:rgba(45,139,97,.28);
  background:rgba(255,255,255,.78);
}
.hero__meta-icon{
  width:28px; height:28px; display:grid; place-items:center;
  color:var(--teal);
}
.hero__meta-icon svg{ width:18px; height:18px; }

.hero__visual{
  min-height:clamp(470px,64vh,660px);
  display:grid;
  align-items:center;
}
.hero__photo{
  width:min(100%,540px);
  aspect-ratio:4/5;
  margin-inline:auto;
  border-radius:clamp(18px,2vw,28px);
  overflow:visible;
  isolation:isolate;
  box-shadow:none;
}
.hero__photo::before{
  content:"";
  position:absolute;
  inset:20px -18px -18px 18px;
  z-index:-2;
  border:1px solid rgba(45,139,97,.22);
  border-radius:inherit;
  background:linear-gradient(145deg,rgba(255,255,255,.38),rgba(225,237,244,.34));
}
.hero__photo::after{
  inset:-1px;
  z-index:3;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 28%,transparent 76%,rgba(13,36,54,.04));
  background-size:auto;
  -webkit-mask-image:none;
  mask-image:none;
  opacity:1;
  mix-blend-mode:normal;
  pointer-events:none;
}
.hero__photo.media{ overflow:visible; background:transparent; }
.hero__photo.media::before{
  inset:0;
  z-index:1;
  border-radius:inherit;
  background:linear-gradient(180deg,transparent 72%,rgba(13,36,54,.07));
  pointer-events:none;
}
.hero__photo .media__img{
  border-radius:inherit;
  object-position:50% 42%;
  box-shadow:0 30px 70px -45px rgba(13,36,54,.46);
}
.hero__dot--1{ top:12%; inset-inline-end:7%; }
.hero__dot--2{ bottom:11%; inset-inline-start:0; }
.hero__dot--3{ top:46%; inset-inline-end:-1%; opacity:.4; }
.hero__scroll{ opacity:.5; }

/* FAQ — two-column editorial layout from the approved reference. */
.faq{
  background:
    radial-gradient(60% 65% at 6% 42%, rgba(231,160,136,.08), transparent 72%),
    radial-gradient(48% 55% at 94% 80%, rgba(1,103,182,.07), transparent 74%),
    var(--paper);
  padding-block:clamp(4.5rem,8vw,7.5rem);
}
.faq__grid{
  display:grid;
  grid-template-columns:minmax(230px,.62fr) minmax(0,1.38fr);
  gap:clamp(3.5rem,8vw,8rem);
  align-items:start;
}
.faq__intro{
  position:sticky;
  top:calc(var(--header-h) + 2rem);
  padding-top:.15rem;
}
.faq__intro .eyebrow{ margin-bottom:1.35rem; }
.faq .section__title,
.faq__title{
  max-width:8.8ch;
  margin:0 0 1.5rem;
  font-size:clamp(2.65rem,4.4vw,4.3rem);
  line-height:.98;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.faq__desc{
  max-width:31ch;
  color:var(--ink-soft);
  font-size:.96rem;
  line-height:1.75;
  margin-bottom:1.6rem;
  text-wrap:pretty;
}
.faq__contact{ width:max-content; }
.faq .accordion{
  margin-top:0;
  border-top:1px solid var(--hairline);
}
.faq .accordion__item[data-observe]{
  transform:translateY(12px);
  transition:opacity .52s var(--ease), transform .52s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.faq .accordion__item{
  position:relative;
  background:transparent;
}
.faq .accordion__item:hover,
.faq .accordion__item:has(.accordion__trigger[aria-expanded="true"]){
  background:rgba(255,255,255,.32);
}
.faq .accordion__trigger{
  min-height:72px;
  padding:1.35rem .55rem;
  padding-inline-start:1rem;
  font-size:clamp(.94rem,1.08vw,1.05rem);
  font-weight:500;
  line-height:1.45;
}
.faq .accordion__trigger:hover{ padding-inline-start:1.25rem; }
.faq .accordion__trigger::before{
  inset-block:.9rem;
  width:1.5px;
}
.faq .accordion__icon{
  width:32px; height:32px;
  border:1px solid transparent;
}
.faq .accordion__trigger:hover .accordion__icon,
.faq .accordion__trigger[aria-expanded="true"] .accordion__icon{
  background:rgba(225,237,244,.72);
  border-color:rgba(1,103,182,.2);
}
.faq .accordion__panel p{
  max-width:66ch;
  padding:.05rem 3.4rem 1.55rem 1rem;
  line-height:1.75;
}
html[dir="rtl"] .faq .accordion__panel p{ padding:.05rem 1rem 1.55rem 3.4rem; }

@media (max-width:999px){
  .hero__inner{ gap:3rem; }
  .hero__title{ max-width:13ch; }
  .hero__visual{ min-height:auto; }
  .hero__photo{ width:min(92vw,610px); aspect-ratio:4/3; border-radius:24px; }
  .hero__photo .media__img{ object-position:50% 42%; }
  .faq__grid{ grid-template-columns:1fr; gap:2.4rem; }
  .faq__intro{ position:static; display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.72fr); gap:1.5rem 2rem; align-items:end; }
  .faq__intro .eyebrow{ grid-column:1/-1; margin-bottom:0; }
  .faq__title{ margin-bottom:0; }
  .faq__desc{ margin-bottom:.75rem; }
  .faq__contact{ grid-column:2; }
}

@media (max-width:640px){
  .hero{ min-height:auto; }
  .hero__inner{ padding-block:2.5rem 5rem; gap:2.8rem; }
  .hero__title{ font-size:clamp(2.65rem,13vw,3.7rem); max-width:11ch; }
  .hero__title span{ display:block; }
  .hero__title span + span::before{ content:none; }
  .hero__desc{ line-height:1.68; }
  .hero__ctas{ margin-bottom:1.8rem; gap:1rem; }
  .hero__meta{ grid-template-columns:1fr; }
  .hero__meta li{ min-height:58px; }
  .hero__photo{ width:100%; aspect-ratio:4/4.25; border-radius:22px; }
  .hero__photo::before{ inset:12px -8px -10px 10px; }
  .faq{ padding-block:4rem; }
  .faq__intro{ display:block; }
  .faq__intro .eyebrow{ margin-bottom:1rem; }
  .faq__title{ max-width:9ch; margin-bottom:1.15rem; }
  .faq__desc{ max-width:34ch; margin-bottom:1.25rem; }
  .faq__contact{ margin-bottom:.75rem; }
  .faq .accordion__trigger{ min-height:66px; padding-block:1.15rem; }
  .faq .accordion__panel p{ padding-inline-end:1rem; }
}

/* ========================================================================== 
   FINAL REFERENCE ALIGNMENT — NIPT / process / screening / about / FAQ
   Added after the main stylesheet so these approved section treatments remain
   authoritative across desktop, tablet, mobile and RTL.
   ========================================================================== */

/* ---------- NIPT infographic: precise vertical editorial track ---------- */
.nipt__infographic{
  overflow:hidden;
  background:rgba(255,255,255,.34);
  border:1px solid rgba(13,36,54,.11);
  border-radius:16px;
  padding:clamp(2rem,3.5vw,3.25rem);
  box-shadow:0 28px 70px -58px rgba(13,36,54,.45);
}
.infographic__track{
  position:relative;
  display:grid;
  gap:clamp(1.9rem,3vw,2.85rem);
  padding:0;
}
.infographic__line{
  position:absolute;
  z-index:0;
  inset-inline-start:13px;
  top:14px;
  bottom:14px;
  width:1px;
  height:auto;
  background:linear-gradient(to bottom, rgba(45,139,97,.78), rgba(1,103,182,.7));
  transform-origin:top;
}
.infographic__stage{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:28px 28px minmax(0,1fr);
  column-gap:14px;
  align-items:start;
  min-height:42px;
  padding:0;
  transition:none;
}
.infographic__stage:hover{ transform:none; }
.infographic__node{
  position:relative;
  inset:auto;
  top:auto;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  margin:0;
  border-radius:50%;
  background:var(--ink);
  color:var(--paper);
  box-shadow:0 0 0 5px var(--paper);
  font:700 .7rem/1 var(--font-body);
  opacity:1;
  transform:none;
  transition:box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.infographic__icon{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  margin:0;
  color:var(--teal);
}
.infographic__icon svg{ display:block; width:18px; height:18px; }
.infographic__stage p{
  margin:0;
  padding:2px 0 0;
  font-size:clamp(.92rem,1.05vw,1rem);
  font-weight:650;
  line-height:1.35;
  text-wrap:pretty;
}
.infographic__stage:hover .infographic__node{
  background:#0F3D37;
  box-shadow:0 0 0 5px rgba(225,237,244,.92);
}
.infographic__stage:hover .infographic__icon{ transform:translateY(-1px); }

/* Progressive enhancement: content is readable without JS; only the JS-added
   ready class creates the initial hidden state. */
.nipt__infographic.is-reveal-ready .infographic__line{
  transform:scaleY(0);
}
.nipt__infographic.is-reveal-ready .infographic__stage{
  opacity:0;
  transform:translate3d(0,30px,0);
}
.nipt__infographic.is-reveal-ready.is-visible .infographic__line{
  transform:scaleY(1);
  transition:transform .78s cubic-bezier(.22,1,.36,1);
}
.nipt__infographic.is-reveal-ready.is-visible .infographic__stage{
  opacity:1;
  transform:translate3d(0,0,0);
  transition:opacity .64s cubic-bezier(.22,1,.36,1), transform .64s cubic-bezier(.22,1,.36,1);
}
.nipt__infographic.is-visible .infographic__stage:nth-of-type(1){ transition-delay:.44s; }
.nipt__infographic.is-visible .infographic__stage:nth-of-type(2){ transition-delay:.60s; }
.nipt__infographic.is-visible .infographic__stage:nth-of-type(3){ transition-delay:.76s; }
.nipt__infographic.is-visible .infographic__stage:nth-of-type(4){ transition-delay:.92s; }

/* ---------- How it works: single progress rail + ordered step entrance ---------- */
.how .section__title{ max-width:22ch; margin-inline:auto; text-wrap:balance; }
.timeline{ margin-top:clamp(3rem,5vw,4.75rem); }
.timeline__rail{
  height:2px;
  margin-bottom:clamp(2.5rem,4vw,3.6rem);
  background:rgba(13,36,54,.09);
  overflow:visible;
}
.timeline__thread{ display:none; }
.timeline__fill{
  inset-block:0;
  height:2px;
  clip-path:none;
  border-radius:99px;
  background:linear-gradient(90deg,var(--teal),#4B9BCB);
  box-shadow:0 0 16px rgba(1,103,182,.2);
}
.timeline__list{ gap:clamp(1.5rem,3vw,3.25rem); }
.timeline__step{
  border:0;
  padding-top:0;
  min-width:0;
}
.timeline__index{
  display:block;
  margin-bottom:.8rem;
  font-family:var(--font-body);
  font-size:clamp(1.75rem,2.6vw,2.35rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-.06em;
}
.timeline__step:nth-child(1) .timeline__index{ color:#2D8B61; }
.timeline__step:nth-child(2) .timeline__index{ color:#0167B6; }
.timeline__step:nth-child(3) .timeline__index{ color:#37AA77; }
.timeline__step:nth-child(4) .timeline__index{ color:#164569; }
.timeline__step h3{
  margin-bottom:.55rem;
  font-family:var(--font-display);
  font-size:clamp(1.12rem,1.45vw,1.38rem);
  line-height:1.2;
  text-wrap:balance;
}
.timeline__step p{ max-width:28ch; font-size:.9rem; line-height:1.7; text-wrap:pretty; }
/* Entrance direction is right-to-left (each step slides in from the right),
   not bottom-up — mirrored for RTL below so it still enters from the
   trailing edge in Arabic. */
.timeline.is-sequence-ready .timeline__step{
  opacity:0;
  transform:translate3d(44px,0,0);
}
.timeline.is-sequence-ready.is-sequence-visible .timeline__step{
  opacity:1;
  transform:translate3d(0,0,0);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
html[dir="rtl"] .timeline.is-sequence-ready .timeline__step{
  transform:translate3d(-44px,0,0);
}
.timeline.is-sequence-visible .timeline__step:nth-child(1){ transition-delay:.08s; }
.timeline.is-sequence-visible .timeline__step:nth-child(2){ transition-delay:.24s; }
.timeline.is-sequence-visible .timeline__step:nth-child(3){ transition-delay:.40s; }
.timeline.is-sequence-visible .timeline__step:nth-child(4){ transition-delay:.56s; }

@media (max-width:900px){
  /* Vertically stacked on mobile — a shorter horizontal offset keeps the
     slide readable without the step visibly crossing the timeline rail. */
  .timeline.is-sequence-ready .timeline__step{ transform:translate3d(26px,0,0); }
  html[dir="rtl"] .timeline.is-sequence-ready .timeline__step{ transform:translate3d(-26px,0,0); }
}

/* ---------- Screening: equal, calm and centred reference grid ---------- */
.screening .section__title{ text-wrap:balance; }
.screening__grid{
  gap:clamp(1rem,2vw,1.6rem);
  margin-top:clamp(2.75rem,5vw,4.25rem);
}
.card--screening{
  flex:0 1 calc(33.333% - 1.1rem);
  max-width:none;
  min-width:280px;
  min-height:172px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(13,36,54,.11);
  border-radius:18px;
  padding:clamp(1.7rem,2.5vw,2.3rem);
  box-shadow:none;
}
.card--screening:hover{
  transform:translateY(-3px);
  background:rgba(225,237,244,.36);
  border-color:rgba(1,103,182,.38);
  box-shadow:0 22px 48px -40px rgba(13,36,54,.45);
}
.card--screening h3{ font-size:clamp(1.05rem,1.4vw,1.22rem); }
.card--screening p{ color:var(--ink-soft); }
.screening .section__note{ max-width:62ch; line-height:1.65; }

/* ---------- About + clinical facts bar ---------- */
.about__grid{ gap:clamp(3.5rem,7vw,7rem); }
.about__photo{
  border-radius:16px;
  box-shadow:0 32px 70px -50px rgba(13,36,54,.5);
}
.about__text[data-observe], .about__visual[data-observe]{
  transition-duration:.85s;
}
.about__visual[data-observe]{ transform:translateY(30px) scale(.985); }
.about__visual[data-observe].is-visible{ transform:none; }
.values-list li{
  position:relative;
  padding-inline-start:1.7rem;
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.values-list li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:1.12rem;
  width:9px;
  height:9px;
  border:1px solid var(--teal);
  border-radius:3px;
  transform:rotate(45deg);
}
.values-list li:hover{ color:#155E54; transform:translateX(2px); }
.stats{
  margin-top:clamp(3rem,6vw,5rem);
  border:0;
  padding-inline:clamp(1.25rem,4vw,3rem);
}
.stats__grid{
  overflow:hidden;
  padding:0;
  border:1px solid rgba(13,36,54,.12);
  border-radius:16px;
  background:rgba(255,255,255,.28);
  box-shadow:0 26px 70px -58px rgba(13,36,54,.55);
}
.stats__item{
  min-height:190px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:2rem 1.25rem;
  border-inline-start:1px solid rgba(13,36,54,.1);
}
.stats__item:first-child{ border-inline-start:0; }
.stats__icon{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  color:var(--teal);
  transition:transform .3s var(--ease);
}
.stats__icon svg{ width:19px; height:19px; }
.stats__label{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.stats__big{
  max-width:12ch;
  font-size:clamp(1.35rem,2.1vw,1.9rem);
  line-height:1.18;
  text-wrap:balance;
}
.stats__item:hover .stats__icon{ transform:translateY(-3px); }
.stats[data-observe] .stats__item{ opacity:0; transform:translateY(22px); }
.stats[data-observe].is-visible .stats__item{
  opacity:1;
  transform:none;
  transition:opacity .65s var(--ease), transform .65s var(--ease);
}
.stats[data-observe].is-visible .stats__item:nth-child(1){ transition-delay:.06s; }
.stats[data-observe].is-visible .stats__item:nth-child(2){ transition-delay:.18s; }
.stats[data-observe].is-visible .stats__item:nth-child(3){ transition-delay:.30s; }

/* ---------- FAQ: approved two-column editorial layout + sticky intro ---------- */
.faq__grid{ align-items:start; }
.faq__intro{
  position:sticky;
  top:calc(var(--header-h) + 1.25rem);
  align-self:start;
}
.faq .accordion__item{ overflow:clip; }
.faq .accordion__trigger{ transition:padding .3s var(--ease), color .25s var(--ease), background-color .25s var(--ease); }
.faq .accordion__panel{ transition:height .45s cubic-bezier(.22,1,.36,1); }

@media (max-width:999px){
  .faq__grid{ grid-template-columns:1fr; gap:1.5rem; }
  .faq__intro{
    /* A static intro card here, not sticky — on a small screen a pinned
       heading permanently eats into the viewport while reading through the
       questions, which read as more annoying than useful. */
    position:static;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(190px,.7fr);
    gap:.75rem 1.5rem;
    align-items:end;
    padding:1rem 1.15rem;
    margin-inline:-.4rem;
    border:1px solid rgba(13,36,54,.08);
    border-radius:18px;
    background:rgba(243,247,246,.88);
    -webkit-backdrop-filter:blur(14px) saturate(135%);
    backdrop-filter:blur(14px) saturate(135%);
    box-shadow:0 18px 42px -34px rgba(13,36,54,.42);
  }
  .faq__intro .eyebrow{ grid-column:1/-1; margin:0; }
  .faq__title{ max-width:12ch; margin:0; font-size:clamp(2.2rem,7vw,3.2rem); }
  .faq__desc{ margin:0; max-width:36ch; }
  .faq__contact{ grid-column:2; margin:0; }
  .faq .accordion{ margin-top:.25rem; }

  .timeline__rail{
    inset-inline-start:9px;
    top:2px;
    height:calc(100% - 4px);
    margin:0;
    background:rgba(13,36,54,.09);
  }
  .timeline__fill{ height:0%; width:2px !important; }
  .timeline__list{ gap:2.25rem; }
  .timeline__step{ padding-inline-start:.3rem; }
  .timeline__step p{ max-width:42ch; }
  .timeline__index{ font-size:1.85rem; }

  .card--screening{ flex-basis:calc(50% - .8rem); min-width:260px; }
}

@media (max-width:640px){
  .nipt__infographic{ padding:1.5rem 1.25rem; border-radius:22px; }
  .infographic__track{ gap:1.55rem; }
  .infographic__stage{ grid-template-columns:28px 24px minmax(0,1fr); column-gap:10px; }
  .infographic__icon{ width:24px; height:28px; }
  .infographic__icon svg{ width:16px; height:16px; }

  .timeline{ padding-inline-start:2.2rem; }
  .timeline__rail{ inset-inline-start:8px; }
  .timeline__list{ gap:2rem; }
  .timeline__step h3{ font-size:1.18rem; }
  .timeline__step p{ font-size:.88rem; }

  .card--screening{
    flex-basis:100%;
    min-width:0;
    min-height:150px;
    padding:1.5rem;
  }

  .values-list{ grid-template-columns:1fr; gap:.55rem; }
  .stats{ padding-inline:1rem; }
  .stats__grid{ grid-template-columns:1fr; border-radius:20px; }
  .stats__item{
    min-height:145px;
    border-inline-start:0;
    border-top:1px solid rgba(13,36,54,.1);
    padding:1.6rem 1.2rem;
  }
  .stats__item:first-child{ border-top:0; }
  .stats__big{ max-width:16ch; font-size:1.55rem; }

  .faq{ padding-block:3rem 4.25rem; }
  .faq__intro{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.45rem 1rem;
    padding:.85rem 1rem;
    margin-inline:0;
    border-radius:16px;
  }
  .faq__intro .eyebrow{ flex:0 0 100%; font-size:.65rem; }
  .faq__title{ max-width:none; flex:1 1 210px; font-size:clamp(1.9rem,9vw,2.55rem); line-height:1; }
  .faq__desc{ display:none; }
  .faq__contact{ grid-column:auto; flex:0 0 auto; font-size:.82rem; }
  .faq .accordion__trigger{ min-height:62px; padding:1.05rem .35rem 1.05rem .65rem; font-size:.92rem; }
  .faq .accordion__icon{ width:29px; height:29px; }
}

@media (prefers-reduced-motion:reduce){
  .nipt__infographic.is-reveal-ready .infographic__line{ transform:none; }
  .nipt__infographic.is-reveal-ready .infographic__stage,
  .timeline.is-sequence-ready .timeline__step,
  .stats[data-observe] .stats__item{
    opacity:1;
    transform:none;
  }
}