/* ==========================================================================
   VARIJA IVF FERTILITY CENTRE
   Design system + component library
   --------------------------------------------------------------------------
   Structure
   01  Fonts
   02  Design tokens
   03  Reset & base
   04  Typography
   05  Layout primitives
   06  Buttons & links
   07  Header / navigation
   08  Hero
   09  Media placeholders
   10  Cards & grids
   11  Stats, marquee, trust
   12  Tabs & accordion
   13  Stories / slider
   14  Forms
   15  Footer & mobile CTA bar
   16  Motion & reveal
   17  Utilities
   18  Responsive
   ========================================================================== */


/* 01  FONTS =============================================================== */
/* All fonts are self hosted from assets/fonts/. Nothing is requested from
   Google, which removes a third party round trip and keeps the site fast
   and privacy clean.

   Poppins is used for both headings and body text, site wide. */

@font-face { font-family:'Poppins'; src:url('../fonts/poppins-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-latin-700-normal.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-latin-800-normal.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-latin-900-normal.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }


/* 02  DESIGN TOKENS ======================================================= */
/* Palette updated to the recommended colour system.
   --------------------------------------------------------------------------
   One convention runs through this block and it is worth knowing before you
   edit anything: several brand colours exist twice, as a FILL and as an INK.

     --rose      #C9546C   fill: badges, gradients, bars, chips
     --rose-ink  #A8405A   text: eyebrows, accent words, links

   Deep Rose on Warm Ivory measures 4.06:1, which fails the 4.5:1 minimum for
   text. Champagne is far worse at 2.25:1. Rather than weaken the brand
   colours, the darker ink variants carry the text and the brand values carry
   every fill, so the palette reads exactly as specified and the page stays
   legible. Never set body or label text to --rose or --gold directly.

   The action rule from the original build still holds: teal is the colour of
   every button, rose is the colour of emotion. */
:root {
  /* ---- Core brand ---- */
  --teal:        #176B73;   /* Deep Teal      · primary CTA            */
  --teal-900:    #104E56;   /* Dark Teal      · hover, dark accents    */
  --navy:        #173C47;   /* Medical Navy   · headings, footer       */
  --blush:       #E78898;   /* Warm Blush     · human, emotional       */
  --rose:        #C9546C;   /* Deep Rose      · highlights, special CTA*/
  --gold:        #C7A46A;   /* Champagne      · premium micro-accent   */

  /* ---- Ink variants, for text only ---- */
  --rose-ink:    #A8405A;
  --gold-ink:    #8A6A2A;
  --teal-ink:    #135A61;

  /* ---- Backgrounds & surfaces ---- */
  /* Every surface tint runs at 50% strength: each value is the palette
     colour mixed half and half with white, which keeps the exact hue of the
     spec while halving how much of it you see. The full-strength value is in
     the comment beside each one, so the original palette can be restored by
     swapping the hex back. Brand colours, text and borders are untouched. */
  --ivory:       #FFFCFA;   /* Warm Ivory     · page background        · 100% = #FFF9F5 */
  --pink-050:    #FDF4F6;   /* Soft Pink      · fertility, testimonial · 100% = #FBE9ED */
  --peach-050:   #FDF6F3;   /* Warm Peach     · alternate sections     · 100% = #FBEDE7 */
  --mint-050:    #F5FAF9;   /* Soft Mint      · medical, info          · 100% = #EAF5F3 */
  --neutral:     #FAF8F5;   /* Warm Neutral   · secondary background   · 100% = #F5F0EB */
  --white:       #FFFFFF;   /* Pure White     · cards, forms           */

  /* ---- Derived tints & shades ---- */
  --rose-700:    #B2475F;
  --rose-100:    #FBEEF1;   /* 100% = #F6DDE2 */
  --rose-050:    var(--pink-050);
  --blush-050:   var(--pink-050);
  --teal-700:    #145F66;
  --teal-100:    var(--mint-050);
  --navy-700:    #2A5462;
  --navy-500:    #5D6D70;
  --navy-300:    #89989A;
  --navy-100:    #D9E3E2;
  --gold-100:    #FBF7EF;   /* 100% = #F6EEDF */
  --ivory-deep:  var(--neutral);
  --wa:          #128C7E;   /* WhatsApp green, matches .btn--wa and the floating action button */
  --wa-100:      #E8F4F1;

  /* ---- Semantic ---- */
  --bg:            var(--ivory);
  --bg-alt:        var(--white);
  --text:          #18363D;   /* Primary Text   */
  --text-muted:    #5D6D70;   /* Secondary Text */
  --text-faint:    #89989A;   /* Muted, labels and metadata only */
  --text-invert:   #FFFFFF;
  --line:          #E2E8E6;   /* Border          */
  --line-strong:   #CBD6D4;
  --focus:         #8FC4C6;   /* Input focus ring */
  --hover-border:  #BAD8D6;   /* Interactive cards */

  /* ---- Gradients ---- */
  --grad-primary:  linear-gradient(135deg, #C9546C 0%, #E78898 100%);
  --grad-primary-r:linear-gradient(115deg, #A8405A 0%, #C9546C 45%, #E78898 100%);
  --grad-wellness: linear-gradient(180deg, #FFF9F5 0%, #FBE9ED 100%);
  --grad-wellness-x: linear-gradient(100deg, #FFF9F5 0%, #FBE9ED 100%);
  --grad-teal:     linear-gradient(135deg, #104E56 0%, #176B73 100%);
  --grad-gold-rule:linear-gradient(90deg, rgba(199,164,106,0) 0%, #C7A46A 50%, rgba(199,164,106,0) 100%);

  /* ---- Typography ---- */
  --font-head: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid scale: interpolates between the mobile and desktop sizes in the
     brand spec, 375px -> 1440px viewport. */
  --fs-hero:   clamp(2.625rem, 1.30rem + 5.65vw, 4.5rem);   /* 42 -> 72 */
  --fs-h1:     clamp(2.25rem, 1.36rem + 3.77vw, 3.5rem);    /* 36 -> 56 */
  --fs-h2:     clamp(1.875rem, 1.34rem + 2.26vw, 2.625rem); /* 30 -> 42 */
  --fs-h3:     clamp(1.5rem, 1.36rem + 0.60vw, 1.75rem);    /* 24 -> 28 */
  --fs-h4:     clamp(1.25rem, 1.18rem + 0.30vw, 1.375rem);
  --fs-lead:   clamp(1.0625rem, 0.98rem + 0.38vw, 1.25rem); /* 17 -> 20 */
  --fs-body:   1rem;                                        /* 16 */
  --fs-sm:     0.9375rem;
  --fs-xs:     0.8125rem;
  --fs-eyebrow:0.75rem;

  --lh-tight: 1.06;
  --lh-head:  1.16;
  --lh-body:  1.68;

  /* ---- Space ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;    --sp-11: 6.5rem;  --sp-12: 8rem;

  --section-y: clamp(4.5rem, 3rem + 6vw, 8rem);
  --gutter:    clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
  --maxw:      1240px;
  --maxw-text: 720px;

  /* Card rhythm. Raised from the previous values after the review flagged
     cards sitting too close together. */
  --grid-gap:  clamp(1.5rem, 1rem + 2vw, 2.25rem);

  /* ---- Radius ---- */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 16px;
  --r-lg: 24px; --r-xl: 32px;  --r-pill: 999px;

  /* ---- Shadow ---- */
  --sh-xs: 0 1px 2px rgba(24,54,61,.05);
  --sh-sm: 0 2px 8px rgba(24,54,61,.06), 0 1px 2px rgba(24,54,61,.04);
  --sh-md: 0 10px 30px -8px rgba(24,54,61,.12), 0 2px 8px rgba(24,54,61,.05);
  --sh-lg: 0 24px 60px -16px rgba(24,54,61,.18), 0 4px 12px rgba(24,54,61,.05);
  --sh-rose: 0 18px 44px -14px rgba(201,84,108,.35);
  --sh-teal: 0 14px 34px -12px rgba(23,107,115,.45);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: .18s; --dur-2: .32s; --dur-3: .6s; --dur-4: .9s;

  --header-h: 84px;
}


/* 03  RESET & BASE ======================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

/* Inline icon default. Zero specificity, so any explicit rule below wins.
   Without this an inline <svg> with no size fills its container. */
svg { flex: none; }
:where(a, button, li, p, span, div, i, td, th, strong, label, h1, h2, h3, h4) > svg { width: 1.15em; height: 1.15em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--rose); color: #fff; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }


/* 04  TYPOGRAPHY ========================================================== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--navy);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.h-hero { font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: -0.035em; font-weight: 700; }
h1, .h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; }
h2, .h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }

p { text-wrap: pretty; }
.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-muted);
}
.small { font-size: var(--fs-sm); }
.xs    { font-size: var(--fs-xs); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rose-ink);
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: .55;
}
.eyebrow--teal { color: var(--teal); }
.eyebrow--gold { color: var(--gold-ink); }
.eyebrow--light { color: rgba(255,255,255,.82); }
.eyebrow--center::before { display: none; }

/* Rose is the emotional ink. Used on a word or two inside a headline. */
.accent      { color: var(--rose-ink); }
.accent-teal { color: var(--teal); }
.accent-gold { color: var(--gold-ink); }
.grad-text {
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.serif-note {
  font-family: var(--font-head);
  font-weight: 600;
  font-style: normal;
}


/* 05  LAYOUT PRIMITIVES =================================================== */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 900px; }
.container--wide   { max-width: 1400px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.section--flush-top { padding-top: 0; }
.section--ivory  { background: var(--neutral); }
.section--white  { background: var(--white); }
.section--wellness { background: var(--grad-wellness); }
.section--navy   { background: var(--navy); color: rgba(255,255,255,.86); }
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--teal   { background: var(--grad-teal); color: rgba(255,255,255,.88); }
.section--teal h2, .section--teal h3 { color: #fff; }

.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head h2 + p { margin-top: 1.125rem; }

.grid { display: grid; gap: clamp(1.25rem, .8rem + 1.6vw, 2rem); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.split--60 { grid-template-columns: 1.25fr 1fr; }
.split--40 { grid-template-columns: 1fr 1.25fr; }
.split--top { align-items: start; }

.divider-gold {
  height: 1px; background: var(--grad-gold-rule); border: 0; margin-block: var(--sp-6);
}


/* 06  BUTTONS & LINKS ===================================================== */
/* RULE: teal = action, always. Rose = emotion, never a primary button.      */
.btn {
  --btn-bg: var(--teal);
  white-space: nowrap;
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 600; line-height: 1;
  letter-spacing: -0.01em;
  padding: 1.0625rem 1.75rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid transparent;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              background-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
  will-change: transform;
}
.btn svg { width: 1.15em; height: 1.15em; }
.btn:hover  { transform: translateY(-2px); box-shadow: var(--sh-teal); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--teal); box-shadow: 0 8px 20px -10px rgba(35,108,131,.6); }
.btn--primary:hover { background: var(--teal-700); }

.btn--ghost {
  background: transparent; color: var(--navy);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--white); border-color: var(--teal); color: var(--teal); box-shadow: var(--sh-md); }

.btn--light {
  background: rgba(255,255,255,.14); color: #fff;
  border-color: rgba(255,255,255,.34);
  backdrop-filter: blur(6px);
}
.btn--light:hover { background: #fff; color: var(--navy); box-shadow: var(--sh-lg); }

.btn--white { background: #fff; color: var(--teal); }
.btn--white:hover { background: #fff; color: var(--teal-900); box-shadow: var(--sh-lg); }

.btn--wa { background: #128C7E; }
.btn--wa:hover { background: #0F7A6D; box-shadow: 0 14px 34px -12px rgba(18,140,126,.5); }

.btn--sm { padding: .8125rem 1.25rem; font-size: .9375rem; }
.btn--lg { padding: 1.1875rem 2.125rem; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; align-items: center; }

/* Text link with animated underline */
.tlink {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--teal);
  position: relative; padding-bottom: 2px;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-2) var(--ease);
}
.tlink:hover::after { transform: scaleX(1); transform-origin: left; }
.tlink { white-space: nowrap; }
.tlink svg { width: 1.05em; height: 1.05em; transition: transform var(--dur-2) var(--ease); }
.tlink:hover svg { transform: translateX(3px); }

/* Small pill badge */
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .01em;
  padding: .4375rem .75rem; border-radius: var(--r-pill);
  background: var(--rose-050); color: var(--rose-ink);
  border: 1px solid rgba(201,84,108,.18);
}
.pill--teal { background: var(--teal-100); color: var(--teal); border-color: rgba(35,108,131,.18); }
.pill--gold { background: var(--gold-100); color: var(--gold-ink); border-color: rgba(199,164,106,.36); }
.pill--light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.28); }


/* 07  HEADER / NAV ======================================================== */
.topbar {
  background: var(--navy);
  color: rgba(255,255,255,.78);
  font-size: var(--fs-xs);
}
.topbar__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 40px; flex-wrap: wrap;
}
.topbar a { color: #fff; font-weight: 500; }
.topbar a:hover { color: var(--blush); }
.topbar__list { display: flex; gap: 1.5rem; align-items: center; }
.topbar__list li, .topbar__list a { display: inline-flex; align-items: center; gap: .4375rem; }
.topbar svg { width: 13px; height: 13px; opacity: .8; }

/* The bar is white, not ivory. It still carries a blur, so the alpha lets a
   trace of whatever scrolls underneath come through and the bar reads as
   glass rather than as a flat plate; once stuck it firms up almost solid so
   the navigation never loses contrast against a busy section. */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.header.is-stuck {
  background: rgba(255,255,255,.96);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -18px rgba(23,53,71,.5);
}
/* A browser without backdrop-filter would show the copy underneath straight
   through the 82%, so those get a solid white bar instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header, .header.is-stuck { background: #fff; }
}
.header__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: var(--header-h);
}

.logo { display: inline-flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.logo__img { height: 60px; width: auto; display: block; }
.logo__img-wrap {
  display: inline-flex; align-items: center;
  background: #fff; padding: .5rem .75rem; border-radius: var(--r-md);
}
.logo__txt { display: flex; flex-direction: column; line-height: 1.05; }
.logo__name {
  font-family: var(--font-head); font-weight: 700; font-size: 1.3125rem;
  letter-spacing: -.02em; color: var(--navy);
}
.logo__sub {
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
}
/* The brand line is a sentence, not a label, so it drops the uppercase
   letter-spacing treatment and sits on one line beside the mark. */
.logo__sub--tagline {
  text-transform: none; letter-spacing: .005em; font-size: .6875rem;
  font-weight: 500; white-space: nowrap;
}
@media (max-width: 400px) { .logo__sub--tagline { display: none; } }

.nav { display: flex; align-items: center; gap: .25rem; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .625rem .875rem; border-radius: var(--r-pill);
  font-size: .9375rem; font-weight: 500; color: var(--navy);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.nav__link:hover { color: var(--rose-ink); background: rgba(201,84,108,.07); }
.nav__item.is-active > .nav__link { color: var(--rose-ink); font-weight: 600; }
.nav__link { white-space: nowrap; }
.nav__link svg { width: 12px; height: 12px; opacity: .5; transition: transform var(--dur-2) var(--ease); }
.nav__item:hover .nav__link svg { transform: rotate(180deg); }

.nav__drop {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 288px; padding: .625rem;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2);
}
.nav__item:hover .nav__drop,
.nav__item:focus-within .nav__drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__drop a {
  display: block; padding: .6875rem .875rem; border-radius: var(--r-sm);
  font-size: .9375rem; font-weight: 500;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav__drop a span { display: block; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; margin-top: .1rem; }
.nav__drop a:hover { background: var(--rose-050); color: var(--rose-ink); }

.header__cta { display: flex; align-items: center; gap: .625rem; }

.burger {
  display: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); place-items: center;
}
.burger span {
  display: block; width: 18px; height: 1.75px; background: var(--navy); border-radius: 2px;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);
}
.burger span + span { margin-top: 3px; }
.burger.is-open span:nth-child(1) { transform: translateY(4.75px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-4.75px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 200;
  width: min(86vw, 400px);
  background: var(--ivory);
  padding: 1.25rem var(--gutter) 2rem;
  overflow-y: auto;
  box-shadow: -18px 0 40px -20px rgba(23,53,71,.35);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-3) var(--ease-out), visibility var(--dur-3);
}
.drawer.is-open { transform: translateX(0); visibility: visible; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; margin-bottom: 1rem; }
.drawer__nav > li { border-bottom: 1px solid var(--line); }
.drawer__nav > li > a,
.drawer__toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 1.0625rem 0; font-family: var(--font-head); font-weight: 600; font-size: 1.25rem;
  color: var(--navy); text-align: left;
}
.drawer__toggle svg { width: 14px; transition: transform var(--dur-2) var(--ease); }
.drawer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); }
.drawer__sub > div { overflow: hidden; }
.drawer__toggle[aria-expanded="true"] + .drawer__sub { grid-template-rows: 1fr; }
.drawer__sub a { display: block; padding: .625rem 0 .625rem 1rem; color: var(--text-muted); font-size: 1rem; border-left: 2px solid var(--line); }
.drawer__sub a:hover { color: var(--rose-ink); border-color: var(--rose); }
.drawer__foot { margin-top: 2rem; display: grid; gap: .75rem; }


/* 08  HERO ================================================================ */
.hero {
  position: relative;
  padding-block: clamp(3rem, 1.5rem + 6vw, 6rem) clamp(4rem, 2rem + 7vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background: var(--grad-wellness);
}
/* Soft rose mesh. Blush stays low opacity so the page never becomes a pink wash. */
.hero__bg::before,
.hero__bg::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(70px);
}
.hero__bg::before {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  right: -8vw; top: -14vw;
  background: radial-gradient(circle, rgba(232,161,184,.55) 0%, rgba(232,161,184,0) 70%);
}
.hero__bg::after {
  width: 38vw; height: 38vw; max-width: 520px; max-height: 520px;
  left: -12vw; bottom: -16vw;
  background: radial-gradient(circle, rgba(215,162,58,.20) 0%, rgba(215,162,58,0) 70%);
}
.hero__grid {
  display: grid; grid-template-columns: 1.08fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center;
}
.hero__copy > * + * { margin-top: 1.5rem; }
.hero .lead { max-width: 46ch; }

.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .875rem .5rem .5rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.72); border: 1px solid rgba(181,47,104,.14);
  font-size: var(--fs-xs); font-weight: 600; color: var(--navy);
  box-shadow: var(--sh-xs); backdrop-filter: blur(6px);
}
.hero__badge i {
  width: 22px; height: 22px; border-radius: 50%; background: var(--grad-primary);
  display: grid; place-items: center; flex: none;
}
.hero__badge i svg { width: 12px; height: 12px; }

.hero__proof {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 1.5rem 2rem;
  padding-top: 2rem; margin-top: 2.25rem; border-top: 1px solid rgba(23,53,71,.1);
}
.hero__proof div strong {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 1.875rem; letter-spacing: -.03em; color: var(--navy); line-height: 1.1;
}
.hero__proof div > span { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: .02em; }
.hero__proof div strong span { font-size: inherit; color: inherit; letter-spacing: inherit; }

.hero__visual { position: relative; }
.hero__visual .media { border-radius: var(--r-xl); box-shadow: var(--sh-lg); }

/* Floating credential card over the hero image */
.float-card {
  position: absolute; z-index: 3;
  background: #fff; border-radius: var(--r-lg);
  padding: 1.125rem 1.25rem; box-shadow: var(--sh-lg);
  border: 1px solid var(--line);
  display: flex; align-items: center; gap: .875rem;
  max-width: 260px;
}
.float-card--bl { left: -1.5rem; bottom: 2rem; }
.float-card--tr { right: -1.25rem; top: 1.75rem; }
.float-card i {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--teal-100); color: var(--teal);
}
.float-card i svg { width: 20px; height: 20px; }
.float-card strong { display: block; font-family: var(--font-head); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; }
.float-card span { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; display: block; }

/* Inner page hero */
.phero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(3rem, 2rem + 4vw, 5rem);
  background: var(--grad-wellness-x);
}
.phero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px);
  width: 40vw; height: 40vw; max-width: 560px; max-height: 560px;
  right: -6vw; top: -18vw;
  background: radial-gradient(circle, rgba(232,161,184,.5) 0%, rgba(232,161,184,0) 70%);
}
.phero__in { max-width: 780px; }
.phero .lead { margin-top: 1.25rem; }

