/* Men's health — the logo's navy and cyan */
:root{
  color-scheme: light;
  --ground:#F2F8FC; --ground-2:#E4EFF7;
  --accent-soft:#CCE5F2; --accent-pale:#EAF4FA;
  --card:#FFFFFF;
  --line:rgba(7,39,53,.10); --line-2:rgba(7,39,53,.16);
  --ink:#0A2A3B; --body:#4E6A78; --muted:#8AA3B1;
  --accent:#148CB8; --accent-dk:#0E6F93; --accent-lt:#7FCDEA; --accent-alt:#0F4983;
  --warm:#E3A06A; --good:#5FA986;
  --navy:#0F4983; --cyan:#148CB8;
  --deep:#072735;
  --shadow:0 24px 48px -28px rgba(10,42,59,.36);
  --shadow-sm:0 10px 24px -16px rgba(10,42,59,.42);
  --f-script:"Manrope", "Helvetica Neue", Arial, sans-serif;  /* no third typeface */
  --accent-rgb:20,140,184; --accent-lt-rgb:127,205,234; --accent-dk-rgb:14,111,147;
  --accent-alt-rgb:15,73,131; --ink-rgb:10,42,59; --deep-rgb:7,39,53;
  --on-deep-rgb:226,240,248; --good-rgb:95,169,134; --warm-rgb:227,160,106;
}

/* =========================================================
   SALAMANDER BAY DOCTORS — SERVICE PAGE CORE
   Structure, layout and interaction styling shared by every
   service page. Carries no palette of its own: each page
   supplies a theme file that defines the tokens below.
   Typography matches the home page: Sora for display, Manrope
   for everything else. No third typeface.
   ========================================================= */

/* ============================================================
   SALAMANDER BAY DOCTORS — WOMEN'S HEALTH
   Blush and rose palette, floral motifs, heavily interactive.
   Type and structure inherited from the main site (Sora / Brand navy kept as the anchoring ink so the
   page still reads as Salamander Bay Doctors.
   ============================================================ */
