/* ============================================================
   THYROID CARE KENYA — DESIGN SYSTEM  (edit tokens here only)
   ------------------------------------------------------------
   Fonts : Montserrat (headings)  +  Open Sans (body)
   Colour: white-first with teal/green gradient bands, glassmorphic
           containers, teal accent, coral CTA, deep teal footer
   To restyle the whole site, change the :root tokens below.
   Reusable classes: .btn .card .section .eyebrow .chip .badge
                     .grid(.--2/3/4) .stat .step .qa .quote .country
   ============================================================ */
:root{
  /* colour — white-first, teal/green gradient bands, glassmorphic containers */
  --white:#ffffff; --bg:#ffffff;
  --surface:#EAF5F1; --surface-2:#D8ECE5;
  --ink:#1F3A40; --muted:#5E7170; --line:#DFEBE7;
  --teal:#1E7B74; --teal-dark:#12595A;
  --deep:#0F3A3B;                 /* used sparingly: footer + one band */
  --coral:#F0603B; --coral-dark:#D64E2B;
  --amber:#E4A24C;                /* minor accent, pulled from brand pattern */
  /* dark teal gradient band (#15616D family) — the backdrop that makes glass read */
  --grad-band:radial-gradient(90% 130% at 90% -10%,rgba(46,156,147,.45),transparent 55%),
              radial-gradient(70% 100% at 5% 105%,rgba(158,212,79,.16),transparent 50%),
              linear-gradient(160deg,#1B7482 0%,#15616D 55%,#0E4750 100%);
  /* frosted glass (containers) */
  --glass:rgba(255,255,255,.55); --glass-border:rgba(255,255,255,.66);
  --glass-solid:rgba(255,255,255,.94);
  /* type */
  --display:"Montserrat",system-ui,sans-serif;
  --body:"Open Sans",system-ui,sans-serif;
  /* scale + shape */
  --r:14px; --r-lg:22px;
  --shadow:0 16px 40px -22px rgba(16,58,59,.32);
  --shadow-sm:0 6px 20px -12px rgba(16,58,59,.26);
  --wrap:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100%}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--display);line-height:1.12;margin:0;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(2.3rem,5.4vw,3.9rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:700}