.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 1.25rem; }
.crumbs a:hover { color: var(--rose); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: .5rem; opacity: .4; }
.crumbs li { display: inline-flex; }


/* 09  MEDIA PLACEHOLDERS ================================================== */
/* Every image slot in the build is one of these. Replace the whole element
   with an <img>. The brief for the shot is written inside it. */
.media {
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--grad-wellness-x);
  border-radius: var(--r-lg);
  isolation: isolate;
}
.media::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    repeating-linear-gradient(45deg,
      rgba(181,47,104,.05) 0 12px,
      rgba(181,47,104,0) 12px 24px);
}
.media__note {
  position: relative; z-index: 1;
  text-align: center; padding: 1.5rem; max-width: 90%;
}
.media__note b {
  display: inline-block; font-family: var(--font-body); font-size: var(--fs-xs);
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rose); margin-bottom: .5rem;
}
.media__note span { display: block; font-size: var(--fs-sm); color: var(--navy-500); line-height: 1.5; }
.media__note em { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--navy-300); margin-top: .5rem; }

.media--1x1  { aspect-ratio: 1/1; }
.media--4x3  { aspect-ratio: 4/3; }
.media--3x2  { aspect-ratio: 3/2; }
.media--16x9 { aspect-ratio: 16/9; }
.media--4x5  { aspect-ratio: 4/5; }
.media--3x4  { aspect-ratio: 3/4; }
.media--tall { aspect-ratio: 5/7; }
.media--teal { background: var(--teal-100); }
.media--teal .media__note b { color: var(--teal); }
.media--round { border-radius: var(--r-pill); }
.media--circle { border-radius: 50%; }