:root{
  /* structure only — every colour comes from the page's theme file */
  --maxw: 1280px;
  --gutter: clamp(18px, 4.5vw, 56px);
  --f-display: "Sora", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.2,1.42,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* ---- full-bleed guard -------------------------------------------------
   Some preview panes, CMS wrappers and page builders drop a max-width or
   margin onto <body> or the outermost blocks. That would pin every band
   into a narrow column while the fixed nav, which ignores it, still spans
   the viewport. These rules make the page own its own width.            */
html{ width:100%; max-width:none; margin:0; padding:0; overflow-x:clip; }
body{
  width:100% !important;
  max-width:none !important;
  min-width:0;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
}
body > section,
body > footer{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:0;
}
@supports not (width: 100vw){
  body > section, body > footer{ width:100%; max-width:none; margin-left:0; }
}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ display:block; max-width:100%; }
svg{ max-width:100%; max-height:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:8px; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.sec{ padding-block:clamp(62px,9vh,118px); position:relative; }
.sec--tint{ background:var(--ground-2); position:relative; overflow:hidden; }
.sec--deep{ background:var(--deep); color:#F6E6EC; position:relative; overflow:hidden; }

/* ============================================================
   THE WATER, CARRIED THROUGH FROM THE HERO
   The hero is a waterline. These bring that idea to the rest of
   the site without another photograph: a tinted section opens
   with a surface, and a deep section holds caustic light.
   All of it is CSS, all of it is faint, and all of it stops
   under prefers-reduced-motion.
   ============================================================ */

/* a tinted section reads as going under the surface */
.sec--tint::before{
  content:""; position:absolute; inset:0 0 auto 0; height:120px; pointer-events:none;
  background:
    /* the bright meniscus itself */
    linear-gradient(180deg, rgba(var(--accent-lt-rgb),.30) 0, rgba(var(--accent-lt-rgb),.10) 2px,
                    rgba(var(--accent-lt-rgb),.045) 16px, transparent 96px),
    /* light scattering just below it */
    radial-gradient(120% 90px at 22% 0, rgba(var(--accent-lt-rgb),.20), transparent 70%),
    radial-gradient(90% 70px at 78% 0, rgba(var(--accent-lt-rgb),.14), transparent 72%);
}
/* and a slow drift of light across it */
.sec--tint::after{
  content:""; position:absolute; inset:0 0 auto 0; height:180px; pointer-events:none;
  background:linear-gradient(100deg, transparent 8%, rgba(255,255,255,.5) 32%, transparent 56%);
  opacity:.5; animation:tide 19s ease-in-out infinite alternate;
}
@keyframes tide{ from{ transform:translate3d(-14%,0,0) } to{ transform:translate3d(14%,0,0) } }

/* a deep section sits under the water, so it gets caustics */
.sec--deep::before{
  content:""; position:absolute; inset:-20%; pointer-events:none; opacity:.14;
  background:
    radial-gradient(38% 26% at 22% 18%, rgba(var(--accent-lt-rgb),.9), transparent 62%),
    radial-gradient(30% 22% at 76% 32%, rgba(var(--accent-lt-rgb),.7), transparent 66%),
    radial-gradient(44% 30% at 54% 82%, rgba(var(--accent-lt-rgb),.6), transparent 68%);
  filter:blur(26px);
  animation:caustic 26s ease-in-out infinite alternate;
}
@keyframes caustic{
  from{ transform:translate3d(-2.5%,-1.5%,0) scale(1) }
  to  { transform:translate3d(2.5%,2%,0) scale(1.09) }
}
/* the section's own content must stay above the water dressing */
.sec--tint > *, .sec--deep > *{ position:relative; z-index:1; }

@media (prefers-reduced-motion:reduce){
  .sec--tint::after, .sec--deep::before{ animation:none; }
}

/* soft floral glows */
.glow{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0; }
.glow--a{ width:50vw; height:36vw; background:rgba(var(--accent-rgb),.10); top:-12%; left:-12%; }
.glow--b{ width:44vw; height:32vw; background:rgba(var(--warm-rgb),.16); bottom:-16%; right:-10%; }
.glow--c{ width:38vw; height:28vw; background:rgba(var(--accent-alt-rgb),.12); top:30%; right:-14%; }
@media (max-width:620px){ .glow--a, .glow--b, .glow--c{ display:none; } }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; margin:0; text-wrap:balance; letter-spacing:-.025em; }

.h-xl{ font-size:clamp(2.5rem,6.4vw,5.2rem); line-height:1.02; font-weight:700; }
.h-lg{ font-size:clamp(1.95rem,4vw,3.3rem); line-height:1.08; }
.h-md{ font-size:clamp(1.45rem,2.5vw,2.15rem); line-height:1.18; }
.h-sm{ font-size:clamp(1.12rem,1.7vw,1.4rem); line-height:1.3; }
.lede{ font-size:clamp(1.03rem,1.5vw,1.22rem); color:var(--body); max-width:62ch; line-height:1.8; }
p{ color:var(--body); }
.sec--deep p{ color:rgba(var(--on-deep-rgb),.82); }
.em{ font-family:inherit; font-style:normal; font-weight:700; letter-spacing:-.03em; }
.hl{ color:var(--accent-dk); }
.sec--deep .hl{ color:var(--accent-lt); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.92rem 1.75rem; border-radius:999px; cursor:pointer;
  font-weight:700; font-size:.92rem; text-align:center; min-height:44px;
  border:1.5px solid transparent;
  transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn svg{ width:16px; height:16px; flex:none; }
.btn--solid{ background:var(--accent); color:#fff; box-shadow:0 14px 28px -14px rgba(var(--accent-rgb),.95); }
.btn--solid:hover{ background:var(--accent-dk); transform:translateY(-2px); }
.btn--line{ border-color:var(--line-2); color:var(--ink); background:#fff; }
.btn--line:hover{ border-color:var(--accent); color:var(--accent-dk); transform:translateY(-2px); }
.btn--glass{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.55); color:#fff; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.btn--glass:hover{ background:rgba(255,255,255,.28); border-color:#fff; transform:translateY(-2px); }
.btn--sm{ padding:.66rem 1.28rem; font-size:.85rem; }
.btn--lg{ padding:1.05rem 2.1rem; font-size:1rem; }
.sec--deep .btn--line{ background:transparent; color:#fff; border-color:rgba(255,255,255,.34); }
.sec--deep .btn--line:hover{ border-color:#fff; color:#fff; }

.arrowlink{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.9rem; color:var(--accent-dk); transition:gap .3s var(--ease); }
.arrowlink:hover{ gap:.9rem; }
.arrowlink svg{ width:15px; height:15px; }

.ctrl{
  width:46px; height:46px; border-radius:50%; flex:none;
  border:1.5px solid var(--line-2); background:#fff; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), color .3s var(--ease);
}
.ctrl:hover{ border-color:var(--accent); color:var(--accent-dk); transform:scale(1.06); }
.ctrl[disabled]{ opacity:.32; cursor:default; transform:none; }
.ctrl svg{ width:17px; height:17px; }

.progress{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:95; background:linear-gradient(90deg,var(--accent),var(--warm)); transform:scaleX(0); transform-origin:0 50%; }

/* ---------- scroll reveal ---------- */
.js .reveal{ opacity:0; transform:translateY(28px); }
.js .reveal.in{ opacity:1; transform:none; transition:opacity .85s var(--ease), transform .85s var(--ease); }
.js .reveal--l{ transform:translateX(-30px); }
.js .reveal--r{ transform:translateX(30px); }
.js .reveal--s{ transform:scale(.94); }
@media (prefers-reduced-motion: reduce){
  .js .reveal, .js .reveal--l, .js .reveal--r, .js .reveal--s{ opacity:1 !important; transform:none !important; }
  *{ animation-duration:.001ms !important; transition-duration:.06s !important; }
}

/* ---------- floral motifs ---------- */
.bloom{ position:absolute; pointer-events:none; opacity:.5; z-index:0; }
.bloom svg{ width:100%; height:100%; display:block; }
.bloom--spin svg{ animation:slowSpin 44s linear infinite; transform-origin:50% 50%; }
@keyframes slowSpin{ to{ transform:rotate(360deg) } }

/* the drawn-on vine divider */
.vinewrap{ max-width:var(--maxw) !important; margin-inline:auto !important; }
.vine{ display:block; width:100%; height:64px; overflow:visible; }
.vine path, .vine circle{ stroke:var(--accent-lt); fill:none; stroke-width:1.6; }
.js .vine path{ stroke-dasharray:var(--len,1200); stroke-dashoffset:var(--len,1200); }
.js .vine.in path{ transition:stroke-dashoffset 2.2s var(--ease); stroke-dashoffset:0; }
.js .vine circle{ opacity:0; transform:scale(0); transform-origin:center; transform-box:fill-box; fill:var(--accent-lt); stroke:none; }
.js .vine.in circle{ animation:pop .6s var(--spring) forwards; }
@keyframes pop{ to{ opacity:1; transform:scale(1) } }

/* ============================ NAV ============================ */
/* ============================================================
   THE HEADER
   One bar, the same everywhere: the floating translucent pill
   the home page uses. .solid is the state it takes once the
   page has scrolled past the hero.
   ============================================================ */
.nav{ position:fixed; inset:3px 0 auto 0; z-index:90; padding-top:calc(14px + env(safe-area-inset-top,0px)); transition:padding-top .4s var(--ease); }
.nav__in{
  width:min(var(--maxw), calc(100% - 2*clamp(14px,3.5vw,32px)));
  margin-inline:auto; display:flex; align-items:center; gap:clamp(10px,1.8vw,24px);
  padding:10px 10px 10px 22px; border-radius:999px;
  background:rgba(var(--deep-rgb),.32); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  transition:background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.nav.solid{ padding-top:calc(8px + env(safe-area-inset-top,0px)); }
.nav.solid .nav__in{ background:rgba(255,255,255,.94); border-color:var(--line); box-shadow:0 16px 40px -22px rgba(var(--ink-rgb),.5); }

/* the logo is a link home — give it a real hit area and a pointer */
.nav__in > a:first-child{ display:inline-flex; align-items:center; padding:4px 6px; margin:-4px -6px; border-radius:10px; cursor:pointer; }
.nav__in > a:first-child:hover{ background:rgba(255,255,255,.12); }
.nav.solid .nav__in > a:first-child:hover{ background:var(--accent-pale); }
.logo{ height:26px; width:auto; flex:none; }
.logo--dark{ display:none; }
.nav.solid .logo--light{ display:none; }
.nav.solid .logo--dark{ display:block; }

/* Pages that open on a pale band rather than a dark hero photograph.
   The translucent bar is invisible against them, so it starts solid. */
.nav--light .nav__in{ background:rgba(255,255,255,.94); border-color:var(--line); box-shadow:0 16px 40px -22px rgba(var(--ink-rgb),.5); }
.nav--light .logo--light{ display:none; }
.nav--light .logo--dark{ display:block; }
.nav--light .nav__links a, .nav--light .nav__links button, .nav--light .megatrig{ color:var(--ink); }
.nav--light .nav__links a:hover, .nav--light .nav__links button:hover,
.nav--light .megatrig:hover, .nav--light .megatrig[aria-expanded="true"],
.nav--light .nav__links a[aria-current="page"], .nav--light .megatrig[aria-current="page"]{ color:var(--accent-dk); }
.nav--light .nav__tel{ color:var(--ink); }
.nav--light .nav__in > a:first-child:hover{ background:var(--accent-pale); }
.nav--light .burger{ border-color:var(--line); }
.nav--light .burger span, .nav--light .burger span::before, .nav--light .burger span::after{ background:var(--ink); }

.nav__links{ display:flex; align-items:center; gap:clamp(10px,1.6vw,22px); margin-left:auto; }
.nav__links a, .nav__links button, .megatrig{
  font-size:.85rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.92); cursor:pointer; white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav__links a:hover, .nav__links button:hover,
.megatrig:hover, .megatrig[aria-expanded="true"]{ color:var(--accent-lt); }
.nav__links a[aria-current="page"], .megatrig[aria-current="page"]{ color:var(--accent-lt); }
.nav.solid .nav__links a, .nav.solid .nav__links button, .nav.solid .megatrig{ color:var(--ink); }
.nav.solid .nav__links a:hover, .nav.solid .nav__links button:hover,
.nav.solid .megatrig:hover, .nav.solid .megatrig[aria-expanded="true"],
.nav.solid .nav__links a[aria-current="page"], .nav.solid .megatrig[aria-current="page"]{ color:var(--accent-dk); }
.nav__tel{ font-weight:800; font-size:.88rem; white-space:nowrap; color:#fff; }
.nav.solid .nav__tel{ color:var(--ink); }

.burger{ display:none; margin-left:auto; flex-shrink:0; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.45); background:none; align-items:center; justify-content:center; cursor:pointer; position:relative; }
.burger span{ display:block; width:17px; height:2px; background:#fff; position:relative; }
.burger span::before, .burger span::after{ content:""; position:absolute; left:0; width:17px; height:2px; background:#fff; }
.burger span::before{ top:-5.5px } .burger span::after{ top:5.5px }
.nav.solid .burger{ border-color:var(--line); }
.nav.solid .burger span, .nav.solid .burger span::before, .nav.solid .burger span::after{ background:var(--ink); }

.sheet{ position:fixed; inset:0; z-index:99; background:var(--deep); display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; padding:calc(64px + env(safe-area-inset-top,0px)) 1.5rem calc(32px + env(safe-area-inset-bottom,0px)); overflow-y:auto; }
.sheet[hidden]{ display:none; }
.sheet a{ font-family:var(--f-display); font-size:clamp(.95rem,3.8vw,1.1rem); font-weight:600; color:#fff; padding:.62rem 0; border-bottom:1px solid rgba(255,255,255,.1); width:100%; display:flex; align-items:center; min-height:44px; }
.sheet a:hover{ color:var(--accent-lt); }
.sheet__sub{ padding-left:1rem; font-size:clamp(.82rem,3.2vw,.95rem) !important; color:rgba(255,255,255,.78) !important; border-bottom-color:rgba(255,255,255,.06) !important; min-height:40px !important; font-weight:500 !important; }
.sheet__sub::before{ content:"–"; margin-right:.5rem; opacity:.5; }
.sheet .btn{ margin-top:1.2rem; align-self:flex-start; border-bottom:0 !important; min-height:44px; width:100%; justify-content:center; }
.sheet__x{ position:fixed; top:calc(12px + env(safe-area-inset-top,0px)); right:1.25rem; font-size:2rem; line-height:1; color:#fff; cursor:pointer; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); border-radius:50%; }

/* sticky booking bar */
.bookbar{
  position:fixed; left:50%; bottom:18px; transform:translate(-50%,140%); z-index:88;
  width:min(680px, calc(100vw - 28px));
  display:flex; align-items:center; gap:.9rem;
  padding:.6rem .6rem .6rem 1.35rem; border-radius:999px;
  background:rgba(var(--ink-rgb),.94); color:#fff;
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 26px 54px -26px rgba(var(--deep-rgb),.9);
  transition:transform .55s var(--spring);
}
.bookbar.on{ transform:translate(-50%,0); }
.bookbar p{ margin:0; color:rgba(255,255,255,.88); font-size:.88rem; font-weight:600; line-height:1.4; }
.bookbar p b{ color:#fff; display:block; font-size:.95rem; }
.bookbar .btn{ margin-left:auto; flex:none; }
.bookbar__x{ width:34px; height:34px; border-radius:50%; flex:none; color:rgba(255,255,255,.6); font-size:1.3rem; line-height:1; cursor:pointer; }
.bookbar__x:hover{ color:#fff; background:rgba(255,255,255,.12); }

/* ============================ HERO ============================ */
/* Shorter than the home page's full-height hero: a service page is something a
   patient arrives at wanting an answer, so the content starts sooner. */
.hero{ position:relative; min-height:clamp(440px,64vh,620px); display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.hero__media{ position:absolute; inset:-8% 0 0; z-index:0; will-change:transform; }
.hero__media img{ width:100%; height:112%; object-fit:cover; object-position:50% 38%; animation:kb 26s var(--ease) infinite alternate; }
@keyframes kb{ from{ transform:scale(1) } to{ transform:scale(1.09) } }
.hero__wash{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 78% at 18% 82%, rgba(var(--ink-rgb),.86) 0%, rgba(var(--ink-rgb),.5) 42%, transparent 72%),
    linear-gradient(to top, rgba(var(--deep-rgb),.92) 0%, rgba(var(--deep-rgb),.4) 38%, rgba(var(--accent-dk-rgb),.16) 70%, rgba(var(--ink-rgb),.34) 100%);
}
.hero__in{ position:relative; z-index:4; padding-bottom:clamp(40px,6vh,68px); padding-top:clamp(124px,15vh,150px); width:100%; }
.hero h1{ color:#fff; max-width:17ch; }
.hero h1 .ln{ display:block; overflow:hidden; }
.js .hero h1 .ln i{ display:block; font-style:normal; transform:translateY(105%); }
.js .hero.lit h1 .ln i{ transform:none; transition:transform 1.05s var(--ease); }
.js .hero.lit h1 .ln:nth-child(2) i{ transition-delay:.13s; }
.hero h1 .script{ font-family:inherit; font-style:normal; font-weight:700; color:var(--accent-lt); }
.hero__sub{ color:rgba(255,255,255,.93); font-size:clamp(1.02rem,1.5vw,1.2rem); max-width:52ch; margin:1.3rem 0 0; font-weight:500; }
.js .hero__sub, .js .hero__cta, .js .js .hero.lit .hero__sub{ opacity:1; transform:none; transition:opacity .9s .34s var(--ease), transform .9s .34s var(--ease); }
.js .hero.lit .hero__cta{ opacity:1; transform:none; transition:opacity .9s .46s var(--ease), transform .9s .46s var(--ease); }
.js .hero.lit .hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.hero__live{ display:inline-flex; align-items:center; gap:.5rem; padding:.34rem .85rem; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); font-size:.78rem; font-weight:700; color:#fff; margin-bottom:1.3rem; }
.dot{ width:7px; height:7px; border-radius:50%; background:#6FCF97; box-shadow:0 0 0 0 rgba(var(--good-rgb),.7); animation:ping 2.4s infinite; }
.dot.shut{ background:var(--warm); box-shadow:none; animation:none; }
@keyframes ping{ 70%{ box-shadow:0 0 0 9px rgba(var(--good-rgb),0) } 100%{ box-shadow:0 0 0 0 rgba(var(--good-rgb),0) } }

/* ==================== INTRO / PROMISE ==================== */
.promise{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(30px,5vw,80px); align-items:center; position:relative; z-index:1; }
.promise__art{ position:relative; }
.promise__art .shape{
  border-radius:50% 50% 46% 54% / 62% 58% 42% 38%;
  overflow:hidden; aspect-ratio:4/4.4; box-shadow:var(--shadow);
}
.promise__art .shape img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.promise__art:hover .shape img{ transform:scale(1.06); }
.promise__art .bloom--a{ width:180px; height:180px; top:-42px; left:-46px; color:var(--accent-lt); }
.promise__art .bloom--b{ width:130px; height:130px; bottom:-30px; right:-24px; color:var(--warm); }
/* Sits under the photograph rather than on top of it. Floating it over the
   image meant it landed on whoever was in frame — on this shot, across her
   face — and the position shifted with every crop. */
.promise__badge{
  margin-top:1rem;
  background:var(--card); border:1.5px solid var(--line);
  border-radius:18px; padding:.95rem 1.15rem; box-shadow:var(--shadow-sm);
  display:flex; align-items:center; gap:.8rem;
}
.promise__badge b{ font-family:var(--f-display); font-size:1.5rem; line-height:1; color:var(--accent-dk); }
.promise__badge span{ font-size:.74rem; font-weight:700; line-height:1.3; color:var(--body); }
/* four things you're allowed to ask for */
.asks{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,1.4vw,14px); margin:2rem 0 0; }
.ask{
  position:relative; text-align:left; cursor:pointer; overflow:hidden;
  background:#fff; border:1.5px solid var(--line); border-radius:22px;
  padding:1.15rem 1.2rem;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s var(--ease);
}
.ask:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:var(--accent-soft); }
.ask[aria-expanded="true"]{ border-color:var(--accent-lt); box-shadow:var(--shadow-sm); }
.ask::after{
  content:""; position:absolute; top:-70%; left:-130%; width:60%; height:240%;
  background:linear-gradient(100deg, transparent, rgba(var(--accent-lt-rgb),.22), transparent);
  transform:rotate(14deg); pointer-events:none; transition:left .95s var(--ease);
}
.ask:hover::after{ left:150%; }
.ask__top{ display:flex; align-items:center; gap:.7rem; }
.ask__ico{
  width:34px; height:34px; border-radius:11px; flex:none;
  background:var(--accent-pale); color:var(--accent); display:grid; place-items:center;
  transition:background .4s var(--ease), transform .6s var(--spring);
}
.ask:hover .ask__ico{ background:var(--accent-soft); transform:scale(1.1) rotate(-7deg); }
.ask__ico svg{ width:17px; height:17px; }
/* the tick draws itself on when the card arrives */
.js .ask__ico svg path{ stroke-dasharray:30; stroke-dashoffset:30; }
.js .ask.in .ask__ico svg path{ animation:draw .7s var(--ease) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0 } }
.ask__t{ font-family:var(--f-display); font-size:.96rem; font-weight:600; color:var(--ink); letter-spacing:-.02em; line-height:1.3; flex:1; }
.ask__pl{
  width:22px; height:22px; flex:none; border-radius:50%; position:relative;
  border:1.5px solid var(--line-2); transition:background .35s var(--ease), border-color .35s var(--ease), transform .5s var(--spring);
}
.ask__pl::before, .ask__pl::after{ content:""; position:absolute; top:50%; left:50%; background:var(--muted); border-radius:2px; transform:translate(-50%,-50%); transition:all .4s var(--spring); }
.ask__pl::before{ width:9px; height:1.6px; }
.ask__pl::after{ width:1.6px; height:9px; }
.ask[aria-expanded="true"] .ask__pl{ background:var(--accent); border-color:var(--accent); transform:rotate(90deg); }
.ask[aria-expanded="true"] .ask__pl::before, .ask[aria-expanded="true"] .ask__pl::after{ background:#fff; }
.ask[aria-expanded="true"] .ask__pl::after{ height:0; }
.ask__lead{ display:block; font-size:.87rem; color:var(--body); margin:.7rem 0 0; line-height:1.6; }
.ask__more{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease); }
.ask[aria-expanded="true"] .ask__more{ grid-template-rows:1fr; }
.ask__more > span{ overflow:hidden; display:block; }
.ask__more p{ font-size:.86rem; margin:.8rem 0 0; line-height:1.6; }
.ask__say{
  display:block; margin:.8rem 0 .2rem; padding:.7rem .9rem;
  background:var(--accent-pale); border-left:3px solid var(--accent-lt); border-radius:0 12px 12px 0;
  font-family:var(--f-body); font-style:normal; font-weight:600; font-size:.92rem; color:var(--accent-dk); line-height:1.5;
}
.js .ask{ opacity:0; transform:translateY(20px); }
.js .ask.in{ opacity:1; transform:none; transition:opacity .6s var(--ease), transform .7s var(--spring); }
@media (max-width:620px){ .asks{ grid-template-columns:1fr; } }

/* ==================== LIFE STAGE EXPLORER ==================== */
.stages{ position:relative; }
.stagebar{ position:relative; margin:2.6rem 0 0; padding-bottom:6px; }
.stagebar__line{ position:absolute; left:0; right:0; top:27px; height:2px; background:linear-gradient(90deg,var(--accent-soft),var(--accent-lt),var(--warm)); border-radius:2px; opacity:.6; }
.stagebar__fill{ position:absolute; left:0; top:26px; height:4px; border-radius:4px; background:var(--accent); transition:width .6s var(--ease), left .6s var(--ease); }
.stagebar__row{ position:relative; display:flex; justify-content:space-between; gap:.4rem; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
.stagebar__row::-webkit-scrollbar{ display:none; }
.stg{ flex:1 1 0; min-width:104px; display:flex; flex-direction:column; align-items:center; gap:.6rem; cursor:pointer; text-align:center; padding-top:8px; }
.stg__pin{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:#fff; border:2px solid var(--accent-soft);
  display:grid; place-items:center; color:var(--accent-lt);
  transition:transform .45s var(--spring), border-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.stg__pin svg{ width:18px; height:18px; }
.stg span{ font-size:.79rem; font-weight:700; color:var(--muted); line-height:1.3; transition:color .3s var(--ease); }
.stg:hover .stg__pin{ transform:scale(1.12); border-color:var(--accent-lt); color:var(--accent); }
.stg[aria-selected="true"] .stg__pin{ background:var(--accent); border-color:var(--accent); color:#fff; transform:scale(1.2); box-shadow:0 10px 24px -10px rgba(var(--accent-rgb),.9); }
.stg[aria-selected="true"] span{ color:var(--ink); }

.stagepanel{ margin-top:clamp(28px,4vw,48px); display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,58px); align-items:center; min-height:380px; }
.stagepanel__txt h3{ font-size:clamp(1.6rem,3vw,2.5rem); margin-bottom:.7rem; }
.stagepanel__age{ font-family:var(--f-body); font-weight:800; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-dk); display:block; margin-bottom:.5rem; }
.stagepanel__txt p{ margin:0 0 1.2rem; max-width:52ch; }
.stagepanel__list{ list-style:none; margin:0 0 1.6rem; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.stagepanel__list li{
  font-size:.82rem; font-weight:700; color:var(--accent-dk);
  padding:.42rem .9rem; border-radius:999px;
  background:var(--accent-pale); border:1px solid var(--accent-soft);
}
.stagepanel__art{ position:relative; }
.stagepanel__art .frame{
  aspect-ratio:1/1; border-radius:50% 50% 44% 56% / 58% 60% 40% 42%;
  background:linear-gradient(150deg, var(--accent-pale), var(--accent-soft) 60%, #fff);
  display:grid; place-items:center; position:relative; overflow:hidden;
  box-shadow:inset 0 0 60px rgba(var(--accent-rgb),.12);
}
.stagepanel__art .frame svg.big{ width:58%; height:58%; color:var(--accent); }
.js .fade-swap{ animation:fadeSwap .55s var(--ease); }
@keyframes fadeSwap{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.stagenav{ display:flex; gap:.6rem; margin-top:1.4rem; align-items:center; }
.stagenav small{ color:var(--muted); font-weight:700; font-size:.78rem; letter-spacing:.08em; }

/* ==================== SERVICES ACCORDION ==================== */
.svc{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(26px,4vw,64px); align-items:start; margin-top:2.4rem; }
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{
  width:100%; display:flex; align-items:center; gap:1rem; text-align:left; cursor:pointer;
  padding:1.28rem 0; color:var(--ink); transition:color .3s var(--ease);
}
.acc__btn:hover{ color:var(--accent-dk); }
.acc__ix{
  width:30px; flex:none; font-family:var(--f-display); font-size:.74rem; font-weight:800;
  color:var(--accent-lt); letter-spacing:.06em; transition:color .3s var(--ease);
}
.acc__item.open .acc__ix{ color:var(--accent); }
.acc__ttl{ font-family:var(--f-display); font-size:clamp(1.02rem,1.55vw,1.3rem); font-weight:600; flex:1; letter-spacing:-.02em; }
.acc__pl{ width:30px; height:30px; flex:none; border-radius:50%; border:1.5px solid var(--line-2); display:grid; place-items:center; position:relative; transition:background .35s var(--ease), border-color .35s var(--ease); }
.acc__pl::before, .acc__pl::after{ content:""; position:absolute; background:var(--ink); border-radius:2px; transition:transform .4s var(--spring), background .3s var(--ease); }
.acc__pl::before{ width:11px; height:1.7px; }
.acc__pl::after{ width:1.7px; height:11px; }
.acc__item.open .acc__pl{ background:var(--accent); border-color:var(--accent); }
.acc__item.open .acc__pl::before, .acc__item.open .acc__pl::after{ background:#fff; }
.acc__item.open .acc__pl::after{ transform:scaleY(0); }
.acc__body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease); }
.acc__item.open .acc__body{ grid-template-rows:1fr; }
.acc__in{ overflow:hidden; }
.acc__in > div{ padding:0 0 1.5rem 46px; }
.acc__in p{ margin:0 0 .9rem; font-size:.97rem; }
.acc__in p:last-of-type{ margin-bottom:1.1rem; }
.acc__in .plain{
  background:var(--accent-pale); border-left:3px solid var(--accent-lt);
  padding:.85rem 1.05rem; border-radius:0 12px 12px 0; margin:0 0 1rem;
  font-size:.92rem; color:var(--body);
}
.acc__in .plain b{ color:var(--accent-dk); display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.25rem; }
.acc__in ul{ margin:0 0 1.1rem; padding:0 0 0 1.1rem; }
.acc__in li{ color:var(--body); font-size:.95rem; margin-bottom:.4rem; }
.acc__in li::marker{ color:var(--accent-lt); }
.acc__cta{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }

.svc__art{ position:sticky; top:104px; }
.svc__stack{ position:relative; aspect-ratio:4/4.6; border-radius:220px 220px 26px 26px; overflow:hidden; box-shadow:var(--shadow); background:var(--accent-soft); }
.svc__stack img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.07); transition:opacity .8s var(--ease), transform 1.4s var(--ease); }
.svc__stack img.on{ opacity:1; transform:scale(1); }
.svc__cap{
  position:absolute; left:16px; right:16px; bottom:16px; z-index:3;
  background:rgba(255,255,255,.93); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:18px; padding:.95rem 1.15rem;
}
.svc__cap b{ display:block; font-family:var(--f-display); font-size:.98rem; color:var(--ink); margin-bottom:.15rem; }
.svc__cap span{ font-size:.82rem; color:var(--body); }

/* ==================== CERVICAL SCREENING FEATURE ==================== */
.screen__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,30px); margin-top:2.6rem; }
.choice{
  border-radius:26px; padding:clamp(22px,3vw,34px); position:relative; overflow:hidden; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  transition:background .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease);
}
.choice:hover{ transform:translateY(-4px); border-color:rgba(var(--accent-lt-rgb),.6); }
.choice[aria-pressed="true"]{ background:rgba(var(--accent-lt-rgb),.14); border-color:var(--accent-lt); }
.choice__top{ display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
.choice__ico{ width:46px; height:46px; border-radius:14px; flex:none; background:rgba(var(--accent-lt-rgb),.18); display:grid; place-items:center; color:var(--accent-lt); }
.choice__ico svg{ width:23px; height:23px; }
.choice h3{ color:#fff; font-size:1.12rem; }
.choice p{ margin:0 0 1rem; font-size:.94rem; }
.choice ol{ margin:0; padding-left:1.15rem; }
.choice li{ color:rgba(var(--on-deep-rgb),.86); font-size:.9rem; margin-bottom:.45rem; }
.choice li::marker{ color:var(--accent-lt); font-weight:800; }
.choice__tag{ position:absolute; top:18px; right:18px; font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--deep); background:var(--accent-lt); padding:.25rem .65rem; border-radius:999px; }
.screenfacts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); margin-top:clamp(28px,4vw,44px); border-top:1px solid rgba(255,255,255,.16); padding-top:clamp(24px,3vw,36px); }
.screenfacts b{ display:block; font-family:var(--f-display); font-size:clamp(1.7rem,3.4vw,2.7rem); font-weight:700; color:var(--accent-lt); letter-spacing:-.04em; line-height:1; margin-bottom:.5rem; }
.screenfacts span{ font-size:.9rem; color:rgba(var(--on-deep-rgb),.8); display:block; max-width:26ch; }

/* ---- the hours strip, brought to life ----
   A light rule draws across the top as the strip arrives, the three facts
   rise in turn, and a sheen passes once across each figure. Whichever of
   the two opening-hours facts is today is marked, with whether we are open
   right now (filled in by a small script; without it nothing is claimed). */
.screenfacts{ position:relative; border-top-color:rgba(255,255,255,.08); }
.screenfacts::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, rgba(var(--accent-lt-rgb),.9), rgba(var(--accent-lt-rgb),.25) 70%, transparent);
  transform:scaleX(0); transform-origin:left; transition:transform 1.3s var(--ease) .1s;
}
.screenfacts.in::before{ transform:scaleX(1); }
.screenfacts > div{ position:relative; }
.js .screenfacts > div{ opacity:0; transform:translateY(18px); }
.screenfacts.in > div{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
.screenfacts.in > div:nth-child(2){ transition-delay:.14s; }
.screenfacts.in > div:nth-child(3){ transition-delay:.28s; }
/* the figure: a hairline grows beneath it on hover */
.screenfacts b{ position:relative; display:inline-block; }
.screenfacts b::after{
  content:""; position:absolute; left:0; bottom:-.28rem; height:2px; width:100%;
  background:var(--accent-lt); border-radius:2px;
  transform:scaleX(.18); transform-origin:left; opacity:.55;
  transition:transform .55s var(--ease), opacity .4s var(--ease);
}
.screenfacts > div:hover b::after{ transform:scaleX(1); opacity:1; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .screenfacts b{
    background-image:linear-gradient(100deg, var(--accent-lt) 42%, #fff 50%, var(--accent-lt) 58%);
    background-size:260% 100%; background-position:100% 0;
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .screenfacts.in b{ animation:sfsheen 1.7s var(--ease) both; }
  .screenfacts.in > div:nth-child(2) b{ animation-delay:.18s; }
  .screenfacts.in > div:nth-child(3) b{ animation-delay:.36s; }
}
@keyframes sfsheen{ from{ background-position:100% 0 } to{ background-position:0 0 } }
/* today */
.sf__now{
  display:inline-flex; align-items:center; gap:.4rem; margin:0 0 .7rem;
  padding:.24rem .6rem; border-radius:999px; font-style:normal;
  font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff;
}
.sf__now::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 0 rgba(var(--good-rgb),.6); animation:sfpulse 2.4s ease-out infinite; }
.sf__now.shut::before{ background:var(--warm); animation:none; }
@keyframes sfpulse{ 0%{ box-shadow:0 0 0 0 rgba(var(--good-rgb),.55) } 70%,100%{ box-shadow:0 0 0 9px rgba(var(--good-rgb),0) } }
.screenfacts > div.is-today span{ color:rgba(var(--on-deep-rgb),.95); }
@media (prefers-reduced-motion:reduce){
  .js .screenfacts > div{ opacity:1; transform:none; }
  .screenfacts::before{ transform:scaleX(1); transition:none; }
  .screenfacts.in b, .sf__now::before{ animation:none; }
  .screenfacts b{ background-position:0 0; }
}

/* ==================== CONTRACEPTION COMPARE ==================== */
.ccfilter{ display:flex; flex-wrap:wrap; gap:.5rem; margin:2rem 0 1.8rem; align-items:center; }
.ccf{
  font-size:.83rem; font-weight:700; padding:.6rem 1rem; border-radius:999px; cursor:pointer;
  background:#fff; border:1.5px solid var(--line); color:var(--body); min-height:44px;
  transition:all .3s var(--ease);
}
.ccf:hover{ border-color:var(--accent-lt); color:var(--accent-dk); }
.ccf[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; }
.ccgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:clamp(14px,2vw,22px); }
.cc{
  background:#fff; border:1px solid var(--line); border-radius:24px; padding:1.5rem 1.4rem;
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s var(--ease);
}
.cc:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--accent-soft); }
.cc::after{ content:""; position:absolute; inset:auto -40px -50px auto; width:120px; height:120px; border-radius:50%; background:var(--accent-pale); z-index:0; transition:transform .6s var(--ease); }
.cc:hover::after{ transform:scale(1.5); }
.cc > *{ position:relative; z-index:1; }
.cc__ico{ width:42px; height:42px; border-radius:13px; background:var(--accent-pale); display:grid; place-items:center; color:var(--accent); margin-bottom:.9rem; }
.cc__ico svg{ width:21px; height:21px; }
.cc h3{ font-size:1.04rem; margin-bottom:.15rem; }
.cc__sub{ font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 .75rem; }
.cc p{ font-size:.9rem; margin:0 0 .9rem; }
.cc__meta{ margin-top:auto; display:grid; gap:.45rem; border-top:1px dashed var(--line-2); padding-top:.85rem; }
.cc__meta div{ display:flex; justify-content:space-between; gap:.6rem; font-size:.8rem; }
.cc__meta dt{ color:var(--muted); font-weight:700; }
.cc__meta dd{ margin:0; color:var(--ink); font-weight:700; text-align:right; }
.cc__here{ display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--good); margin-top:.75rem; }
.cc__here svg{ width:13px; height:13px; }
.cc__here.ref{ color:var(--accent-alt); }
.js .cc.hide{ display:none; }

/* ==================== SYMPTOM CHECKLIST ==================== */
.symp{ display:grid; grid-template-columns:1fr 372px; gap:clamp(26px,4vw,56px); align-items:start; margin-top:2.4rem; }
.symp__groups{ display:grid; gap:1.6rem; }
.symp__group h3{ font-size:.75rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-dk); margin-bottom:.9rem; }
.symp__row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.sy{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  font-size:.86rem; font-weight:600; color:var(--body);
  padding:.52rem .95rem .52rem .72rem; border-radius:14px;
  background:#fff; border:1.5px solid var(--line);
  min-height:44px;
  transition:all .3s var(--ease);
}
.sy__box{ width:17px; height:17px; border-radius:6px; border:1.5px solid var(--line-2); flex:none; display:grid; place-items:center; color:#fff; transition:all .3s var(--ease); }
.sy__box svg{ width:10px; height:10px; opacity:0; transform:scale(.5); transition:all .3s var(--spring); }
.sy:hover{ border-color:var(--accent-lt); color:var(--ink); }
.sy[aria-pressed="true"]{ background:var(--accent-pale); border-color:var(--accent); color:var(--ink); }
.sy[aria-pressed="true"] .sy__box{ background:var(--accent); border-color:var(--accent); }
.sy[aria-pressed="true"] .sy__box svg{ opacity:1; transform:none; }

.notecard{
  position:sticky; top:104px; background:#fff; border-radius:26px; padding:1.7rem 1.6rem;
  box-shadow:var(--shadow); border:1px solid var(--line);
  background-image:repeating-linear-gradient(transparent, transparent 31px, rgba(var(--ink-rgb),.05) 32px);
}
.notecard__h{ display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; padding-bottom:.9rem; border-bottom:1px solid var(--line); }
.notecard__h svg{ width:22px; height:22px; color:var(--accent); flex:none; }
.notecard__h b{ font-family:var(--f-display); font-size:1rem; }
.notecard__n{ margin-left:auto; font-family:var(--f-display); font-size:1.5rem; font-weight:700; color:var(--accent); line-height:1; }
.notecard ul{ list-style:none; margin:0 0 1.2rem; padding:0; min-height:118px; }
.notecard li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.89rem; color:var(--ink); font-weight:600; line-height:1.55; margin-bottom:.55rem; animation:slipIn .45s var(--spring); }
.notecard li svg{ width:14px; height:14px; color:var(--accent-lt); flex:none; margin-top:5px; }
@keyframes slipIn{ from{ opacity:0; transform:translateX(-10px) } to{ opacity:1; transform:none } }
.notecard__empty{ font-size:.88rem; color:var(--muted); font-style:italic; }
.notecard .btn{ width:100%; }
.notecard__foot{ font-size:.76rem; color:var(--muted); margin:.9rem 0 0; line-height:1.5; }

/* ==================== VISIT WALKTHROUGH ==================== */
.walk{ position:relative; margin-top:2.8rem; }
.walk__rail{ position:absolute; left:26px; top:14px; bottom:14px; width:2px; background:var(--accent-soft); }
.walk__fill{ position:absolute; left:26px; top:14px; width:2px; background:var(--accent); height:0; transition:height .3s linear; }
.walk__steps{ display:grid; gap:clamp(22px,3vw,40px); }
.wk{ display:grid; grid-template-columns:54px 1fr; gap:clamp(16px,2.4vw,30px); align-items:start; }
.wk__n{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:#fff; border:2px solid var(--accent-soft); color:var(--accent-lt);
  font-family:var(--f-display); font-weight:800; font-size:1rem; position:relative; z-index:2;
  transition:all .5s var(--spring);
}
.wk.on .wk__n{ background:var(--accent); border-color:var(--accent); color:#fff; transform:scale(1.08); box-shadow:0 12px 28px -12px rgba(var(--accent-rgb),.9); }
.wk__c h3{ font-size:clamp(1.08rem,1.8vw,1.4rem); margin-bottom:.4rem; }
.wk__c p{ margin:0; max-width:56ch; font-size:.96rem; }
.wk__c .plain{ background:var(--accent-pale); border-left:3px solid var(--accent-lt); padding:.8rem 1rem; border-radius:0 12px 12px 0; margin:.9rem 0 0; font-size:.9rem; }
.wk__c .plain b{ color:var(--accent-dk); }

/* ==================== GP RAIL ==================== */
.gpbar{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; margin:2rem 0 1.8rem; }
.seg{ display:inline-flex; background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:3px; }
.seg button{ font-size:.82rem; font-weight:700; padding:.48rem 1.05rem; border-radius:999px; cursor:pointer; color:var(--body); transition:all .3s var(--ease); white-space:nowrap; }
.seg button[aria-pressed="true"]{ background:var(--accent); color:#fff; }
.gpcount{ font-size:.84rem; color:var(--muted); font-weight:700; margin-left:auto; }

.rail{ position:relative; }
.rail__track{
  display:flex; gap:clamp(14px,2vw,22px); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 2px 24px; scrollbar-width:none; cursor:grab;
}
.rail__track::-webkit-scrollbar{ display:none; }
.rail__track.drag{ cursor:grabbing; scroll-snap-type:none; }
.gp{
  flex:0 0 clamp(250px,25vw,300px); scroll-snap-align:start;
  background:#fff; border-radius:26px; overflow:hidden; border:1px solid var(--line);
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.gp:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.gp__ph{ position:relative; aspect-ratio:4/4.5; overflow:hidden; background:var(--accent-pale); }
.gp__ph img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; transition:transform 1.1s var(--ease); }
.gp:hover .gp__ph img{ transform:scale(1.06); }
.gp__flag{
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(255,255,255,.94); color:var(--accent-dk); padding:.32rem .7rem; border-radius:999px;
  display:inline-flex; align-items:center; gap:.3rem;
}
.gp__flag svg{ width:11px; height:11px; }
.gp__b{ padding:1.15rem 1.25rem 1.35rem; display:flex; flex-direction:column; flex:1; }
.gp__b h3{ font-size:1.02rem; margin-bottom:.12rem; }
.gp__role{ font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 .6rem; }
.gp__qual{ font-size:.8rem; color:var(--body); margin:-.3rem 0 1.1rem; line-height:1.45; }
.gp__qual:empty{ display:none; }
.gp__int{ list-style:none; margin:0 0 1rem; padding:0; display:flex; flex-wrap:wrap; gap:.32rem; }
.gp__int li{ font-size:.71rem; font-weight:700; color:var(--accent-dk); background:var(--accent-pale); padding:.24rem .58rem; border-radius:8px; }
.gp__bb{ font-size:.75rem; font-weight:700; color:var(--good); display:inline-flex; align-items:center; gap:.35rem; margin:0 0 .9rem; }
.gp__bb svg{ width:13px; height:13px; }
.gp__act{ margin-top:auto; display:flex; gap:.5rem; }
.gp__act .btn{ flex:1; padding:.6rem .8rem; font-size:.8rem; }
.railnav{ display:flex; gap:.6rem; align-items:center; margin-top:.4rem; }
.raildots{ display:flex; gap:.35rem; margin-left:auto; }
.raildots i{ width:6px; height:6px; border-radius:50%; background:var(--line-2); transition:all .35s var(--ease); }
.raildots i.on{ width:20px; border-radius:3px; background:var(--accent); }

/* GP modal */
.modal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:clamp(14px,3vw,36px); }
.modal[hidden]{ display:none; }
.modal__bd{ position:absolute; inset:0; background:rgba(var(--deep-rgb),.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:fadeIn .35s var(--ease); }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
.modal__box{
  position:relative; background:#fff; border-radius:28px; overflow:hidden;
  width:min(880px,100%); max-height:88vh; display:grid; grid-template-columns:270px 1fr;
  box-shadow:0 50px 90px -40px rgba(var(--deep-rgb),.85); animation:rise .45s var(--spring);
}
@keyframes rise{ from{ opacity:0; transform:translateY(26px) scale(.97) } to{ opacity:1; transform:none } }
.modal__ph{ background:var(--accent-pale); }
.modal__ph img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.modal__b{ padding:clamp(22px,3vw,34px); overflow-y:auto; }
.modal__b h3{ font-size:1.55rem; margin-bottom:.15rem; }
.modal__x{ position:absolute; top:14px; right:16px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--ink); font-size:1.4rem; line-height:1; cursor:pointer; z-index:3; display:grid; place-items:center; }
.modal__x:hover{ background:var(--accent); color:#fff; }
.modal__meta{ display:flex; flex-wrap:wrap; gap:.4rem .9rem; font-size:.8rem; color:var(--muted); font-weight:700; margin:.5rem 0 1.1rem; padding-bottom:1.1rem; border-bottom:1px solid var(--line); }
/* This rule used to name h3 as well, which meant it beat the rule above and
   the doctor's own name came out at kicker size, while "Areas of interest"
   and "Fees" were left unstyled and sat hard against the paragraph before
   them. It belongs to the section headings, which are h4. */
.modal__b h4{ font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--accent-dk); margin:1.5rem 0 .65rem; }
/* a biography is several paragraphs now, so they need air between them */
.modal__b p{ font-size:.95rem; line-height:1.62; margin:0 0 .85rem; }
.modal__b p:last-of-type{ margin-bottom:0; }
.modal__b ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.38rem; }
.modal__b ul li{ font-size:.78rem; font-weight:700; color:var(--accent-dk); background:var(--accent-pale); padding:.3rem .7rem; border-radius:9px; }
.modal__act{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }

/* ==================== PREGNANCY JOURNEY (flip card rail) ==================== */
.flipbar{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin:2.4rem 0 1.4rem; }
.flipbar small{ font-size:.8rem; font-weight:700; letter-spacing:.06em; color:var(--muted); }

.fliprail{
  --fgap:clamp(14px,1.6vw,20px);
  display:flex; gap:var(--fgap);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 2px 22px; scrollbar-width:none; cursor:grab;
}
.fliprail::-webkit-scrollbar{ display:none; }
.fliprail.drag{ cursor:grabbing; scroll-snap-type:none; }
@media (max-width:980px){ .fliprail .flip{ flex-basis:calc((100% - var(--fgap, 20px)) / 2); } }
@media (max-width:620px){ .fliprail .flip{ flex-basis:86%; } }

.flip{
  /* exactly three across, so no card is ever cut off at the edge */
  flex:0 0 calc((100% - 2 * var(--fgap, 20px)) / 3); min-width:0; scroll-snap-align:start;
  height:clamp(214px,20vw,262px);
  perspective:1500px; background:none; padding:0; cursor:pointer; text-align:left;
}
.flip__in{
  display:block;                 /* an inline box ignores width/height */
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.2,.8,.25,1);
}
.flip:hover .flip__in,
.flip:focus-visible .flip__in,
.flip[aria-pressed="true"] .flip__in{ transform:rotateY(180deg); }
.flip__f, .flip__b{
  position:absolute; inset:0; border-radius:26px; overflow:hidden;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  display:flex; flex-direction:column;
  padding:clamp(1.1rem,1.6vw,1.5rem) clamp(1.15rem,1.7vw,1.6rem);
  border:1px solid rgba(255,255,255,.15);
}
.flip__f{
  background:linear-gradient(158deg, var(--accent) 0%, var(--accent-dk) 70%, var(--accent-alt) 100%);
  border-color:rgba(255,255,255,.2);
  box-shadow:var(--shadow);
  justify-content:space-between;
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.flip:hover .flip__f{ border-color:rgba(255,255,255,.55); }
.flip__b{
  transform:rotateY(180deg);
  background:linear-gradient(158deg, var(--accent-alt) 0%, var(--deep) 88%);
  border-color:rgba(255,255,255,.26);
  box-shadow:var(--shadow);
}
.flip__f::after{
  content:""; position:absolute; top:-60%; left:-120%; width:70%; height:220%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
  transform:rotate(14deg); pointer-events:none;
  transition:left .9s var(--ease);
}
.flip:hover .flip__f::after{ left:130%; }

/* top row: oversized numeral on the left, oversized icon on the right */
.flip__row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.flip__n{
  font-family:var(--f-display); font-style:normal; font-weight:700;
  font-size:clamp(3.2rem,4.6vw,4.7rem); line-height:.85; letter-spacing:-.05em; color:rgba(255,255,255,.55);
  transition:color .5s var(--ease), transform .7s var(--spring);
  display:block; letter-spacing:-.03em;
}
.flip:hover .flip__n{ color:#fff; transform:translateY(-3px); }
.flip__ico{
  width:clamp(58px,5.4vw,76px); height:clamp(58px,5.4vw,76px);
  border-radius:22px; flex:none;
  background:rgba(255,255,255,.18); color:#fff;
  display:grid; place-items:center;
  transition:background .5s var(--ease), transform .7s var(--spring);
}
.flip:hover .flip__ico{ background:rgba(255,255,255,.3); transform:scale(1.08) rotate(-6deg); }
.flip__ico svg{ width:52%; height:52%; }
.flip__f h3{ color:#fff; font-size:clamp(1.02rem,1.35vw,1.18rem); line-height:1.25; margin:.9rem 0 0; max-width:17ch; }
.flip__hint{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:auto; padding-top:.7rem;
  font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72); transition:color .4s var(--ease), gap .4s var(--ease);
}
.flip__hint svg{ width:13px; height:13px; }
.flip:hover .flip__hint{ color:#fff; gap:.65rem; }

.flip__b h3{ color:#fff; font-size:.84rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.55rem; padding-bottom:.55rem; border-bottom:1px solid rgba(255,255,255,.2); flex:none; }
.flip__b p{ font-size:clamp(.85rem,1vw,.93rem); line-height:1.58; color:rgba(255,255,255,.93); margin:0; overflow-y:auto; }
.flip__b p::-webkit-scrollbar{ width:3px; }
.flip__b p::-webkit-scrollbar-thumb{ background:rgba(var(--accent-lt-rgb),.5); border-radius:3px; }
.flip__back{
  margin-top:.7rem; flex:none;
  font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.88);
  display:inline-flex; align-items:center; gap:.4rem;
}
.flip__back svg{ width:13px; height:13px; }

.js .flip{ opacity:0; transform:translateY(26px); }
.js .flip.in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .8s var(--spring); }

/* on a deep band the cards go back to translucent glass */
.sec--deep .flipbar small{ color:rgba(var(--on-deep-rgb),.6); }
.sec--deep .flip__f{
  background:
    radial-gradient(120% 110% at 88% 8%, rgba(var(--accent-lt-rgb),.2), transparent 58%),
    linear-gradient(165deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border-color:rgba(255,255,255,.15); box-shadow:none;
}
.sec--deep .flip:hover .flip__f{ border-color:rgba(var(--accent-lt-rgb),.5); }
.sec--deep .flip__b{
  background:linear-gradient(165deg, rgba(var(--accent-dk-rgb),.44), rgba(var(--ink-rgb),.94) 72%);
  border-color:rgba(var(--accent-lt-rgb),.4); box-shadow:none;
}
.sec--deep .flip__n{ color:rgba(var(--accent-lt-rgb),.5); }
.sec--deep .flip:hover .flip__n{ color:var(--accent-lt); }
.sec--deep .flip__ico{ background:rgba(var(--accent-lt-rgb),.14); color:var(--accent-lt); }
.sec--deep .flip:hover .flip__ico{ background:rgba(var(--accent-lt-rgb),.26); }
.sec--deep .flip__hint{ color:rgba(var(--on-deep-rgb),.52); }
.sec--deep .flip:hover .flip__hint{ color:var(--accent-lt); }
.sec--deep .flip__b p{ color:rgba(var(--on-deep-rgb),.92); }
.sec--deep .flip__back{ color:var(--accent-lt); }

.sec--deep .ctrl{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.26); color:#fff; }
.sec--deep .ctrl:hover{ background:rgba(var(--accent-lt-rgb),.22); border-color:var(--accent-lt); color:#fff; }
.sec--deep .raildots i{ background:rgba(255,255,255,.24); }
.sec--deep .raildots i.on{ background:var(--accent-lt); }

@media (prefers-reduced-motion: reduce){
  .flip__in{ transition:none; }
  .flip__f::after{ display:none; }
  .js .flip{ opacity:1 !important; transform:none !important; }
}
@media (hover:none){
  .flip:hover .flip__in{ transform:none; }
  .flip[aria-pressed="true"] .flip__in{ transform:rotateY(180deg); }
  .flip:hover .flip__f::after{ left:-120%; }
}

/* ==================== COST ESTIMATOR ==================== */
.cost{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(26px,4vw,62px); align-items:center; }

/* sliding segmented switch */
.costsw{ position:relative; display:inline-flex; background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:4px; margin:1.6rem 0 1.9rem; }
.costsw__thumb{
  position:absolute; top:4px; bottom:4px; border-radius:999px; background:var(--accent);
  box-shadow:0 10px 22px -12px rgba(var(--accent-rgb),.95);
  transition:left .5s var(--spring), width .5s var(--spring);
  pointer-events:none;
}
.costsw button{ position:relative; z-index:1; font-size:.85rem; font-weight:700; padding:.58rem 1.3rem; border-radius:999px; cursor:pointer; color:var(--body); transition:color .35s var(--ease); white-space:nowrap; }
.costsw button[aria-pressed="true"]{ color:#fff; }

.costq{ font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-dk); margin:0 0 .9rem; }
.costchips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  font-size:.84rem; font-weight:700; padding:.52rem 1.05rem; border-radius:14px; cursor:pointer;
  background:#fff; border:1.5px solid var(--line); color:var(--body); min-height:44px;
  transition:transform .4s var(--spring), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.chip:hover{ border-color:var(--accent-lt); color:var(--accent-dk); transform:translateY(-2px); }
.chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-2px); }

/* the receipt */
.receipt{
  position:relative; background:#fff; border-radius:28px; padding:clamp(24px,3.2vw,40px);
  box-shadow:var(--shadow); border:1px solid var(--line); overflow:hidden;
}
.receipt::before{
  content:""; position:absolute; inset:auto -70px -90px auto; width:230px; height:230px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--accent-pale), transparent 70%);
}
/* perforated top edge, like a docket */
.receipt::after{
  content:""; position:absolute; top:0; left:0; right:0; height:8px;
  background:repeating-linear-gradient(90deg, var(--accent-soft) 0 9px, transparent 9px 18px);
}
.receipt > *{ position:relative; z-index:1; }
.receipt__for{ font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 .3rem; }
.receipt__svc{ font-family:var(--f-display); font-size:1.12rem; font-weight:600; color:var(--ink); margin:0 0 1.4rem; min-height:1.5em; }
.receipt__amt{
  font-family:var(--f-display); font-weight:700; letter-spacing:-.05em; line-height:1;
  font-size:clamp(3rem,7vw,5rem); color:var(--accent-dk); margin:0 0 .5rem; display:flex; flex-wrap:wrap;
}
.receipt__amt i{ font-style:normal; display:inline-block; }
.receipt__amt i.sp{ width:.26em; }   /* a real flex item, so the space survives */
.js .receipt__amt i{ opacity:0; transform:translateY(-120%) rotate(-8deg); }
.js .receipt__amt.go i{ animation:dropIn .7s var(--spring) forwards; }
@keyframes dropIn{ to{ opacity:1; transform:none } }
.receipt__amt.small{ font-size:clamp(1.8rem,4vw,2.9rem); }
.receipt__sub{ font-size:.9rem; font-weight:700; color:var(--ink); margin:0 0 1.1rem; }
.receipt__note{ font-size:.9rem; margin:0 0 1.3rem; }

.meter{ height:8px; border-radius:8px; background:var(--accent-pale); overflow:hidden; margin:0 0 .55rem; }
.meter i{ display:block; height:100%; width:0; border-radius:8px; background:linear-gradient(90deg,var(--accent),var(--warm)); transition:width 1.1s var(--ease); }
.meter__lbl{ display:flex; justify-content:space-between; font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 1.4rem; }
.meter__lbl b{ color:var(--accent-dk); }

.stamp{
  position:absolute; top:clamp(22px,3vw,34px); right:clamp(18px,3vw,34px); z-index:2;
  border:2px solid var(--good); color:var(--good); border-radius:10px;
  padding:.3rem .7rem; font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  transform:rotate(-11deg) scale(.4); opacity:0;
  transition:transform .55s var(--spring), opacity .35s var(--ease);
}
.stamp.on{ transform:rotate(-11deg) scale(1); opacity:.92; }

.receipt__line{ border-top:1px dashed var(--line-2); padding-top:1.1rem; margin-top:.3rem; display:grid; gap:.6rem; }
.receipt__line li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.88rem; color:var(--body); }
.receipt__line svg{ width:16px; height:16px; flex:none; margin-top:4px; color:var(--accent); }
.js .receipt__line li{ opacity:0; transform:translateX(-10px); }
.js .receipt__line.go li{ animation:slipIn .5s var(--ease) forwards; }
@keyframes slipIn{ to{ opacity:1; transform:none } }

.receipt__cta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; }
.js .costpane{ animation:fadeSwap .5s var(--ease); }
@keyframes fadeSwap{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }

/* ==================== FAQ ==================== */
.faq{ max-width:840px; margin:2.4rem auto 0; }
.fq{ border-bottom:1px solid var(--line); }
.fq__q{ width:100%; display:flex; gap:1rem; align-items:flex-start; text-align:left; cursor:pointer; padding:1.25rem 0; font-family:var(--f-display); font-size:clamp(1rem,1.5vw,1.14rem); font-weight:600; color:var(--ink); transition:color .3s var(--ease); }
.fq__q:hover{ color:var(--accent-dk); }
.fq__q .ch{ width:22px; height:22px; flex:none; margin-top:3px; color:var(--accent); transition:transform .45s var(--spring); }
.fq.open .fq__q .ch{ transform:rotate(45deg); }
.fq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.fq.open .fq__a{ grid-template-rows:1fr; }
.fq__a > div{ overflow:hidden; }
.fq__a p{ margin:0 0 1.3rem; padding-left:38px; font-size:.96rem; max-width:64ch; }

/* ==================== CLOSING CTA ==================== */
.close{ position:relative; overflow:hidden; }
.close__bg{ position:absolute; inset:0; z-index:0; }
.close__bg img{ width:100%; height:100%; object-fit:cover; }
.close__wash{ position:absolute; inset:0; z-index:1; background:linear-gradient(105deg, rgba(var(--deep-rgb),.94) 0%, rgba(var(--ink-rgb),.8) 46%, rgba(var(--accent-dk-rgb),.45) 100%); }
.close__in{ position:relative; z-index:3; text-align:center; max-width:760px; margin-inline:auto; }
.close h2{ color:#fff; }
.close p{ color:rgba(255,255,255,.9); margin-inline:auto; }
.close__cta{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2rem; }
.close__ways{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.18); border-radius:22px; overflow:hidden; margin-top:3rem; }
.close__ways a{ background:rgba(var(--deep-rgb),.55); padding:1.4rem 1rem; text-align:center; transition:background .35s var(--ease); }
.close__ways a:hover{ background:rgba(var(--accent-dk-rgb),.55); }
.close__ways svg{ width:22px; height:22px; color:var(--accent-lt); margin:0 auto .6rem; }
.close__ways b{ display:block; color:#fff; font-size:.95rem; font-family:var(--f-display); }
.close__ways span{ display:block; color:rgba(255,255,255,.7); font-size:.8rem; }

/* ==================== DISCLAIMER + FOOTER ==================== */

.foot__grid > *{ min-width:0; }
/* the mark itself is dropped in as the platform's own asset */

@media (max-width:1080px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .foot__grid{ grid-template-columns:1fr; } .foot__row{ flex-direction:column; } .foot__badge{ align-self:flex-start; } }
@media (prefers-reduced-motion:reduce){ .foot__social{ transition:none; } .foot__social:hover{ transform:none; } }

/* ==================== RESPONSIVE ==================== */
@media (max-width:1080px){
  .promise, .stagepanel, .svc, .symp, .cost{ grid-template-columns:1fr; }
  .svc__art{ position:static; order:-1; }
  .svc__stack{ aspect-ratio:16/10; border-radius:26px; }
  .notecard{ position:static; }
  .modal__box{ grid-template-columns:1fr; max-height:92vh; }
  .modal__ph{ height:210px; }
}
@media (max-width:1040px){
  .nav__links{ display:none; }
  .nav__tel{ display:none; }
  .nav .btn--solid.btn--sm{ display:none; } /* hide Book Now button from inner-page nav on mobile */
  .burger{ display:flex; margin-left:auto; }
  .screen__grid{ grid-template-columns:1fr; }
  .screenfacts{ grid-template-columns:1fr; gap:1.4rem; }
  .close__ways{ grid-template-columns:1fr; }
  .hero{ min-height:auto; padding-top:0; }
  .hero__in{ padding-top:128px; }
}
@media (max-width:560px){
  .acc__in > div{ padding-left:0; }
  .bookbar{ padding-left:1rem; }
  .bookbar p{ font-size:.8rem; }
  .bookbar p b{ font-size:.86rem; }
  .wk{ grid-template-columns:44px 1fr; gap:14px; }
  .wk__n{ width:44px; height:44px; font-size:.88rem; }
  .walk__rail, .walk__fill{ left:21px; }
  .gpcount{ margin-left:0; width:100%; }
}
@media print{
  .nav,.bookbar,.sheet,.progress,.hero,.close,.foot,.rail,.svc__art{ display:none !important; }
  body{ background:#fff; }
}


/* ==================== EXPANDING FACT CARDS ====================
   Used by any page that needs a row of tap-to-open cards: the men's
   "know your numbers", the patient info cancellation rules, and so on. */
.nums{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,20px); margin-top:2.6rem; }
.num{
  position:relative; overflow:hidden; cursor:pointer; text-align:left;
  background:var(--card); border:1.5px solid var(--line); border-radius:24px;
  padding:1.4rem 1.3rem; min-height:230px; display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s var(--ease);
}
.num:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--accent-soft); }
.num[aria-expanded="true"]{ border-color:var(--accent-lt); box-shadow:var(--shadow); }
.num::after{
  content:""; position:absolute; inset:auto -50px -60px auto; width:150px; height:150px; border-radius:50%;
  background:var(--accent-pale); z-index:0; transition:transform .6s var(--ease);
}
.num:hover::after{ transform:scale(1.45); }
.num > *{ position:relative; z-index:1; }
.num__ico{ width:42px; height:42px; border-radius:13px; background:var(--accent-pale); color:var(--accent); display:grid; place-items:center; margin-bottom:.9rem; }
.num__ico svg{ width:21px; height:21px; }
.num__k{ font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 .3rem; }
.num h3{ font-size:1.04rem; margin-bottom:.45rem; }
.num__why{ font-size:.87rem; color:var(--body); margin:0; line-height:1.55; }
.num__more{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease); }
.num[aria-expanded="true"] .num__more{ grid-template-rows:1fr; }
.num__more > span{ overflow:hidden; display:block; }
.num__more p{ font-size:.85rem; margin:.8rem 0 0; line-height:1.55; }
.num__hint{
  margin-top:auto; padding-top:.9rem; display:inline-flex; align-items:center; gap:.4rem;
  font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-dk);
  transition:gap .35s var(--ease);
}
.num__hint svg{ width:13px; height:13px; transition:transform .45s var(--spring); }
.num[aria-expanded="true"] .num__hint svg{ transform:rotate(180deg); }
.num:hover .num__hint{ gap:.7rem; }
.js .num{ opacity:0; transform:translateY(22px); }
.js .num.in{ opacity:1; transform:none; transition:opacity .6s var(--ease), transform .7s var(--spring); }
@media (max-width:1000px){ .nums{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .nums{ grid-template-columns:1fr; } .num{ min-height:0; } }

/* a tick list that sits under a heading */
.costlist{ list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.7rem; }
.costlist li{ display:flex; gap:.75rem; align-items:flex-start; font-size:.94rem; color:var(--body); }
.costlist svg{ width:18px; height:18px; flex:none; margin-top:4px; color:var(--accent); }


/* ==================== SHARED PAGE FURNITURE ====================
   Small components used by more than one page. */
/* quick facts strip — each panel opens for the detail behind it */
/* ==================== THE THREE QUICK FACTS ====================
   Flip cards rather than accordions: the headline fact is on the face,
   the detail is on the back. The three keep one height, so nothing on the
   page moves when a card turns. Hover or focus turns it on a pointer;
   a tap toggles aria-pressed on touch. */
.facts3{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,20px); margin-top:2.2rem;
}
.facts3 .f3{
  display:block; width:100%; height:clamp(238px,21vw,272px);
  perspective:1400px; background:none; border:0; padding:0;
  font:inherit; color:inherit; cursor:pointer; text-align:center;
}
.f3__in{
  display:block; position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.2,.8,.25,1);
}
.facts3 .f3:hover .f3__in,
.facts3 .f3:focus-visible .f3__in,
.facts3 .f3[aria-pressed="true"] .f3__in{ transform:rotateY(180deg); }
.f3__f, .f3__b{
  position:absolute; inset:0; border-radius:22px; overflow:hidden;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:1.5rem 1.35rem; text-align:center;
}
.f3__f{
  background:var(--card); border:1.5px solid var(--line-2); box-shadow:var(--shadow-sm);
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.facts3 .f3:hover .f3__f{ border-color:var(--accent-soft); box-shadow:var(--shadow); }
.f3__b{
  transform:rotateY(180deg);
  background:linear-gradient(158deg, var(--accent) 0%, var(--accent-dk) 78%, var(--accent-alt) 100%);
  border:1.5px solid rgba(255,255,255,.22); box-shadow:var(--shadow);
  color:#fff;
}
/* the icon: one fixed square, the glyph centred inside it and never clipped */
.f3__ico{
  flex:none; width:62px; height:62px; border-radius:20px;
  display:grid; place-items:center; margin:0 0 .95rem;
  background:var(--accent-pale); color:var(--accent-dk); line-height:0;
  transition:background .45s var(--ease), color .45s var(--ease), transform .6s var(--spring);
}
.f3__ico svg{
  width:30px; height:30px; display:block;
  stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.facts3 .f3:hover .f3__ico{ background:var(--accent); color:#fff; transform:translateY(-2px) scale(1.05); }
.facts3 .f3 b{
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:1.06rem; line-height:1.25; color:var(--ink); margin:0 0 .45rem;
}
.f3__sum{
  display:block; font-size:.88rem; line-height:1.55; color:var(--body);
  max-width:24ch; margin:0 auto;
}
.f3__hint{
  display:block; margin-top:.9rem; font-size:.72rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent);
}
.f3__p{
  display:block; margin:0; font-size:.86rem; line-height:1.6;
  color:rgba(255,255,255,.93); max-width:30ch;
}
.f3__b b{ color:#fff; font-size:.98rem; margin-bottom:.6rem; }
/* entrance — only applied by script, so a page without JS shows them outright */
.facts3 .f3--wait{ opacity:0; transform:translateY(16px); }
.facts3 .f3--in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
@media (max-width:860px){ .facts3{ grid-template-columns:1fr; } .facts3 .f3{ height:212px; } }
@media (prefers-reduced-motion:reduce){
  .f3__in{ transition:none; }
  .facts3 .f3:hover .f3__ico{ transform:none; }
  .facts3 .f3--wait{ opacity:1; transform:none; }
}


/* a fact that needs the clinic to confirm it */
.confirm{
  display:flex; gap:.9rem; align-items:flex-start;
  background:var(--accent-pale); border:1.5px solid var(--accent-soft);
  border-radius:18px; padding:1.1rem 1.25rem; margin:1.6rem 0 0;
}
.confirm svg{ width:20px; height:20px; flex:none; color:var(--accent-dk); margin-top:2px; }
.confirm p{ margin:0; font-size:.9rem; color:var(--ink); }
.confirm b{ color:var(--accent-dk); }


/* ==================== GRID OVERFLOW GUARD ====================
   A grid item defaults to min-width:auto, so a horizontally scrolling rail
   inside one column forces that column as wide as its content and squeezes
   the other. Every two-column layout gets min-width:0 so the columns keep
   the ratio they were given. */
.cost > *, .svc > *, .symp > *, .promise > *, .stagepanel > *, .screen__grid > *{ min-width:0; }
.rail, .rail__track, .fliprail{ min-width:0; max-width:100%; }


/* ==================== SEARCH, FILTER BARS & EMPTY STATES ====================
   Shared by the doctor directory, the resource list and the services index. */
.gpsearch{ position:relative; flex:1 1 240px; max-width:340px; }
.gpsearch input{
  width:100%; font:inherit; font-size:.92rem; color:var(--ink);
  background:var(--card); border:1.5px solid var(--line-2); border-radius:999px;
  padding:.72rem 1.1rem .72rem 2.6rem;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.gpsearch input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12); }
.gpsearch svg{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--muted); pointer-events:none; }
.gpnone{ padding:2.4rem 0; text-align:center; color:var(--body); font-size:.95rem; }
.resbar{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:2rem 0 .6rem; }
.rescount{ font-size:.84rem; color:var(--muted); font-weight:700; margin:0 0 1.6rem; }

/* ============================================================
   THE FULL SERVICES MENU IN THE HEADER
   Every page carries the same one, so the header behaves
   identically wherever a patient happens to land.
   ============================================================ */
.has-mega{ position:relative; }
.megatrig{ display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; font-family:var(--f-body); }
.megatrig svg{ width:10px; height:10px; transition:transform .35s var(--ease); }
.megatrig[aria-expanded="true"] svg{ transform:rotate(180deg); }
.mega{
  position:fixed; left:50%; transform:translateX(-50%) translateY(-10px);
  top:calc(78px + env(safe-area-inset-top,0px));
  width:min(1180px, calc(100% - 40px)); z-index:89;
  background:rgba(255,255,255,.98); border:1px solid var(--line); border-radius:24px;
  backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  box-shadow:0 40px 90px -36px rgba(var(--ink-rgb),.45);
  padding:clamp(24px,2.6vw,34px);
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .35s var(--ease);
}
.mega.open{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mega__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,34px); }
.mega__cols > *{ min-width:0; }
.mega__col .mega__h{ font-family:var(--f-body); font-size:.64rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 1rem; }
.mega__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.42rem; }
.mega__col a{ display:flex; align-items:center; gap:.6rem; font-size:.89rem; font-weight:500; color:var(--ink); transition:color .25s var(--ease), transform .25s var(--ease); }
.mega__col a::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--dot,var(--accent)); flex:none; }
.mega__col a:hover{ color:var(--accent-dk); transform:translateX(3px); }
.mega__col:nth-child(1){ --dot:#D9A441 } .mega__col:nth-child(2){ --dot:#2BA6DE }
.mega__col:nth-child(3){ --dot:#C59133 } .mega__col:nth-child(4){ --dot:#3F9E86 }
/* an entry that opens a page of its own, rather than jumping down the home page */
.mega__foot{ margin-top:clamp(20px,2.4vw,30px); padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; }
.mega__foot p{ margin:0; color:var(--body); font-size:.84rem; max-width:52ch; }
.mega__foot div{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:1100px){ .mega__cols{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:980px){ .mega{ display:none; } }
@media (prefers-reduced-motion:reduce){ .mega, .megatrig svg, .mega__col a{ transition:none; } }


/* ==================== SERVICES SWITCHBOARD ====================
   Replaces the accordion-beside-a-photo. A rail of numbered choices beside
   one stage that swaps in place, so only one item's words are on screen,
   and the longer explanation waits behind "Read the detail". */
.sw{
  margin-top:clamp(28px,4vw,48px);
  display:grid; grid-template-columns:minmax(260px,.85fr) 1.6fr;
  gap:clamp(16px,2.4vw,34px); align-items:start;
}
/* ---- the rail ---- */
.sw__rail{ display:grid; gap:.5rem; position:sticky; top:96px; }
.sw__tab{
  position:relative; display:flex; align-items:center; gap:1rem; width:100%;
  text-align:left; font:inherit; color:inherit; cursor:pointer;
  padding:1rem 1.1rem; border-radius:18px;
  background:transparent; border:1.5px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.sw__tab::before{
  content:""; position:absolute; left:0; top:18%; bottom:18%; width:3px; border-radius:3px;
  background:var(--accent); transform:scaleY(0); transition:transform .45s var(--spring);
}
.sw__tab:hover{ background:rgba(var(--accent-lt-rgb),.12); transform:translateX(4px); }
.sw__tab[aria-selected="true"]{
  background:var(--card); border-color:var(--line); box-shadow:0 18px 36px -26px rgba(10,42,59,.35); transform:none;
}
.sw__tab[aria-selected="true"]::before{ transform:scaleY(1); }
.sw__n{
  flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:14px;
  font-family:var(--f-display); font-size:.86rem; font-weight:800; letter-spacing:.02em;
  color:var(--accent-dk); background:var(--accent-pale);
  transition:background .4s var(--ease), color .4s var(--ease), transform .55s var(--spring);
}
.sw__tab[aria-selected="true"] .sw__n{ background:var(--accent); color:#fff; transform:rotate(-6deg); }
.sw__t{ min-width:0; display:block; }
.sw__t b{ display:block; font-family:var(--f-display); font-size:.98rem; font-weight:700; color:var(--ink); line-height:1.25; }
.sw__t span{ display:block; margin-top:.15rem; font-size:.8rem; color:var(--muted); }

/* ---- the stage ---- */
.sw__stage{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--card); border:1.5px solid var(--line); border-radius:28px;
  box-shadow:0 34px 70px -44px rgba(10,42,59,.45);
  padding:clamp(1.6rem,3vw,2.6rem) clamp(1.4rem,3vw,2.6rem) 1.2rem;
  min-height:420px; display:flex; flex-direction:column;
}
/* the water, at the foot of the stage */
.sw__stage::after{
  content:""; position:absolute; z-index:-1; left:-10%; right:-10%; bottom:-60px; height:200px; pointer-events:none;
  background:radial-gradient(60% 100% at 30% 100%, rgba(var(--accent-lt-rgb),.22), transparent 70%),
             radial-gradient(50% 90% at 80% 100%, rgba(var(--accent-rgb),.12), transparent 70%);
}
.sw__pan{ position:relative; flex:1 1 auto; }
.sw__pan:not([hidden]){ animation:swin .55s var(--ease) both; }
@keyframes swin{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.sw__ghost{
  position:absolute; z-index:-1; top:-1.4rem; right:-.4rem; pointer-events:none;
  font-family:var(--f-display); font-weight:800; line-height:1; letter-spacing:-.06em;
  font-size:clamp(6rem,11vw,9.5rem); color:rgba(var(--accent-rgb),.07);
}
.sw__tag{
  display:inline-flex; margin:0 0 .7rem; padding:.3rem .7rem; border-radius:999px;
  font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-dk); background:var(--accent-pale);
}
.sw__pan h3{ margin:0 0 .9rem; font-family:var(--f-display); font-size:clamp(1.4rem,2.2vw,1.85rem); letter-spacing:-.02em; line-height:1.15; color:var(--ink); }
.sw__lead{ margin:0 0 1.2rem; font-size:.96rem; line-height:1.65; color:var(--body); max-width:62ch; }
.sw__lead b{ display:block; margin-bottom:.2rem; font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-dk); }
/* the checklist as ticks, two to a row, arriving one after another */
.sw__ticks{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.5rem .9rem; }
.sw__ticks li{
  display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; line-height:1.45; color:var(--ink);
  padding:.65rem .75rem; border-radius:14px; background:rgba(var(--accent-lt-rgb),.1);
}
.sw__ticks li > span{
  flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; line-height:0;
  background:var(--accent); color:#fff;
}
.sw__ticks li > span svg{ width:12px; height:12px; }
.sw__pan:not([hidden]) .sw__ticks li{ animation:swtick .5s var(--ease) both; animation-delay:calc(var(--k) * 60ms + 120ms); }
@keyframes swtick{ from{ opacity:0; transform:translateY(8px) scale(.98) } to{ opacity:1; transform:none } }
/* a closing note — a caveat, or a crisis line — always on show */
.sw__note{
  margin:1rem 0 0; padding:.75rem .95rem; border-radius:14px;
  border-left:3px solid var(--accent); background:rgba(var(--accent-lt-rgb),.1);
  font-size:.86rem; line-height:1.6; color:var(--ink);
}
/* the longer explanation, folded away */
.sw__more{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem;
  font:inherit; font-size:.84rem; font-weight:800; color:var(--accent-dk); cursor:pointer;
  background:none; border:0; padding:0;
}
.sw__more span{ display:inline-block; width:15px; height:15px; line-height:0; transition:transform .4s var(--ease); }
.sw__more span svg{ width:15px; height:15px; }
.sw__more[aria-expanded="true"] span{ transform:rotate(180deg); }
.sw__det{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.sw__more[aria-expanded="true"] + .sw__det{ grid-template-rows:1fr; }
.sw__det > div{ overflow:hidden; }
.sw__det p{ margin:.8rem 0 0; font-size:.92rem; line-height:1.7; color:var(--body); max-width:66ch; }
.sw__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.2rem; margin-top:1.5rem; }
/* ---- the foot: where you are, and the way on ---- */
.sw__foot{
  display:flex; align-items:center; gap:1rem; margin-top:1.6rem; padding-top:1rem;
  border-top:1px solid var(--line);
}
.sw__count{ font-size:.78rem; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.sw__count b{ color:var(--accent-dk); }
.sw__prog{ flex:1; height:3px; border-radius:3px; background:var(--line); overflow:hidden; }
.sw__prog i{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--accent-lt)); transition:width .55s var(--ease); }
.sw__nav{ display:flex; gap:.4rem; }
.sw__arrow{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%; cursor:pointer; line-height:0;
  background:var(--card); border:1.5px solid var(--line-2); color:var(--accent-dk);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.sw__arrow svg{ width:17px; height:17px; }
.sw__arrow:hover{ background:var(--accent); border-color:var(--accent); color:#fff; transform:scale(1.06); }

@media (max-width:900px){
  .sw{ grid-template-columns:1fr; }
  /* the rail becomes a row of chips you can swipe along */
  .sw__rail{
    position:static; display:flex; gap:.45rem; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:2px 2px 8px; scrollbar-width:none;
  }
  .sw__rail::-webkit-scrollbar{ display:none; }
  .sw__tab{ flex:0 0 auto; scroll-snap-align:start; padding:.6rem .85rem .6rem .6rem; gap:.6rem; border-color:var(--line); background:var(--card); }
  .sw__tab::before{ display:none; }
  .sw__tab:hover{ transform:none; }
  .sw__tab[aria-selected="true"]{ border-color:var(--accent); }
  .sw__n{ width:32px; height:32px; border-radius:10px; font-size:.74rem; }
  .sw__t span{ display:none; }
  .sw__t b{ font-size:.86rem; white-space:nowrap; }
  .sw__ticks{ grid-template-columns:1fr; }
  .sw__stage{ min-height:0; }
}
@media (prefers-reduced-motion:reduce){
  .sw__pan:not([hidden]), .sw__pan:not([hidden]) .sw__ticks li{ animation:none; }
  .sw__tab, .sw__n, .sw__tab::before, .sw__det, .sw__prog i{ transition:none; }
}


/* images carry their real width and height (no layout jump); height follows the width unless a rule says otherwise */
:where(img[width][height]){ width:auto; height:auto; }

/* FOOTER-CSS-START (managed by apply_footer.py — do not edit in place) */
/* ============================================================
   FOOTER
   Four columns, then a rule and the fine print underneath.
   ============================================================ */
.foot{ background:var(--deep); color:rgba(var(--on-deep-rgb),.72); padding-block:clamp(26px,3.2vh,38px) 14px; }
.foot__grid{ display:grid; grid-template-columns:1.5fr 1fr 1.1fr 1.2fr; gap:clamp(16px,2.4vw,36px); align-items:start; }
.foot__grid > *{ min-width:0; }
/* Column headings are the warm accent, as on the reference build — they are
   signposts, not content, and keeping them off white lets the links read as
   the only clickable thing in each column. */
.foot__h{ font-family:var(--f-display); font-size:.68rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--warm); margin:0 0 .7rem; }
.foot__h--gap{ margin-top:1.3rem; }

/* the services column closes with the way through to all of them */
.foot__all{
  display:inline-block; margin-top:.7rem; font-size:.85rem; font-weight:800;
  color:var(--warm); text-decoration:none;
}
.foot__all span{ display:inline-block; transition:transform .35s var(--ease); }
.foot__all:hover span{ transform:translateX(4px); }

/* contact lines: a fixed label column, so the values line up under each other */
.foot__cl{ display:grid; gap:.5rem; }
.foot__cl li{ display:grid; grid-template-columns:1.25rem 1fr; gap:.3rem; align-items:start; }
.foot__cl b{ color:#fff; font-weight:800; }
.foot__dir{ display:inline-block; margin-top:.6rem; font-size:.85rem; color:rgba(var(--on-deep-rgb),.86); }
.foot__hrs{ gap:.55rem; }

/* the billing pill that opens the column */
.foot__pill{
  display:inline-flex; align-items:center; gap:.5rem; margin:0 0 1rem;
  padding:.45rem .95rem; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  font-size:.78rem; font-weight:700; color:#fff; white-space:nowrap;
}
.foot__pill span{ width:7px; height:7px; border-radius:50%; background:var(--warm); flex:none; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.26rem; font-size:.85rem; line-height:1.4; }
.foot a{ color:inherit; }
.foot a:hover{ color:var(--accent-lt); }
.foot p{ font-size:.85rem; line-height:1.48; color:rgba(var(--on-deep-rgb),.72); }

/* The mark is a two-line lockup a thousand pixels wide; at 34px the second
   line was too small to read. Sized off its own width so both lines hold,
   with the intrinsic size on the tag so nothing shifts as it loads. */
.foot__logo{ display:inline-block; max-width:230px; }
.foot__about .logo{ display:block; width:100%; height:auto; }
.foot__about > p{ margin:.85rem 0 0; max-width:34ch; }
/* A label, then a row of square tiles — the pattern the rest of the brand's
   material uses. The platforms' own glyphs are their trademarks and are not
   redrawn here: each tile holds a neutral mark with a swap slot in front of
   it, so dropping in social/facebook.svg and social/google.svg is the only
   change needed. The link's own aria-label names the platform either way. */
.foot__followk{
  margin:1.15rem 0 .85rem; font-size:.68rem; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; color:var(--warm);
}
.foot__socials{ display:flex; flex-wrap:wrap; gap:.6rem; }
.foot__social{
  display:inline-grid; place-items:center; flex:none;
  width:44px; height:44px; border-radius:11px;
  border:1px solid rgba(255,255,255,.17); background:transparent;
  color:rgba(255,255,255,.9); line-height:0;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.foot__social:hover, .foot__social:focus-visible{
  background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.45);
  color:#fff; transform:translateY(-2px);
}
.foot__social svg{ width:18px; height:18px; display:block; }

.foot__row{ display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; margin-top:.85rem; }
.foot__emg{
  flex:1 1 230px; min-width:0; padding:.8rem .95rem; border-radius:10px;
  border:1px solid rgba(var(--warm-rgb),.45); background:rgba(var(--warm-rgb),.08);
}
.foot__emg p{ margin:0; font-size:.8rem; line-height:1.5; color:rgba(var(--on-deep-rgb),.82); }
.foot__emg strong{ color:var(--warm); }
.foot__emg a{ color:var(--warm); font-weight:700; }
.foot__badge{
  flex:none; width:86px; height:auto; align-self:center; border-radius:9px;
  padding:5px; background:#fff;
}

.foot__contact ul{ gap:.38rem; }
.foot__contact li{ line-height:1.45; }

.foot__fine{ margin-top:clamp(16px,2.2vh,26px); padding-top:.95rem; border-top:1px solid rgba(255,255,255,.12); }
/* the full width of the footer, not a reading column: these two lines are
   legal notices, and wrapping them into a narrow block only makes the
   footer taller for no gain */
.foot__fine p{ font-size:.75rem; line-height:1.45; color:rgba(var(--on-deep-rgb),.55); margin:0 0 .45rem; max-width:none; }
.foot__fine p:last-child{ margin-bottom:0; }
.foot__fine strong{ color:rgba(var(--on-deep-rgb),.85); }
.foot__legal{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; align-items:baseline; justify-content:space-between; }
.foot__pols{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; }
.foot__legal a{ color:rgba(var(--on-deep-rgb),.72); }
.foot__rev{ display:block; margin-top:.3rem; font-size:.73rem; color:rgba(var(--on-deep-rgb),.4); }

@media (max-width:1080px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .foot__grid{ grid-template-columns:1fr; } .foot__row{ flex-direction:column; } .foot__badge{ align-self:flex-start; } }
@media (prefers-reduced-motion:reduce){ .foot__social{ transition:none; } .foot__social:hover{ transform:none; } }

/* ============================================================
   THE FOOTER WORDMARK
   The same idea as the hero, at the other end of the page: one
   line of type cut at a waterline, crisp above it and softened
   below. Two copies of the same words, masked against each
   other, so the boundary is the water itself.
   ============================================================ */
.footmark{
  --fwl:58%;                     /* where the surface crosses the letters */
  margin-top:clamp(14px,2vh,24px); overflow:hidden;
}
.footmark__stage{
  position:relative; display:block; width:100%;
  padding-inline:var(--gutter);
  line-height:.86;
}
.footmark__t{
  display:block; width:100%; text-align:center;   /* centred in the footer; both copies, so the halves still meet letter for letter */
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  letter-spacing:-.03em; white-space:nowrap;
  font-size:clamp(1.5rem,7.4vw,5.6rem);
}
.footmark__t--dry{
  color:rgba(255,255,255,.16);
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(var(--fwl) - 12px), transparent calc(var(--fwl) + 12px));
  mask-image:linear-gradient(to bottom, #000 calc(var(--fwl) - 12px), transparent calc(var(--fwl) + 12px));
}
/* the submerged half sits exactly on top of the first, then is masked the
   other way, so the two halves line up letter for letter */
.footmark__t--wet{
  position:absolute; inset:0 var(--gutter);
  color:rgba(148,219,246,.20);
  filter:blur(2.2px);
  -webkit-mask-image:linear-gradient(to bottom, transparent calc(var(--fwl) - 12px), #000 calc(var(--fwl) + 12px));
  mask-image:linear-gradient(to bottom, transparent calc(var(--fwl) - 12px), #000 calc(var(--fwl) + 12px));
  animation:footrefract 5.4s ease-in-out infinite alternate;
}
@keyframes footrefract{
  from{ transform:translate3d(-2px,0,0) skewX(.28deg) scaleX(1.003) }
  to  { transform:translate3d(2px,0,0)  skewX(-.28deg) scaleX(1.012) }
}
/* the surface line itself, drifting the way every tinted band does */
.footmark__surf{
  position:absolute; left:0; right:0; top:var(--fwl); height:2px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(148,219,246,.42) 18%, rgba(148,219,246,.52) 52%, rgba(148,219,246,.30) 84%, transparent);
  animation:foottide 17s ease-in-out infinite alternate;
}
@keyframes foottide{
  from{ transform:translate3d(-3%,0,0) }
  to  { transform:translate3d(3%,0,0) }
}
@media (max-width:620px){ .footmark{ --fwl:56%; } }
@media (prefers-reduced-motion:reduce){
  .footmark__t--wet, .footmark__surf{ animation:none; }
}
/* FOOTER-CSS-END */

/* ============================================================
   MOBILE & RESPONSIVE — comprehensive pass
   Covers all breakpoints not already handled above.
   Organised large-to-small so specificity flows naturally.
   ============================================================ */

/* --- overflow guard: nothing may cause horizontal scroll --- */
html{ overflow-x:clip; }
body{ overflow-x:clip; }

/* --- nav: keep pill fully inside the viewport on any width --- */
@media (max-width:480px){
  .nav__in{
    padding:8px 8px 8px 14px;
    gap:8px;
  }
  .logo{ height:22px; }
}

/* --- hero (service pages): comfortable on very small phones --- */
@media (max-width:480px){
  .hero{ min-height:clamp(340px,72vw,440px); }
  .hero__in{ padding-top:100px; padding-bottom:clamp(28px,5vw,40px); }
  .hero__sub{ font-size:.98rem; }
  .hero__cta{ flex-direction:column; align-items:flex-start; }
  .hero__cta .btn{ width:100%; justify-content:center; }
}

/* --- section vertical spacing: tighter on phones --- */
@media (max-width:480px){
  .sec{ padding-block:clamp(48px,8vw,80px); }
}

/* --- booking bar: safe-area bottom + stack text on small screens --- */
@media (max-width:480px){
  .bookbar{
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
    flex-wrap:wrap;
    gap:.6rem;
    padding:.75rem 1rem;
    border-radius:20px;
  }
  .bookbar .btn{ width:100%; }
  .bookbar__x{
    position:absolute; top:10px; right:10px;
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
  }
}
/* bookbar dismiss button always 44px */
.bookbar__x{ min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; }

/* --- accordion: full-width tap target, adequate height --- */
.acc__btn{ min-height:52px; }
.acc__pl{ width:36px; height:36px; }

/* --- stage explorer: pins meet 44px on mobile --- */
@media (max-width:760px){
  .stg{ min-width:80px; }
  .stg__pin{ width:44px; height:44px; }
  .stagepanel{ min-height:0; }
  .stagepanel__art{ display:none; }
}

/* --- GP rail: cards full-width on very small screens --- */
@media (max-width:400px){
  .rail__track{ gap:10px; padding-bottom:16px; }
  .gp{ flex:0 0 calc(100vw - 2*var(--gutter) - 4px); }
}

/* --- GP filter bar: wrap gracefully --- */
.gpbar{ row-gap:.7rem; }
@media (max-width:560px){
  .gpbar{ flex-direction:column; align-items:flex-start; }
  .seg{ width:100%; }
  .seg button{ flex:1 1 auto; }
  .gpcount{ margin-left:0; }
}

/* --- services switchboard: already handled at 900px; add 400px pass --- */
@media (max-width:400px){
  .sw__tab{ padding:.55rem .7rem .55rem .55rem; gap:.5rem; }
  .sw__n{ width:28px; height:28px; border-radius:8px; font-size:.72rem; }
  .sw__t b{ font-size:.82rem; }
}
/* sw navigation arrows: always 44px */
.sw__arrow{ width:44px; height:44px; }

/* --- cost estimator: stack on mobile --- */
@media (max-width:680px){
  .cost{ grid-template-columns:1fr; }
  .costsw{ width:100%; justify-content:space-between; }
  .costsw button{ flex:1; text-align:center; }
}
/* costsw (Medicare switch on cost estimator) minimum tap size */
.costsw button{ min-height:44px; }

/* --- promise / about section image: hide decorative art on phones --- */
@media (max-width:480px){
  .promise__art .bloom--a,
  .promise__art .bloom--b{ display:none; }
}

/* --- screenfacts (3-column strip) already collapses at 1040px ---
   ensure numbers aren't clipped on 320px */
@media (max-width:360px){
  .screenfacts b{ font-size:clamp(1.4rem,9vw,2rem); }
}

/* --- close / CTA band: stack buttons on mobile --- */
@media (max-width:480px){
  .close__cta{ flex-direction:column; align-items:center; }
  .close__cta .btn{ width:100%; justify-content:center; max-width:320px; }
}

/* --- footer links: increase tap targets --- */
.foot a{
  display:inline-block;
  min-height:32px;
  line-height:2;
}
@media (max-width:480px){
  .foot ul{ gap:.55rem; }
  .foot a{ min-height:44px; line-height:2.6; }
  .foot__fine p{ font-size:.8rem; }
}

/* --- sub-12px label clamp: no text smaller than 12px visible --- */
.num__k,
.num__hint,
.gp__role,
.gp__qual,
.gp__tag,
.flip__hint,
.flip__back,
.sw__count,
.sw__tag,
.acc__ix,
.cc__sub,
.cc__here,
.stamp,
.receipt__for,
.meter__lbl,
.stagepanel__age,
.stagenav small,
.choice__tag,
.screenfacts span{ font-size:max(.72rem, 12px); }

/* --- fq (FAQ) question button: adequate tap target --- */
.fq__q{ min-height:52px; align-items:center; }

/* --- modal on mobile: full-screen friendly --- */
@media (max-width:680px){
  .modal__box{
    border-radius:20px 20px 0 0;
    max-height:96vh;
    align-self:flex-end;
  }
  .modal__ph{ height:180px; }
}

/* --- facts3 flip cards: single column already at 860px;
   make each card shorter on phones --- */
@media (max-width:480px){
  .facts3 .f3{ height:auto; min-height:180px; }
}

/* --- nums (expanding fact cards): single column already at 540px;
   keep cards a comfortable height --- */
@media (max-width:540px){
  .num{ min-height:180px; }
}

/* --- confirm callout: icon + text don't wrap awkwardly --- */
@media (max-width:400px){
  .confirm{ flex-direction:column; gap:.6rem; }
  .confirm svg{ flex:none; }
}

/* --- bookbar: hide text on very small screens to avoid wrapping --- */
@media (max-width:360px){
  .bookbar p{ display:none; }
  .bookbar{ justify-content:center; padding:.6rem; }
  .bookbar .btn{ margin-left:0; }
}

/* ============================================================
   PRINT: hide everything non-essential (already partly covered)
   ============================================================ */
/* ============================================================
   TARGETED FIXES — hero button arrow, profile popup, sheet btn
   ============================================================ */

/* Image 4 fix: hero CTA button arrow must not overwhelm the text */
.hero__cta .btn svg,
.btn svg{
  width:18px; height:18px; flex:none;
}

/* Profile popup (Image 5): stack to single column on mobile */
@media (max-width:680px){
  .profile__box{
    grid-template-columns:1fr;
    max-height:96dvh;
    border-radius:20px 20px 0 0;
    align-self:flex-end;
    width:100%;
    overflow-y:auto;
  }
  .profile__pic{
    min-height:220px;
    height:220px;
  }
  .profile__pic img{ height:220px; }
  .profile__body{ padding:1.25rem; }
  .profile__meta{ grid-template-columns:1fr; gap:10px; }
  .profile__x{ top:10px; right:10px; }
}

/* Sheet Book-an-Appointment btn: full width, centred on all inner pages */
.sheet .btn{
  width:100%;
  justify-content:center;
  margin-top:1rem;
  border-bottom:0 !important;
}

/* Sheet sub-links for services (indented) */
.sheet__sub{
  padding-left:1.1rem;
  font-size:clamp(.8rem,3vw,.9rem) !important;
  color:rgba(255,255,255,.72) !important;
  border-bottom-color:rgba(255,255,255,.06) !important;
  min-height:40px !important;
  font-weight:500 !important;
}
.sheet__sub::before{ content:"–"; margin-right:.45rem; opacity:.45; }