/* ============================================================
   GAME CHANGER THERAPY — magazine.css
   Light editorial design system (PROOF homepage).
   Structural approach mirrors the approved Legends "magazine" site:
   named-line .flow grid, contained main column + .full-bleed breakouts,
   condensed uppercase display type, kicker eyebrows, accent words,
   full-bleed photo banners, mixed gallery, asymmetric split, numbered
   steps, link-draw links, scroll reveals, glass nav, mobile bottom bar,
   guided chat. Palette is Game Changer's brand: green + raspberry on light.
   No frameworks. NO EMOJIS — inline SVG icons only.
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/barlow-condensed-v13-latin-700.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/barlow-condensed-v13-latin-800.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/barlow-v13-latin-regular.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/barlow-v13-latin-500.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/barlow-v13-latin-600.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --bg: #ffffff;              /* page background */
  --band: #f6f8f3;            /* warm off-white alternating band */
  --surface: #eef3e8;         /* card / table surface */
  /* ── CONTRAST-AUDITED PALETTE (WCAG AA). Ratios noted per token. ── */
  --green: #398328;           /* PRIMARY green — button/chip fills. Darkened from #3e8e2e so WHITE text on green clears AA 4.5 for SMALL text (btn 1.1rem/800≈17.6px, chips .85–.95rem, wizard dots, loc-flag, nav pill, user bubble): white-on-green now 4.72:1 (was 4.11 = AA-large only → failed small text everywhere) */
  --green-bright: #73bf44;    /* bright DECORATIVE green ONLY — never text, never white-on (white-on = 2.27 FAIL; as-text-on-white = 2.27 FAIL). Bars, borders, progress fills, large glyphs only */
  --green-ink: #2e6b1f;       /* deep green — text, links, hover. 6.48:1 on white / 6.06 on band / 5.75 on surface (AA) */
  --green-deep: #14351a;      /* darkest green — footer, chat header + launcher-hover, gradient dark stop. Darkened from #1e4d1b for a stronger dark anchor: white 13.5:1, off-white body 11.4:1 (AA) */
  --green-pale: #c7e6b3;      /* pale green — green accent TEXT on dark / green bands (careers+cta kickers, cites, phone hover). green-bright FAILS there (2.6:1 over mid-green); pale = 4.75:1 on green-ink, 9.9:1 on green-deep (AA) */
  --rasp: #2C6E9E;            /* raspberry — LARGE accent words + btn hover fill. 4.64:1 on white (AA-normal / AA-large); white-on-rasp 4.64 (AA for btn text) */
  --rasp-ink: #1F5F8B;        /* deeper raspberry — SMALL accent text, kickers, chat launcher + avatar. 5.99:1 on white, 5.61 band, 5.32 surface (AA) */
  --yellow: #fbda0a;          /* sunny — tiny use only; NEVER white-on (1.39 FAIL) — needs dark text */
  --ink: #1c241a;             /* near-black warm — headings. 15.95:1 on white (AA) */
  --body: #454b42;            /* body text. 8.98:1 on white / 7.96 surface (AA) */
  --gray: #545a52;            /* muted — darkened from #6b6f68 (only 4.54:1 on surface = marginal) to clear AA on EVERY light bg: 7.09 white / 6.63 band / 6.29 surface */
  --line: rgba(0,0,0,.10);    /* hairline */
  --display: 'Poppins', system-ui, sans-serif;
  --text: 'Inter', system-ui, sans-serif;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-lift: 0 20px 46px rgb(30 77 27 / .16);
  --ease: cubic-bezier(.2,.7,.2,1);
  --nav-h: 76px;
  --topbar-h: 40px;
}