/* Placeholder highlighter. Add class "show-ph" to <html> to outline every
   unreplaced item on the page. Toggled by the ?ph=1 query string. */
/* Note: position is set only inside the debug mode, so .ph never disturbs
   the layout of an element that is absolutely positioned. */
.show-ph .ph { position: relative; }
.show-ph .ph {
  outline: 2px dashed var(--rose) !important;
  outline-offset: 2px;
  background-color: rgba(181,47,104,.05);
}
.show-ph .ph::after {
  content: "REPLACE"; position: absolute; top: 0; right: 0; z-index: 40;
  background: var(--rose); color: #fff; font-size: 9px; font-weight: 700;
  letter-spacing: .1em; padding: 2px 5px; border-radius: 0 0 0 4px;
  pointer-events: none;
}


/* 10  CARDS & GRIDS ======================================================= */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  position: relative; overflow: hidden;
  height: 100%;
}
.card--hover:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: rgba(181,47,104,.2); }
.card--flat { box-shadow: none; }
.card--ivory { background: var(--ivory); }
.card--blush { background: var(--blush-050); border-color: rgba(181,47,104,.12); }
.card--teal  { background: var(--teal-100); border-color: rgba(35,108,131,.14); }
.card__ico {
  width: 52px; height: 52px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 1.25rem;
  background: var(--teal-100); color: var(--teal);
}
.card__ico svg { width: 24px; height: 24px; }
.card__ico--rose { background: var(--rose-050); color: var(--rose); }
.card__ico--gold { background: var(--gold-100); color: #A87B18; }
.card__ico--wa   { background: var(--wa-100); color: var(--wa); }
.card h3 { margin-bottom: .625rem; }
.card p { color: var(--text-muted); font-size: var(--fs-sm); }
.card__foot { margin-top: 1.25rem; }

/* Treatment card with a top gradient rule that draws on hover */
.tcard { display: flex; flex-direction: column; }
.tcard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}
.tcard:hover::before { transform: scaleX(1); }
.tcard__meta {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem;
}
.tcard__meta span {
  font-size: var(--fs-xs); color: var(--text-muted);
  background: var(--ivory); border: 1px solid var(--line);
  padding: .3125rem .625rem; border-radius: var(--r-pill);
}
.tcard .card__foot { margin-top: auto; padding-top: 1.5rem; }

/* Numbered step card */
.step { position: relative; padding-left: 4.25rem; }
.step__n {
  position: absolute; left: 0; top: 0;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.125rem;
  background: #fff; color: var(--rose-ink);
  border: 1.5px solid rgba(201,84,108,.24);
  box-shadow: var(--sh-xs);
}
.steps-rail { position: relative; display: grid; gap: 2.25rem; }
.steps-rail::before {
  content: ""; position: absolute; left: 26px; top: 26px; bottom: 26px; width: 1.5px;
  background: linear-gradient(180deg, rgba(181,47,104,.28), rgba(181,47,104,.05));
}
.step h3 { font-size: 1.25rem; margin-bottom: .375rem; }
.step p { color: var(--text-muted); font-size: var(--fs-sm); }

/* Doctor card */
.doc { text-align: left; }
.doc .media { border-radius: var(--r-lg); margin-bottom: 1.25rem; }
.doc__name { font-size: 1.25rem; margin-bottom: .25rem; }
.doc__role { font-size: var(--fs-sm); color: var(--teal); font-weight: 600; }
.doc__qual { font-size: var(--fs-xs); color: var(--text-muted); margin-top: .5rem; }
.doc__tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .875rem; }

/* Pull quote */
.quote {
  position: relative;
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.4; letter-spacing: -.02em; color: var(--navy);
}
.quote::before {
  content: "\201C"; font-size: 5rem; line-height: 1; color: var(--blush);
  position: absolute; left: -.5rem; top: -1.75rem; z-index: -1; opacity: .8;
}

/* Feature list with ticks */
.ticks { display: grid; gap: .875rem; }
.ticks li { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--fs-sm); }
.ticks li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: var(--teal-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23176B73' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.ticks--light li::before {
  background-color: rgba(255,255,255,.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.ticks--rose li::before {
  background-color: var(--rose-050);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8405A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* "You may be here because" empathy chips */
.empathy { display: grid; gap: 1rem; }
.empathy li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.125rem 1.25rem 1.125rem 3.25rem; position: relative;
  font-size: var(--fs-sm); color: var(--navy); box-shadow: var(--sh-xs);
}
.empathy li::before {
  content: ""; position: absolute; left: 1.125rem; top: 1.375rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--rose); opacity: .6;
}


/* 11  STATS, MARQUEE, TRUST =============================================== */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff; overflow: hidden; box-shadow: var(--sh-sm);
}
.stat-strip > div { padding: clamp(1.5rem,1rem+1.4vw,2.25rem) .875rem; text-align: center; border-right: 1px solid var(--line); min-width: 0; }
.stat-strip > div:last-child { border-right: 0; }
.stat__n {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1;
  letter-spacing: -.035em; color: var(--rose-ink);
  white-space: nowrap;
}
.stat__n sup { font-size: .5em; vertical-align: super; margin-left: 2px; }
.stat__l { font-size: var(--fs-xs); color: var(--text-muted); margin-top: .625rem; letter-spacing: .02em; }
.stat-strip--teal .stat__n { color: var(--teal); }

.marquee {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; gap: 3.5rem; width: max-content; animation: slide 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: flex; align-items: center; gap: .625rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--navy-500);
  white-space: nowrap;
}
.marquee__item svg { width: 17px; height: 17px; color: var(--gold); flex: none; }
@keyframes slide { to { transform: translateX(-50%); } }

/* Outcome table */
.otable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.otable th, .otable td { padding: 1rem 1.125rem; text-align: left; border-bottom: 1px solid var(--line); }
.otable thead th {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1.5px solid var(--line-strong);
}
.otable tbody tr:hover { background: var(--rose-050); }
.otable td:first-child { font-weight: 600; color: var(--navy); }
.otable .bar {
  height: 8px; border-radius: 4px; background: var(--rose-100); overflow: hidden; min-width: 90px;
}
.otable .bar i { display: block; height: 100%; border-radius: 4px; background: var(--grad-primary); width: 0; transition: width 1.2s var(--ease-out); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.note {
  font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6;
  border-left: 2px solid var(--gold); padding-left: .875rem;
}


/* 12  TABS & ACCORDION ==================================================== */
.tabs__nav {
  display: flex; gap: .5rem; flex-wrap: wrap;
  padding: .375rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-pill); box-shadow: var(--sh-xs);
  width: max-content; max-width: 100%;
}
.tabs__btn {
  padding: .6875rem 1.25rem; border-radius: var(--r-pill);
  font-size: .9375rem; font-weight: 600; color: var(--text-muted);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  white-space: nowrap;
}
.tabs__btn:hover { color: var(--navy); }
.tabs__btn[aria-selected="true"],
.tabs__btn[aria-pressed="true"] { background: var(--grad-primary); color: #fff; box-shadow: var(--sh-rose); }
.tabs__panel[hidden] { display: none; }
.tabs__panel { animation: fadeUp .5s var(--ease-out) both; }

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.375rem 0; text-align: left;
  font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem;
  color: var(--navy); letter-spacing: -.015em;
  transition: color var(--dur-1) var(--ease);
}
.acc__btn:hover { color: var(--rose-ink); }
.acc__ico {
  flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  border: 1.5px solid var(--line-strong); position: relative;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
}
.acc__ico::before, .acc__ico::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--navy); border-radius: 2px;
  transition: background var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.acc__ico::before { width: 10px; height: 1.5px; }