h3{font-size:clamp(1.15rem,2vw,1.45rem)}
p{margin:0 0 1rem}
a{color:var(--teal);text-decoration:none}
/* Inline text links on dark teal bands: coral for legibility (teal is too low-contrast there). */
.section--surface a:not(.btn){color:var(--coral);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.section--surface a:not(.btn):hover{color:#fff}
img{max-width:100%;display:block;height:auto}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:82px 0}
.section--surface{background:var(--grad-band);color:#fff}
.section--surface h1,.section--surface h2,.section--surface > .wrap > .sec-head h3{color:#fff}
.section--surface .lead{color:rgba(255,255,255,.86)}
.section--surface .eyebrow{color:var(--amber)}
.section--surface .eyebrow::before{background:var(--amber)}
.section--surface .cites{color:rgba(255,255,255,.6)}
.section--deep{background:var(--deep);color:#fff}
.section--deep h1,.section--deep h2,.section--deep h3{color:#fff}
.sec-head{max-width:60ch;margin:0 0 2.6rem}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.center{text-align:center}
.eyebrow{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--coral);display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.7rem}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--coral);flex:0 0 auto}
.eyebrow svg{width:1.05em;height:1.05em;flex:0 0 auto}
.section--deep .eyebrow{color:var(--amber)}
.lead{font-size:1.15rem;color:var(--muted);max-width:62ch}
.section--deep .lead{color:rgba(255,255,255,.8)}
.prose{max-width:72ch}
.prose h3{margin:1.6rem 0 .5rem}

/* ---------- buttons (reusable) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--display);
  font-weight:600;font-size:.98rem;line-height:1.25;padding:.9rem 1.7rem;border-radius:999px;border:1.5px solid transparent;
  text-align:center;cursor:pointer;transition:transform .15s,background .2s,box-shadow .2s,border-color .2s;text-decoration:none;white-space:nowrap;max-width:100%}
.btn svg{width:18px;height:18px}
/* CTA design: coloured icon chip with slanted edge + white body, coloured label */
.btn--primary,.btn--wa,.btn--light{background:#fff;position:relative;overflow:hidden;isolation:isolate;border:0;
  padding:.9rem 1.6rem .9rem 68px;box-shadow:0 8px 22px -8px rgba(16,58,59,.35)}
/* NB: no `filter` here — a filtered child escapes the pill's overflow/border-radius clip in
   Safari, so the chip's square left corners poke out past the pill. Keep the chip filter-free
   so overflow:hidden clips it to the rounded pill in every browser. */
.btn--primary::before,.btn--wa::before,.btn--light::before{content:"";position:absolute;left:0;top:0;bottom:0;width:56px;
  clip-path:polygon(0 0,100% 0,72% 100%,0 100%)}
.btn--primary > svg,.btn--wa > svg,.btn--light > svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  color:#fff;z-index:1;width:20px;height:20px}
.btn--primary{color:var(--coral)}
.btn--primary::before{background:var(--coral)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(214,78,43,.5);color:var(--coral-dark)}
.btn--primary:hover::before{background:var(--coral-dark)}
.btn--wa{color:#189a4b}
.btn--wa::before{background:#25D366}
.btn--wa:hover{transform:translateY(-2px);color:#0f7d3a}
.btn--wa:hover::before{background:#1eb85a}
.btn--light{color:var(--coral-dark)}
.btn--light::before{background:var(--coral-dark)}
.btn--light:hover{transform:translateY(-2px)}
/* CTA buttons without an icon keep a clean pill (no empty chip) */
.btn--primary:not(:has(> svg)),.btn--wa:not(:has(> svg)),.btn--light:not(:has(> svg)){padding-left:1.6rem}
.btn--primary:not(:has(> svg))::before,.btn--wa:not(:has(> svg))::before,.btn--light:not(:has(> svg))::before{display:none}
.btn--primary:not(:has(> svg)){background:var(--coral);color:#fff}
.btn--wa:not(:has(> svg)){background:#25D366;color:#06331b}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}
/* header + footer keep SIMPLE solid pills (no icon chip) */
header.site .btn--primary,footer.site .btn--primary{background:var(--coral);color:#fff;padding:.85rem 1.5rem;
  box-shadow:0 10px 22px -12px var(--coral)}
header.site .btn--primary:hover,footer.site .btn--primary:hover{background:var(--coral-dark);color:#fff}
header.site .btn--wa,footer.site .btn--wa{background:#25D366;color:#06331b;padding:.85rem 1.5rem;box-shadow:none}
header.site .btn--wa:hover,footer.site .btn--wa:hover{background:#1eb85a;color:#06331b}
header.site .btn::before,footer.site .btn::before{display:none}
header.site .btn > svg,footer.site .btn > svg{position:static;transform:none;color:currentColor;width:18px;height:18px}
.btn--block{width:100%}
.btn-row{display:flex;gap:.7rem;flex-wrap:wrap}

/* ---------- chips / badges ---------- */
.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;font-family:var(--display);
  background:rgba(255,255,255,.6);border:1px solid var(--glass-border);color:var(--ink);padding:.42rem .8rem;border-radius:999px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.chip svg{width:15px;height:15px;color:var(--teal)}
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.badge{display:inline-flex;align-items:center;gap:.4rem;background:#FCEFC6;color:#7a5a12;
  font-family:var(--display);font-weight:700;font-size:.78rem;padding:.35rem .8rem;border-radius:999px}

/* ---------- header / nav (floating glass bar, centred, sticks to top) ---------- */
header.site{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;padding:14px 16px 0}
header.site .nav{max-width:var(--wrap);margin:0 auto;height:64px;padding:0 12px 0 20px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--glass-border);border-radius:999px;
  box-shadow:0 4px 16px -4px rgba(16,58,59,.14),0 20px 55px -26px rgba(16,58,59,.5)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.site .nav{background:var(--glass-solid)}
}
.brand{display:flex;align-items:center;text-decoration:none}
.brand-logo{height:48px;width:auto}

.nav-links{display:flex;align-items:center;gap:.1rem}
.nav-item{position:relative}
.nav-links .nav-top{display:inline-flex;align-items:center;font-family:var(--display);font-weight:600;font-size:.92rem;
  color:var(--ink);background:none;border:0;padding:.55rem .7rem;border-radius:10px;cursor:pointer;
  transition:.15s;text-decoration:none;white-space:nowrap}
.nav-links .nav-top:hover{background:rgba(255,255,255,.8)}
.nav-links .nav-top.active{color:var(--coral)}
.caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;margin-left:.4rem;opacity:.6;transition:transform .2s}
.nav-item:hover .caret,.nav-item:focus-within .caret{transform:rotate(180deg)}
/* dropdown */
.submenu{position:absolute;top:calc(100% + 10px);left:0;min-width:224px;display:none;flex-direction:column;gap:2px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;z-index:70}
.has-menu::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}   /* hover bridge */
.nav-item:hover > .submenu,.nav-item:focus-within > .submenu{display:flex}
.nav-item.open > .submenu{display:flex !important}   /* click/tap state — always wins */
.submenu a{display:flex;align-items:center;gap:.55rem;padding:.5rem .7rem;border-radius:9px;font-family:var(--display);font-weight:600;font-size:.9rem;
  color:var(--ink);white-space:nowrap;transition:.12s}
.submenu .mi-ic{width:17px;height:17px;flex:0 0 auto;display:inline-flex;color:var(--teal)}
.submenu .mi-ic svg{width:100%;height:100%}
/* per-icon colour so dropdown bullets read in colour, like the flags */
.submenu .mi-ic--conditions{color:#F0603B}   /* shield + cross — coral */
.submenu .mi-ic--activity{color:#1E7B74}      /* procedures — teal */
.submenu .mi-ic--stethoscope{color:#4C9F38}   /* specialist — green */
.submenu .mi-ic--trophy{color:#E4A24C}         /* patient stories — gold */
.submenu .mi-ic--calendar{color:#F0603B}       /* book now — coral */
.submenu .mi-flag{width:20px;height:14px}
.submenu .mi-flag img{width:100%;height:100%;object-fit:cover;border-radius:3px;display:block;box-shadow:0 0 0 1px rgba(16,58,59,.14)}
.submenu a:hover{background:var(--surface);color:var(--teal)}
.submenu a[aria-current="page"]{color:var(--coral)}
/* long dropdowns wrap into two columns (auto-applied at 8+ items) */
.submenu--2col{flex-flow:row wrap;min-width:480px}
.submenu--2col > a{flex:0 0 calc(50% - 1px);white-space:normal;line-height:1.25}

.nav-actions{display:flex;align-items:center;gap:.5rem}
.mob-cta{display:none}                     /* shown only inside the open mobile menu */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:.4rem}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}

/* mobile menu — frosted-glass scrim behind the open nav + body scroll-lock (glassmorphic v4).
   Scrim sits above the page + wa-float (z70) but below the lifted open header, so the menu pops.
   JS toggles .show and the body.nav-locked scroll-lock (added 11 Aug 2026). */
.nav-scrim{position:fixed;inset:0;z-index:80;background:rgba(15,58,59,.30);
  -webkit-backdrop-filter:blur(7px) saturate(120%);backdrop-filter:blur(7px) saturate(120%);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;pointer-events:none}
.nav-scrim.show{opacity:1;visibility:visible;pointer-events:auto}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-scrim{background:rgba(15,58,59,.62)}   /* solid-ish fallback where blur is unsupported */
}
header.site.open{z-index:90}                  /* lift the whole header (menu) above the scrim */
body.nav-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}  /* top offset set inline by JS */
@media(min-width:921px){.nav-scrim{display:none}}   /* menu never opens on desktop — belt-and-braces */

/* fixed bar → give non-home pages top clearance */
body:not(.home) main{padding-top:98px}

/* ---------- hero (white, airy) ---------- */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(60% 90% at 88% 10%,rgba(30,123,116,.09),transparent 60%),
             radial-gradient(50% 70% at 6% 90%,rgba(240,96,59,.07),transparent 55%)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center;padding:70px 0 78px}
.hero-solo{position:relative;z-index:1;padding:66px 0 58px;max-width:820px}
/* service-page hero: copy left, image right (use .hero-duo on the wrap; image in .hero-img) */
.hero-duo{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:48px;
  align-items:center;padding-top:66px;padding-bottom:58px}
.hero-duo .hero-img img{width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow);object-fit:cover;aspect-ratio:4/3}
.hero-duo .hero-img .ph{aspect-ratio:4/3;border-radius:var(--r-lg)}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero .micro{font-size:.86rem;color:var(--muted);margin-top:.9rem}
/* ---------- gradient hero variant (service pages): hero sits on the brand gradient band ---------- */
/* Wrap crumb + hero-duo inside <div class="hero hero--band">; dark-band rules apply (white text, amber eyebrow). */
.hero--band{background:var(--grad-band);color:#fff}
.hero--band::before{display:none}                /* band replaces the airy white tint */
/* the band is an inset rounded card: side gutters, rounded corners, header floating over its top edge */
body:not(.home) main > .hero--band:first-child{margin:-90px 8px 0;padding-top:98px;
  border-radius:26px;overflow:hidden}
/* rounded-card dark sections (goitre + home — footer stays full-bleed) */
body.goitre .section--surface,body.home .section--surface{margin:8px;border-radius:26px;overflow:hidden}
/* home photo hero gets the same inset rounded-card frame; deeper curve on the lower-right */
body.home .hero-cover{margin:8px 8px 0;border-radius:26px 26px 64px 26px}
.hero--band .crumb,.hero--band .crumb a{color:rgba(255,255,255,.7)}
.hero--band .crumb a:hover{color:#fff}
.hero--band h1{color:#fff}
.hero--band h1 em{color:var(--coral)}
.hero--band .eyebrow{color:var(--amber)}
.hero--band .eyebrow::before{background:var(--amber)}
.hero--band .lead{color:rgba(255,255,255,.92)}
.hero--band .micro{color:rgba(255,255,255,.66)}
/* dark glass chips on the gradient (dark bands: dark glass + white text) */
.hero--band .chip{background:rgba(10,46,50,.38);border-color:rgba(255,255,255,.28);color:#fff}
.hero--band .chip svg{color:var(--amber)}
.hero--band .hero-img img{box-shadow:0 26px 56px -20px rgba(6,32,35,.55)}
.hero--band .btn--ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.hero--band .btn--ghost:hover{border-color:#fff;color:#fff}
/* roomy image: the photo fills its column beside the copy (no fixed 4:3 crop on desktop) */
.hero--band .hero-duo{grid-template-columns:1fr 1.05fr;align-items:stretch;padding-bottom:26px}
.hero--band .hero-duo > div:first-child{display:flex;flex-direction:column;justify-content:center}
.hero--band .hero-img{display:flex;align-items:center}
/* framed band-hero photo: self-contained dark-glass card + light inner panel (matches the .shrink card) */
.hero--band .hero-frame{display:flex;width:100%;margin:0;padding:22px;
  background:rgba(5,34,38,.62);border:1px solid rgba(255,255,255,.34);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.hero--band .hero-stage{flex:1;display:flex;overflow:hidden;
  background:var(--surface);border-radius:12px;padding:6px}
.hero--band .hero-stage img{width:100%;height:auto;min-height:0;aspect-ratio:4/3;object-fit:cover;
  border-radius:10px;box-shadow:none;display:block}
/* frosted sub-cards along the lower edge of the band (dark glass + white text) */
.hero-cards{display:flex;flex-wrap:wrap;gap:14px;padding:6px 0 54px;position:relative;z-index:1}
.hero-card{flex:1 1 190px;display:flex;align-items:center;gap:.6rem;background:rgba(10,46,50,.38);
  border:1px solid rgba(255,255,255,.28);border-radius:var(--r);padding:.95rem 1.1rem;color:#fff;
  font-family:var(--display);font-weight:600;font-size:.9rem;line-height:1.3;
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%)}
.hero-card svg{width:18px;height:18px;color:var(--amber);flex:0 0 auto}
/* widgets that sit inside a band hero follow the dark-band container rules */
.hero--band .shrink{background:rgba(7,44,50,.42);border-color:rgba(255,255,255,.22);color:#fff}
.hero--band .shrink h3{color:#fff}
.hero--band .shrink p{color:rgba(255,255,255,.92)}
@media (max-width:920px){
  /* band hero on mobile: framed image card at the top, then eyebrow → H1 → lead → CTAs */
  .hero--band .crumb{display:none}
  .hero--band .hero-duo{grid-template-columns:1fr;gap:0;align-items:start;padding-top:0}
  .hero--band .hero-duo > div:first-child{display:contents}
  .hero--band .hero-duo .hero-img{order:0;width:auto;max-width:none;margin:0 0 1.4rem}
  .hero--band .hero-duo .eyebrow{order:1}
  .hero--band .hero-duo h1{order:2}
  .hero--band .hero-duo .lead{order:3}
  .hero--band .hero-duo .btn-row{order:4}
  .hero--band .hero-duo .micro{order:5}
  .hero--band .hero-frame{padding:16px}
  .hero--band .hero-stage{padding:6px}
  .hero--band .hero-stage img{min-height:0;height:clamp(240px,42vh,340px);aspect-ratio:auto;
    border-radius:8px;box-shadow:none}
  .hero-cards{padding-bottom:40px}
}
@media (max-width:560px){
  .hero--band .hero-duo .eyebrow{justify-content:center}
}
/* ============================================================
   COVER HERO (04 Aug 2026) — image heroes get the Home-hero look:
   full-bleed photo, copy on a left→right light fade, dark ink text.
   Targets any .hero--band that CONTAINS a .hero-duo (i.e. has a photo);
   text-only band heroes (.hero-solo / .hero-grid, incl. RFA) are untouched.
   Zero markup change. Revert = delete this whole block. Uses :has().
   ============================================================ */
/* container: light frame, deep lower-right curve, header floats over the photo */
body:not(.home) main > .hero--band:first-child:has(.hero-duo){
  margin:-90px 8px 0;border-radius:26px 26px 64px 26px;
  padding-top:clamp(112px,14vh,160px);padding-bottom:52px}
.hero--band:has(.hero-duo){background:#F2F9F6;color:var(--ink)}
/* left → right white fade scrim over the photo (matches the Home hero) */
.hero--band:has(.hero-duo)::before{display:block;content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.97) 24%,rgba(255,255,255,.78) 37%,rgba(255,255,255,0) 60%)}
/* photo → full-bleed background of the whole hero */
.hero--band:has(.hero-duo) .hero-duo{position:static;grid-template-columns:1fr;gap:0;padding:0;align-items:center}
.hero--band:has(.hero-duo) .hero-duo > div:first-child{position:relative;z-index:2;max-width:580px;display:block}
.hero--band:has(.hero-duo) .hero-img{position:absolute;inset:0;z-index:0;margin:0;display:block}
.hero--band:has(.hero-duo) .hero-frame{padding:0;margin:0;width:100%;height:100%;display:block;
  background:none;border:0;box-shadow:none;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.hero--band:has(.hero-duo) .hero-stage{padding:0;height:100%;display:block;background:none;border-radius:0}
.hero--band:has(.hero-duo) .hero-stage img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center 30%;border-radius:0;box-shadow:none}
/* copy flips to dark ink on the light fade (like Home) */
.hero--band:has(.hero-duo) h1{color:var(--ink)}
.hero--band:has(.hero-duo) h1 em{color:var(--coral)}
.hero--band:has(.hero-duo) .eyebrow{color:var(--teal)}
.hero--band:has(.hero-duo) .eyebrow::before{background:var(--teal)}
.hero--band:has(.hero-duo) .lead{color:#33514F}
.hero--band:has(.hero-duo) .micro{color:var(--muted)}
.hero--band:has(.hero-duo) .crumb,.hero--band:has(.hero-duo) .crumb a{color:#4a6a67;position:relative;z-index:2}
.hero--band:has(.hero-duo) .btn--ghost{color:var(--ink);border-color:rgba(16,58,59,.32)}
.hero--band:has(.hero-duo) .btn--ghost:hover{color:var(--ink);border-color:var(--ink)}
/* trust chips → light glass, with clear space above so they never touch the CTAs */
.hero--band:has(.hero-duo) .hero-cards{position:relative;z-index:2;margin-top:1.6rem;padding:2px 0 8px}
.hero--band:has(.hero-duo) .hero-card{background:rgba(255,255,255,.72);border-color:var(--glass-border);color:var(--ink)}
.hero--band:has(.hero-duo) .hero-card svg{color:var(--teal)}
@media (max-width:920px){
  /* mobile: photo becomes a full-bleed top banner, header floats over it, copy below on the page tint */
  body:not(.home) main > .hero--band:first-child:has(.hero-duo){margin:-90px 8px 0;padding-top:0;--cov-h:clamp(300px,48vh,420px)}
  .hero--band:has(.hero-duo)::before{display:none}
  .hero--band:has(.hero-duo) .hero-duo > div:first-child{display:contents}
  .hero--band:has(.hero-duo) .hero-img{position:relative;inset:auto;order:0;margin:0}
  .hero--band:has(.hero-duo) .hero-frame{padding:0}
  .hero--band:has(.hero-duo) .hero-stage{padding:0}
  .hero--band:has(.hero-duo) .hero-stage img{height:var(--cov-h);width:100%;aspect-ratio:auto;object-fit:cover;object-position:center 28%}
  /* soft fade dissolving the photo's lower edge into the page tint (mobile echo of the left scrim) */
  .hero--band:has(.hero-duo)::after{content:"";position:absolute;left:0;right:0;top:0;height:var(--cov-h);z-index:1;pointer-events:none;
    background:linear-gradient(to bottom,transparent 72%,rgba(242,249,246,.6) 88%,#F2F9F6 100%)}
  .hero--band:has(.hero-duo) .hero-cards{padding-bottom:8px}
}
/* portrait framing */
.portrait{position:relative;justify-self:center;max-width:440px}
.portrait img{width:100%;filter:drop-shadow(0 24px 44px rgba(16,58,59,.22))}
.portrait .float{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-sm);padding:.7rem .9rem;display:flex;align-items:center;gap:.55rem;font-family:var(--display);font-weight:700;font-size:.86rem}
.portrait .float svg{width:20px;height:20px}
.portrait .f-tl{top:8%;left:-6%}
.portrait .f-br{bottom:10%;right:-4%}
.portrait .float small{display:block;font-weight:500;font-family:var(--body);font-size:.72rem;color:var(--muted)}

/* ---------- full-bleed cover hero (home): frosted panel over clinic photo ---------- */
/* fixed glass bar floats over the top of the image; clear it with padding */
.hero-cover{position:relative;overflow:hidden;min-height:min(88vh,760px);display:flex;align-items:center;
  padding-top:96px}
.hero-cover__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.hero-cover::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(15,58,59,.55) 0%,rgba(15,58,59,.2) 42%,rgba(15,58,59,0) 66%)}
.hero-cover > .wrap{position:relative;z-index:2;width:100%;max-width:none;display:flex;justify-content:flex-start;
  padding-left:clamp(20px,4vw,60px);padding-right:24px;padding-top:20px;padding-bottom:44px}
.hero-panel{max-width:560px;background:rgba(255,255,255,.62);
  backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%);
  border:1px solid var(--glass-border);border-radius:var(--r-lg);
  padding:36px 34px 30px;box-shadow:0 28px 70px -30px rgba(16,58,59,.55)}
.hero-panel h1{font-size:clamp(1.95rem,3.4vw,2.8rem)}
/* home hero highlight: coral (upright, not italic) so the key phrase stands out */
.hero-panel h1 em{color:var(--coral);font-style:normal}
.hero-panel .lead{max-width:none;color:#33514F}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-panel{background:var(--glass-solid)}
}

/* ---------- video consultation feature ---------- */
.vidconsult{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:34px;
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:var(--shadow-sm)}
.vidconsult-ic{width:72px;height:72px;border-radius:18px;background:rgba(255,255,255,.75);border:1px solid var(--glass-border);
  display:grid;place-items:center;color:var(--teal)}
.vidconsult-ic svg{width:34px;height:34px}
.vidconsult h2{margin:.2rem 0 .4rem}
.vidconsult .lead{margin:0}
@media(max-width:620px){.vidconsult{grid-template-columns:1fr;padding:26px;text-align:left}}

/* ---------- stats bar (below hero — white, animated count-up) ---------- */
.statbar{background:#fff;border-bottom:1px solid var(--line)}
.statbar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:40px 0 36px}
.statb{text-align:center;padding:4px 14px;border-left:1px solid var(--line)}
.statb:first-child{border-left:0}
.statb-ic{width:44px;height:44px;border-radius:12px;background:rgba(30,123,116,.1);color:var(--teal);
  display:grid;place-items:center;margin:0 auto 12px}
.statb-ic svg{width:22px;height:22px}
.statb-n{font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1;
  background:linear-gradient(120deg,var(--teal-dark),var(--teal) 55%,var(--amber));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.statb-l{color:var(--muted);font-size:.95rem;margin-top:.5rem;max-width:26ch;margin-left:auto;margin-right:auto}
@media(max-width:700px){
  .statbar-grid{grid-template-columns:1fr;gap:0;padding:10px 0}
  .statb{border-left:0;border-top:1px solid var(--line);padding:20px 10px}
  .statb:first-child{border-top:0}
}

/* ---------- signature: nodule shrink ---------- */
.shrink{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px;max-width:560px;margin:0 auto;
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
.shrink h3{font-size:1.15rem;margin-bottom:.2rem}
.shrink .stage{background:var(--surface);border-radius:14px;padding:16px;margin:14px 0}
.shrink .fig{position:relative;max-width:300px;margin:0 auto}
.shrink .fig img{width:100%;height:auto;display:block}
.thyroid-svg{position:absolute;inset:0;width:100%;height:100%}
.nodule{transition:r .8s cubic-bezier(.5,0,.2,1),opacity .8s}
.readout{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.readout .big{font-family:var(--display);font-weight:800;font-size:2.6rem;color:var(--teal);line-height:1}
.readout .big span{font-size:1rem;color:var(--muted);font-weight:600}
.readout .lbl{font-size:.82rem;color:var(--muted);text-align:right;max-width:17ch}
.timeline{display:flex;gap:6px;margin-top:14px}
.timeline button{flex:1;font-family:var(--display);font-weight:600;font-size:.74rem;padding:.55rem .2rem;
  border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;color:var(--muted);transition:.15s}
.timeline button.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.shrink-cap{font-size:.92rem;color:var(--muted);margin:.8rem 0 0}
.fineprint{font-size:.72rem;color:var(--muted);margin:.7rem 2px 0}
/* dark contexts (teal band hero + dark sections): white text at legible opacity */
.section--surface .readout .big,.hero--band .readout .big{color:#9BD8CF}
.section--surface .readout .big span,.section--surface .readout .lbl,.section--surface .fineprint,
.hero--band .readout .big span,.hero--band .readout .lbl,.hero--band .fineprint{color:rgba(255,255,255,.72)}
.section--surface .shrink-cap,.hero--band .shrink-cap{color:rgba(255,255,255,.92)}

/* ---------- grids + cards (reusable) ---------- */
.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r);padding:26px;
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.2,.6,.2,1),box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(255,255,255,.9)}
.section--surface .card:hover{border-color:rgba(255,255,255,.5)}
.card .ic{width:46px;height:46px;border-radius:12px;background:rgba(30,123,116,.12);display:grid;place-items:center;margin-bottom:14px;color:var(--teal)}
.card .ic svg{width:24px;height:24px}
.card h3{margin-bottom:.35rem}
.card p{color:var(--muted);margin:0;font-size:.96rem}
/* On dark gradient bands, containers become DARK glass with white text —
   milky glass + dark text didn't read (client feedback 27 Jul). */
.section--surface .card,.section--surface .step,.section--surface .quote,
.section--surface .price-box,.section--surface .vidconsult,.section--surface .case,
.section--surface .country,.section--surface .shrink{
  background:rgba(7,44,50,.42);border-color:rgba(255,255,255,.22);color:#fff}
.section--surface .card h3,.section--surface .step h4,.section--surface .quote .who b,
.section--surface .case-body .who,.section--surface .vidconsult h2,
.section--surface .country,.section--surface .shrink h3{color:#fff}
.section--surface .card p,.section--surface .step p,.section--surface .quote p,
.section--surface .case-body p,.section--surface .vidconsult .lead,
.section--surface .price-box .kes{color:rgba(255,255,255,.92)}
.section--surface .card .ic{background:rgba(255,255,255,.14);color:#9BD8CF}
.section--surface .vidconsult-ic{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);color:#9BD8CF}
.section--surface .price-box .from{color:rgba(255,255,255,.7)}
.section--surface .list li svg{color:#9BD8CF}
.section--surface .list li{color:rgba(255,255,255,.88)}
.section--deep .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.section--deep .card p{color:rgba(255,255,255,.76)}
.section--deep .card .ic{background:rgba(255,255,255,.1);color:var(--amber)}

/* ---------- numbered tab-cards (framed card, coloured number tab) ---------- */
.tabcards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;counter-reset:tc}
.tabcard{--tc:var(--teal);counter-increment:tc;position:relative;background:#fff;
  border:2px solid var(--tc);border-radius:16px;padding:40px 18px 16px;box-shadow:var(--shadow-sm);
  transition:transform .25s,box-shadow .25s}
.tabcard::before{content:counter(tc,decimal-leading-zero);position:absolute;top:-2px;left:16px;
  background:var(--tc);color:#fff;font-family:var(--display);font-weight:800;font-size:.86rem;
  padding:.4rem .65rem;border-radius:0 0 9px 9px;line-height:1}
.tabcard:nth-child(4n+2){--tc:var(--coral)}
.tabcard:nth-child(4n+3){--tc:var(--amber)}
.tabcard:nth-child(4n+4){--tc:var(--teal-dark)}
.tabcard h4{margin:0 0 .25rem;font-size:1.02rem}
.tabcard p{margin:0;font-size:.88rem;color:var(--muted)}
.tabcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
@media(max-width:560px){.tabcards{grid-template-columns:1fr}}

/* ---------- photo cards (image left, text right, glass) ---------- */
.card--photo{display:flex;padding:0;overflow:hidden;align-items:stretch}
.card--photo .cimg{flex:0 0 40%;position:relative;min-height:180px;background:var(--surface-2)}
.card--photo .cimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.card--photo:hover .cimg img{transform:scale(1.07)}
.card--photo .cbody h3{transition:color .25s}
.card--photo:hover .cbody h3{color:var(--amber)}
.card--photo .cimg .ph{position:absolute;inset:0;aspect-ratio:auto}
.card--photo .cbody{flex:1;padding:22px 24px;display:flex;flex-direction:column;justify-content:center}
.card--photo .cbody h3{margin-bottom:.35rem}
.card--photo .cbody p{color:var(--muted);margin:0;font-size:.96rem}
a.card--photo{color:var(--ink);text-decoration:none}
.section--surface .card--photo .cbody p{color:rgba(255,255,255,.92)}
@media(max-width:560px){.card--photo .cimg{flex-basis:36%;min-height:150px}
  .card--photo .cbody{padding:16px 18px}}

/* ---------- stats ---------- */
.stat h3{font-size:2.4rem;color:var(--teal)}
.section--deep .stat h3{color:var(--amber)}

/* ---------- comparison ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.compare .col{padding:28px}
.compare .rfa{background:var(--deep);color:#fff}
.compare .rfa h3{color:#fff}
.compare ul{list-style:none;padding:0;margin:0}
.compare li{display:flex;gap:.6rem;padding:.55rem 0;font-size:.97rem;border-top:1px solid var(--line)}
.compare .rfa li{border-color:rgba(255,255,255,.14)}
.compare li svg{width:20px;height:20px;flex:0 0 20px;margin-top:2px}
.tick{color:#6FD0C5}.cross{color:#D79B8C}

/* ---------- price ---------- */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.price-box{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
.price-box .from{font-family:var(--display);font-size:.8rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.price-box .amt{font-family:var(--display);font-weight:800;font-size:3.2rem;color:var(--teal);line-height:1;margin:.25rem 0}
.price-box .kes{color:var(--muted);font-weight:600;margin-bottom:1rem;font-size:.95rem}
.list{list-style:none;padding:0;margin:0}
.list li{display:flex;gap:.55rem;padding:.42rem 0;font-size:.96rem}
.list li svg{width:19px;height:19px;color:var(--teal);flex:0 0 19px;margin-top:4px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.steps--3{grid-template-columns:repeat(3,1fr)}
.steps--2{grid-template-columns:repeat(2,1fr)}
.cols-2{columns:2;column-gap:2rem}
.cols-2 li{break-inside:avoid}
.step{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r);padding:24px;position:relative;
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:var(--shadow-sm)}
.step .n{counter-increment:s;font-family:var(--display);font-weight:800;width:34px;height:34px;border-radius:10px;
  background:var(--coral);color:#fff;display:grid;place-items:center;margin-bottom:12px;line-height:1}
.step .n::before{content:counter(s);line-height:1;display:block}
.step h4{font-size:1.05rem;margin-bottom:.3rem}
.step p{font-size:.9rem;color:var(--muted);margin:0}

/* ---------- before/after case ---------- */
.case{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r);overflow:hidden;
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:var(--shadow-sm)}
.case-imgs{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.ph{aspect-ratio:4/3;background:repeating-linear-gradient(45deg,var(--surface) 0 12px,var(--surface-2) 12px 24px);
  display:grid;place-items:center;text-align:center;position:relative;color:var(--muted)}
.cph{position:relative;aspect-ratio:4/3;overflow:hidden}
.cph img{width:100%;height:100%;object-fit:cover}
.ph .tag,.cph .tag{position:absolute;top:10px;left:10px;background:var(--deep);color:#fff;font-family:var(--display);
  font-size:.66rem;font-weight:700;padding:.24rem .55rem;border-radius:6px;letter-spacing:.05em}
.ph .tag.after,.cph .tag.after{background:var(--coral)}
.ph span{font-size:.78rem;font-weight:600;max-width:15ch;padding:0 8px}
.case-body{padding:22px}
/* "Read the full story" ghost link stays legible on dark bands (RFA results grid, country teaser) */
.section--surface .case .btn--ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.section--surface .case .btn--ghost:hover{background:rgba(255,255,255,.12)}
.case-body .who{font-family:var(--display);font-weight:700;font-size:.9rem;margin-bottom:.3rem}
.case-body p{color:var(--muted);margin:0;font-size:.94rem}

/* ---------- reviews ---------- */
.quote{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r);padding:26px;
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:var(--shadow-sm)}
.quote .stars{color:var(--amber);font-size:.85rem;margin-bottom:.6rem;letter-spacing:2px}
.quote p{font-size:1.04rem;margin:0 0 1rem;font-style:italic}
.quote .who{display:flex;align-items:center;gap:.7rem}
.quote .av{width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;
  font-family:var(--display);font-weight:700}
.quote .who b{font-family:var(--display);font-size:.9rem}

/* ---------- countries ---------- */
.country-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.country{display:flex;align-items:center;gap:.7rem;background:var(--glass);border:1px solid var(--glass-border);border-radius:12px;
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  padding:15px 18px;font-family:var(--display);font-weight:600;font-size:.95rem;transition:.15s;color:var(--ink)}
a.country:hover{border-color:var(--coral);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.flag{width:30px;height:22px;border-radius:4px;flex:0 0 30px;box-shadow:0 1px 3px rgba(0,0,0,.15)}

/* ---------- specialist ---------- */
.doc-hero{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}
.doc-photo{max-width:420px;justify-self:center;width:100%}
.doc-photo img{width:100%;border-radius:var(--r-lg)}
.doc-photo img.flip-x{transform:scaleX(-1)}
.doc-photo.round img{border-radius:50%;filter:drop-shadow(0 20px 40px rgba(16,58,59,.2))}
/* Home S4 specialist portrait — the source photo carries a lot of wall/headroom above him,
   so he reads small. Clip the frame and scale the image up about a low focal point to trim
   the headroom (and side room) and make him larger. Scoped to the home portrait only. (11 Aug 2026) */
.doc-photo--portrait{overflow:hidden;border-radius:var(--r-lg)}
.doc-photo--portrait img{transform:scale(1.24);transform-origin:50% 56%}
.doc-photo .ph{border-radius:var(--r-lg);aspect-ratio:1/1}
.cred{list-style:none;padding:0;margin:1rem 0 0}
.cred li{display:flex;gap:.6rem;padding:.5rem 0;border-top:1px solid var(--line);font-size:.98rem}
.cred li:first-child{border-top:0}
.cred li svg{width:20px;height:20px;color:var(--teal);flex:0 0 20px;margin-top:3px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery .ph{aspect-ratio:1/1;border-radius:var(--r)}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r)}
.split > img{width:100%;object-fit:cover}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
/* on dark gradient bands the FAQ sits in a dark glass panel, white text */
.section--surface .faq{background:rgba(7,44,50,.42);border:1px solid rgba(255,255,255,.22);border-radius:var(--r-lg);
  padding:10px 28px;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:var(--shadow-sm)}
/* plain text inside a split on a dark band stays readable */
.section--surface .split h3{color:#fff}
.section--surface .split > div > p{color:rgba(255,255,255,.88)}
.section--surface .qa-item{border-color:rgba(255,255,255,.18)}
.section--surface .qa-item button{color:#fff}
.section--surface .qa-item .a{color:rgba(255,255,255,.82)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.step,.quote,.price-box,.vidconsult,.case,.country,.shrink{background:var(--glass-solid)}
  .section--surface .card,.section--surface .step,.section--surface .quote,
  .section--surface .price-box,.section--surface .vidconsult,.section--surface .case,
  .section--surface .country,.section--surface .shrink,.section--surface .faq{background:rgba(9,52,58,.94)}
}
.qa-item{border-bottom:1px solid var(--line)}
.qa-item button{width:100%;text-align:left;background:none;border:0;padding:1.15rem 0;cursor:pointer;
  display:flex;justify-content:space-between;gap:1rem;align-items:center;font-family:var(--display);font-weight:600;font-size:1.08rem;color:var(--ink)}
.qa-item .a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--muted)}
.qa-item .a p{padding-bottom:1.1rem;margin:0}
/* inline links in FAQ answers read as coral on both light and dark bands */
.qa-item .a a{color:var(--coral);text-decoration:underline;text-underline-offset:2px}
.section--surface .qa-item .a a{color:var(--coral)}
.qa-item.open .a{max-height:420px}
.plus{flex:0 0 22px;width:22px;height:22px;position:relative;transition:transform .3s}
.qa-item.open .plus{transform:rotate(45deg)}
.plus::before,.plus::after{content:"";position:absolute;background:var(--coral);border-radius:2px}
.plus::before{left:50%;top:1px;width:2px;height:20px;transform:translateX(-50%)}
.plus::after{top:50%;left:1px;height:2px;width:20px;transform:translateY(-50%)}

/* ---------- CTA band (always cushioned on all sides) ---------- */
.cta-wrap{padding-top:72px;padding-bottom:82px}
.cta-band{background:linear-gradient(120deg,var(--coral),#F5895B);border-radius:var(--r-lg);padding:56px 52px;color:#fff;text-align:center;box-shadow:var(--shadow)}
.cta-band .btn{margin:0 auto}
.cta-band h2{color:#fff;margin-bottom:.6rem}
.cta-band p{color:rgba(255,255,255,.94);max-width:52ch;margin:0 auto 1.5rem}

/* ---------- evidence citations ---------- */
.cites{font-size:.82rem;color:var(--muted);max-width:78ch;margin:1.6rem auto 0}
.section--deep .cites{color:rgba(255,255,255,.55)}
.cites li{margin-bottom:.35rem}

/* ---------- breadcrumb ---------- */
.crumb{font-size:.85rem;color:var(--muted);padding:18px 6px 0 10px;position:relative;z-index:1}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--teal)}

/* ---------- footer ---------- */
footer.site{background:var(--deep);color:rgba(255,255,255,.76);padding:62px 0 28px;font-size:.94rem}
footer.site .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:30px;margin-bottom:34px}
footer.site h5{color:#fff;font-family:var(--display);font-size:1rem;margin:0 0 1rem}
footer.site a{color:rgba(255,255,255,.76);display:block;padding:.24rem 0}
footer.site a:hover{color:#fff}
footer.site .logo-foot{display:block;width:100%;max-width:300px;margin-bottom:1.1rem}
footer.site .logo-foot img{width:100%;height:auto;display:block}
footer.site .bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;font-size:.82rem;
  color:rgba(255,255,255,.5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.reviewed{font-size:.8rem;color:var(--muted);border-left:3px solid var(--teal);padding:.4rem .9rem;background:var(--surface);border-radius:0 10px 10px 0;margin-top:2rem}

/* ---------- WhatsApp float ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:70;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 20px 7px 7px;box-shadow:0 14px 34px -12px rgba(16,58,59,.45);
  display:flex;align-items:center;gap:11px;text-decoration:none;transition:transform .18s,box-shadow .2s}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 20px 42px -12px rgba(16,58,59,.55)}
.wa-float__ic{width:48px;height:48px;display:block;border-radius:13px}
.wa-float__txt{display:flex;flex-direction:column;line-height:1.15}
.wa-float__txt small{font-size:.72rem;color:var(--muted)}
.wa-float__txt b{font-family:var(--display);font-weight:700;color:#0B5D4A;font-size:1rem}
/* keep the "For quick answers / Chat with us" caption on mobile too (matches desktop),
   just a touch smaller so the pill fits comfortably bottom-right */
@media(max-width:560px){.wa-float{right:14px;bottom:14px;padding:6px 15px 6px 6px;gap:9px}
  .wa-float__ic{width:42px;height:42px}
  .wa-float__txt small{font-size:.66rem}.wa-float__txt b{font-size:.9rem}}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .hero-grid,.hero-duo,.split,.doc-hero{grid-template-columns:1fr;gap:34px}
  .hero-duo .hero-img{max-width:480px}
  /* mobile: clinic image as a banner, text on a card overlapping it (image stays visible) */
  .hero-cover{display:block;min-height:0;padding:88px 0 0}
  .hero-cover__img{position:relative;inset:auto;height:clamp(200px,40vh,300px)}
  .hero-cover::after{display:none}
  .hero-cover > .wrap{display:block;max-width:none;padding:0 20px}
  .hero-panel{max-width:none;margin-top:-46px;position:relative;z-index:3;
    background:#fff;border:1px solid var(--line);
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .grid--3,.grid--4,.steps,.steps--3,.country-grid,.gallery{grid-template-columns:1fr 1fr}
  .grid--2,.compare{grid-template-columns:1fr}
  footer.site .fgrid{grid-template-columns:1fr 1fr}
  .nav-links,.nav-actions .btn{display:none}
  .burger{display:flex}
  header.site.open .nav-links{display:flex;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;
    align-items:stretch;gap:.1rem;background:rgba(255,255,255,.97);
    backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
    border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
    padding:12px;max-height:calc(100vh - 130px);overflow:auto}
  header.site.open .nav-links .nav-top{justify-content:space-between;width:100%;padding:.8rem .7rem;font-size:1rem}
  header.site.open .submenu{position:static;display:none;background:transparent;border:0;box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;padding:.1rem 0 .5rem .85rem;min-width:0}
  header.site.open .has-menu::after{display:none}
  header.site.open .nav-item.open > .submenu{display:flex}
  header.site.open .submenu a{padding:.6rem .6rem}
  header.site.open .submenu--2col{flex-direction:column}
  header.site.open .submenu--2col > a{flex:0 0 auto}
  header.site.open .nav-links .mob-cta{display:flex;flex-direction:column;gap:.6rem;margin-top:.8rem;padding-top:.9rem;border-top:1px solid var(--line)}
  .mob-cta{display:none}
}
@media(max-width:560px){
  .grid--3,.grid--4,.steps,.steps--3,.country-grid,.gallery{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .cols-2{columns:1}
  .btn{white-space:normal}
  /* centre + cushion inner-page heroes on phones (hero-grid = RFA pillar) */
  .hero-solo,.hero-duo,.hero-grid{text-align:center;padding-left:6px;padding-right:6px}
  .hero-solo .lead,.hero-duo .lead,.hero-grid .lead{margin-left:auto;margin-right:auto}
  .hero-solo .btn-row,.hero-duo .btn-row,.hero-grid .btn-row,.hero-solo .chip-row,.hero-duo .chip-row,.hero-grid .chip-row{justify-content:center}
  .hero-grid .eyebrow{justify-content:center}
  .hero-duo .hero-img{margin:0 auto}
  .section{padding:56px 0}.cta-band{padding:34px 22px}
  .portrait .f-tl{left:0}.portrait .f-br{right:0}
}
/* ---------- home service cards: "featured service" style — image on top in an inset rounded
   frame, title + description below on a light card (client-approved reference, 27 Jul) ---------- */
body.home .card--photo{display:block;padding:14px 14px 22px;background:rgba(255,255,255,.94);
  border-color:rgba(255,255,255,.5)}
body.home .card--photo .cimg{position:relative;min-height:0;height:180px;border-radius:14px;overflow:hidden}
body.home .card--photo .cimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.home .card--photo .cbody{display:block;padding:18px 8px 0}
body.home .card--photo .cbody h3{color:var(--ink)}
body.home .card--photo:hover .cbody h3{color:var(--amber)}
body.home .card--photo .cbody p{color:var(--muted)}
@media(max-width:560px){
  body.home .card--photo .cimg{height:170px}
}

/* ---------- home hero v2 (Nova trial, 27 Jul late): light hero, copy left, photo right bleeding
   to the top edge under the floating header, dark stats bar tucked over the hero's lower edge.
   Design only — markup/content untouched. Revert = delete this block. ---------- */
body.home .hero-cover{background:#F2F9F6;padding-bottom:104px;min-height:0;align-items:flex-start}
body.home .hero-cover > .wrap{padding-top:8px;padding-bottom:0}
/* full-bleed photo; copy sits on a white scrim fading left → right, gone just before mid-hero */
body.home .hero-cover::after{background:linear-gradient(90deg,
  rgba(255,255,255,1) 0%,rgba(255,255,255,.97) 24%,rgba(255,255,255,.78) 36%,rgba(255,255,255,0) 48%)}
body.home .hero-panel{background:transparent;border:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;padding-left:0;max-width:580px}
body.home .hero-panel .btn-row{flex-wrap:wrap}
body.home .hero-panel .btn-row .btn{flex:0 0 auto}
@media(max-width:560px){body.home .hero-panel .btn-row{flex-wrap:wrap}}
body.home .statbar{background:transparent;border:0;position:relative;z-index:2;margin-top:-104px;padding:0 8px}
body.home .statbar-grid{border-radius:20px;padding:26px 18px 24px;gap:14px;
  background:radial-gradient(80% 120% at 88% -10%,rgba(46,156,147,.35),transparent 55%),
             linear-gradient(160deg,#14494B 0%,#0F3A3B 55%,#0A2E2F 100%)}
body.home .statb{border-left-color:rgba(255,255,255,.16)}
body.home .statb-ic{background:rgba(255,255,255,.12);color:#9BD8CF}
body.home .statb-n{background:linear-gradient(120deg,#7FD6C2,var(--amber));
  -webkit-background-clip:text;background-clip:text}
body.home .statb-l{color:rgba(255,255,255,.78)}
@media(max-width:920px){
  /* stacked layout: run the photo up under the floating header (no blank band above it);
     the header pill overlays the photo, and the card's rounded top corners are preserved
     by overflow:hidden. Taller banner so plenty of photo shows below the header. */
  body.home .hero-cover{padding-top:0;padding-bottom:62px;background:#F2F9F6;--hero-img-h:clamp(340px,54vh,480px)}
  body.home .hero-cover__img{height:var(--hero-img-h)}
  body.home .hero-cover::after{display:none}
  /* soft fade at the foot of the banner so the photo dissolves into the page tint
     (#F2F9F6) directly below it — the vertical twin of the desktop hero's left scrim.
     Short fade near the bottom only; reaches the exact background colour at the image's
     lower edge so that edge disappears. Sits above the photo, below the text panel. */
  body.home .hero-cover::before{content:"";position:absolute;left:0;right:0;top:0;
    height:var(--hero-img-h);z-index:1;pointer-events:none;
    background:linear-gradient(to bottom,transparent 74%,rgba(242,249,246,.55) 89%,#F2F9F6 100%)}
  /* stacked layout: let the copy use the full column (desktop caps it at 580px for the
     side-by-side photo) so the H1 isn't stranded left, and scale the H1 up to fill it */
  body.home .hero-panel{max-width:none}
  body.home .hero-panel h1{font-size:clamp(2.1rem,5.4vw,3.15rem);line-height:1.08}
  /* mint hero extends down (padding-bottom above) and the dark stat bar tucks up into it
     (negative margin) so the two overlap with no white gap — the mobile echo of the
     desktop "stats tucked over the hero's lower edge" look. Stat bar is z-index:2 (in
     front); the mint shows through behind the bar's rounded top corners. */
  body.home .statbar{margin-top:-44px;padding:0 8px}
  body.home .statbar-grid{box-shadow:0 -8px 26px -12px rgba(12,66,71,.4)}
}
@media(max-width:700px){
  body.home .statb{border-top-color:rgba(255,255,255,.16)}
}

/* Booking form — Book page "Choose a time" section (light card on a dark band) */
.booking-form{max-width:760px;margin:1.6rem auto 0;background:var(--surface);border:1px solid var(--glass-border);border-radius:20px;padding:1.6rem;box-shadow:0 16px 38px -16px rgba(16,58,59,.45);text-align:left}
.booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fld{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.fld--full{grid-column:1 / -1}
.fld > span{font-size:.9rem;font-weight:600;color:var(--ink)}
.fld b{color:var(--coral);font-weight:700}
.fld i{color:var(--muted);font-weight:400;font-style:normal}
.booking-form input,.booking-form select,.booking-form textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:.7rem .85rem;width:100%;max-width:100%;box-sizing:border-box}
.booking-form textarea{resize:vertical;min-height:76px}
.booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(30,123,116,.18)}
.booking-form input:invalid:not(:placeholder-shown),.booking-form select:invalid{border-color:var(--coral)}
.booking-form__foot{margin-top:1.3rem;text-align:center}
.booking-form__note{font-size:.82rem;color:var(--muted);max-width:52ch;margin:.9rem auto 0}
.booking-form__ok{text-align:center;padding:1.8rem 1rem}
.booking-ok__icon{width:60px;height:60px;margin:0 auto 1rem;border-radius:50%;background:rgba(30,123,116,.12);color:var(--teal);display:flex;align-items:center;justify-content:center}
.booking-ok__icon svg{width:30px;height:30px}
.booking-form__oktitle{font-weight:700;color:var(--teal);font-size:1.3rem;margin:0 0 .5rem}
.booking-form__okbody{color:var(--ink);margin:0 auto;max-width:46ch;line-height:1.6}
.booking-ok__wa{margin-top:1.3rem}
.booking-form .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:560px){.booking-grid{grid-template-columns:1fr}.booking-form{padding:1.2rem}}

/* Booking modal (quick-book dialog; opened via [data-modal-open]) */
dialog.modal{border:0;padding:0;background:transparent;width:min(760px,94vw);max-width:none}
dialog.modal::backdrop{background:rgba(6,32,35,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal-card{position:relative;background:var(--bg);border-radius:22px;padding:30px 26px 26px;
  max-height:min(88vh,880px);overflow:auto;box-shadow:0 40px 90px -30px rgba(6,32,35,.7)}
.modal-card .booking-form{margin-top:1rem;box-shadow:none;border-color:var(--line)}
.modal-close{position:sticky;top:0;float:right;margin:-6px -4px 0 0;z-index:5;width:40px;height:40px;
  border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--shadow-sm);transition:background .15s,color .15s}
.modal-close:hover{background:var(--teal-dark);color:#fff;border-color:var(--teal-dark)}
.modal-close svg{width:18px;height:18px}
@media(max-width:560px){dialog.modal{width:calc(100vw - 16px)}.modal-card{padding:22px 14px 16px;max-height:92vh}}

/* ============================================================
   HOMEPAGE 2.0 components (30 Jul 2026)
   ============================================================ */
/* S1 hero trust indicators */
.hero-trust{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem}
.hero-trust li{display:flex;align-items:center;gap:.45rem;font-family:var(--display);font-weight:600;font-size:.92rem;color:#274b48}
.hero-trust li svg{width:18px;height:18px;color:var(--teal);flex:0 0 18px}

/* S2 reassurance list (on dark band) */
.reassure{list-style:none;margin:0 auto;padding:0;max-width:640px;display:grid;gap:.55rem}
.reassure li{display:flex;align-items:center;gap:.7rem;justify-content:center;font-family:var(--display);font-weight:600;font-size:1.05rem;color:#fff}
.reassure li svg{width:22px;height:22px;color:var(--amber);flex:0 0 22px}

/* link cards (treatments, resources) — whole card is a link */
.card--link{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.card--link:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card--link h3{color:var(--ink)}
.card--link:hover h3{color:var(--teal)}
.card-more{margin-top:auto;padding-top:.9rem;color:var(--coral);font-family:var(--display);font-weight:600;font-size:.9rem}
.section--surface .card--link h3{color:#fff}
.section--surface .card--link:hover h3{color:var(--amber)}
.section--surface .card-more{color:var(--amber)}

/* ---------- procedure / service cards (photo header + overlapping teal icon badge) ---------- */
.proc-grid{align-items:stretch}
.proc-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .2s ease}
.proc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.proc-card__media{position:relative;display:block;width:100%;height:180px;margin:0;overflow:hidden;
  background:linear-gradient(160deg,#DDEEEA,#EAF5F1)}
.proc-card__media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;margin:0;max-width:none}
/* fade the photo into the white body below it (kept light so the photo fills the banner) */
.proc-card__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 66%,rgba(255,255,255,.5) 86%,#fff 100%)}
.proc-card__badge{position:absolute;left:22px;bottom:14px;z-index:2;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;color:#fff;border:3px solid #fff;
  background:radial-gradient(100% 120% at 72% 8%,rgba(70,180,166,.55),transparent 55%),linear-gradient(158deg,#137A70,#0C4247);
  box-shadow:0 16px 30px -10px rgba(12,66,71,.6),0 8px 16px -6px rgba(19,122,112,.55)}
.proc-card__badge svg{width:26px;height:26px}
.proc-card__body{position:relative;display:flex;flex-direction:column;flex:1;padding:18px 24px 24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%231E7B74' stroke-opacity='0.07' stroke-width='2'%3E%3Cpath d='M120 40 A80 80 0 0 1 40 120'/%3E%3Cpath d='M120 66 A54 54 0 0 1 66 120'/%3E%3Cpath d='M120 92 A28 28 0 0 1 92 120'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:bottom right}
.proc-card__body h3{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1.15;margin:0;color:var(--ink)}
.proc-card:hover .proc-card__body h3{color:var(--teal)}
.proc-card__body .cond-rule{margin:.6rem 0 .7rem}
.proc-card__body p{color:var(--muted);font-size:.95rem;line-height:1.5;margin:0}
.proc-card__more{margin-top:auto;padding-top:1.15rem;display:inline-flex;align-items:center;gap:.6rem;
  color:var(--teal);font-family:var(--display);font-weight:700;font-size:.92rem}
.proc-card__arrow{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:0 0 26px;
  border:1.5px solid rgba(19,122,112,.35);color:var(--teal);transition:background .2s,border-color .2s,transform .2s,color .2s}
.proc-card__arrow svg{width:15px;height:15px}
.proc-card:hover .proc-card__arrow{background:var(--teal);border-color:var(--teal);color:#fff;transform:translateX(2px)}
@media(max-width:520px){.proc-card__media{height:168px}.proc-card__body{padding:16px 18px 20px}}

/* S5 patient journey rail — horizontal on desktop, vertical on mobile */
.journey{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:12px;counter-reset:jr}
.journey-step{position:relative;text-align:center;padding:0 6px}
.journey-step h4{font-size:.98rem;margin:.9rem 0 .3rem}
.journey-step p{font-size:.82rem;color:var(--muted);margin:0;line-height:1.45}
.journey-dot{position:relative;z-index:1;width:40px;height:40px;margin:0 auto;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;box-shadow:0 6px 16px -8px rgba(16,58,59,.5)}
.journey-dot::before{counter-increment:jr;content:counter(jr)}
.journey-step:not(:last-child)::after{content:"";position:absolute;top:20px;left:calc(50% + 24px);width:calc(100% - 48px);height:2px;background:linear-gradient(90deg,var(--teal),rgba(30,123,116,.25))}

/* S4 vertical training timeline */
.tline{list-style:none;margin:0 auto;padding:0;max-width:760px;counter-reset:tl}
.tline-item{position:relative;padding:0 0 1.6rem 2.6rem}
.tline-item:last-child{padding-bottom:0}
.tline-item::before{content:"";position:absolute;left:14px;top:6px;bottom:-6px;width:2px;background:rgba(255,255,255,.28)}
.tline-item:last-child::before{display:none}
.tline-dot{position:absolute;left:5px;top:2px;width:20px;height:20px;border-radius:50%;background:var(--amber);border:3px solid rgba(255,255,255,.5);z-index:1}
.tline-item h4{font-size:1.02rem;margin:0 0 .2rem;color:#fff}
.tline-item p{margin:0;color:rgba(255,255,255,.85);font-size:.95rem}
.section:not(.section--surface) .tline-item::before{background:var(--line)}
.section:not(.section--surface) .tline-item h4{color:var(--ink)}
.section:not(.section--surface) .tline-item p{color:var(--muted)}

/* Case timeline — vertical dot-connector with a date badge, milestone and photo.
   Used on patient case-study pages. Ink text on white; white text on .section--surface. */
.ctimeline{list-style:none;margin:2rem auto 0;padding:0;max-width:900px;position:relative}
.ctl-item{position:relative;padding:0 0 2.2rem 2.4rem;display:grid;grid-template-columns:1fr;gap:1rem;align-items:start}
.ctl-item:last-child{padding-bottom:0}
/* continuous connector: runs from this dot down to the next */
.ctl-item::before{content:"";position:absolute;left:9px;top:6px;bottom:-6px;width:2px;background:var(--line)}
.ctl-item:last-child::before{display:none}
.ctl-dot{position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;background:var(--teal);border:3px solid #fff;box-shadow:0 0 0 2px var(--teal);z-index:1}
.ctl-date{display:inline-block;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.02em;color:var(--teal);background:rgba(30,123,116,.10);border:1px solid rgba(30,123,116,.22);padding:.24rem .6rem;border-radius:999px;margin-bottom:.5rem}
.ctl-body h3{font-size:1.1rem;margin:0 0 .3rem}
.ctl-body p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
/* uniform photo box — every milestone image is the same size (4:3), click to open full-size */
.ctl-media{margin:.2rem 0 0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);aspect-ratio:4/3;width:100%}
.ctl-media a{display:block;width:100%;height:100%;cursor:zoom-in}
.ctl-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.ctl-media a:hover img{transform:scale(1.04)}
.ctl-media--doc{background:#fff}
.ctl-media--doc img{object-fit:contain}
@media(min-width:721px){
  .ctl-item{grid-template-columns:1fr 340px;align-items:start;gap:1.8rem;padding-bottom:2.4rem}
  .ctl-media{justify-self:end;max-width:340px}
}
.section--surface .ctl-item::before{background:rgba(255,255,255,.28)}
.section--surface .ctl-dot{border-color:transparent;box-shadow:0 0 0 2px var(--amber);background:var(--amber)}
.section--surface .ctl-date{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.section--surface .ctl-body h3{color:#fff}
.section--surface .ctl-body p{color:rgba(255,255,255,.85)}
.section--surface .ctl-media{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}

/* Image lightbox — expands a timeline/case photo inline in the same tab */
.lightbox{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(7,32,34,.88);backdrop-filter:blur(4px)}
.lightbox.open{display:flex}
.lightbox-fig{margin:0;max-width:min(1000px,92vw);max-height:90vh;display:flex;flex-direction:column;align-items:center}
.lightbox-fig img{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:12px;box-shadow:0 24px 64px -20px rgba(0,0,0,.6);background:#fff}
.lightbox-fig figcaption{margin-top:.8rem;color:rgba(255,255,255,.9);font-size:.88rem;text-align:center;max-width:62ch;line-height:1.5}
.lightbox-close{position:absolute;top:16px;right:20px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.lightbox-close:hover{background:rgba(255,255,255,.28)}

/* Country-page before/after teaser card (full-width case card linking to the full story) */
.case--teaser{max-width:900px;margin:1.6rem auto 0}
@media(min-width:721px){.case--teaser{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}.case--teaser .case-imgs{height:100%}}

/* S8 comparison table (light card on any band) */
.cmp-table{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);max-width:900px;margin:0 auto;border:1px solid var(--line)}
.cmp-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;align-items:stretch}
.cmp-row:not(:last-child){border-bottom:1px solid var(--line)}
.cmp-head{background:var(--surface)}
.cmp-rowlabel{padding:.85rem 1rem;font-family:var(--display);font-weight:700;color:var(--ink);font-size:.9rem;display:flex;align-items:center}
.cmp-cell{padding:.85rem 1rem;color:var(--ink);font-size:.9rem;text-align:center;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--line)}
.cmp-colh{font-family:var(--display);font-weight:700}
.cmp-hl{background:rgba(30,123,116,.08)}
.cmp-head .cmp-hl{background:var(--teal);color:#fff}
.cmp-k{display:none;font-weight:700;color:var(--teal)}

/* mobile: journey stacks vertical, comparison becomes stacked cards */
@media(max-width:860px){
  .journey{grid-template-columns:repeat(2,1fr);gap:22px 16px}
  .journey-step:not(:last-child)::after{display:none}
}
@media(max-width:640px){
  .journey{grid-template-columns:1fr;text-align:left;gap:0}
  .journey-step{display:grid;grid-template-columns:40px 1fr;gap:0 14px;padding:0 0 1.4rem 0}
  .journey-step h4{grid-column:2;margin:.35rem 0 .25rem}
  .journey-step p{grid-column:2}
  .journey-dot{grid-row:1/3}
  .cmp-row{grid-template-columns:1fr}
  .cmp-head{display:none}
  .cmp-row{border-bottom:8px solid var(--surface)}
  .cmp-rowlabel{background:var(--surface);font-size:1rem}
  .cmp-cell{justify-content:flex-start;text-align:left;border-left:0;border-top:1px solid var(--line)}
  .cmp-k{display:inline}
  .cmp-hl{background:rgba(30,123,116,.06)}
}

/* card slider (conditions) — arrows sit in side gutters, never on the cards */
.slider{position:relative;padding:0}
.slider-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.slider-track::-webkit-scrollbar{display:none}
.slider-track > *{flex:0 0 clamp(220px,80vw,264px);scroll-snap-align:start}
/* controls row (below the track): prev arrow · progress dots · next arrow — always visible so
   it's obvious the row is a swipeable slider with more items */
.slider-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px}
.slider-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--teal);box-shadow:var(--shadow-sm);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;transition:transform .15s,box-shadow .2s,opacity .2s}
.slider-btn:hover{transform:scale(1.06);box-shadow:var(--shadow)}
.slider-btn:disabled{opacity:.32;cursor:default;box-shadow:none;transform:none}
.slider-btn svg{width:20px;height:20px}
.slider-dots{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center;max-width:60%}
.slider-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(19,122,112,.3);cursor:pointer;transition:transform .2s,background .2s}
.slider-dot:hover{background:rgba(19,122,112,.55)}
.slider-dot.is-active{background:var(--teal);transform:scale(1.5)}

/* condition card — round teal line-art icon (left), title + rule + copy (right), divider, Read-more */
.card--cond{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon title" "icon body" "foot foot";
  column-gap:26px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:18px 28px;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:transform .18s,box-shadow .2s}
.card--cond:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cond-ic{grid-area:icon;position:relative;width:104px;height:104px;border-radius:50%;
  background:radial-gradient(100% 120% at 72% 8%,rgba(70,180,166,.55),transparent 55%),linear-gradient(158deg,#137A70,#0C4247);
  display:grid;place-items:center;box-shadow:0 26px 46px -14px rgba(12,66,71,.6),0 12px 24px -8px rgba(19,122,112,.55)}
.cond-ic .thy-gland{width:56px;height:auto}
.thy-badge{position:absolute;right:-1px;bottom:-1px;width:38px;height:38px;border-radius:50%;background:var(--amber);
  border:3px solid #fff;box-shadow:0 6px 14px -4px rgba(180,122,31,.6);display:grid;place-items:center}
.thy-badge svg{width:21px;height:21px}
.cond-body{grid-area:body;min-width:0}
.cond-title{grid-area:title;min-width:0;font-size:1.5rem;line-height:1.12;margin:0;color:var(--ink)}
.card--cond:hover .cond-title{color:var(--teal)}
.cond-rule{display:block;width:46px;height:3px;border-radius:2px;background:var(--teal);margin:.5rem 0 .55rem}
.cond-body p{color:var(--muted);line-height:1.5;margin:0;font-size:.95rem}
.cond-foot{grid-area:foot;border-top:1px solid var(--line);margin-top:15px;padding-top:15px}
.cond-more{display:inline-flex;align-items:center;gap:.5rem;background:var(--teal-dark);color:#fff;
  padding:.72rem 1.35rem;border-radius:12px;font-family:var(--display);font-weight:700;font-size:.92rem}
.card--cond:hover .cond-more{background:var(--teal)}
/* size the card to the TRACK (not the viewport) so it's never wider than its scroll area,
   and centre-snap it so the whole card sits snug in view with a small peek of the next one.
   (Was 90vw — the viewport is wider than the padded track, so the card overflowed + clipped.) */
.slider-track > .card--cond{flex-basis:min(88%,440px);scroll-snap-align:center}
/* mobile: keep the icon-left horizontal layout (don't stack) and shrink everything so the
   card is much shorter — smaller icon, tighter padding, compact copy + Read-more */
@media(max-width:600px){
  /* icon sits beside the title (row 1); description runs full-width below both (row 2) */
  .card--cond{grid-template-areas:"icon title" "body body" "foot foot";align-items:center;
    column-gap:14px;row-gap:11px;padding:15px 17px;border-radius:16px}
  .cond-ic{width:58px;height:58px;box-shadow:0 14px 26px -10px rgba(12,66,71,.55)}
  .cond-ic .thy-gland{width:31px}
  .thy-badge{width:23px;height:23px;border-width:2px}
  .thy-badge svg{width:13px;height:13px}
  .cond-title{font-size:1.15rem}
  .cond-body p{font-size:.88rem;line-height:1.4}
  .cond-rule{width:36px;margin:0 0 .4rem}
  .cond-foot{margin-top:11px;padding-top:11px}
  .cond-more{padding:.55rem 1rem;font-size:.85rem}
}
/* conditions-hub 4-up grid: stack the glyph card (icon → title → body → foot) so titles
   get the full card width and never overflow the narrow icon-left column. Slider unaffected. */
.cond-grid .card--cond{grid-template-columns:1fr;grid-template-areas:"icon" "title" "body" "foot";
  column-gap:0;align-items:start;padding:24px 24px}
.cond-grid .cond-ic{width:78px;height:78px;margin-bottom:16px}
.cond-grid .cond-ic .thy-gland{width:42px}
.cond-grid .thy-badge{width:30px;height:30px;border-width:3px}
.cond-grid .thy-badge svg{width:16px;height:16px}
.cond-grid .cond-title{font-size:1.2rem}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px}

/* ---- booking slot picker (Book page HMS bridge) ---- */
.slots{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem}
.slots__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.4rem}
.slots__title{font-size:.9rem;font-weight:600;color:var(--ink)}
.slots__doctor{font-size:.82rem;color:var(--teal-dark);font-weight:600;background:rgba(30,123,116,.10);border-radius:999px;padding:.2rem .6rem}
.slots__msg{color:var(--muted);font-size:.88rem;padding:.5rem .1rem}
.slots__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.5rem;margin-top:.35rem}
.slot{appearance:none;font:inherit;font-size:.86rem;cursor:pointer;text-align:center;padding:.55rem .3rem;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);transition:transform .08s,border-color .15s,background .15s}
.slot:hover:not(:disabled){border-color:var(--teal);transform:translateY(-1px)}
.slot[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600}
.slot:disabled{cursor:not-allowed;color:#aebcbc;background:#f2f5f5;text-decoration:line-through;opacity:.85}
.slot small{display:block;font-size:.68rem;font-weight:400;color:inherit;opacity:.8;text-decoration:none}
.slots__legend{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.7rem;font-size:.76rem;color:var(--muted)}
.slots__legend .dot{display:inline-block;width:.7rem;height:.7rem;border-radius:3px;vertical-align:-1px;margin-right:.3rem;border:1px solid var(--line)}
.slots__legend .dot--free{background:#fff}
.slots__legend .dot--sel{background:var(--teal);border-color:var(--teal)}
.slots__legend .dot--full{background:#f2f5f5}
.form-err{background:#fdecec;border:1px solid #f4c4c4;color:#a12b2b;border-radius:10px;padding:.6rem .8rem;font-size:.85rem}

/* The hidden attribute must always win — author display rules (.fld, .slots__grid,
   .slots__legend) otherwise override the browser's [hidden] default. */
[hidden]{display:none!important}

/* ===== "Send your reports" guided wizard (reportsModal) — 10 Aug 2026 ===== */
dialog.modal.rw{width:min(540px,94vw)}
.rw .modal-card{padding:26px 24px 20px}
.rw-head{text-align:center;margin-bottom:.4rem}
.rw-title{font-size:1.5rem;margin:.15rem 0 .9rem}
.rw-progress{height:7px;border-radius:6px;background:var(--line);overflow:hidden;margin:0 auto;max-width:320px}
.rw-progress__bar{display:block;height:100%;width:16%;border-radius:6px;background:linear-gradient(90deg,var(--teal),#7FD6C2);transition:width .35s ease}
.rw-count{font-size:.85rem;color:var(--muted);margin:.55rem 0 0}
.rw-count b{color:var(--ink)}
.rw-body{margin:1.1rem 0 .5rem}
.rw-step{display:none;text-align:center;animation:rwIn .3s ease}
.rw-step.is-active{display:block}
@keyframes rwIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rw-ic{display:inline-flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:50%;
  background:linear-gradient(150deg,#137A70,#0C4247);color:#fff;box-shadow:0 10px 22px -10px rgba(15,58,59,.6);margin-bottom:.7rem}
.rw-ic svg{width:30px;height:30px}
.rw-ic--ok{background:linear-gradient(150deg,#2FA36B,#16794A)}
.rw-step h3{font-size:1.2rem;margin:.1rem 0 .4rem}
.rw-desc{color:var(--muted);max-width:42ch;margin:0 auto 1.1rem;font-size:.96rem}
.rw-add{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;padding:.85rem 1.3rem;border-radius:14px;
  border:2px dashed var(--teal);color:var(--teal);font-weight:600;font-family:inherit;font-size:1rem;background:rgba(30,123,116,.05);transition:.18s}
.rw-ready{list-style:none;padding:0;margin:0 auto 1.1rem;max-width:340px;text-align:left;display:flex;flex-direction:column;gap:.5rem}
.rw-ready li{display:flex;align-items:center;gap:.6rem;font-size:.96rem;color:var(--ink)}
.rw-ready li svg{width:18px;height:18px;color:var(--teal);flex:0 0 18px}
.rw--intro .rw-skip{display:none}
.rw-add:hover{background:rgba(30,123,116,.12)}
.rw-add svg{width:20px;height:20px}
.rw-add--cam{border-style:solid;background:var(--teal);color:#fff}
.rw-add--cam:hover{background:var(--teal-dark,#0F5F59)}
.rw-files{list-style:none;padding:0;margin:1rem auto 0;max-width:360px;display:flex;flex-direction:column;gap:.45rem}
.rw-files li{display:flex;align-items:center;gap:.5rem;justify-content:space-between;background:var(--surface,#F2F9F6);
  border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;font-size:.9rem;text-align:left}
.rw-files li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw-files .rw-rm{border:0;background:none;color:var(--muted);cursor:pointer;font-size:1.1rem;line-height:1;padding:0 .2rem}
.rw-files .rw-rm:hover{color:var(--coral)}
.rw-shot{margin-top:1rem}
.rw-shot__img{max-width:100%;max-height:230px;border-radius:14px;border:1px solid var(--line)}
.rw-shot__row{display:flex;gap:.6rem;justify-content:center;margin-top:.7rem}
.rw-retake{border:1px solid var(--line);background:#fff;border-radius:10px;padding:.5rem .9rem;cursor:pointer;color:var(--ink);font-weight:600}
.rw-retake:hover{border-color:var(--teal);color:var(--teal)}
.rw-summary{list-style:none;padding:0;margin:.4rem auto 1rem;max-width:360px;text-align:left;display:flex;flex-direction:column;gap:.4rem}
.rw-summary li{display:flex;align-items:center;gap:.55rem;font-size:.95rem}
.rw-summary li::before{content:"";flex:0 0 18px;height:18px;border-radius:50%;background:#2FA36B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat}
.rw-summary li.is-empty::before{background:var(--line)}
.rw-note{font-size:.92rem;color:var(--muted);max-width:44ch;margin:0 auto 1.1rem}
.rw-note b{color:var(--ink)}
.rw-fine{font-size:.82rem;color:var(--muted);margin:.9rem auto 0;max-width:40ch}
.rw-send{font-size:1.05rem}
.rw-nav{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.rw-btn{border:0;border-radius:12px;padding:.8rem 1.5rem;font-weight:600;cursor:pointer;font-size:1rem}
.rw-back{background:#fff;border:1px solid var(--line);color:var(--ink)}
.rw-back:hover{border-color:var(--teal);color:var(--teal)}
.rw-btn--go{background:var(--teal);color:#fff}
.rw-btn--go:hover{background:var(--teal-dark,#0F5F59)}
.rw-skip{border:0;background:none;color:var(--muted);cursor:pointer;font-size:.9rem;text-decoration:underline}
.rw-skip:hover{color:var(--ink)}
.rw--first .rw-back{visibility:hidden}
.rw--final .rw-next,.rw--final .rw-skip{display:none}
@media(prefers-reduced-motion:reduce){.rw-step{animation:none}.rw-progress__bar{transition:none}}
@media(max-width:560px){.rw-nav{gap:.4rem}.rw-btn{padding:.75rem 1.1rem}.rw-skip{order:3}}

/* ===== Booking form → step wizard (bwiz) — 10 Aug 2026 ===== */
.bwiz-head{display:none;margin-bottom:1.2rem}
.bwiz-ready .bwiz-head{display:block}
.bwiz-progress{height:7px;border-radius:6px;background:var(--line);overflow:hidden;max-width:340px;margin:0 auto}
.bwiz-bar{display:block;height:100%;width:33%;border-radius:6px;background:linear-gradient(90deg,var(--teal),#7FD6C2);transition:width .35s ease}
.bwiz-count{font-size:.85rem;color:var(--muted);margin:.55rem 0 0;text-align:center}
.bwiz-count b{color:var(--ink)}
.bstep-h{font-size:1.15rem;margin:0 0 1rem;text-align:center}
.bwiz-ready .bstep{display:none}
.bwiz-ready .bstep.is-active{display:block;animation:rwIn .3s ease}
.bwiz-nav{display:none;align-items:center;justify-content:space-between;gap:.7rem;margin-top:1.3rem}
.bwiz-ready .bwiz-nav{display:flex}
.bwiz-btn{border:0;border-radius:12px;padding:.85rem 1.6rem;font-weight:600;font-family:inherit;font-size:1rem;cursor:pointer}
.bwiz-back{background:#fff;border:1px solid var(--line);color:var(--ink)}
.bwiz-back:hover{border-color:var(--teal);color:var(--teal)}
.bwiz-btn--go{background:var(--teal);color:#fff;margin-left:auto}
.bwiz-btn--go:hover{background:var(--teal-dark,#0F5F59)}
.bwiz--first .bwiz-back{visibility:hidden}
.booking-ok__opt{font-size:.92rem;color:var(--muted);margin:1.3rem auto .2rem;max-width:40ch}
@media(prefers-reduced-motion:reduce){.bwiz-ready .bstep.is-active{animation:none}.bwiz-bar{transition:none}}
.fld-hint{display:block;font-size:.78rem;color:var(--muted);margin-top:.35rem;font-style:normal;line-height:1.3}
/* reports wizard — email path (all devices, 7 Oct 2026) */
.rw-mail{max-width:380px;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:.8rem}
.rw-mail .fld input,.rw-mail .fld textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:.7rem .85rem;width:100%;max-width:100%;box-sizing:border-box}
.rw-mail .fld textarea{resize:vertical;min-height:84px}
.rw-mail .fld input:focus,.rw-mail .fld textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(30,123,116,.18)}
.rw-mail .rw-send{margin-top:.2rem}
.rw-mail-send{margin-top:.3rem}
.rw-mail-err{color:var(--coral);font-size:.88rem;text-align:center;margin:.2rem 0 0}
.rw-sent{max-width:400px;margin:.4rem auto 0}
.rw-sent-msg{color:var(--ink);font-size:.98rem;background:var(--surface,#F2F9F6);border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem}

/* ===== click-to-play YouTube facade (.yt) — 10 Aug 2026 ===== */
.yt{max-width:760px;margin:2.2rem auto 0;position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  box-shadow:0 18px 40px -18px rgba(6,32,35,.55);background:#0b2b2e}
.yt-play{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:none;display:block}
.yt-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease,opacity .3s}
.yt-play:hover .yt-thumb{transform:scale(1.04)}
.yt-play::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,32,35,.06) 55%,rgba(6,32,35,.72));}
.yt-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;
  background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;z-index:2;
  box-shadow:0 12px 28px -8px rgba(240,96,59,.65);transition:transform .2s}
.yt-play:hover .yt-btn{transform:translate(-50%,-50%) scale(1.08)}
.yt-btn svg{width:30px;height:30px;margin-left:4px}
.yt-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;font-weight:600;font-size:.98rem;
  padding:1rem 1.2rem;text-align:left;text-shadow:0 1px 8px rgba(6,32,35,.7)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:560px){.yt-btn{width:60px;height:60px}.yt-cap{font-size:.88rem;padding:.75rem .9rem}}

/* ============================================================
   WEBINAR pop-up (24 Sep 2026) — reuses .modal / .btn / tokens
   ============================================================ */
dialog.modal--wbn{width:min(860px,94vw)}
.wbn-card{padding:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.wbn-card .modal-close{position:absolute;top:12px;right:12px;float:none;margin:0;background:#fff}
.wbn-grid{display:grid;grid-template-columns:300px 1fr}
.wbn-side{position:relative;background:radial-gradient(120% 120% at 80% 0,rgba(70,180,166,.5),transparent 55%),linear-gradient(158deg,#137A70,#0C4247);color:#fff;padding:24px 24px 20px;display:flex;flex-direction:column;gap:12px}
.wbn-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.wbn-eyebrow svg{width:18px;height:18px;flex:0 0 18px}
.wbn-live{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .5rem;border-radius:999px;background:rgba(255,255,255,.16);font-size:.6rem;letter-spacing:.1em}
.wbn-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral);animation:wbnpulse 2s infinite}
@keyframes wbnpulse{0%{box-shadow:0 0 0 0 rgba(240,96,59,.6)}70%{box-shadow:0 0 0 7px rgba(240,96,59,0)}100%{box-shadow:0 0 0 0 rgba(240,96,59,0)}}
.wbn-title{font-size:1.5rem;line-height:1.12;color:#fff}
.wbn-tagline{margin:0;font-style:italic;font-family:var(--display);font-weight:500;color:rgba(255,255,255,.9);font-size:1rem}
.wbn-doctor{display:flex;align-items:center;gap:.7rem;margin-top:auto;padding-top:.4rem}
.wbn-avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.5);flex:0 0 54px}
.wbn-doctor b{display:block;font-family:var(--display);font-size:.95rem}
.wbn-doctor small{color:rgba(255,255,255,.82);font-size:.78rem;line-height:1.25;display:block}
.wbn-main{padding:22px 24px 18px;display:flex;flex-direction:column;gap:11px}
.wbn-when{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wbn-when>div{background:var(--surface);border-radius:12px;padding:8px 12px}
.wbn-when small{display:block;font-family:var(--display);font-weight:700;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.wbn-when b{font-family:var(--display);font-size:1rem;color:var(--ink)}
.wbn-points{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.wbn-points li{display:flex;align-items:flex-start;gap:.55rem;font-size:.94rem;line-height:1.4;color:var(--ink)}
.wbn-points li svg{width:18px;height:18px;color:var(--teal);flex:0 0 18px;margin-top:1px}
.wbn-actions{display:flex;flex-direction:column;gap:8px}
.wbn-join{gap:.5rem}
.wbn-link{display:flex;align-items:center;gap:.5rem;border:1.5px dashed var(--line);border-radius:12px;padding:.45rem .55rem}
.wbn-link code{flex:1;font-size:.82rem;color:var(--ink);word-break:break-all;font-family:ui-monospace,Menlo,monospace}
.wbn-copy{border:0;background:var(--surface-2);color:var(--teal-dark);border-radius:8px;padding:.4rem .6rem;font-family:var(--display);font-weight:700;font-size:.76rem;cursor:pointer;white-space:nowrap}
.wbn-copy:hover{background:var(--teal);color:#fff}
.wbn-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wbn-row2 .btn{padding-left:.6rem;padding-right:.6rem}
.wbn-calalt{margin:0;text-align:center;font-size:.76rem;color:var(--muted)}
.wbn-calalt a{font-weight:600}
.wbn-partners{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:.4rem}
.wbn-plabel{font-family:var(--display);font-weight:700;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.wbn-plogos{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.wbn-plogos img{height:28px;width:auto;object-fit:contain;display:block}
@media(max-width:720px){
  .wbn-grid{grid-template-columns:1fr}
  .wbn-side{padding:20px 20px 16px;gap:10px}
  .wbn-title{font-size:1.3rem}
  .wbn-doctor{margin-top:4px}
  .wbn-doctor small{display:none}
  .wbn-main{padding:16px 18px 16px;gap:11px}
  .wbn-points li:nth-child(2),.wbn-points li:nth-child(3){display:none}
  .wbn-row2{grid-template-columns:1fr}
  .wbn-plogos img{height:26px}
}
/* reminder bar (after dismiss) */
.wbn-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:.8rem;padding:.6rem .7rem .6rem 1rem;background:var(--deep);color:#fff;box-shadow:0 -6px 20px rgba(6,32,35,.3)}
.wbn-bar[hidden]{display:none}
.wbn-bar-ic{display:flex;flex:0 0 auto}.wbn-bar-ic svg{width:22px;height:22px;color:var(--amber)}
.wbn-bar-t{flex:1;min-width:0;font-size:.86rem;line-height:1.25}
.wbn-bar-t b{display:block;font-family:var(--display)}
.wbn-bar-t span{display:block;color:rgba(255,255,255,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wbn-bar-go{flex:0 0 auto;background:var(--coral);color:#fff;border-radius:10px;padding:.55rem .9rem;font-family:var(--display);font-weight:700;font-size:.9rem;text-decoration:none}
.wbn-bar-go:hover{background:var(--coral-dark)}
.wbn-bar-x{flex:0 0 auto;background:none;border:0;color:rgba(255,255,255,.8);cursor:pointer;width:34px;height:34px;display:grid;place-items:center}
.wbn-bar-x svg{width:16px;height:16px}
body.wbn-bar-on .wa-float{bottom:calc(1rem + 66px)}

/* Country-page case teaser: photos fill the full card height on desktop (no empty band under 4:3 thumbs) */
@media(min-width:721px){.case--teaser .cph{aspect-ratio:auto;min-height:240px}}

/* ===== Sticky case-report ticket (Option C, 10 Oct 2026) — built by storyTicket() in build.mjs, behaviour in site.js ===== */
.sticket{position:fixed;z-index:55;right:16px;top:96px;width:272px;font-family:var(--display);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .3s,visibility .3s}
.sticket.is-on{opacity:1;visibility:visible;transform:none}
.sticket__link{display:block;position:relative;border-radius:16px;padding:12px;color:#fff;text-decoration:none;background:linear-gradient(160deg,rgba(15,58,59,.96),rgba(30,123,116,.96));box-shadow:0 22px 44px -18px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sticket__link:hover{color:#fff;transform:translateY(-2px)}
.sticket__row{display:flex;gap:12px;align-items:center;padding-right:16px}
.sticket__av{position:relative;width:54px;height:54px;flex:0 0 auto}
.sticket__av img{width:54px;height:54px;border-radius:12px;object-fit:cover;display:block}
.sticket__av img+img{position:absolute;width:30px;height:30px;right:-8px;bottom:-8px;border-radius:8px;border:2px solid #fff}
.sticket__k{display:block;font-weight:700;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#F7B267}
.sticket__h{display:block;font-weight:700;font-size:.82rem;line-height:1.25;margin-top:.15rem}
.sticket__steps{display:flex;gap:4px;margin:12px 0 5px}
.sticket__steps i{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.22)}
.sticket__steps i.d{background:#6FD0C5}
.sticket__steps i.n{background:var(--coral);animation:sticketPulse 1.8s infinite}
@keyframes sticketPulse{0%{box-shadow:0 0 0 0 rgba(240,96,59,.7)}70%{box-shadow:0 0 0 6px rgba(240,96,59,0)}100%{box-shadow:0 0 0 0 rgba(240,96,59,0)}}
.sticket__lbl{display:flex;justify-content:space-between;font-family:var(--body);font-size:.62rem;color:rgba(255,255,255,.88)}
.sticket__cta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;background:#fff;color:var(--deep);border-radius:999px;padding:.45rem .85rem;font-weight:700;font-size:.74rem}
.sticket__cta b{color:var(--coral)}
.sticket__x{position:absolute;top:6px;right:6px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:.95rem;line-height:24px;padding:0;cursor:pointer}
.sticket__x:hover{background:rgba(255,255,255,.3)}
.sticket__tab{display:none;align-items:center;gap:8px;border:0;cursor:pointer;color:#fff;background:var(--deep);font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;box-shadow:-8px 10px 26px -12px rgba(0,0,0,.45)}
.sticket__tab img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--coral)}
.sticket.is-min .sticket__link,.sticket.is-min .sticket__x{display:none}
.sticket.is-min{width:auto;right:0}
.sticket.is-min .sticket__tab{display:flex;flex-direction:column;padding:10px 7px;border-radius:14px 0 0 14px}
.sticket.is-min .sticket__tab span{writing-mode:vertical-rl;transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.sticket,.sticket__link{transition:none}.sticket__steps i.n{animation:none}}
/* phone: compact bar bottom-left, beside (never over) the WhatsApp pill */
@media(max-width:720px){
  .sticket{top:auto;bottom:14px;left:12px;right:auto;width:auto;max-width:calc(100% - 214px);min-width:150px;transform:translateY(8px)}
  .sticket__link{padding:8px 10px;border-radius:14px}
  .sticket__row{padding-right:14px}
  .sticket__av,.sticket__h,.sticket__lbl{display:none}
  .sticket__k{font-size:.52rem;letter-spacing:.08em}
  .sticket__steps{margin:6px 0 0}
  .sticket__steps i{height:4px}
  .sticket__cta{margin-top:6px;padding:0;background:none;color:#fff;font-size:.7rem;justify-content:flex-start;gap:4px}
  .sticket__cta b{color:#FFB199}
  .sticket__x{top:3px;right:3px;width:20px;height:20px;line-height:20px;font-size:.8rem}
  .sticket.is-min{left:12px;right:auto}
  .sticket.is-min .sticket__tab{flex-direction:row;padding:4px 12px 4px 4px;border-radius:999px}
  .sticket.is-min .sticket__tab span{writing-mode:horizontal-tb;transform:none}
  body.wbn-bar-on .sticket{bottom:calc(1rem + 66px)}
}

/* ===== Sep-2026 audit modules: directory→clinic bridge (TK-S-04) + condition-page RFA bridge ===== */
.dir-bridge{margin:2rem 0;padding:1.4rem 1.5rem;border-radius:18px;background:linear-gradient(160deg,#EAF5F2,#F7FBFA);border:1px solid var(--line);border-left:5px solid var(--teal)}
.dir-bridge h2{font-size:clamp(1.15rem,2.4vw,1.4rem);margin:.35rem 0 .5rem}
.dir-bridge p{margin:0 0 .6rem}
.dir-bridge .list{margin:.4rem 0 0}
.dir-bridge .btn-row{margin-top:1rem}
.rfa-bridge{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;max-width:860px;margin:2rem auto 0;text-align:left}
@media(max-width:560px){.rfa-bridge{grid-template-columns:1fr}}

/* ===== Before/after proof strip + story card (rule: links to case studies show real before/after) ===== */
.story-strip{margin:1.8rem 0 0}
.story-strip .eyebrow{display:flex}
.story-strip__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:.8rem}
.story-mini{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 10px 26px -18px rgba(15,58,59,.45);transition:transform .2s,box-shadow .2s}
.story-mini:hover{transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(15,58,59,.55);color:var(--ink)}
.story-mini__imgs,.card--story .story-mini__imgs{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.story-mini__imgs .cph{aspect-ratio:4/3}
.story-mini__t{display:block;font-family:var(--display);font-weight:700;font-size:.9rem;line-height:1.3;padding:.75rem .9rem .2rem}
.story-mini__cta{display:block;font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--coral);padding:0 .9rem .85rem;margin-top:auto}
.story-strip__all{margin:.9rem 0 0;font-size:.92rem}
.story-strip--dark .story-strip__all a{color:#FFB199}
.section--surface a.story-mini,.section--surface a.story-mini:hover,.section--surface a.card--story,a.story-mini{color:var(--ink);text-decoration:none}
.card--story{padding:0;overflow:hidden}
.card--story h3,.card--story p{padding:0 1.1rem}
.card--story h3{margin-top:1rem}
.card--story p:last-child{padding-bottom:1.1rem}
.rfa-bridge .story-strip{grid-column:1/-1}

/* ===== Owner rule (10 Oct 2026): no dark, teal or grey text on the green/teal bands.
   Ghost buttons, inline-coloured helper text and tab-cards turn white/light on dark sections. ===== */
:is(.section--surface,.section--deep) .btn--ghost{color:#fff;border-color:rgba(255,255,255,.6)}
:is(.section--surface,.section--deep) .btn--ghost:hover{color:#fff;background:rgba(255,255,255,.1);border-color:#fff}
:is(.section--surface,.section--deep) :is([style*="color:var(--muted)"],[style*="color:var(--teal)"],[style*="color:var(--ink)"],[style*="color:#5F7A7F"],[style*="color:#2A5057"]){color:rgba(255,255,255,.88)!important}
.section--surface .tabcard,.section--deep .tabcard{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.section--surface .tabcard h4,.section--deep .tabcard h4{color:#fff}
.section--surface .tabcard p,.section--deep .tabcard p{color:rgba(255,255,255,.88)}
:is(.section--surface,.section--deep) a.story-mini :is(.story-mini__t),:is(.section--surface,.section--deep) a.card--story :is(h3,p){color:var(--ink)}
:is(.section--surface,.section--deep,.hero--band) :is([style*="color:#9BD8CF"],[style*="color:#6FD0C5"]){color:#fff!important}
.section--surface .readout .big,.hero--band .readout .big{color:#fff}

/* ===== Google "Preferred sources" (10 Oct 2026) — footer line on every page + end-of-article card.
   Google's button draws itself into .pref-src__btn (shadow DOM, ~40px pill); the fallback link is sized
   to match so nothing shifts when it swaps in (CLS 0). ===== */
.pref-src__btn{display:inline-flex;align-items:center;min-height:40px;min-width:140px;max-width:100%}
.pref-src__fallback{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:20px;border:1px solid #747775;
  background:#fff;color:#1f1f1f;font:500 .875rem/1 var(--body);text-decoration:none;white-space:nowrap}
.pref-src__fallback:hover{background:#f6f8f8;color:#1f1f1f}
.pref-src--card{max-width:860px;margin:1.6rem auto 2.6rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:12px 22px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1rem 1.25rem;color:var(--ink)}
.pref-src--card .pref-src__txt{flex:1 1 300px;margin:0;font-size:.95rem;line-height:1.5}
footer.site .pref-src--footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;
  border-top:1px solid rgba(255,255,255,.14);padding:18px 0 20px}
footer.site .pref-src--footer p{margin:0;color:rgba(255,255,255,.88)}
footer.site .pref-src__fallback{display:inline-flex;padding:0 16px;background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
footer.site .pref-src__fallback:hover{background:rgba(255,255,255,.1);color:#fff}