/* ---------- Reset / base ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
/* picture is a transparent wrapper so aspect-ratio / object-fit apply to the <img> */
picture { display: contents; }
html { scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body {
  font-family: var(--text); background: var(--bg); color: var(--body);
  line-height: 1.65; -webkit-font-smoothing: antialiased;
}
img, video { max-width:100%; display:block; }
h1,h2,h3,h4 { font-family: var(--display); font-weight:700; text-transform:none; line-height:.95; letter-spacing:.01em; text-wrap:balance; color:var(--ink); }
p { max-width: 65ch; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 3px; border-radius: 2px; }
.skip-link { position:absolute; left:-9999px; top:0; z-index:200; background:var(--green); color:#fff; padding:10px 18px; font-weight:600; border-radius: 0 0 6px 0; }
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Layout: named-lines flow ---------- */
.flow {
  display:grid;
  grid-template-columns:
    [full-start] minmax(clamp(1.25rem,4vw,3rem), 1fr)
    [main-start] min(74rem, 100% - clamp(2.5rem,8vw,6rem))
    [main-end] minmax(clamp(1.25rem,4vw,3rem), 1fr)
    [full-end];
}
.flow > * { grid-column: main; }
.flow > .full-bleed { grid-column: full; }
section { padding-block: clamp(4rem, 10vw, 7.5rem); }
.section-tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* ---------- Typography helpers ---------- */
.kicker {
  font-family: var(--display); font-weight:700; font-size:.98rem;
  letter-spacing:.16em; text-transform:uppercase; color: var(--rasp-ink);
  margin-bottom: 16px; display:block;
}
.kicker.green { color: var(--green-ink); }
.display-1 { font-size: clamp(2rem, 3.6vw + .5rem, 3.4rem); }
.display-2 { font-size: clamp(2.2rem, 4.5vw + .5rem, 4.1rem); }
.h3 { font-size: clamp(1.4rem, 2vw + .5rem, 1.9rem); }
.lede { font-size: clamp(1.08rem, 1.4vw, 1.28rem); color: var(--body); line-height:1.6; }
.muted { color: var(--gray); }
.accent { color: var(--rasp); }
.accent-green { color: var(--green-ink); }
.measure { max-width: 60ch; }
.center { text-align:center; }
.mx-auto { margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--display); font-weight:800; letter-spacing:.08em; text-decoration:none; cursor:pointer; border:none;
  border-radius: 999px; transition: transform .2s var(--ease), box-shadow .2s, background .2s, color .2s, border-color .2s;
}
/* Transparent (glassy outline) buttons — client request */
.btn-primary { background: var(--rasp); color:#fff; border: 2px solid var(--rasp); padding: 10px 22px; font-size: .95rem; }
.btn-primary:hover { background: var(--rasp); color:#fff; box-shadow: 0 10px 30px rgb(44 110 158 / .30); }
.btn-ghost { background: transparent; color: var(--rasp-ink); border: 2px solid var(--rasp); padding: 10px 24px; font-size: .95rem; }
.btn-ghost:hover { background: var(--rasp); color:#fff; border-color: var(--rasp); }
.btn-giant { background: var(--rasp); color:#fff; border: 2px solid var(--rasp); padding: 12px 30px; font-size: 1.05rem; }
.btn-giant:hover { background: var(--rasp); color:#fff; box-shadow: 0 16px 50px rgb(44 110 158 / .32); }
@media (hover:hover) and (pointer:fine) {
  .btn:hover { transform: translateY(-2px) scale(1.02); }
  .btn:active { transform: scale(.98); }
}
.link-draw {
  text-decoration:none; font-weight:600; color: var(--green-ink);
  display:inline-flex; align-items:center; gap:7px;
  background: linear-gradient(currentColor,currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .3s var(--ease), color .2s;
}
.link-draw svg { width:15px; height:15px; flex:none; transition: transform .25s var(--ease); }
.link-draw:hover, .link-draw:focus-visible { background-size: 100% 2px; }
.link-draw:hover svg { transform: translateX(3px); }
.link-draw.rasp { color: var(--rasp-ink); }

/* ---------- Glass ---------- */
.glass {
  background: rgb(255 255 255 / .78);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) { .glass { -webkit-backdrop-filter:none; backdrop-filter:none; background: rgb(255 255 255 / .97); } }
@supports not (backdrop-filter: blur(1px)) { .glass { background: rgb(255 255 255 / .96); } }

/* ---------- Nav ----------
   Over the hero links are white on the photo gradient; once .scrolled
   it becomes light glass with dark links + a green Get Started pill. */
/* Services top bar (client likes core services near the top) */
.gc-topbar{position:fixed;top:0;left:0;right:0;z-index:101;height:var(--topbar-h);background:var(--green-deep);color:#fff;display:flex;align-items:center;}
.gc-topbar__inner{display:flex;align-items:center;gap:16px;width:100%;padding:0 clamp(16px,3vw,40px);overflow-x:auto;white-space:nowrap;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.76rem;scrollbar-width:none;}
.gc-topbar__inner::-webkit-scrollbar{display:none;}
.gc-topbar__label{color:#bfe6ad;}
.gc-topbar a{color:#fff;text-decoration:none;}
.gc-topbar a:hover{color:#ffc2d3;}
.gc-topbar__phone{margin-left:auto;}
@media (max-width:640px){.gc-topbar__label{display:none;}}

.nav {
  position:fixed; top:var(--topbar-h); left:0; right:0; z-index:100; height: var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 clamp(16px, 3vw, 40px);
  background: rgb(255 255 255 / .72);   /* translucent glass nav */
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s, height .25s;
}
.nav.scrolled { background: rgb(255 255 255 / .88); box-shadow: 0 6px 24px rgb(20 40 20 / .10); }
@media (prefers-reduced-transparency: reduce){ .nav, .nav.scrolled { -webkit-backdrop-filter:none; backdrop-filter:none; background: rgb(255 255 255 / .97); } }
.nav-logo { display:flex; align-items:center; }
.nav-logo img { height: 44px; width:auto; }
/* solid white nav -> always the full-color logo */
.nav .nav-logo .logo-color { display:block; }
.nav .nav-logo .logo-white { display:none; }
.nav-links { display:flex; align-items:center; gap: clamp(14px, 2vw, 28px); list-style:none; }
.nav-links a:not(.btn) {
  font-family:var(--display); font-weight:700; font-size:1.05rem;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  color: var(--ink); transition: color .18s;
}
.nav-links a:not(.btn):hover, .nav-links a[aria-current="page"] { color: var(--green-ink); }
.nav-links .btn-primary { padding: 8px 18px; font-size: .88rem; }
.nav-toggle { display:none; background:none; border:none; color:var(--ink); cursor:pointer; padding:8px; }
.nav.scrolled .nav-toggle { color: var(--ink); }
@media (max-width: 1024px) {
  .nav-toggle { display:block; }
  .nav-links {
    display:none; position:fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap: 2px;
    background: rgb(255 255 255 / .99); border-bottom:1px solid var(--line);
    padding: 18px clamp(16px,4vw,32px) 26px;
    box-shadow: 0 20px 40px rgb(0 0 0 / .12);
  }
  .nav-links.open { display:flex; }
  .nav-links li a:not(.btn) { display:block; padding: 13px 4px; font-size: 1.28rem !important; color: var(--ink) !important; }
  .nav-links li a:not(.btn):hover, .nav-links li a[aria-current="page"] { color: var(--green-ink) !important; }
  .nav-links .btn-primary { margin-top: 12px; justify-content:center; color:#fff !important; }
}

/* ---------- Hero (full-bleed video, left scrim, white type) ----------
   Keep the .flow named-grid active (do NOT switch to flex) so hero-content
   sits in the contained `main` column with a real gutter from the left edge
   — the client explicitly asked for a gap, not text jammed to the wall. */
.hero { position:relative; min-height: 92svh; align-content:center; overflow:hidden; }
.hero-media { position:absolute; inset:0; z-index:0; background:#0c1c08; }
.hero-media video, .hero-media img { width:100%; height:100%; object-fit:cover; object-position:center; }
/* left-weighted scrim: dark green on the left for legible left-aligned type,
   fading to near-transparent on the right so the clip reads through */
.hero-media::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgb(12 28 8 / .86) 0%, rgb(12 28 8 / .62) 38%, rgb(12 28 8 / .18) 70%, rgb(12 28 8 / .05) 100%),
    linear-gradient(to top, rgb(12 28 8 / .55), transparent 45%);
}
.hero-content { position:relative; z-index:2; width:100%; padding-top: calc(var(--nav-h) + var(--topbar-h) + 5vh); padding-bottom: 8vh; max-width: 760px; }
.hero-content .kicker { color: rgba(255,255,255,.86);  font-size:.72rem; letter-spacing:.16em; }
.hero-brand {
  display:block; font-family:var(--display); font-weight:800; text-transform:uppercase;
  line-height:.92; color: #FFFFFF;
  font-size: clamp(1.6rem, 3.2vw + .4rem, 2.9rem);
  text-shadow: 0 2px 24px rgb(0 0 0 / .35);
}
.hero-display {
  display:block; margin-top: .32em; color:#fff;
  font-size: clamp(1.15rem, 1.7vw + .35rem, 1.75rem);
  text-shadow: 0 2px 22px rgb(0 0 0 / .4);
}
.hero-display .accent { color: #D3284E; } /* soft logo red — gentle accent, 7.4:1 on the dark scrim */
.hero-content .lede { color: rgba(255,255,255,.92); margin-top: 16px; max-width: 520px; font-size: .98rem; line-height:1.55; }
.hero-actions { margin-top: 32px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.hero-content .btn-ghost { color:#fff; border-color: rgba(255,255,255,.6); }
.hero-content .btn-ghost:hover { border-color:#fff; color:#fff; background: rgb(255 255 255 / .12); }
.hero-address {
  display:inline-flex; align-items:center; gap:10px; margin-top: 28px;
  font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:.06em;
  text-transform:uppercase; color: rgba(255,255,255,.92);
  border-left: 3px solid var(--green-bright); padding: 6px 0 6px 14px;
 font-size:.82rem; }
.hero-address svg { width:17px; height:17px; flex:none; }
.video-toggle {
  position:absolute; right:18px; bottom:18px; z-index:3;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
  background: rgb(0 0 0 / .42); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.video-toggle:hover { border-color: var(--green-bright); }
.video-toggle svg { width:16px; height:16px; }

/* Kinetic hero type (one-shot on load) */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-lines > * { opacity:0; transform: translateY(26px); animation: heroline .7s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 100ms); }
  @keyframes heroline { to { opacity:1; transform:none; } }
}

/* ---------- Scroll reveals (default-visible; motion is opt-in) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity:0; translate: 0 24px; transition: opacity .6s var(--ease), translate .6s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  html.js .reveal.in-view { opacity:1; translate: 0 0; }
}

/* ---------- Section heads ---------- */
.section-head { max-width: 64ch; }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head .lede { margin-top: 16px; }

/* ---------- Services — editorial row (photo-led, not boxy cards) ---------- */
.services { display:grid; grid-template-columns:repeat(4,1fr); gap: clamp(20px,3vw,34px); }
.service { display:flex; flex-direction:column; position:relative; --acc: var(--green-ink); --bar: var(--green-bright); }
.service.rasp { --acc: var(--rasp-ink); --bar: var(--rasp); }
.service-media { overflow:hidden; border-radius: var(--radius); aspect-ratio: 4/5; position:relative; }
.service-media img { width:100%; height:100%; object-fit:cover; transition: scale .5s var(--ease); }
.service-media::before {
  content:''; position:absolute; left:0; right:0; bottom:0; height:6px; z-index:1;
  background: var(--bar);
}
.service-tag {
  font-family:var(--display); font-weight:700; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; color: var(--acc); margin-top: 20px;
}
.service h3 { font-size: clamp(1.5rem, 1.4vw + 1.1rem, 1.9rem); margin-top: 6px; }
.service p { color: var(--body); font-size:.98rem; margin-top: 10px; flex:1; }
.service .link-draw { margin-top: 16px; color: var(--acc); align-self:flex-start; }
.service .stretch::after { content:''; position:absolute; inset:0; }
@media (hover:hover) and (pointer:fine) {
  .service:hover .service-media img { scale: 1.05; }
}
@media (max-width: 940px) { .services { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 520px) { .services { grid-template-columns:1fr; } .service-media { aspect-ratio: 3/2; } }

/* ---------- Steps (numbered, editorial) ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(20px,3vw,44px); }
.step { position:relative; }
.step .num {
  font-family:var(--display); font-weight:800; font-size: clamp(3rem,5vw,4.4rem);
  color: #262462; line-height:1; letter-spacing:-.01em; display:block;
  opacity:1; border-bottom: 2px solid rgb(38 36 98 / .18); padding-bottom: 10px; margin-bottom: 18px;
}


.step h3 { font-size:1.5rem; margin-bottom:10px; }
.step p { color:var(--body); font-size:.99rem; }
@media (max-width: 760px) { .steps { grid-template-columns:1fr; gap: 34px; } }

/* ---------- Full-bleed photo banner ---------- */
.banner { margin:0; position:relative; }
.banner img { width:100%; height:clamp(320px, 46vw, 560px); object-fit:cover; }
/* Scrim strengthened: white headline sits over the left ~55%. At the old
   .35 stop (55%) white text on a BRIGHT photo dropped to ~2.2:1 (FAIL);
   deepened to .66 across the text zone → >=4.6:1 worst-case + text-shadow. */
.banner .scrim {
  position:absolute; inset:0;
  background: linear-gradient(to right, rgb(12 28 8 / .9) 0%, rgb(12 28 8 / .66) 55%, rgb(12 28 8 / .3) 82%, transparent 100%);
}
.banner figcaption {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  padding: 0 clamp(1.5rem,7vw,6rem); max-width: 900px;
}
.banner .kicker { color: #c7e6b3; }
.banner .banner-line {
  color:#fff; font-family:var(--display); font-weight:800; text-transform:uppercase;
  line-height:.98; font-size: clamp(1.9rem, 4vw, 3.4rem); text-wrap:balance;
  text-shadow: 0 2px 22px rgb(0 0 0 / .35);
}
.banner .banner-line .accent { color: var(--green-bright); }

/* ---------- Gallery (mixed size) ---------- */
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gallery figure { position:relative; border-radius: var(--radius); overflow:hidden; aspect-ratio: 4/3; margin:0; }
.gallery figure.wide { grid-column: span 2; aspect-ratio: auto; }
.gallery figure.tall { grid-row: span 2; aspect-ratio: 3/4; }
.gallery img { width:100%; height:100%; object-fit:cover; transition: scale .5s var(--ease); }
@media (hover:hover) and (pointer:fine) { .gallery figure:hover img { scale:1.06; } }
/* Bottom scrim behind captions — text-shadow alone was the only protection
   over uncontrolled photos (white caption could hit ~1:1 on a light image).
   Scrim sits above the img (z-1) but below the caption (z-2). */
.gallery figure::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(to top, rgb(12 28 8 / .74), rgb(12 28 8 / .12) 42%, transparent 62%);
}
.gallery figcaption {
  position:absolute; left:16px; bottom:14px; z-index:2; font-family:var(--display); font-weight:800;
  font-size:1.15rem; letter-spacing:.05em; text-transform:uppercase; color:#fff;
  text-shadow: 0 2px 12px rgb(0 0 0 / .85);
}
@media (max-width:760px){ .gallery { grid-template-columns:1fr 1fr; } .gallery figure.wide { grid-column: span 2; } .gallery figure.tall { grid-row: auto; aspect-ratio:4/3; } }

/* ---------- Editorial split (asymmetric) ---------- */
.split { display:grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 5vw, 72px); align-items:center; }
.split.media-left { grid-template-columns: 1.05fr 1fr; }
.split .split-media img { border-radius: var(--radius); width:100%; height:100%; object-fit:cover; }
.split .split-media { border-radius: var(--radius); overflow:hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-lift); }
@media (max-width: 860px) { .split, .split.media-left { grid-template-columns: 1fr; } .split .split-media { order:-1; aspect-ratio:16/10; } }

/* ---------- Careers spotlight (bold, editorial) ---------- */
/* SOLID deep green (#14351a) — no gradient, per the brand direction. This is
   also the strongest contrast the band ever had: white 13.5:1, white@.9 11.4:1
   (the old gradient's light end bottomed out at ~5.6:1). */
.careers { position:relative; overflow:hidden; isolation:isolate; color:#fff;
  background: var(--green-deep); }
.careers .careers-splash { position:absolute; right:-40px; top:-30px; width:340px; max-width:46%; opacity:.4; pointer-events:none; z-index:0; }
.careers .flow-inner { position:relative; z-index:1; }
.careers .careers-grid { display:grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.careers .careers-media { border-radius: var(--radius); overflow:hidden; box-shadow: 0 24px 60px rgb(0 0 0 / .3); aspect-ratio: 4/3; }
.careers .careers-media img { width:100%; height:100%; object-fit:cover; }
.careers .kicker { color: var(--green-pale); } /* was green-bright (2.6:1 over the band = FAIL); pale green is AA */
.careers h2 { color:#fff; font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.careers p { color: rgba(255,255,255,.9); }
.careers-quote {
  margin-top: 26px; padding-left: 22px; border-left: 4px solid var(--green-bright);
  font-style:italic; color:#fff; font-size:1.12rem; line-height:1.55; max-width: 52ch;
}
.careers-quote cite { display:block; margin-top:10px; font-style:normal; font-family:var(--display);
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.85rem; color: var(--green-pale); } /* small text on green band → pale (AA), not green-bright (2.6:1 FAIL) */
.careers-badges { display:flex; flex-wrap:wrap; gap:10px; margin: 26px 0 30px; }
.pill { font-family:var(--display); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.82rem;
  color:#fff; border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:8px 16px; }
.careers .btn-primary { background:#fff; color: var(--green-deep); }
.careers .btn-primary:hover { background: var(--rasp); color:#fff; }
@media (max-width: 860px) { .careers .careers-grid { grid-template-columns:1fr; } .careers .careers-media { order:-1; } }

/* ---------- Testimonials (editorial pull-quotes) ---------- */
.quotes-lead { position:relative; padding-top: 8px; }
.quotes-lead .qmark { display:block; font-family:var(--display); font-weight:800; color: var(--green);
  font-size: clamp(4rem,9vw,7rem); line-height:.6; margin-bottom: 6px; } /* was green-bright (2.27:1 on white); green (4.72) reads as a real visible ornament */
.quotes-lead blockquote {
  font-family:var(--text); font-weight:600; line-height:1.32;
  color: var(--ink); font-size: clamp(1.35rem, 1.5vw + .85rem, 2.05rem); max-width: 30ch; text-wrap:balance;
}
.quotes-lead cite { display:block; margin-top:20px; font-style:normal; font-family:var(--display);
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.9rem; color: var(--rasp-ink); }
.quotes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(18px,2.5vw,28px); margin-top: clamp(2.5rem,5vw,4rem); }
.quote {
  background: var(--bg); border:1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px,2.6vw,30px); display:flex; flex-direction:column; gap:14px;
  box-shadow: 0 4px 16px rgb(30 77 27 / .06); border-top: 4px solid var(--green-bright);
}
.quote:nth-child(2) { border-top-color: var(--rasp); }
.quote p { color: var(--body); font-size:1rem; line-height:1.6; flex:1; }
.quote cite { font-style:normal; font-family:var(--display); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; font-size:.82rem; color: var(--green-ink); }
.quote cite span { display:block; color: var(--gray); font-size:.78rem; margin-top:2px; }
@media (max-width: 860px) { .quotes-grid { grid-template-columns:1fr; } }

/* ---------- Locations (editorial list) ---------- */
.loc-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap: 24px; }
.loc-list { display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(18px,2.5vw,28px); }
.loc {
  position:relative; display:flex; flex-direction:column;
  border-radius: var(--radius); overflow:hidden; background: var(--bg);
  border:1px solid var(--line); box-shadow: 0 4px 16px rgb(30 77 27 / .06);
  transition: translate .25s var(--ease), box-shadow .25s, border-color .25s;
}
.loc-media { overflow:hidden; aspect-ratio: 16/10; }
.loc-media img { width:100%; height:100%; object-fit:cover; transition: scale .5s var(--ease); }
.loc-body { padding: 20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.loc-body h3 { font-size:1.5rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.loc-flag { font-family:var(--display); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  font-size:.66rem; color:#fff; background: var(--green); border-radius:999px; padding:3px 10px; }
.loc address { font-style:normal; color: var(--body); line-height:1.5; }
.loc address .confirm { color: var(--gray); font-size:.86rem; }
.loc-foot { margin-top:auto; padding-top:12px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; }
.loc-phone { font-family:var(--display); font-weight:800; letter-spacing:.04em; color: var(--green-ink); text-decoration:none; white-space:nowrap; }
.loc-phone:hover { color: var(--rasp-ink); }
@media (hover:hover) and (pointer:fine) {
  .loc:hover { translate: 0 -6px; box-shadow: var(--shadow-lift); border-color: rgb(62 142 46 / .4); }
  .loc:hover .loc-media img { scale: 1.05; }
}
.loc:focus-within { border-color: var(--green-ink); }
@media (max-width: 940px) { .loc-list { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px) { .loc-list { grid-template-columns:1fr; } }

/* ---------- Insurance reassurance (split + checklist) ---------- */
.ins-points { list-style:none; margin: 22px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.ins-points li { display:flex; align-items:flex-start; gap:14px; font-weight:600; color: var(--ink); font-size:1.05rem; }
.ins-check { flex:none; width:30px; height:30px; border-radius:50%; background: var(--surface);
  display:flex; align-items:center; justify-content:center; color: var(--green-ink); margin-top:1px; }
.ins-check svg { width:16px; height:16px; }

/* ---------- CTA band ---------- */
/* SOLID green-ink (#2e6b1f) — no gradient. A shade lighter than the .careers
   band and the footer so the CTA still reads as its own block. White 6.48:1,
   white@.9 5.6:1 (AA). */
.cta-band { position:relative; overflow:hidden; text-align:center;
  background: var(--green-ink); }
.cta-band .cta-splash { position:absolute; left:-48px; bottom:-40px; width:360px; max-width:44%; opacity:.28; pointer-events:none; z-index:0; transform: rotate(-8deg); }
.cta-band .flow-inner { position:relative; z-index:1; }
.cta-band .kicker { color: var(--green-pale); } /* centred over mid-green band → pale (AA); green-bright was 2.6:1 FAIL */
.cta-band h2 { color:#fff; font-size: clamp(2.2rem,5vw,4rem); margin-bottom: 14px; text-wrap:balance; }
.cta-band p { color: rgb(255 255 255 / .9); margin: 0 auto 30px; font-size:1.14rem; font-weight:500; max-width: 60ch; }
.cta-band .btn-giant { background:#fff; color: var(--green-deep); }
.cta-band .btn-giant:hover { background: var(--rasp); color:#fff; box-shadow: 0 16px 44px rgb(0 0 0 / .3); }
.cta-band .cta-actions { display:flex; gap:22px; flex-wrap:wrap; align-items:center; justify-content:center; }
.cta-band .cta-phone { color:#fff; font-family:var(--display); font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; }
.cta-band .cta-phone:hover { color: var(--green-pale); } /* AA over the band (green-bright hover was 2.6:1 FAIL) */

/* ---------- Footer (DEEP-GREEN dark anchor #14351a via --green-deep) ----------
   Deepened from #1e4d1b for a clear grounded anchor. AA verified:
   body #e4efdd 11.4:1 · links #c4d6ba 8.8:1 (hover green-bright 6.0:1) ·
   confirm #9fb695 6.2:1 · h4 green-bright 6.0:1 — all AA on #14351a. */
footer { background: var(--green-deep); color:#e4efdd; }
footer h4 { font-size:1rem; letter-spacing:.13em; color: var(--green-bright); margin-bottom:16px; }
footer a { color:#c4d6ba; text-decoration:none; transition: color .18s; }
footer a:hover { color: var(--green-bright); }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1.3fr 1fr; gap: clamp(24px,4vw,44px); padding-block: clamp(3rem,6vw,4.5rem) 2rem; border-bottom:1px solid rgba(255,255,255,.14); }
.footer-col p, .footer-col li, .footer-col address { color:#c4d6ba; font-size:.95rem; font-style:normal; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.footer-logo { height:46px; width:auto; margin-bottom:16px; }
.footer-nap { display:block; margin-bottom:14px; line-height:1.45; }
.footer-nap strong { display:block; color:#fff; font-family:var(--display); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.footer-nap .confirm { color:#9fb695; font-size:.82rem; }
.footer-social { display:flex; gap:12px; margin-top:18px; }
.footer-social a { display:flex; width:38px; height:38px; border:1px solid rgba(255,255,255,.25); border-radius:50%; align-items:center; justify-content:center; }
.footer-social a:hover { border-color: var(--green-bright); }
.footer-social svg { width:19px; height:19px; }
/* Small legal text: alpha raised so it clears AA on the deep-green footer
   (.55 white ≈ 5.2 was borderline once, .72 = 7.7:1 solid AA for .82rem). */
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-block: 20px 8px; font-size:.82rem; color: rgba(255,255,255,.72); }
.footer-legal { display:flex; gap:18px; flex-wrap:wrap; }
.footer-note { padding-bottom: 26px; font-size:.8rem; color: rgba(255,255,255,.65); max-width: 96ch; } /* .65 white = ~6.5:1 (AA) */
@media (max-width:860px){ .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid { grid-template-columns:1fr; } }

/* ---------- Mobile bottom bar ---------- */
.mobile-bar {
  display:none; position:fixed; inset:auto 0 0 0; z-index:90;
  padding: 10px clamp(12px,4vw,20px) calc(10px + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / .95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top:1px solid var(--line);
  grid-template-columns: 1fr 1fr; gap:10px;
  box-shadow: 0 -6px 24px rgb(0 0 0 / .08);
}
@media (prefers-reduced-transparency: reduce) { .mobile-bar { -webkit-backdrop-filter:none; backdrop-filter:none; background: rgb(255 255 255 / .99); } }
.mobile-bar .btn { width:100%; padding: 13px 10px; font-size:1.05rem; }
.mobile-bar .btn-ghost { color: var(--green-ink); border-color: var(--green); }
.mobile-bar .btn-ghost:hover { color: var(--rasp-ink); border-color: var(--rasp); }
@media (max-width: 768px) {
  .mobile-bar { display:grid; }
  body { padding-bottom: 78px; }
}

/* ---------- Chat widget (guided) ----------
   DISTINCT high-contrast treatment so the widget reads as its own object,
   NOT part of the green page chrome: RASPBERRY launcher + deep-green dark
   header. Launcher #c01d45 with white icon = 5.99:1 (AA); hovers to the deep
   green anchor. Everything below keeps AA (bubbles, chips, send). */
.chat-launcher {
  position:fixed; right:18px; bottom:18px; z-index:95;
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; border:2px solid var(--green-deep);   /* white so the colour logo mark reads */
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px rgb(31 95 139 / .4);
  transition: transform .2s var(--ease), background .2s;
}
.chat-launcher:hover { background: var(--green-deep); transform: scale(1.06); } /* hover to deep-green anchor (white icon 13.5:1) */
.chat-launcher svg { width:26px; height:26px; }
@media (max-width:768px) { .chat-launcher { bottom: calc(84px + env(safe-area-inset-bottom)); } }
.chat-panel {
  position:fixed; right:18px; bottom:90px; z-index:96; width:min(370px, calc(100vw - 36px));
  background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow: 0 24px 60px rgb(0 0 0 / .25); display:none; flex-direction:column;
}
.chat-panel.open { display:flex; }
@media (max-width:768px) { .chat-panel { bottom: calc(154px + env(safe-area-inset-bottom)); } }
.chat-head { background: var(--green-deep); color:#fff; padding: 15px 18px; display:flex; align-items:center; gap:12px; } /* dark deep-green header, white text 13.5:1 */
/* Scoped as .chat-head .chat-avatar so it OUT-specifies `.chat-head span`
   (which would otherwise dim the initials to 80% white = 4.28:1); full white = 5.99:1. */
.chat-head .chat-avatar { width:38px; height:38px; border-radius:50%; background: var(--rasp-ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:800; font-size:1rem; flex:none; } /* raspberry chip + white initials 5.99:1 (was green-deep-on-green-bright 4.34, borderline) — also ties the avatar to the raspberry launcher */
.chat-head .chat-title { flex:1; }
.chat-head strong { display:block; font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:1.05rem; }
.chat-head span { display:block; font-size:.8rem; color: rgba(255,255,255,.8); }
.chat-head button { background:none; border:none; cursor:pointer; color:#fff; padding:4px; }
.chat-head button svg { width:20px; height:20px; }
.chat-body { padding: 16px; display:flex; flex-direction:column; gap:12px; max-height: 60vh; overflow-y:auto; }
.chat-msg { background: var(--surface); border:1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size:.94rem; color: var(--ink); }
.chat-msg p { max-width:none; margin:0 0 8px; }
.chat-msg p:last-child { margin-bottom:0; }
.chat-msg ul, .chat-msg ol { margin: 6px 0 6px 18px; padding:0; }
.chat-msg li { margin-bottom:4px; }
.chat-msg .link-draw { color: var(--green-ink); }
.chat-msg--user { background: var(--green-ink); color:#fff; border-color: var(--green-ink); align-self:flex-end; max-width: 85%; } /* green-ink so .94rem white text is 6.48:1 (AA) regardless of green fill token */
.chat-quick { display:flex; flex-wrap:wrap; gap:8px; }
.chat-quick button {
  background: transparent; border:1px solid var(--green); color: var(--green-ink);
  border-radius: 999px; padding: 8px 14px; font-family:var(--text); font-weight:600; font-size:.85rem; cursor:pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.chat-quick button:hover { background: var(--green); color:#fff; }
.chat-form { display:none; flex-direction:column; gap:9px; }
.chat-form.open { display:flex; }
.chat-form input, .chat-form textarea {
  width:100%; background:#fff; border:1px solid rgba(0,0,0,.2); border-radius:8px;
  color: var(--ink); padding: 11px 13px; font-family: var(--text); font-size:.95rem;
}
.chat-form input:focus, .chat-form textarea:focus { outline:2px solid var(--green-ink); outline-offset:1px; border-color:transparent; }
/* GREEN send button — the one green anchor inside the raspberry/dark widget.
   --green (#398328) white text = 4.72:1 (AA); hover deepens to green-ink. */
.chat-send, .chat-form button[type="submit"] {
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer;
  font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:.95rem;
  background: var(--green); color:#fff; border-radius:999px; padding:11px 22px; line-height:1;
  transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.chat-send svg, .chat-form button[type="submit"] svg { width:16px; height:16px; }
.chat-send:hover, .chat-form button[type="submit"]:hover { background: var(--green-ink); transform: translateY(-1px); }
.chat-send:active, .chat-form button[type="submit"]:active { transform: scale(.97); }
.chat-note { font-size:.76rem; color: var(--gray); }
.hp-field { position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

/* ---------- Utility ---------- */
.band { background: var(--band); }
.surface { background: var(--surface); }
.mt-1 { margin-top: 14px; } .mt-2 { margin-top: 26px; } .mt-3 { margin-top: 44px; }
.mb-1 { margin-bottom: 14px; } .mb-2 { margin-bottom: 26px; } .mb-3 { margin-bottom: 44px; }
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ════════════════════════════════════════════════════════════════════════
   PREMIUM MOTION + FUNCTIONAL UI  (site-wide layer, additive)
   ------------------------------------------------------------------------
   Everything below is opt-in via class names — placing the markup is all a
   page needs. Motion is gated by (prefers-reduced-motion: no-preference);
   glass is gated by (prefers-reduced-transparency: reduce) + @supports.
   Palette + type reuse the tokens above (green/raspberry on light, AA).
   NO EMOJIS anywhere — icons are inline SVG supplied in markup.

   CONTRACT INDEX (class / attribute hooks the JS + page agents rely on)
   ─ View transitions: automatic cross-document; persistent chrome named
     gc-nav / gc-rail / gc-mobilebar / gc-chat / gc-hero. No JS required.
   ─ Quick-action rail: .quick-rail  >  .quick-action[.is-primary]
       .quick-action > .quick-ico (svg wrap) + .quick-label (text)
       actions: data-action="get-started|call|find|chat|share"
       chat/share are <button>; the rest are <a>. On mobile it is the bar.
   ─ Motion utils: .reveal (+ .from-left/.from-right/.zoom/.blur-in),
       JS toggles .in-view. .u-lift / .u-press / .card / .card.is-clickable.
   ─ Media: .media[.round-lg] .media-zoom .media-scrim .ken-burns .grain.
   ─ Get Started wizard: .wizard > .wizard-progress (li.is-active/.is-done)
       + .wizard-panels > .wizard-panel(.is-active) ; .choice-grid >
       .choice-chip(:has(input:checked)/.is-selected) ; .wizard-nav ;
       .wizard-review . Fields use the shared .field/.input set below.
   ─ Clinic finder: .finder[.is-empty] > .finder-toolbar (.filter-group >
       .filter-chips > .filter-chip[aria-pressed]/.is-active) ; .finder-count
       ; .finder-layout > .finder-results > .finder-card[hidden] ;
       .finder-tag ; .finder-map ; .finder-empty .
   ─ Insurance helper: .elig > .elig-panels > .elig-panel(.is-active) with
       .elig-question + .elig-options > .elig-option ; .elig-result[.warn] .
   ─ Chat (extends existing .chat-*): adds slide-up, typing dots
       (.chat-typing), message enter, unread dot (.chat-launcher.has-unread),
       optional .chat-panel.glass .
   ─ Forms: shared .field/.input/.select/.textarea/.form-grid + .form-status
       (.ok/.err) consumed by magazine.js form[data-mailer] handler.
   ════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1 · CROSS-DOCUMENT PAGE TRANSITIONS
   Soft fade + slight upward slide for the page body; nav, rails,
   chat launcher and hero morph rather than flash. The whole feature
   is nested inside no-preference so it is fully inert (instant nav)
   under prefers-reduced-motion.
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  /* Persistent chrome keeps its own snapshot so it never cross-fades
     with the page. Identical across pages => reads as "it stayed put". */
  .nav           { view-transition-name: gc-nav; }
  .quick-rail    { view-transition-name: gc-rail; }
  .mobile-bar    { view-transition-name: gc-mobilebar; }
  .chat-launcher { view-transition-name: gc-chat; }
  .chat-panel    { view-transition-name: gc-chatpanel; }
  /* Optional shared-element morph: a page's hero media eases into the next. */
  .hero-media    { view-transition-name: gc-hero; }

  /* The page content (everything unnamed = "root"): fade + rise. */
  ::view-transition-group(root) { animation-duration: .42s; animation-timing-function: var(--ease); }
  ::view-transition-old(root)   { animation: gc-vt-out .26s var(--ease) both; }
  ::view-transition-new(root)   { animation: gc-vt-in  .42s var(--ease) both; }
  @keyframes gc-vt-out { to   { opacity:0; transform: translateY(-8px); } }
  @keyframes gc-vt-in  { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform:none; } }

  /* Persistent chrome: snap the old/new snapshots (no flicker, no fade). */
  ::view-transition-old(gc-nav),        ::view-transition-new(gc-nav),
  ::view-transition-old(gc-rail),       ::view-transition-new(gc-rail),
  ::view-transition-old(gc-mobilebar),  ::view-transition-new(gc-mobilebar),
  ::view-transition-old(gc-chat),       ::view-transition-new(gc-chat),
  ::view-transition-old(gc-chatpanel),  ::view-transition-new(gc-chatpanel) {
    animation: none; mix-blend-mode: normal;
  }

  /* Hero: gentle cross-fade morph between differing posters. */
  ::view-transition-group(gc-hero) { animation-duration: .5s; animation-timing-function: var(--ease); }
}

/* ─────────────────────────────────────────────────────────────
   2 · QUICK-ACTION RAIL
   Desktop: a slim glass rail pinned to the right gutter, vertically
   centred, that expands each label leftward on hover/focus.
   Mobile (<=768px): collapses into a safe-area padded bottom bar.
   Actions: Get Started (primary), Call, Find a Clinic, Chat, Share.
   ───────────────────────────────────────────────────────────── */
.quick-rail {
  position: fixed; z-index: 94;
  right: clamp(12px, 1.4vw, 20px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  padding: 10px; border-radius: 999px;
  background: rgb(255 255 255 / .72);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgb(30 77 27 / .16);
}
@media (prefers-reduced-transparency: reduce) { .quick-rail { -webkit-backdrop-filter:none; backdrop-filter:none; background: rgb(255 255 255 / .98); } }
@supports not (backdrop-filter: blur(1px)) { .quick-rail { background: rgb(255 255 255 / .97); } }

.quick-action {
  position: relative; display: inline-flex; flex-direction: row-reverse; align-items: center;
  gap: 0; text-decoration: none; cursor: pointer; overflow: hidden;
  height: 48px; min-width: 48px; padding: 0; border: 1px solid transparent;
  border-radius: 999px; background: transparent; color: var(--green-ink);
  font: inherit;
  transition: background .22s var(--ease), color .22s var(--ease),
              box-shadow .22s var(--ease), transform .22s var(--ease),
              border-color .22s var(--ease);
}
.quick-ico {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center;
}
.quick-ico svg { width: 22px; height: 22px; }
.quick-label {
  max-width: 0; opacity: 0; white-space: nowrap; overflow: hidden;
  font-family: var(--display); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-size: .98rem; line-height: 1;
  transition: max-width .28s var(--ease), opacity .2s var(--ease), padding .28s var(--ease);
}
/* Emphasised primary (Get Started) — always reads as the green pill. */
.quick-action.is-primary { background: var(--green); color: #fff; box-shadow: 0 6px 16px rgb(62 142 46 / .3); }

@media (hover:hover) and (pointer:fine) {
  .quick-action:hover { background: var(--surface); color: var(--green-ink); transform: translateY(-1px); }
  .quick-action.is-primary:hover { background: var(--rasp); color: #fff; box-shadow: 0 10px 24px rgb(44 110 158 / .34); }
  .quick-action:hover .quick-label,
  .quick-action:focus-visible .quick-label { max-width: 12rem; opacity: 1; padding-left: 14px; }
}
/* Keyboard users get the label without a pointer. */
.quick-action:focus-visible .quick-label { max-width: 12rem; opacity: 1; padding-left: 14px; }
.quick-action:active { transform: scale(.96); }

/* Mobile: bottom bar. Icons over tiny labels, evenly spread, safe-area padded. */
@media (max-width: 768px) {
  .quick-rail {
    top: auto; transform: none; inset: auto 0 0 0;
    flex-direction: row; align-items: stretch; justify-content: space-around;
    gap: 4px; border-radius: 0; padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    border: none; border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgb(0 0 0 / .08);
    background: rgb(255 255 255 / .95);
  }
  @media (prefers-reduced-transparency: reduce) { .quick-rail { background: rgb(255 255 255 / .99); } }
  .quick-action {
    flex: 1 1 0; flex-direction: column; gap: 3px; height: auto; min-width: 0;
    padding: 6px 4px; border-radius: var(--radius-sm); color: var(--green-ink);
  }
  .quick-action.is-primary { background: transparent; color: var(--rasp-ink); box-shadow: none; }
  .quick-ico { width: 26px; height: 26px; }
  .quick-ico svg { width: 24px; height: 24px; }
  .quick-label {
    max-width: none; opacity: 1; padding: 0; font-size: .66rem; letter-spacing: .04em;
    white-space: nowrap; overflow: visible;
  }
  /* Reserve space so the fixed bar never covers page content. */
  body:has(.quick-rail) { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  /* If a page ships the rail, it supersedes the legacy two-button bar. */
  body:has(.quick-rail) .mobile-bar { display: none; }
  /* Nudge the chat launcher above the bar when both are present. */
  body:has(.quick-rail) .chat-launcher { bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* ─────────────────────────────────────────────────────────────
   3 · MOTION / INTERACTION UTILITIES
   ───────────────────────────────────────────────────────────── */

/* Scroll-reveal direction/effect modifiers — compound with .reveal so the
   existing IntersectionObserver (adds .in-view) drives them. Default markup
   state is the revealed one; motion only applies under .js + no-preference. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal.from-left  { translate: -28px 0; }
  html.js .reveal.from-right { translate:  28px 0; }
  html.js .reveal.zoom       { transform: scale(.94); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i,0) * 80ms); }
  html.js .reveal.blur-in    { filter: blur(10px); transition: opacity .6s var(--ease), translate .6s var(--ease), filter .6s var(--ease); transition-delay: calc(var(--i,0) * 80ms); }
  html.js .reveal.in-view.from-left,
  html.js .reveal.in-view.from-right { translate: 0 0; }
  html.js .reveal.in-view.zoom       { transform: none; }
  html.js .reveal.in-view.blur-in    { filter: none; }
}

/* Hover micro-interactions (named easing, mirrored on :focus-within). */
.u-lift  { transition: transform .25s var(--ease), box-shadow .25s var(--ease); will-change: transform; }
.u-press { transition: transform .12s var(--ease); }
.u-press:active { transform: scale(.98); }
@media (hover:hover) and (pointer:fine) {
  .u-lift:hover, .u-lift:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}

/* Generic card surface used by pages + functional modules. */
.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 4px 16px rgb(30 77 27 / .06);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card-pad { padding: clamp(20px, 2.6vw, 30px); }
.card.accent-top    { border-top: 4px solid var(--green-bright); }
.card.accent-top-rasp { border-top: 4px solid var(--rasp); }
@media (hover:hover) and (pointer:fine) {
  .card.is-clickable:hover, .card.is-clickable:focus-within {
    transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: rgb(62 142 46 / .4);
  }
}
/* Full-card click target overlay (pairs with a real link inside). */
.stretch-link::after { content:''; position:absolute; inset:0; z-index:1; }

/* Media treatments — premium imagery/video. */
.media { position: relative; overflow: hidden; border-radius: var(--radius); }
.media.round-lg { border-radius: clamp(18px, 3vw, 34px); }
.media > img, .media > video, .media > picture > img { width:100%; height:100%; object-fit:cover; display:block; }
.media-zoom > img, .media-zoom > picture > img { transition: scale .6s var(--ease); }
@media (hover:hover) and (pointer:fine) { .media-zoom:hover > img, .media-zoom:hover > picture > img { scale: 1.06; } }
/* Gradient scrim for legible captions over media. */
.media-scrim::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to top, rgb(12 28 8 / .72), rgb(12 28 8 / .12) 52%, transparent 78%);
}
.media-scrim.scrim-left::after {
  background: linear-gradient(to right, rgb(12 28 8 / .78), rgb(12 28 8 / .3) 55%, transparent 85%);
}
/* Ken Burns — hero poster drift, motion-gated only. */
@media (prefers-reduced-motion: no-preference) {
  .ken-burns > img, .ken-burns > picture > img {
    transform-origin: center; animation: gc-kenburns 22s ease-in-out infinite alternate;
  }
  @keyframes gc-kenburns { from { scale: 1; } to { scale: 1.09; } }
}
/* Tasteful film grain — self-contained inline SVG turbulence, no external asset. */
.grain::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ─────────────────────────────────────────────────────────────
   4a · SHARED FORM FIELDS + STATUS (used by wizard, contact,
        careers application, insurance helper). Big, comfortable inputs.
   ───────────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
.form-grid .field.span-2 { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } .form-grid .field.span-2 { grid-column: auto; } }

.field { display: flex; flex-direction: column; gap: 7px; }
.field > label, .field-label {
  font-family: var(--display); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; font-size: .9rem; color: var(--ink);
}
.field .req { color: var(--rasp-ink); }
.field-hint { font-size: .85rem; color: var(--gray); }

.input, .select, .textarea,
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--text); font-size: 1.05rem; color: var(--ink);
  background: #fff; border: 1.5px solid rgba(0,0,0,.18); border-radius: var(--radius-sm);
  padding: 14px 16px; min-height: 52px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.textarea, .field textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.select, .field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e6b1f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; padding-right: 46px; }
.input:focus, .select:focus, .textarea:focus,
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--green-ink); outline-offset: 1px; border-color: transparent;
}
.input::placeholder, .textarea::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--gray); }

.form-status { margin-top: 4px; font-weight: 600; font-size: 1rem; border-radius: var(--radius-sm); }
.form-status:empty { display: none; }
.form-status.ok  { color: var(--green-ink); background: var(--surface); border: 1px solid rgb(62 142 46 / .32); padding: 14px 16px; }
.form-status.err { color: var(--rasp-ink);  background: #fdeef2;        border: 1px solid rgb(31 95 139 / .3);  padding: 14px 16px; }

/* Shared chip primitive (choice + filter chips build on this). */
.chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--text); font-weight: 600; font-size: .95rem; line-height: 1;
  min-height: 44px; padding: 10px 18px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff; color: var(--body);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.chip:hover { border-color: var(--green); color: var(--green-ink); }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"], .chip.is-active, .chip:has(input:checked) {
  background: var(--green); border-color: var(--green); color: #fff;
}

/* ─────────────────────────────────────────────────────────────
   4b · GET STARTED WIZARD
   ───────────────────────────────────────────────────────────── */
.wizard { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); overflow: hidden; }
.wizard-head { padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 34px) 0; }

/* Progress indicator — numbered dots joined by a track. */
.wizard-progress { list-style: none; display: flex; align-items: center; gap: 6px; padding: 0; margin: 0 0 6px; }
.wizard-progress li { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; color: var(--gray); }
.wizard-progress li:last-child { flex: 0 0 auto; }
.wizard-dot {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); color: var(--green-ink);
  font-family: var(--display); font-weight: 800; font-size: 1rem; border: 2px solid transparent;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.wizard-dot svg { width: 17px; height: 17px; }
.wizard-track { flex: 1; height: 3px; border-radius: 999px; background: var(--surface); min-width: 14px; }
.wizard-progress li.is-active .wizard-dot { background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 0 0 4px rgb(62 142 46 / .16); }
.wizard-progress li.is-done   .wizard-dot { background: var(--green-ink); color: #fff; }
.wizard-progress li.is-done   .wizard-track { background: var(--green-bright); }
.wizard-step-label { font-family: var(--display); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: .82rem; white-space: nowrap; }
.wizard-progress li.is-active .wizard-step-label { color: var(--green-ink); }
@media (max-width: 620px) { .wizard-step-label { display: none; } }

.wizard-panels { padding: clamp(20px, 3vw, 34px); }
.wizard-panel { display: none; }
.wizard-panel.is-active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .wizard-panel.is-active { animation: gc-panel-in .34s var(--ease); }
  @keyframes gc-panel-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
}
.wizard-panel > .kicker { margin-bottom: 8px; }
.wizard-panel h2, .wizard-panel h3 { font-size: clamp(1.5rem, 2vw + .6rem, 2.1rem); }
.wizard-panel .wizard-lede { color: var(--body); margin: 8px 0 22px; font-size: 1.05rem; }

/* Big selectable choice chips (services / clinic / who-for). */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.choice-chip {
  position: relative; display: flex; align-items: flex-start; gap: 13px;
  padding: 16px 18px; min-height: 66px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.choice-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.choice-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface); color: var(--green-ink); transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.choice-ico svg { width: 22px; height: 22px; }
.choice-text { display: flex; flex-direction: column; gap: 3px; }
.choice-text strong { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 1.08rem; color: var(--ink); line-height: 1.05; }
.choice-text span { font-size: .9rem; color: var(--gray); }
.choice-check { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--green); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.6);
  transition: opacity .2s var(--ease), transform .2s var(--ease); }
.choice-check svg { width: 15px; height: 15px; }
@media (hover:hover) and (pointer:fine) {
  .choice-chip:hover { border-color: var(--green); box-shadow: 0 8px 20px rgb(30 77 27 / .1); transform: translateY(-2px); }
  .choice-chip:hover .choice-ico { transform: scale(1.08); }
}
.choice-chip:has(input:checked), .choice-chip.is-selected {
  border-color: var(--green); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--green);
}
.choice-chip:has(input:checked) .choice-ico, .choice-chip.is-selected .choice-ico { background: var(--green); color: #fff; }
.choice-chip:has(input:checked) .choice-check, .choice-chip.is-selected .choice-check { opacity: 1; transform: scale(1); }
.choice-chip:focus-within { outline: 2px solid var(--green-ink); outline-offset: 2px; }

/* Wizard footer navigation + final review. */
.wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: clamp(16px, 2.4vw, 24px) clamp(20px, 3vw, 34px); border-top: 1px solid var(--line); background: var(--band); }
.wizard-nav .wizard-back { visibility: visible; }
.wizard-nav .wizard-back[hidden] { visibility: hidden; display: inline-flex; }
.wizard-review { display: flex; flex-direction: column; gap: 12px; }
.wizard-review dl { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 8px 18px; margin: 0;
  padding: 18px 20px; background: var(--surface); border-radius: var(--radius); }
.wizard-review dt { font-family: var(--display); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .82rem; color: var(--green-ink); }
.wizard-review dd { margin: 0; color: var(--ink); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────
   4c · CLINIC FINDER
   ───────────────────────────────────────────────────────────── */
.finder { display: block; }
.finder-toolbar { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 30px); align-items: flex-start;
  justify-content: space-between; margin-bottom: clamp(18px, 3vw, 30px); }
.filter-group { display: flex; flex-direction: column; gap: 10px; }
.filter-group-label { font-family: var(--display); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-size: .82rem; color: var(--rasp-ink); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.filter-chip { /* inherits .chip look; add for standalone use */
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--text); font-weight: 600; font-size: .92rem; line-height: 1; min-height: 42px;
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--body);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease); }
.filter-chip:hover { border-color: var(--green); color: var(--green-ink); }
.filter-chip:active { transform: scale(.97); }
.filter-chip[aria-pressed="true"], .filter-chip.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.finder-count { font-family: var(--display); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gray); align-self: flex-end; }
.finder-count b { color: var(--green-ink); }

.finder-layout { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(20px, 3vw, 36px); align-items: start; }
.finder-results { display: flex; flex-direction: column; gap: 16px; }
.finder-card {
  position: relative; display: grid; grid-template-columns: 128px 1fr; gap: 16px;
  padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 4px 16px rgb(30 77 27 / .06);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.finder-card[hidden] { display: none; }
@media (hover:hover) and (pointer:fine) {
  .finder-card:hover, .finder-card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgb(62 142 46 / .4); }
}
.finder-card-media { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; background: var(--surface); }
.finder-card-media img { width: 100%; height: 100%; object-fit: cover; }
.finder-card-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.finder-card h3 { font-size: 1.4rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.finder-card address { font-style: normal; color: var(--body); line-height: 1.45; }
.finder-card .confirm { color: var(--gray); font-size: .85rem; }
.finder-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.finder-tag { font-family: var(--display); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  font-size: .68rem; color: var(--green-ink); background: var(--surface); border-radius: 999px; padding: 4px 10px; }
.finder-tag.rasp { color: var(--rasp-ink); }
.finder-card-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: auto; padding-top: 6px; }
.finder-card-actions .loc-phone { z-index: 1; position: relative; }

.finder-map { position: sticky; top: calc(var(--nav-h) + 16px); border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--surface); box-shadow: var(--shadow-lift); }
.finder-map iframe, .finder-map img { width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }
.finder-map-placeholder { width: 100%; height: 100%; display: grid; place-items: center; text-align: center;
  color: var(--gray); padding: 24px; }
.finder-map-placeholder svg { width: 46px; height: 46px; color: var(--green-bright); margin-bottom: 10px; }

.finder-empty { display: none; padding: clamp(28px, 5vw, 44px); text-align: center; color: var(--gray);
  border: 1px dashed rgba(0,0,0,.2); border-radius: var(--radius); grid-column: 1 / -1; }
.finder.is-empty .finder-empty { display: block; }
.finder.is-empty .finder-results > .finder-card { display: none; }

@media (max-width: 900px) {
  .finder-layout { grid-template-columns: 1fr; }
  .finder-map { position: static; aspect-ratio: 16 / 10; order: -1; }
}
@media (max-width: 480px) {
  .finder-card { grid-template-columns: 1fr; }
  .finder-card-media { aspect-ratio: 16 / 9; }
}

/* ─────────────────────────────────────────────────────────────
   4d · INSURANCE ELIGIBILITY HELPER (guided Q -> A cards)
   ───────────────────────────────────────────────────────────── */
.elig { max-width: 640px; }
.elig-shell { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: clamp(22px, 3.4vw, 36px); }
.elig-progressbar { height: 4px; border-radius: 999px; background: var(--surface); overflow: hidden; margin-bottom: 22px; }
.elig-progressbar > i { display: block; height: 100%; background: var(--green-bright); border-radius: 999px;
  width: 0; transition: width .4s var(--ease); }
.elig-panels { position: relative; }
.elig-panel { display: none; }
.elig-panel.is-active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .elig-panel.is-active { animation: gc-panel-in .34s var(--ease); }
}
.elig-step-count { font-family: var(--display); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-size: .8rem; color: var(--rasp-ink); margin-bottom: 8px; display: block; }
.elig-question { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 1.02;
  color: var(--ink); font-size: clamp(1.4rem, 2vw + .5rem, 1.95rem); text-wrap: balance; }
.elig-help { color: var(--body); margin-top: 8px; font-size: 1rem; }
.elig-options { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.elig-option {
  width: 100%; text-align: left; cursor: pointer; font: inherit;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; min-height: 56px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; font-size: 1.02rem;
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.elig-option .elig-arrow { flex: none; color: var(--green-ink); display: inline-flex; transition: transform .2s var(--ease); }
.elig-option .elig-arrow svg { width: 20px; height: 20px; }
@media (hover:hover) and (pointer:fine) {
  .elig-option:hover { border-color: var(--green); color: var(--green-ink); background: var(--surface); }
  .elig-option:hover .elig-arrow { transform: translateX(4px); }
}
.elig-option[aria-pressed="true"], .elig-option.is-active { border-color: var(--green); background: var(--surface); color: var(--green-ink); }

/* Outcome card — reassurance (green) or heads-up (raspberry, still positive). */
.elig-result { border-radius: var(--radius); background: var(--surface); border-left: 5px solid var(--green-bright);
  padding: clamp(20px, 3vw, 28px); }
.elig-result.warn { border-left-color: var(--rasp); }
.elig-result h3 { font-size: clamp(1.4rem, 2vw + .5rem, 1.9rem); }
.elig-result p { color: var(--body); margin-top: 10px; }
.elig-result .elig-cta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.elig-back { background: none; border: none; cursor: pointer; font: inherit; margin-top: 20px;
  color: var(--green-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.elig-back svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.elig-back:hover { color: var(--rasp-ink); }
.elig-back:hover svg { transform: translateX(-3px); }
.elig-disclaimer { font-size: .82rem; color: var(--gray); margin-top: 18px; }

/* ─────────────────────────────────────────────────────────────
   4e · CHAT ENHANCEMENTS (extends existing .chat-* — additive only)
   Slide-up panel, message enter, typing dots, unread pip, glass option.
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .chat-panel.open { animation: gc-chat-in .34s var(--ease); transform-origin: bottom right; }
  @keyframes gc-chat-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
  .chat-body .chat-msg, .chat-body .chat-typing { animation: gc-msg-in .3s var(--ease); }
  @keyframes gc-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .chat-launcher.has-unread { animation: gc-launch-pulse 2.4s var(--ease) infinite; }
  /* raspberry pulse to match the new launcher colour */
  @keyframes gc-launch-pulse { 0%,100% { box-shadow: 0 10px 30px rgb(31 95 139 / .4); } 50% { box-shadow: 0 10px 30px rgb(31 95 139 / .4), 0 0 0 10px rgb(31 95 139 / .18); } }
}
/* Unread pip on the launcher. */
.chat-launcher { position: fixed; } /* re-assert (existing) so ::after anchors correctly */
.chat-launcher.has-unread::after {
  content: ''; position: absolute; top: 9px; right: 11px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--yellow); border: 2px solid #fff; /* yellow pip on the raspberry launcher = 4.32:1 (visible); white ring separates it */
}
/* Typing indicator bubble. */
.chat-typing { display: inline-flex; align-items: center; gap: 5px; width: fit-content;
  padding: 12px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--green-ink); opacity: .4; }
@media (prefers-reduced-motion: no-preference) {
  .chat-typing span { animation: gc-typing 1.2s var(--ease) infinite; }
  .chat-typing span:nth-child(2) { animation-delay: .16s; }
  .chat-typing span:nth-child(3) { animation-delay: .32s; }
  @keyframes gc-typing { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
}
/* Optional glass treatment for the chat body (head stays solid green). */
.chat-panel.glass .chat-body {
  background: rgb(255 255 255 / .82);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
}
@media (prefers-reduced-transparency: reduce) { .chat-panel.glass .chat-body { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; } }
@supports not (backdrop-filter: blur(1px)) { .chat-panel.glass .chat-body { background: #fff; } }

/* ════════════════════════════════════════════════════════════════════════
   SERVICE PAGES LAYER  (additive — powers the /services/* editorial rebuilds)
   ------------------------------------------------------------------------
   Full-bleed photo hero, "Is this your child?" symptom checklist, offered-at
   clinic links, and a native <details> FAQ accordion. Per-service accent tint
   via .svc / .svc.tint-rasp on <main>. Everything reuses the :root tokens and
   the .flow named-line grid; nothing here touches the approved homepage.
   NO EMOJIS — inline SVG only.
   ════════════════════════════════════════════════════════════════════════ */

/* Per-service accent tint. Default = green; .tint-rasp flips to raspberry.
   --acc = large/decorative + hover fill; --acc-ink = AA text/links. */
.svc            { --acc: var(--green);      --acc-bright: var(--green-bright); --acc-ink: var(--green-ink); }
.svc.tint-rasp  { --acc: var(--rasp);       --acc-bright: var(--rasp);         --acc-ink: var(--rasp-ink);  }

/* ---------- Full-bleed service hero (photo + condensed headline) ---------- */
.svc-hero { position: relative; min-height: clamp(540px, 78vh, 820px);
  align-content: end; overflow: hidden; isolation: isolate; }
.svc-hero-media { position: absolute; inset: 0; z-index: 0; background: #0c1c08; }
.svc-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Left-weighted scrim so left-aligned white type stays legible over the photo. */
.svc-hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgb(12 28 8 / .88) 0%, rgb(12 28 8 / .66) 40%, rgb(12 28 8 / .22) 72%, rgb(12 28 8 / .05) 100%),
    linear-gradient(to top, rgb(12 28 8 / .72), transparent 46%);
}
.svc-hero-content { position: relative; z-index: 2; width: 100%;
  padding-top: calc(var(--nav-h) + 7vh); padding-bottom: clamp(3rem, 8vh, 6.5rem); max-width: 800px; }
.svc-hero .kicker { color: #c7e6b3; }
.svc-hero h1 { color: #fff; text-shadow: 0 2px 24px rgb(0 0 0 / .4);
  font-size: clamp(2.5rem, 5.2vw + 1rem, 5rem); }
.svc-hero h1 .accent { color: #D3284E; }              /* lightened raspberry — AA on the dark scrim */
.svc-hero h1 .accent-green { color: var(--green-bright); }
.svc-hero .lede { color: rgba(255,255,255,.92); margin-top: 20px; max-width: 600px; }
.svc-hero .hero-actions { margin-top: 30px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.svc-hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.svc-hero .btn-ghost:hover { border-color: #fff; color: #fff; background: rgb(255 255 255 / .12); }
.svc-hero .svc-hero-note { margin-top: 24px; max-width: 58ch; color: rgba(255,255,255,.82);
  font-size: .98rem; line-height: 1.55; border-left: 3px solid var(--acc-bright); padding: 4px 0 4px 15px; }

/* ---------- "Is this your child?" symptom checklist (scannable, not boxy) ---------- */
.checklist { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 5vw, 56px); }
.checklist li { display: flex; align-items: flex-start; gap: 15px;
  padding: 18px 2px; border-bottom: 1px solid var(--line); }
.checklist .ck { flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface); color: var(--acc-ink); display: grid; place-items: center; margin-top: 1px;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.checklist .ck svg { width: 16px; height: 16px; }
.checklist li p { margin: 0; color: var(--ink); font-weight: 600; font-size: 1.06rem; line-height: 1.4; max-width: 42ch; }
@media (hover:hover) and (pointer:fine) {
  .checklist li:hover .ck { background: var(--acc); color: #fff; transform: scale(1.08); }
}
@media (max-width: 720px) { .checklist { grid-template-columns: 1fr; } }

/* ---------- Offered-at clinic links (accent pill links) ---------- */
.clinic-links { display: flex; flex-wrap: wrap; gap: 12px; }
.clinic-link { display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-family: var(--display); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  font-size: 1rem; color: var(--acc-ink); background: #fff; border: 1.5px solid var(--acc);
  border-radius: 999px; padding: 12px 22px; line-height: 1;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.clinic-link svg { width: 15px; height: 15px; flex: none; transition: transform .2s var(--ease); }
@media (hover:hover) and (pointer:fine) {
  .clinic-link:hover { background: var(--acc); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lift); }
  .clinic-link:hover svg { transform: translateX(3px); }
}

/* ---------- FAQ accordion (native <details>/<summary>) ---------- */
.faq { display: flex; flex-direction: column; gap: 14px; max-width: 82ch; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.faq-item[open] { border-color: color-mix(in srgb, var(--acc) 45%, transparent); box-shadow: 0 6px 20px rgb(30 77 27 / .07); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 18px; padding: 20px clamp(18px, 2.4vw, 26px);
  font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .015em;
  font-size: clamp(1.05rem, 1.1vw + .55rem, 1.28rem); color: var(--ink); line-height: 1.14; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--acc-ink); }
.faq-item summary:focus-visible { outline: 2px solid var(--green-ink); outline-offset: -2px; border-radius: var(--radius); }
.faq-q-ico { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--surface);
  color: var(--acc-ink); display: grid; place-items: center;
  transition: transform .25s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.faq-q-ico svg { width: 18px; height: 18px; }
.faq-item[open] .faq-q-ico { transform: rotate(135deg); background: var(--acc); color: #fff; }
.faq-answer { padding: 0 clamp(18px, 2.4vw, 26px) 22px; }
.faq-answer p { color: var(--body); max-width: 74ch; }
.faq-answer p + p { margin-top: 12px; }
.faq-answer a { color: var(--acc-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-answer { animation: gc-panel-in .3s var(--ease); }
}

/* ════════════════════════════════════════════════════════════════════════
   HOME GEO / MAP + HOME CONTACT LAYER  (additive — powers the homepage
   "Find us on the map" section and the homepage contact block)
   ------------------------------------------------------------------------
   CLASS CONTRACT (agreed names the JS / HTML agent should emit):
     .gc-geo                 — the home map SECTION wrapper (inherits section
                               padding; add .band for the tinted variant).
     .gc-geo-grid            — two-col layout: map (left) + legend (right).
     .gc-map                 — the Leaflet map CONTAINER (min-height ~440px,
                               rounded, bordered, shadowed). Leaflet mounts here.
     .gc-map-placeholder     — no-JS / pre-init fallback inside .gc-map.
     .gc-map-legend          — a <ul> of clinic rows beside the map; each <li>
                               holds an <h3> (+ .loc-flag), an <address>, and a
                               .gc-map-legend-foot row (existing .loc-phone tel
                               link + .link-draw directions). .is-active on an
                               <li> marks the marker-selected clinic.
     .home-contact           — the homepage contact SECTION.
     .home-contact-form      — the single centred contact <form>; reuses
                               .form-grid/.field/.input/.select/.textarea/.btn.
                               .home-contact-grid + -info remain for a 2-col page.
   All colours reuse the AA tokens above. NO EMOJIS — inline SVG only.
   ════════════════════════════════════════════════════════════════════════ */

/* ---------- Home geo section + layout ---------- */
.gc-geo-grid {
  display: grid; grid-template-columns: 1.18fr .82fr;
  gap: clamp(20px, 3vw, 36px); align-items: stretch;
}
@media (max-width: 900px) { .gc-geo-grid { grid-template-columns: 1fr; } }

/* ---------- Map container (Leaflet mounts inside) ---------- */
.gc-map {
  position: relative; z-index: 0;            /* own stacking ctx so Leaflet panes/controls sit correctly under fixed chrome */
  min-height: 440px; height: clamp(440px, 60vh, 600px);
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-lift);
  background: var(--surface);                /* shows while tiles load */
}
@media (max-width: 900px) { .gc-map { order: -1; height: clamp(360px, 56vh, 460px); } }
.gc-map .leaflet-container,
.gc-map > iframe, .gc-map > img { width: 100%; height: 100%; border: 0; display: block; }
/* Pre-init / no-JS fallback */
.gc-map-placeholder { position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  color: var(--gray); padding: 24px; }               /* gray now 6.29:1 on surface (AA) */
.gc-map-placeholder svg { width: 46px; height: 46px; color: var(--green); margin-bottom: 10px; } /* green, not green-bright */

/* ---------- Clinic legend (a <ul><li> of clinic rows beside the map) ----------
   Styles the SHIPPED markup: <ul.gc-map-legend> > <li> { <h3>+.loc-flag,
   <address><strong>, <p.gc-map-legend-foot>(.loc-phone + .link-draw) }.
   .loc-phone / .link-draw already carry AA green-ink from earlier sections. */
.gc-map-legend { list-style: none; margin: 0; padding: 0 4px 0 0;
  display: flex; flex-direction: column; gap: 10px;
  max-height: clamp(440px, 60vh, 600px); overflow-y: auto; }
@media (max-width: 900px) { .gc-map-legend { max-height: none; overflow: visible; } }
.gc-map-legend > li {
  display: flex; flex-direction: column; gap: 6px;
  padding: 15px 17px; background: #fff; color: var(--body);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 3px 12px rgb(30 77 27 / .05);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
  .gc-map-legend > li:hover { border-color: var(--green); box-shadow: 0 6px 18px rgb(30 77 27 / .08); }
}
.gc-map-legend > li:focus-within { border-color: var(--green-ink); }
.gc-map-legend > li.is-active {   /* JS flags the marker-selected clinic; ink 14.1:1 / body 7.96:1 stay AA on surface */
  border-color: var(--green); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--green);
}
.gc-map-legend h3 { font-size: 1.3rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ink); } /* 15.95:1 */
.gc-map-legend address { font-style: normal; color: var(--body); line-height: 1.45; font-size: .95rem; } /* 8.98:1 */
.gc-map-legend address strong { display: block; color: var(--ink); font-family: var(--display); font-weight: 700; letter-spacing: .02em; }
.gc-map-legend .confirm { color: var(--gray); font-size: .85rem; }   /* 7.09:1 white / 6.29:1 surface (AA) */
.gc-map-legend-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 2px 0 0; max-width: none; }
.gc-map-legend-foot .loc-phone { font-size: 1.02rem; }

/* ---------- Leaflet popups + controls: force READABLE dark-on-white ----------
   Leaflet's defaults can inherit odd colours; pin them to the AA tokens so
   popup copy is always dark ink on white with green-ink links. */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: #fff; color: var(--ink); box-shadow: var(--shadow-lift);
}
.leaflet-popup-content-wrapper { border: 1px solid var(--line); border-radius: var(--radius-sm); }
.leaflet-popup-content { margin: 13px 16px; font-family: var(--text); font-size: .95rem; line-height: 1.5; color: var(--ink); }
.leaflet-popup-content strong, .leaflet-popup-content b { font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.leaflet-popup-content p { margin: 0 0 6px; max-width: none; color: var(--body); } /* body 8.98:1 on white */
.leaflet-popup-content a { color: var(--green-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* 6.48:1 */
.leaflet-popup-content a.loc-phone { text-decoration: none; }
.leaflet-container a.leaflet-popup-close-button { color: var(--gray); }        /* 7.09:1 on white (AA) */
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--rasp-ink); background: transparent; }
/* Attribution / zoom controls: legible, on-brand */
.leaflet-control-attribution { background: rgb(255 255 255 / .88); color: var(--body); font-size: .72rem; }
.leaflet-control-attribution a { color: var(--green-ink); }
.leaflet-bar a, .leaflet-bar a:hover { color: var(--ink); background: #fff; }  /* zoom +/- dark on white */
.leaflet-bar a:hover { background: var(--surface); }

/* ---------- Home contact section ---------- */
/* The homepage ships ONE centred <form class="home-contact-form"> that reuses
   .form-grid/.field/.input/.select/.textarea/.btn (all already AA). */
.home-contact-form { max-width: 760px; margin-inline: auto; }
.home-contact-form .mt-2, .home-contact-form .form-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* .home-contact-grid + -info remain available for a two-column contact page. */
.home-contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .home-contact-grid { grid-template-columns: 1fr; } }
.home-contact-info { display: flex; flex-direction: column; gap: 18px; }
.home-contact-info h3 { font-size: clamp(1.4rem, 2vw + .5rem, 1.9rem); }
.home-contact-info p { color: var(--body); }                    /* AA */
.home-contact-info address { font-style: normal; color: var(--body); line-height: 1.5; }
.home-contact-info .confirm { color: var(--gray); font-size: .86rem; } /* AA */
.home-contact-info a:not(.btn) { color: var(--green-ink); font-weight: 600; text-decoration: none; } /* 6.48:1 */
.home-contact-info a:not(.btn):hover { color: var(--rasp-ink); text-decoration: underline; text-underline-offset: 2px; }
.home-contact-item { display: flex; align-items: flex-start; gap: 13px; }
.home-contact-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--surface);
  color: var(--green-ink); display: grid; place-items: center; }  /* green-ink icon on surface 5.75:1 */
.home-contact-ico svg { width: 20px; height: 20px; }

.chat-launcher__mark{width:36px;height:36px;object-fit:contain;display:block;}

/* Glass nav needs something behind it: pull the homepage's full-bleed hero up
   under the sticky header so the video shows through the translucent bar.
   (Sticky header otherwise sits on plain white, so 72% white reads as solid.) */
.hero.flow {
  margin-top: calc(-1 * (var(--gc-nav-h, 76px) + 40px));
  padding-top: calc(var(--gc-nav-h, 76px) + 40px);
}
.site-header { background: transparent; }

/* Parent testimonial video (homepage Families section) */
.tst-video { margin: 0 auto; max-width: 860px; }
.tst-video video {
  width: 100%; height: auto; display: block;
  border-radius: 14px; background: #0c1c08;
  box-shadow: 0 18px 46px rgb(20 40 20 / .18);
}
.tst-video figcaption {
  margin-top: 12px; text-align: center;
  font-family: var(--display); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-size: .82rem; color: var(--gray);
}

/* logo-palette accents (mirrors design-system.css) */
.rule-yellow { position: relative; }
.rule-yellow::after { content:""; display:block; width:3.25rem; height:4px; margin-top:.6rem; background:#2C6E9E; border-radius:2px; }
.mark-yellow { background: linear-gradient(180deg, transparent 58%, rgb(251 218 10 / .55) 58%); padding:0 .12em; }
.accent-blue-text { color:#1F5F8B; }
.kicker { color:#1F5F8B; }

/* gc-topbar-oneline (homepage variant) */
.gc-topbar__inner{flex-wrap:nowrap;white-space:nowrap;gap:clamp(.55rem,1.6vw,1.5rem);font-size:clamp(.68rem,.34vw + .6rem,.76rem);}
.gc-topbar a{white-space:nowrap;}
.gc-topbar__label{flex:none;}
.gc-topbar__phone{flex:none;margin-left:auto;}
@media (max-width:1180px){.gc-topbar__label{display:none;}}

.hero-display .accent.accent--plain { color: #FFFFFF; }

/* Mobile: same overlap fix for the homepage topbar variant. */
@media (max-width: 900px) {
  .gc-topbar__inner { gap: 1rem; }
  .gc-topbar__phone { margin-left: 0; padding-left: 1rem; border-left: 1px solid rgb(255 255 255 / .22); flex: none; }
}

/* gc-brand-elements (homepage) — logo colours as shape, never as text. */
.chip-brand{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;
  border-radius:50%;font-family:var(--display);font-weight:800;font-size:1.15rem;}
.chip-green{background:#78C042;color:#14351A;}
.chip-blue{background:#388ECC;color:#fff;}
.chip-yellow{background:#FBD209;color:#262462;}  /* navy ink on yellow — 9.9:1 */
.chip-red{background:#D3284E;color:#fff;}
.card--bar{position:relative;overflow:hidden;}
.card--bar::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--bar,#388ECC);}
.bar-green{--bar:#78C042;} .bar-blue{--bar:#388ECC;} .bar-yellow{--bar:#FBD209;} .bar-red{--bar:#D3284E;}

/* gc-nav-actions-tighten (homepage) */
.nav-links { margin-left: auto; align-items: center; }
.nav-links .btn-primary { padding: 6px 14px; font-size: .82rem; border-width: 1px; }
.nav-toggle { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; align-self: center; margin-left: auto; }
.nav-toggle svg { width: 1.35rem; height: 1.35rem; }

/* gc-ghost-on-dark — the white outline variant belongs ONLY on dark surfaces.
   Keeping it as the global default made every ghost button on a white
   section invisible (white text on white). */
.hero-content .btn-ghost,
.cta-band .btn-ghost,
.banner .btn-ghost,
.careers .btn-ghost,
.section--dark .btn-ghost {
  color: #fff;
  border-color: rgb(255 255 255 / .72);
}
.hero-content .btn-ghost:hover,
.cta-band .btn-ghost:hover,
.banner .btn-ghost:hover,
.careers .btn-ghost:hover,
.section--dark .btn-ghost:hover {
  background: rgb(255 255 255 / .14);
  color: #fff;
  border-color: #fff;
}

/* gc-footer-black (homepage/careers footer) */
footer { background: #0D0D0D; color: #D9D9D9; }
.footer-col p, .footer-col li, .footer-col address { color: #C7C7C7; }
.footer-col h4, .footer-col strong { color: #FFFFFF; }
footer a { color: #E6E6E6; }
footer a:hover { color: #6FB8E8; }
.footer-grid { border-bottom-color: rgb(255 255 255 / .16); }
.footer-bottom { color: #B3B3B3; border-top-color: rgb(255 255 255 / .16); }
/* --- hotfix 2026-09-21 (treadmill): kill 30px horizontal overflow ---
   quick-actions.js injects `body{padding-left:30px}` on desktop to clear the
   fixed .gcqa tab, but .full-bleed (width:100vw) ignores that padding and
   overshoots the right edge by 30px. The .gcqa tab is position:fixed and needs
   no reserved column, so drop the padding. */
@media (min-width:901px){ body{ padding-left:0 !important; } }