.acc__ico::after  { width: 1.5px; height: 10px; }
.acc__btn[aria-expanded="true"] .acc__ico { background: var(--rose); border-color: var(--rose); transform: rotate(180deg); }
.acc__btn[aria-expanded="true"] .acc__ico::before { background: #fff; }
.acc__btn[aria-expanded="true"] .acc__ico::after  { opacity: 0; }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); }
.acc__btn[aria-expanded="true"] + .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding-bottom: 1.5rem; color: var(--text-muted); font-size: var(--fs-sm); max-width: 68ch; }
.acc__panel p + p { padding-top: 0; }


/* 13  STORIES / SLIDER ==================================================== */
.slider { position: relative; }
.slider__track {
  display: flex; gap: clamp(1rem,.6rem+1.4vw,1.75rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: 1rem;
  scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__slide { flex: 0 0 min(420px, 84vw); scroll-snap-align: start; }
.slider__ctrl { display: flex; gap: .625rem; margin-top: 1.75rem; align-items: center; }
.sbtn {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--line-strong); color: var(--navy);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.sbtn:hover { background: var(--teal); border-color: var(--teal); color: #fff; transform: translateY(-2px); }
.sbtn[disabled] { opacity: .32; pointer-events: none; }
.sbtn svg { width: 18px; height: 18px; }

.story {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; height: 100%; display: flex; flex-direction: column;
  box-shadow: var(--sh-sm);
}
.story .media { border-radius: 0; }
.story__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.story__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.story__q { font-size: var(--fs-sm); color: var(--navy); line-height: 1.65; flex: 1; }
.story__who { margin-top: 1.25rem; padding-top: 1.125rem; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text-muted); }
.story__who b { display: block; color: var(--navy); font-size: var(--fs-sm); font-family: var(--font-head); }

/* Large emotional CTA banner, one of only two uses of the primary gradient */
.cta-banner {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--grad-primary-r);
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  color: #fff;
}
.cta-banner h2 { color: #fff; }
.cta-banner p { color: rgba(255,255,255,.9); }
.cta-banner::after {
  content: ""; position: absolute; z-index: -1; inset: auto -10% -60% auto;
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 70%);
}
.cta-banner__grid { display: grid; grid-template-columns: 1.2fr auto; gap: 2.5rem; align-items: center; }


/* 14  FORMS =============================================================== */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  box-shadow: var(--sh-lg);
}
.field { display: grid; gap: .5rem; }
.field + .field, .form-row + .field, .field + .form-row, .form-row + .form-row { margin-top: 1.125rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; }
.label { font-size: var(--fs-sm); font-weight: 600; color: var(--navy); }
.label span { color: var(--rose); }
.input, .select, .textarea {
  width: 100%; padding: .9375rem 1.0625rem;
  background: var(--ivory);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--navy);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--navy-300); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; background: #fff;
  border-color: var(--focus);
  box-shadow: 0 0 0 4px rgba(143,196,198,.34);
}
.textarea { min-height: 112px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D6D70' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px;
  padding-right: 2.75rem;
}
.hint { font-size: var(--fs-xs); color: var(--text-muted); }
.err { font-size: var(--fs-xs); color: #C0392B; display: none; }
.field.is-invalid .input, .field.is-invalid .select { border-color: #C0392B; background: #FDF3F2; }
.field.is-invalid .err { display: block; }

/* Choice chips, used instead of a select for "what brings you here" */
.chips { display: flex; flex-wrap: wrap; gap: .625rem; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block; padding: .6875rem 1rem; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--ivory);
  font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
  transition: all var(--dur-2) var(--ease);
}
.chip span:hover { border-color: var(--blush); background: var(--rose-050); }
.chip input:checked + span { background: var(--rose); border-color: var(--rose); color: #fff; box-shadow: var(--sh-rose); }
.chip input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 2px; }

/* Multi step */
.fsteps { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.75rem; }
.fstep { flex: 1; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.fstep i { display: block; height: 100%; width: 0; background: var(--grad-primary); transition: width var(--dur-3) var(--ease-out); }
.fstep.is-done i, .fstep.is-current i { width: 100%; }
.fstep-label { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.fpanel[hidden] { display: none; }
.fpanel { animation: fadeUp .45s var(--ease-out) both; }
.form-nav { display: flex; gap: .75rem; margin-top: 1.75rem; }

.privacy-line {
  display: flex; gap: .625rem; align-items: flex-start;
  margin-top: 1.125rem; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.55;
}
.privacy-line svg { width: 16px; height: 16px; flex: none; color: var(--teal); margin-top: 1px; }

.form-success {
  display: none; text-align: center; padding: 2rem 0;
}
.form-success.is-on { display: block; animation: fadeUp .5s var(--ease-out) both; }
.form-success i {
  width: 64px; height: 64px; border-radius: 50%; background: var(--teal-100); color: var(--teal);
  display: grid; place-items: center; margin: 0 auto 1.25rem;
}
.form-success i svg { width: 28px; height: 28px; }


/* 15  FOOTER & MOBILE CTA ================================================= */
.footer { background: var(--navy); color: rgba(255,255,255,.7); padding-block: clamp(3.5rem,2.5rem+3vw,5rem) 2rem; }
.footer a { color: rgba(255,255,255,.7); transition: color var(--dur-1) var(--ease); }
.footer a:hover { color: var(--blush); }
.footer h4, .footer__h {
  color: #fff; font-size: var(--fs-sm); letter-spacing: .12em; text-transform: uppercase;
  font-family: var(--font-body); font-weight: 700; margin-bottom: 1.25rem;
}
.footer .logo__name { color: #fff; }
.footer .logo__sub { color: rgba(255,255,255,.5); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 2.5rem; }
.footer__links { display: grid; gap: .75rem; font-size: var(--fs-sm); }
.footer__bottom {
  margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: var(--fs-xs); color: rgba(255,255,255,.5);
}
.footer__bottom ul { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.socials { display: flex; gap: .625rem; margin-top: 1.5rem; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.socials a:hover { background: var(--rose); border-color: var(--rose); color: #fff; transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; }
.fcontact { display: grid; gap: 1rem; font-size: var(--fs-sm); }
.fcontact li { display: flex; gap: .75rem; align-items: flex-start; }
.fcontact svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--blush); }

/* Scroll progress */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 300;
  background: var(--grad-primary); width: 0;
  transition: width .08s linear;
}

/* Floating WhatsApp */
.wa-float {
  position: fixed; right: 1.25rem; bottom: 1.5rem; z-index: 85;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 14px 30px -10px rgba(37,211,102,.6);
  transition: transform var(--dur-2) var(--ease);
}
.wa-float:hover { transform: scale(1.06) translateY(-2px); }
.wa-float svg { width: 28px; height: 28px; }


/* 16  MOTION & REVEAL ===================================================== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"]  { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="scale"] { transform: scale(.965); }

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


/* 17  UTILITIES =========================================================== */
.tc { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}.mt-5{margin-top:1.5rem}.mt-6{margin-top:2rem}
.mt-7{margin-top:2.5rem}.mt-8{margin-top:3rem}.mt-9{margin-top:4rem}
.mb-0{margin-bottom:0}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.5rem}.mb-6{margin-bottom:2rem}
.maxw-text { max-width: var(--maxw-text); }
.muted { color: var(--text-muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sticky-side { position: sticky; top: calc(var(--header-h) + 24px); }
.rel { position: relative; }
.of-hidden { overflow: hidden; }
.no-scroll { overflow: hidden; }


/* 18  RESPONSIVE ========================================================== */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero__grid { grid-template-columns: 1fr; }
  /* Copy stays first on narrow screens: the headline is the conversion
     element and should not be pushed below an image. */
  .hero__visual { margin-top: 1rem; }
  .float-card--bl { left: .75rem; }
  .float-card--tr { right: .75rem; }
}

@media (max-width: 980px) {
  :root { --header-h: 72px; }
  .nav, .header__cta .btn--primary { display: none; }
  .burger { display: grid; }
  .logo__img { height: 48px; }
  .split, .split--60, .split--40 { grid-template-columns: 1fr; }
  .g-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-strip > div:nth-child(2) { border-right: 0; }
  .stat-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .cta-banner__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .topbar__list li:not(:last-child) { display: none; }
}

@media (max-width: 640px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero__proof { grid-template-columns: repeat(2, auto); gap: 1.25rem 1.75rem; }
  .hero__proof div strong { font-size: 1.5rem; }
  .float-card { position: static; margin-top: 1rem; max-width: none; }
  .footer__grid { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr; }
  .stat-strip > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat-strip > div:last-child { border-bottom: 0; }
  .tabs__nav {
    width: 100%; overflow-x: visible;
    flex-wrap: wrap; justify-content: center;
    gap: .375rem;
  }
  .tabs__btn { padding: .5625rem .9375rem; font-size: .875rem; }
  .btn-row .btn { width: 100%; }
  .quote::before { display: none; }
}


/* 19  PRINT =============================================================== */
@media print {
  .header, .wa-float, .progress, .topbar, .cta-banner, .footer { display: none !important; }
  body { background: #fff; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}


/* ==========================================================================
   20  MOTION LAYER
   --------------------------------------------------------------------------
   Added as a separate, self contained section so the whole motion system can
   be tuned or removed in one place. Nothing above this line depends on it.

   The system, in one paragraph. Motion here does three jobs and no others:
   it tells you where you are (scroll progression, active states), it tells
   you what responded to you (hover, press, focus), and it gives the page a
   slow ambient pulse so it feels alive rather than printed. Everything is
   slow, low amplitude and single directional. Nothing bounces, nothing
   springs, nothing loops fast enough to catch the eye of somebody reading.

   Durations   micro 160ms · ui 280ms · entrance 800 to 1150ms · ambient 7 to 26s
   Amplitudes  float 9px · parallax 14px · hover lift 6px · reveal 22px
   Easing      entrances decelerate only, ambient loops ease in and out
   ========================================================================== */

:root {
  --m-micro: .16s;
  --m-ui:    .28s;
  --m-enter: .8s;
  --m-wipe:  1.15s;
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-emph: cubic-bezier(.22, 1, .36, 1);

  --amp-float: 9px;
  --amp-px:    14px;
  --amp-lift:  6px;
}


/* 20.1  HERO, soft ambient float ------------------------------------------
   Two blur fields drift against each other on different periods, so the
   background never repeats a recognisable pattern. 22 and 26 seconds is slow
   enough that you register it as atmosphere rather than as animation. */

@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-2.5%, 3.5%, 0) scale(1.07); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(3.5%, -2.5%, 0) scale(1.09); }
}
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--amp-float) * -1)); }
}

.hero__bg::before { animation: drift-a 22s ease-in-out infinite; }
.hero__bg::after  { animation: drift-b 26s ease-in-out infinite -7s; }
.phero::after     { animation: drift-a 24s ease-in-out infinite; }

/* The two credential cards breathe on offset periods so they never
   synchronise, which is what would make it read as a loop. */
.float-card--bl { animation: float-soft 7.5s ease-in-out infinite; }
.float-card--tr { animation: float-soft 8.6s ease-in-out infinite -3.2s; }

/* Hero entrance: the copy leads, the visual follows a beat later. */
.hero__visual[data-reveal] { transition-duration: 1s; --d: 220ms; }


/* 20.2  IMAGE REVEAL, an upward wipe ---------------------------------------
   Images do not fade in, they uncover. A clip-path wipe reads as a photograph
   being placed rather than a page loading, which is the difference between
   expensive and default. */

.js-media {
  clip-path: inset(0 0 92% 0);
  opacity: 0;
  transition: opacity var(--m-enter) var(--ease-emph),
              clip-path var(--m-wipe) var(--ease-emph);
}
.js-media.is-shown { clip-path: inset(0 0 0 0); opacity: 1; }


/* 20.3  PARALLAX -----------------------------------------------------------
   The frame stays still and the picture inside it drifts, so nothing in the
   layout moves and no gap can ever open between sections. Amplitude is 14px
   over a full screen of scroll, which is felt rather than seen.

   This works for the placeholders now and for real photography later with no
   markup change: drop an <img> in as a direct child of .media and it picks
   up the same transform. */

.media[data-px]::before,
.media[data-px] > img {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.14);
  will-change: transform;
}
.media > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.media > iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.media__note { position: relative; z-index: 2; }


/* 20.4  STATS -------------------------------------------------------------- */

.stat__n, .hero__proof strong, .otable td { font-variant-numeric: tabular-nums; }

/* A rule draws under each figure once its count finishes, so the number
   lands rather than just stopping. */
.stat-strip > div { position: relative; overflow: hidden; }
.stat-strip > div::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 0; height: 2px; transform: translateX(-50%);
  background: var(--grad-primary);
  transition: width .9s var(--ease-emph) .55s;
}
.stat-strip.is-counted > div::after { width: 34%; }

.hero__proof strong { transition: transform .6s var(--ease-emph); }

/* Section eyebrows draw their rule in rather than arriving with it. */
.eyebrow.js-line::before { width: 0; transition: width .85s var(--ease-emph) .1s; }
.eyebrow.js-line.is-in::before { width: 22px; }


/* 20.5  TREATMENT CARDS, hover transformation ------------------------------
   Four things move together on one easing curve: the card lifts, a soft tint
   washes in from the top left, the icon fills with its own accent, and the
   heading and arrow shift. Because they share a curve it reads as one
   gesture, not four effects. */

.card { isolation: isolate; }

.card__ico {
  --ico-bg: var(--teal-100); --ico-fg: var(--teal); --ico-on: var(--teal);
  background: var(--ico-bg); color: var(--ico-fg);
  transition: background-color .45s var(--ease-emph),
              color .45s var(--ease-emph),
              transform .45s var(--ease-emph);
}
.card__ico--rose { --ico-bg: var(--rose-050); --ico-fg: var(--rose); --ico-on: var(--rose); }
.card__ico--gold { --ico-bg: var(--gold-100); --ico-fg: var(--gold-ink); --ico-on: var(--gold-ink); }
.card__ico--wa   { --ico-bg: var(--wa-100); --ico-fg: var(--wa); --ico-on: var(--wa); }

.card--hover { transition: transform .45s var(--ease-emph), box-shadow .45s var(--ease-emph), border-color .45s var(--ease-emph); }
.card--hover:hover { transform: translateY(calc(var(--amp-lift) * -1)); border-color: var(--hover-border); }
.card--hover:hover .card__ico { background: var(--ico-on); color: #fff; transform: translateY(-3px); }

.card--hover::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(158deg, rgba(232,161,184,.22) 0%, rgba(232,161,184,0) 62%);
  opacity: 0; transition: opacity .45s var(--ease-soft);
}
.card--hover:hover::after { opacity: 1; }

.tcard h3 { transition: color .35s var(--ease-soft); }
.tcard:hover h3 { color: var(--rose-ink); }
.tcard:hover .tlink::after { transform: scaleX(1); transform-origin: left; }
.tcard:hover .tlink svg { transform: translateX(4px); }
.tcard__meta span { transition: border-color .4s var(--ease-soft), background-color .4s var(--ease-soft); }
.tcard:hover .tcard__meta span { border-color: rgba(181,47,104,.22); background: var(--rose-050); }


/* 20.6  TIMELINE, scroll progression ---------------------------------------
   The rail fills as you scroll and each step lights permanently once passed.
   Progressive, never retreating: a step that has lit stays lit, so the
   section reads as ground covered rather than as a spotlight following you. */

.steps-rail::before { background: rgba(181,47,104,.13); }
.steps-rail::after {
  content: ""; position: absolute; left: 26px; top: 26px; width: 1.5px;
  height: var(--rail, 0px); max-height: calc(100% - 52px);
  background: linear-gradient(180deg, var(--rose) 0%, var(--blush) 100%);
  border-radius: 2px;
}
.step__n {
  transition: background-color .55s var(--ease-emph), border-color .55s var(--ease-emph),
              color .55s var(--ease-emph), transform .55s var(--ease-emph),
              box-shadow .55s var(--ease-emph);
}
.step.is-lit .step__n {
  background: var(--rose); border-color: var(--rose); color: #fff;
  transform: scale(1.05); box-shadow: var(--sh-rose);
}
.step h3 { transition: color .5s var(--ease-soft); }
.step.is-lit h3 { color: var(--rose-ink); }


/* 20.7  CAROUSEL ----------------------------------------------------------- */

.slider__track { cursor: grab; }
.slider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.slider__track.is-dragging * { pointer-events: none; }
.slider__slide { transition: opacity .5s var(--ease-soft); }
.sbtn svg { transition: transform var(--m-ui) var(--ease-emph); }
.sbtn:hover svg { transform: translateX(2px); }
.sbtn[data-slider-prev]:hover svg { transform: translateX(-2px); }

.slider__dots { display: flex; align-items: center; gap: .4375rem; margin-left: .5rem; }
.sdot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--line-strong);
  transition: width .45s var(--ease-emph), background .45s var(--ease-emph);
}
.sdot:hover { background: var(--blush); }
.sdot[aria-current="true"] { width: 26px; background: var(--rose-ink); }


/* 20.8  CTA MICRO INTERACTION ----------------------------------------------
   A single light sweep crosses the button on hover, the icon steps forward,
   and the press takes the lift away rather than adding a squash. Restraint is
   the point: one gesture per control. */

.btn { overflow: hidden; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.26) 50%, transparent 75%);
  transform: translateX(-130%);
  transition: transform .75s var(--ease-emph);
}
.btn:hover::before { transform: translateX(130%); }
.btn--ghost::before { background: linear-gradient(115deg, transparent 25%, rgba(35,108,131,.10) 50%, transparent 75%); }
.btn--white::before,
.btn--light::before { background: linear-gradient(115deg, transparent 25%, rgba(181,47,104,.12) 50%, transparent 75%); }
.btn svg { transition: transform var(--m-ui) var(--ease-emph); }
.btn:hover svg:last-child { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(.985); }

/* Header settles as you leave the top of the page. */
.header__in { transition: min-height .4s var(--ease-soft); }
.header.is-stuck .header__in { min-height: 68px; }
.logo__img { transition: transform .4s var(--ease-soft); }
.header.is-stuck .logo__img { transform: scale(.9); }

/* Form controls acknowledge the tap. */
.chip span { transition: background-color var(--m-ui) var(--ease-soft), border-color var(--m-ui) var(--ease-soft), color var(--m-ui) var(--ease-soft), transform var(--m-ui) var(--ease-emph), box-shadow var(--m-ui) var(--ease-soft); }
.chip input:checked + span { transform: translateY(-1px); }
.chip span:active { transform: scale(.97); }
.acc__btn:hover .acc__ico { border-color: var(--rose); }
.socials a:hover svg { transform: scale(1.08); }
.socials svg { transition: transform var(--m-ui) var(--ease-emph); }


/* 20.9  REDUCED MOTION -----------------------------------------------------
   Everything above resolves to its finished state. Nobody loses content or
   meaning by turning motion off. */

@media (prefers-reduced-motion: reduce) {
  .hero__bg::before, .hero__bg::after, .phero::after,
  .float-card--bl, .float-card--tr { animation: none !important; }

  .js-media { clip-path: none !important; opacity: 1 !important; }
  .media[data-px]::before, .media[data-px] > img { transform: none !important; }
  .steps-rail::after { height: calc(100% - 52px) !important; }
  .step__n, .step h3 { transition: none !important; }
  .eyebrow.js-line::before { width: 22px !important; transition: none !important; }
  .stat-strip > div::after { transition: none !important; }
  .btn::before { display: none !important; }
  .card--hover:hover { transform: none !important; }
}


/* ==========================================================================
   21  CONVERSION LAYER
   --------------------------------------------------------------------------
   Added after a conversion audit of the built site. The audit found one
   dominant problem: on the home page the only booking form sat at 91% scroll
   depth, and a visitor could travel nearly 20,000px on mobile without passing
   a single booking action. Everything here exists to close that gap, lower
   the cost of the first step, and put proof where the decision happens.
   ========================================================================== */

/* 21.1  Mid page capture band ---------------------------------------------
   Two fields. Teal, because teal is the action colour in this system, and
   because it has to read as different from the rose closing banner rather
   than as a repeat of it. */

.capture {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--grad-teal);
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  color: rgba(255,255,255,.9);
}
.capture::after {
  content: ""; position: absolute; z-index: -1; inset: auto -12% -70% auto;
  width: 55%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,161,184,.28) 0%, rgba(232,161,184,0) 70%);
}
.capture h2, .capture h3 { color: #fff; }
.capture__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center; }
.capture__fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: .75rem; align-items: end; }
.capture .input {
  background: rgba(255,255,255,.96); border-color: transparent; color: var(--navy);
}
.capture .input:focus { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.28); }
.capture .label { color: rgba(255,255,255,.8); font-size: var(--fs-xs); }
.capture .err { color: #FFD9D4; }
.capture .btn--white { white-space: nowrap; }
.capture .privacy-line { color: rgba(255,255,255,.68); }
.capture .privacy-line svg { color: var(--blush); }
.capture .form-success { color: #fff; }
.capture .form-success i { background: rgba(255,255,255,.16); color: #fff; }
.capture .form-success h3 { color: #fff; }
.capture__or {
  display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem;
  font-size: var(--fs-xs); color: rgba(255,255,255,.62);
}
.capture__or::before, .capture__or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.18); }


/* 21.2  Proof placed next to the action -----------------------------------
   A reason-to-act line sits under every primary CTA. The objection people
   have at that exact moment is "what am I committing to", so that is what
   the line answers. */

.cta-note {
  display: flex; flex-wrap: wrap; gap: .375rem .875rem;
  margin-top: 1rem; font-size: var(--fs-xs); color: var(--text-muted);
}
.cta-note li { display: inline-flex; align-items: center; gap: .375rem; }
.cta-note li::before {
  content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%;
  background: var(--teal-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23176B73' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat;
}
.cta-note--light { color: rgba(255,255,255,.78); }
.cta-note--light li::before {
  background-color: rgba(255,255,255,.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}


/* 21.3  Review rating ------------------------------------------------------
   The strongest single trust signal in local healthcare, and the site had
   none. Sized to sit inline in a hero or above a form. */

.rating { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rating__stars { display: inline-flex; gap: 1px; color: var(--gold); }
.rating__stars svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.rating strong { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--navy); letter-spacing: -.02em; }
.rating span { font-size: var(--fs-xs); color: var(--text-muted); }
.rating--light strong { color: #fff; }
.rating--light span { color: rgba(255,255,255,.72); }
.rating--block {
  display: flex; gap: .75rem; align-items: center;
  padding: .75rem 1rem; border-radius: var(--r-md);
  background: var(--gold-100); border: 1px solid rgba(199,164,106,.34);
}


/* 21.4  Fee transparency ---------------------------------------------------
   The unasked question that stops a booking. Answering it beside the button
   removes the reason to "think about it and come back". */

.fee {
  display: flex; align-items: baseline; gap: .625rem; flex-wrap: wrap;
  padding: .875rem 1.125rem; border-radius: var(--r-md);
  background: var(--teal-100); border: 1px solid rgba(35,108,131,.16);
  font-size: var(--fs-sm); color: var(--navy);
}
.fee b { font-family: var(--font-head); font-size: 1.0625rem; color: var(--teal); letter-spacing: -.02em; }
.fee span { color: var(--text-muted); font-size: var(--fs-xs); }


/* 21.5  Star row on a story ------------------------------------------------ */
.story__stars { display: inline-flex; gap: 1px; color: var(--gold); margin-bottom: .75rem; }
.story__stars svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }


/* A real call target in the mobile header, not a 22px line of text. */
.header__call {
  display: none;
  width: 44px; height: 44px; border-radius: 50%;
  place-items: center; flex: none;
  background: var(--teal-100); color: var(--teal);
  transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.header__call:hover { background: var(--teal); color: #fff; transform: translateY(-2px); }
.header__call svg { width: 19px; height: 19px; }

/* A labelled floating action converts better than a bare icon, because the
   icon alone does not say who is on the other end. */
.wa-float {
  width: 56px; height: 56px; border-radius: 999px;
  padding: 0; gap: .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .875rem; font-weight: 600;
  transition: width .45s var(--ease-emph), padding .45s var(--ease-emph);
}
.wa-float:hover, .wa-float:focus-visible { width: auto; padding: 0 1.125rem; }
.wa-float span {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: max-width .45s var(--ease-emph), opacity .3s var(--ease-soft), margin-left .45s var(--ease-emph);
}
.wa-float:hover span, .wa-float:focus-visible span { max-width: 200px; opacity: 1; }
.wa-float svg { width: 26px; height: 26px; flex: none; }


@media (max-width: 980px) {
  .header__call { display: grid; }
  .capture__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .capture__fields { grid-template-columns: 1fr; }
  .capture__fields .btn { width: 100%; }
  /* Lift the hero call to action towards the first screen. */
  .hero { padding-block: 1.75rem 3rem; }
  .hero__copy > * + * { margin-top: 1.125rem; }
  .hero__proof { padding-top: 1.5rem; margin-top: 1.5rem; }
}


/* Optional third step, shown as a lighter track so the form reads as two
   required steps with an extra you may skip. */
.fstep--optional { background: transparent; border: 1px dashed var(--line-strong); height: 5px; }
.fstep--optional i { background: var(--blush); }
.form-nav .btn { flex: 0 1 auto; }
button.tlink { padding: 0; }

/* 21.7  Inline contextual CTA -----------------------------------------------
   Placed at the natural decision moments inside long pages, so nobody has to
   travel half a page to find a way to act. Deliberately quiet: a single line
   and one button, not another banner. */
.inline-cta {
  display: flex; flex-wrap: wrap; gap: 1rem 1.75rem;
  align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
}
.inline-cta p {
  font-family: var(--font-head); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: -.015em; color: var(--navy);
  max-width: 52ch;
}
.inline-cta p span { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-sm); color: var(--text-muted); margin-top: .25rem; }
.inline-cta .btn-row { flex: none; }
.inline-cta--alt { background: var(--ivory); }
.inline-cta--light { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); box-shadow: none; }
.inline-cta--light p { color: #fff; }
.inline-cta--light p span { color: rgba(255,255,255,.68); }
@media (max-width: 640px) {
  .inline-cta { flex-direction: column; align-items: stretch; text-align: left; }
  .inline-cta .btn-row, .inline-cta .btn { width: 100%; }
}

/* 21.8  First screen economy on mobile -------------------------------------
   The audit put the hero call to action at 613px on a 390x844 device, which
   is above the fold but with no margin once browser chrome is counted. These
   trims buy back roughly 70px without removing anything. */
@media (max-width: 560px) {
  .hero__badge { padding: .4375rem .75rem .4375rem .4375rem; font-size: .6875rem; }
  .hero .rating > span:not(.rating__stars) { display: none; }  /* keep the stars, drop the review count */
  .hero .rating strong { font-size: .875rem; }
  .hero__badge i { width: 19px; height: 19px; }
  .hero .lead { font-size: 1rem; line-height: 1.55; }
  .hero .cta-note { gap: .25rem .75rem; }
}

/* 21.9  Pricing table -------------------------------------------------------
   Four columns is a lot on a phone, so the inclusions column drops out below
   720px and reappears under each row name. Nothing is lost, nothing scrolls
   sideways off the screen. */
.ptable td, .ptable th { vertical-align: top; }
.ptable__price { font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; color: var(--teal); letter-spacing: -.02em; white-space: nowrap; }
.ptable td:first-child { font-family: var(--font-head); font-weight: 700; letter-spacing: -.015em; white-space: nowrap; }
.ptable__inc { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.5; min-width: 220px; }
.ptable tbody tr:hover .ptable__price { color: var(--rose); }

@media (max-width: 720px) {
  .ptable, .ptable tbody, .ptable tr, .ptable td { display: block; width: 100%; }
  .ptable thead { display: none; }
  .ptable tr { padding: 1rem 0; border-bottom: 1px solid var(--line); }
  .ptable td { border: 0; padding: .1875rem 1rem; white-space: normal; }
  .ptable td:first-child { font-size: 1.0625rem; padding-bottom: .375rem; }
  .ptable__price { font-size: 1.25rem; }
  .ptable td:last-child::before { content: "EMI: "; color: var(--text-muted); font-size: var(--fs-xs); }
}

/* 21.10  Footer accreditation line ------------------------------------------ */
.footer__accred {
  margin-top: 2.5rem; padding: .875rem 1.125rem;
  border: 1px solid rgba(215,162,58,.28); border-radius: var(--r-md);
  background: rgba(215,162,58,.08);
  color: rgba(255,255,255,.82); font-size: var(--fs-xs);
  display: flex; align-items: center; gap: .625rem; flex-wrap: wrap;
}
.footer__accred svg { color: var(--gold); width: 17px; height: 17px; }

/* 21.11  Cookie notice ------------------------------------------------------
   Hidden until the clinic actually sets a non-essential cookie. See the
   comment on the markup in the footer partial. */
.cookie {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 400;
  max-width: 520px; margin-inline: auto;
  background: #fff; border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  padding: 1.125rem 1.25rem;
}
.cookie p { font-size: var(--fs-sm); color: var(--navy); }
.cookie p a { color: var(--teal); font-weight: 600; text-decoration: underline; }
.cookie__actions { display: flex; gap: .625rem; margin-top: 1rem; flex-wrap: wrap; }
.cookie__actions .btn { flex: 1 1 auto; }
.cookie__panel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); display: grid; gap: .875rem; }
.cookie__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; font-size: var(--fs-sm); cursor: pointer; }
.cookie__row b { display: block; color: var(--navy); }
.cookie__row em { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--text-muted); margin-top: .125rem; }
.cookie__row input { width: 20px; height: 20px; accent-color: var(--teal); flex: none; margin-top: .1875rem; }
@media (max-width: 980px) { .cookie { bottom: 84px; } }

/* 21.12  Form error state --------------------------------------------------- */
.form-error {
  margin-top: 1rem; padding: .875rem 1.125rem; border-radius: var(--r-md);
  background: #FDF3F2; border: 1px solid rgba(192,57,43,.24);
  color: #8E2A1F; font-size: var(--fs-sm);
}


/* ==========================================================================
   22  REVIEW FIXES
   --------------------------------------------------------------------------
   Changes made against the annotated feedback. Grouped so each note in the
   review maps to a block you can find.
   ========================================================================== */

/* 22.1  "Icons need to be bigger" and "all icons should be the same colour"
   ------------------------------------------------------------------------
   Card icons go from 52 to 60px with a 28px glyph. The rose and champagne
   icon variants are retired on the treatment and feature grids, so a grid of
   six cards now reads as one set instead of three colours competing. Rose and
   champagne icons remain available for the rare single-card callout. */
.card__ico {
  width: 60px; height: 60px; border-radius: 18px;
  margin-bottom: 1.5rem;
}
.card__ico svg { width: 28px; height: 28px; }

/* A grid of cards is one set: every icon in it takes the teal treatment. */
.grid .card__ico,
.grid .card__ico--rose,
.grid .card__ico--gold {
  --ico-bg: var(--mint-050);
  --ico-fg: var(--teal);
  --ico-on: var(--teal);
}

/* 22.2  "Icon and text, keep some breathing space in between"
   The step number was almost touching the heading. */
.step { padding-left: 5.25rem; }
.steps-rail::before,
.steps-rail::after { left: 28px; }
.steps-rail::before { top: 28px; bottom: 28px; }
.steps-rail::after  { top: 28px; max-height: calc(100% - 56px); }
.steps-rail { gap: 2.75rem; }

/* 22.3  "Space among all cards" and "alignments of the cards"
   ------------------------------------------------------------------------
   One gap value drives every grid and the slider, and cards stretch to equal
   height so their footers line up on a row. */
.grid { gap: var(--grid-gap); }
.grid > * { min-width: 0; }
.slider__track { gap: var(--grid-gap); }

/* Cards in a grid share a baseline: content grows, the footer sits at the
   bottom of every card in the row rather than wherever the text ends. */
.grid .card { display: flex; flex-direction: column; }
.grid .card .card__foot { margin-top: auto; padding-top: 1.5rem; }

/* 22.4  "Alignment" on the doctor cards
   The tag pills wrapped to different heights, so the Full profile links sat
   at three different vertical positions. */
.grid .doc { display: flex; flex-direction: column; height: 100%; }
.doc__tags { min-height: 2.125rem; align-content: flex-start; }
.doc .tlink { margin-top: auto; padding-top: 1.25rem; align-self: flex-start; }

/* 22.5  "Bullets alignment"
   The dot sat above the cap height of the first line rather than on it. */
.empathy li::before { top: 1.5rem; }
.ticks li::before { margin-top: 1px; }

/* 22.6  "Try to make Day care procedure text in a same line"
   Meta pills no longer break mid-phrase. */
.tcard__meta span { white-space: nowrap; }
.tcard__meta { gap: .5rem .5rem; }

/* 22.7  "Line overlapping" on the outcome figures
   Two stat cards were butted against the table above them with no clearance,
   and the underline rule collided with the label. */
.stat-strip > div { padding-block: clamp(1.75rem, 1.25rem + 1.4vw, 2.5rem) 2rem; }
.stat-strip > div::after { bottom: .875rem; }
.stat__l { margin-top: .75rem; line-height: 1.4; }

/* 22.8  Footer "spacing from top" and "spacing from bottom" */
.footer { padding-block: clamp(4.5rem, 3rem + 4vw, 6.5rem) 3.5rem; }
.footer__grid { gap: 3rem 2.5rem; }
.footer__bottom { margin-top: 3.5rem; padding-top: 2rem; }
.footer__accred { margin-top: 3rem; }

/* 22.9  "Add related icons in navigation"
   Dropdown rows now carry the same icon as the treatment they point to, so
   the menu is scannable by shape as well as by word. */
.nav__drop a {
  display: grid; grid-template-columns: 34px 1fr; gap: .75rem;
  align-items: center; padding: .625rem .75rem;
}
.nav__drop a > i {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--mint-050); color: var(--teal);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.nav__drop a > i svg { width: 17px; height: 17px; }
.nav__drop a:hover > i { background: var(--teal); color: #fff; }
.nav__drop a b { display: block; font-weight: 600; font-size: .9375rem; }
.nav__drop { min-width: 320px; }
.nav__drop a.nav__drop-all { grid-template-columns: 1fr; }

.drawer__sub a { display: flex; align-items: center; gap: .625rem; }
.drawer__sub a svg { width: 17px; height: 17px; color: var(--teal); flex: none; }

/* 22.10  "Take 30 seconds wala section" — the reason-to-act row
   ------------------------------------------------------------------------
   It was three loose ticks floating under the buttons. It is now a single
   contained strip with dividers, which reads as one reassurance rather than
   three stray labels. */
.cta-note {
  display: inline-flex; flex-wrap: wrap; gap: 0;
  margin-top: 1.25rem; padding: .625rem .25rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.6);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.cta-note li {
  display: inline-flex; align-items: center; gap: .4375rem;
  padding-inline: .875rem;
  border-right: 1px solid var(--line);
  font-weight: 500;
}
.cta-note li:last-child { border-right: 0; }
.cta-note li::before { width: 15px; height: 15px; background-size: 10px; }
.cta-note--light {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22);
}
.cta-note--light li { border-right-color: rgba(255,255,255,.2); }
@media (max-width: 640px) {
  .cta-note { display: flex; border-radius: var(--r-md); padding: .75rem .25rem; }
  .cta-note li { border-right: 0; padding-block: .1875rem; flex: 1 1 100%; }
}

/* 22.11  Hero proof figures — "need to be better, and fix the alignment"
   ------------------------------------------------------------------------
   Four numbers on a loose flex row with mismatched label wrapping. Now an
   even grid of cards with a divider rule, tabular figures and labels that
   all sit on the same baseline. */
.hero__proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 2.5rem; padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(8px);
  overflow: hidden;
  box-shadow: var(--sh-xs);
}
.hero__proof > div {
  padding: 1.125rem .625rem;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: flex-start;
  min-width: 0;
}
.hero__proof > div:last-child { border-right: 0; }
.hero__proof div strong {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.1rem, .95rem + .7vw, 1.625rem);
  letter-spacing: -.03em; color: var(--rose-ink); line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hero__proof div > span {
  font-size: .6875rem; color: var(--text-muted); letter-spacing: .01em;
  line-height: 1.35; margin-top: .4375rem; display: block;
}
@media (max-width: 640px) {
  .hero__proof { grid-template-columns: repeat(2, 1fr); }
  .hero__proof > div:nth-child(2n) { border-right: 0; }
  .hero__proof > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* 22.12  Treatment card sub-label, so the full name never collides */
.tcard__sub {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .01em;
  color: var(--rose-ink); margin-top: -.25rem; margin-bottom: .75rem;
}

/* 22.13  Surfaces from the new palette, used where they earn their place */
.section--peach { background: var(--peach-050); }
.section--mint  { background: var(--mint-050); }
.card--teal  { background: var(--mint-050); border-color: #CBE2DE; }
.card--blush { background: var(--pink-050); border-color: #F2D6DC; }
.card--ivory { background: var(--neutral); }

/* 22.14  Background graphics turned down to 25% -----------------------------
   The ambient pink wash and the blurred mesh fields were reading too loud
   against the new, softer palette. Every decorative background alpha below is
   a quarter of what it was. The shapes are unchanged, they are simply much
   quieter, so the page reads as warm ivory with a hint of colour rather than
   as a pink gradient. */

/* Section wash: a quarter of the way from ivory to soft pink, not the whole
   way, and then lightened by half along with the rest of the surfaces.
   Full strength was #FFF9F5 -> #FEF5F3. */
:root {
  --grad-wellness:   linear-gradient(180deg, #FFFCFA 0%, #FFFAF9 100%);
  --grad-wellness-x: linear-gradient(100deg, #FFFCFA 0%, #FFFAF9 100%);
}

/* Hero mesh: .55 -> .14 blush, .20 -> .05 champagne */
.hero__bg::before {
  background: radial-gradient(circle, rgba(231,136,152,.14) 0%, rgba(231,136,152,0) 70%);
}
.hero__bg::after {
  background: radial-gradient(circle, rgba(199,164,106,.05) 0%, rgba(199,164,106,0) 70%);
}
.phero::after {
  background: radial-gradient(circle, rgba(231,136,152,.13) 0%, rgba(231,136,152,0) 70%);
}

/* Banner and capture glows */
.cta-banner::after {
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 70%);
}
.capture::after {
  background: radial-gradient(circle, rgba(231,136,152,.07) 0%, rgba(231,136,152,0) 70%);
}

/* Card hover tint */
.card--hover::after {
  background: linear-gradient(158deg, rgba(231,136,152,.06) 0%, rgba(231,136,152,0) 62%);
}

/* Image placeholder hatching. Kept visible enough to read as "replace me",
   but no longer a decorative pattern competing with the content. */
.media { background: var(--neutral); }
.media::before {
  background:
    repeating-linear-gradient(45deg,
      rgba(201,84,108,.025) 0 12px,
      rgba(201,84,108,0) 12px 24px);
}

/* 22.15  Hero button row fitted to one line
   The two buttons measured 572px against a 569px column, so the secondary
   wrapped for the sake of three pixels. The copy column takes a slightly
   larger share and the large button padding comes in a notch. */
.hero__grid { grid-template-columns: 1.15fr 1fr; }
.btn--lg { padding-inline: 1.875rem; }
.hero .btn-row { gap: .75rem; }
@media (max-width: 1080px) { .hero__grid { grid-template-columns: 1fr; } }

/* 22.16  Narrow-screen overflow guards
   ------------------------------------------------------------------------
   Three treatment pages pushed the viewport sideways on a 390px phone. Three
   separate causes, all of them "an element that refuses to shrink inside a
   grid track":

   a) Buttons are nowrap by design, so the row never breaks mid-label on
      desktop. On a phone a long label ("Book a Free Male Fertility
      Assessment") is wider than the screen, so below 640px buttons are
      allowed to wrap onto two centred lines.
   b) A grid or flex child has min-width:auto, which resolves to the
      min-content width of whatever is inside it. A results table with nowrap
      price cells therefore widened its own column instead of scrolling inside
      .table-wrap. min-width:0 lets the track shrink and hands the horizontal
      scroll back to the wrapper where it belongs.
   c) Same story for the caption inside a media placeholder. */
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; }
  .btn--lg { padding-inline: 1.5rem; }
}
.grid > *, .steps > *, .col > * { min-width: 0; }
.table-wrap { min-width: 0; max-width: 100%; }
.otable { min-width: 0; }
.media, .media__note { max-width: 100%; }
.media__note { overflow-wrap: anywhere; }


/* ==========================================================================
   23  FULL BLEED IMAGE BANDS
   --------------------------------------------------------------------------
   One edge to edge photograph per page, placed at the point where the page
   has finished making an argument and the reader needs a breath before the
   next one. It does three jobs: it resets the eye between dense sections, it
   proves the clinic is a real, physical, well kept place, and it gives the
   page a change of rhythm that grids alone cannot.

   Markup, and it is deliberately the same everywhere:

     <section class="bleed">
       <div class="media media--bleed ph" data-ph="short label">
         <div class="media__note">
           <b>Full width image</b>
           <span>What the shot must contain.</span>
           <em>Ratio, minimum pixels, direction.</em>
         </div>
       </div>
       <p class="bleed__cap">Optional one line caption.</p>   <!-- optional -->
     </section>

   To go live, replace the inner .media__note with
   <img src="..." alt="..."> and nothing else changes: the band keeps its
   height, its wipe reveal and its parallax drift, because both are driven
   off .media rather than off the placeholder.
   ========================================================================== */

.bleed { position: relative; }

.bleed .media--bleed {
  border-radius: 0;
  aspect-ratio: auto;
  /* Tall enough to read as a scene, never tall enough to cost a scroll. */
  min-height: clamp(17rem, 11rem + 22vw, 28rem);
}

/* The band is the one place a caption earns its keep, because there is no
   surrounding copy to carry the credit or the context. */
.bleed__cap {
  max-width: var(--maxw);
  margin: 1rem auto 0;
  padding-inline: var(--gutter);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: center;
}

/* A band butted against a section of the same colour would float; these two
   modifiers let it sit flush under whatever precedes it. */
.bleed--flush { margin-top: calc(var(--section-y) * -1); }
.bleed--pad   { padding-block: var(--section-y) 0; }

/* Inside a band the note should feel like a plate on a wall, not body copy
   floating on a tint, so it gets a surface of its own. */
.bleed .media--bleed .media__note {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.5rem 1.75rem;
  max-width: min(46rem, calc(100% - 2.5rem));
  box-shadow: var(--sh-sm);
}

/* On a phone the band would eat the fold, so it comes down in height and the
   note loses its plate treatment to stay readable at small sizes. */
@media (max-width: 640px) {
  .bleed .media--bleed { min-height: 14rem; }
  .bleed .media--bleed .media__note { padding: 1rem 1.125rem; }
  .bleed--flush { margin-top: 0; }
}


/* ==========================================================================
   24  FIXES FOUND DURING THE BAND PASS
   ========================================================================== */

/* 24.1  The reassurance strip was unreadable on dark panels.
   Section 22.10 rebuilt .cta-note as a contained pill and set a dark text
   colour on the base class. That rule sits later in the file than the light
   variant's colour in section 14, so on the teal and navy panels the strip
   was dark grey on dark teal. The light variant now restates its own colour
   after the rebuild, where it wins. */
.cta-note--light { color: rgba(255,255,255,.86); }
.cta-note--light li { color: inherit; }

/* 24.2  A captioned band needs to finish before the next section starts.
   Without this the caption reads as the opening line of whatever follows. */
.bleed__cap { padding-bottom: clamp(2rem, 1.25rem + 2vw, 3rem); }


/* ==========================================================================
   25  TIMELINE: ICON BADGES, AND THE RAIL BEHIND THEM
   --------------------------------------------------------------------------
   Two things happen here.

   THE OVERLAP BUG. The rail is drawn as .steps-rail::before (the track) and
   .steps-rail::after (the filled progress). A parent's ::after paints after
   every one of that parent's children, so the filling line was painting on
   top of the step badges and striking through 01, 02, 03 as you scrolled.
   Nothing was wrong with the geometry; it was pure paint order. Both rail
   layers are now pinned to z-index 0 and the badges lifted above them, so
   the line always passes behind the circles.

   THE BADGES. Numbers are replaced by icons. The number is not lost: it
   moves to a small label above each heading, because a seven step process
   still needs its order readable at a glance. The icon is chosen from the
   step's own heading in build.js, so new copy gets a sensible icon without
   anyone maintaining a list.
   ========================================================================== */

/* 25.1  Paint order ------------------------------------------------------- */
.steps-rail::before,
.steps-rail::after { z-index: 0; }
.step     { z-index: 1; }
.step__n  { z-index: 2; }

/* 25.2  The badge --------------------------------------------------------- */
.step__n {
  /* Overrides the numeral type from the original numbered badge. */
  font-size: 0; line-height: 0;
  overflow: visible;
}
.step__n svg {
  width: 24px; height: 24px;
  stroke-width: 1.8;
  /* Start state. Reveal is driven by .is-lit, the same class the rail uses,
     so the icon animates on the same beat the circle fills. */
  transform: scale(.68) rotate(-12deg);
  opacity: 0;
  transition: transform .62s var(--ease-emph), opacity .38s var(--ease-emph);
}
.step.is-lit .step__n svg {
  transform: scale(1) rotate(0deg);
  opacity: 1;
  /* A beat behind the circle fill, so the eye reads circle then icon
     rather than both arriving flat at once. */
  transition-delay: .1s, .1s;
}

/* 25.3  The ring pulse ----------------------------------------------------
   One expanding ring at the moment a step lights, then nothing. It marks
   arrival without leaving a looping animation running down the page, which
   is what separates a considered timeline from a busy one. */
.step__n::after {
  content: ""; position: absolute; inset: -1px;
  border-radius: 50%;
  border: 1.5px solid var(--rose);
  opacity: 0;
  pointer-events: none;
}
.step.is-lit .step__n::after { animation: stepRing .85s var(--ease-out) .1s 1 both; }

@keyframes stepRing {
  0%   { transform: scale(1);    opacity: .55; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* 25.4  The step number, now a label -------------------------------------- */
.step__k {
  display: block;
  font-family: var(--font-body);
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: .3125rem;
  transition: color .5s var(--ease-soft);
}
.step.is-lit .step__k { color: var(--rose-ink); }

/* 25.5  Reduced motion ----------------------------------------------------
   Everything arrives in its final state, nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .step__n svg {
    transform: none !important; opacity: 1 !important; transition: none !important;
  }
  .step__n::after { animation: none !important; opacity: 0 !important; }
  .step__k { transition: none !important; }
}