/* =====================================================================
   Physiotrix — Design System
   Minimalist, medical-premium. Teal healing palette + warm accent.
   ===================================================================== */
:root{
  /* Brand palette — World Physiotherapy inspired (blue + teal + lime).
     The --teal-* names are kept as the PRIMARY ramp but now hold BLUE
     values, so the whole UI re-themes from one place. Real teal lives in
     --heal-* (healing accents / spine) and the accent colour is --lime. */
  --teal-900:#0a1f63; --teal-800:#12329c; --teal-700:#1b45d6; --teal-600:#2358ef;
  --teal-500:#3f6dff; --teal-300:#9fb7ff; --teal-100:#dce4ff; --teal-50:#eef3ff;
  --heal-700:#0f766e; --heal-500:#14b8a6; --heal-300:#5eead4;
  --lime:#cddc39; --lime-600:#aec326;
  --ink:#0e1430; --ink-2:#37406b; --muted:#5c6788; --line:#e4e8f5;
  --bg:#ffffff; --bg-tint:#f4f7ff; --bg-deep:#0a1330;
  --amber:#f5a524; --coral:#ff7a59;
  --radius:10px; --radius-sm:8px; --radius-lg:14px;
  --shadow-sm:0 1px 2px rgba(6,40,38,.06),0 4px 14px rgba(6,40,38,.05);
  --shadow:0 10px 30px -12px rgba(6,40,38,.18),0 4px 10px rgba(6,40,38,.05);
  --shadow-lg:0 30px 60px -22px rgba(6,40,38,.28);
  /* Libre Franklin applied site-wide (headings + body). */
  --font-body:'Libre Franklin',Arial,system-ui,-apple-system,Segoe UI,sans-serif;
  --font-head:'Libre Franklin',Arial,system-ui,-apple-system,Segoe UI,sans-serif;
  --maxw:1360px; --gutter:clamp(20px,4vw,44px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);
  font-size:clamp(16px,1.05vw,17px);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.12;letter-spacing:-.02em;color:var(--ink);margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--teal-500);outline-offset:2px;border-radius:4px}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--teal-700);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
em{font-style:italic;color:var(--teal-700)}
.grad-text{background:linear-gradient(120deg,var(--heal-500),var(--teal-600) 55%,var(--teal-800));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-weight:700;font-size:.98rem;padding:.85em 1.5em;border-radius:var(--radius-sm);border:1.5px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s;white-space:nowrap}
/* flex:0 0 auto — without it a long label shrinks the icon to ~1px
   (seen on the mobile menu's "Call Ballygunge" button). */
.btn svg{width:1.15em;height:1.15em;flex:0 0 auto}
.btn--primary{background:linear-gradient(120deg,var(--teal-600),var(--teal-800));color:#fff;box-shadow:0 10px 22px -8px rgba(15,118,110,.6)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(15,118,110,.7)}
.btn--ghost{background:rgba(255,255,255,.7);color:var(--teal-800);border-color:var(--line);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:#fff;border-color:var(--teal-300);transform:translateY(-2px)}
.btn--outline{background:transparent;color:var(--teal-700);border-color:var(--teal-300)}
.btn--outline:hover{background:var(--teal-50);transform:translateY(-2px)}
.btn--lg{padding:1.05em 1.9em;font-size:1.05rem}
.btn--sm{padding:.62em 1.15em;font-size:.9rem}
.btn--block{width:100%}

/* ---------- Topbar ---------- */
.topbar{background:var(--bg-deep);color:#bfeee6;font-size:.82rem}
.topbar__inner{display:flex;align-items:center;gap:18px;height:40px}
.topbar__item{display:inline-flex;align-items:center;gap:7px;color:#a9e6dd}
.topbar__item svg{width:15px;height:15px;opacity:.85}
.topbar__phone{font-weight:700;color:#fff}
.topbar__phones{margin-left:auto;display:flex;align-items:center;gap:18px}
.topbar__phones .topbar__phone:hover{color:var(--lime)}
.topbar__phone-area{font-weight:600;color:#a9e6dd}
.topbar__sep{width:1px;height:16px;background:rgba(255,255,255,.16)}
@media(max-width:900px){.topbar__item:not(.topbar__phone){display:none}.topbar__sep{display:none}
  .topbar__phones{margin:0;gap:16px}.topbar__inner{justify-content:center}.topbar{font-size:.78rem}}
/* Below this the two numbers no longer fit side by side — and they are
   already permanently on screen in the fixed .cta-dock, so drop the bar. */
@media(max-width:720px){.topbar{display:none}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.82);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent;transition:box-shadow .3s,border-color .3s,background .3s}
.site-header.is-scrolled{box-shadow:var(--shadow-sm);border-color:var(--line)}
.site-header__inner{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:1.4rem;font-weight:600}
.brand__mark{width:34px;height:34px;display:grid;place-items:center;filter:drop-shadow(0 6px 10px rgba(15,118,110,.35))}
.brand__text span{color:var(--teal-600)}
.brand__logo{height:44px;width:auto;display:block}
@media(max-width:560px){.brand__logo{height:38px}}
.nav{margin-left:auto}
.nav__list{display:flex;gap:6px;align-items:center}
.nav__link{position:relative;display:inline-flex;align-items:center;padding:.55em .9em;
  border-radius:999px;font-weight:600;font-size:.96rem;line-height:1.2;color:var(--ink-2);
  transition:color .2s,background .2s}
.nav__link:hover{color:var(--teal-800);background:var(--teal-50)}
.nav__link.is-active{color:var(--teal-800)}
.nav__link.is-active::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--lime)}
.site-header__cta{display:flex}
.nav-toggle{display:none;margin-left:auto;flex-direction:column;gap:5px;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:10px}
.nav-toggle span{height:2.5px;background:var(--ink);border-radius:2px;transition:.3s}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mobile-nav{padding:12px var(--gutter) 26px;border-top:1px solid var(--line);background:#fff;display:grid;gap:8px}
.mobile-nav[hidden]{display:none}
.mobile-nav ul{display:grid;gap:2px;margin-bottom:10px}
.mobile-nav ul a{display:block;padding:.85em .6em;font-weight:600;font-size:1.05rem;border-radius:6px}
.mobile-nav ul a:hover{background:var(--teal-50)}
@media(max-width:900px){.nav,.site-header__cta{display:none}.nav-toggle{display:flex}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(120% 90% at 82% 8%,#e6ecff 0%,#f3f6ff 42%,#ffffff 72%);
  padding:clamp(44px,7vw,88px) 0 clamp(64px,9vw,110px);isolation:isolate}
/* animated ambient background */
.hero__bg{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.hero__orb{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55;will-change:transform}
.hero__orb--1{width:46vw;max-width:560px;height:46vw;max-height:560px;top:-14%;right:-6%;
  background:radial-gradient(circle,rgba(20,184,166,.42),transparent 66%);animation:floaty 9s ease-in-out infinite}
.hero__orb--2{width:34vw;max-width:420px;height:34vw;max-height:420px;bottom:-18%;left:-8%;
  background:radial-gradient(circle,rgba(63,109,255,.34),transparent 66%);animation:floaty 12s ease-in-out infinite reverse}
.hero__orb--3{width:20vw;max-width:260px;height:20vw;max-height:260px;top:44%;left:42%;
  background:radial-gradient(circle,rgba(205,220,57,.3),transparent 64%);animation:floaty 7.5s ease-in-out infinite}
.hero__mesh{position:absolute;right:2%;top:6%;width:min(46vw,540px);height:min(46vw,540px);opacity:.7;
  animation:spin-slow 60s linear infinite;transform-origin:center}

.hero__inner{position:relative;min-height:min(74vh,640px);display:grid;grid-template-columns:1.05fr .95fr;
  align-items:center;gap:clamp(24px,4vw,60px)}
.hero__content{max-width:640px}
/* staggered entrance */
.hero__eyebrow,.hero__title,.hero__lead,.hero__actions,.hero__badges,.hero__visual{
  opacity:0;animation:heroIn .85s var(--ease) forwards;animation-delay:var(--d,0s)}
.hero__eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-700);background:rgba(255,255,255,.7);border:1px solid var(--teal-100);padding:.5em 1em;border-radius:999px;box-shadow:var(--shadow-sm)}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(205,220,57,.6);animation:pulse 2s infinite}
.hero__title{font-size:clamp(2.5rem,6.2vw,4.4rem);font-weight:600;margin:.5em 0 .35em;letter-spacing:-.02em}
.hero__lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-2);max-width:38ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin:2em 0 1.6em}
.hero__badges{display:flex;flex-wrap:wrap;gap:10px 20px;color:var(--ink-2);font-weight:600;font-size:.92rem}
.hero__badges li{display:inline-flex;align-items:center;gap:8px}
.hero__badges svg{width:18px;height:18px;color:var(--teal-600)}

/* ---- framed healing visual ---- */
.hero__visual{position:relative;justify-self:center;width:min(100%,490px);aspect-ratio:1/1.04;isolation:isolate}
/* two-photo collage */
.hero__collage{position:absolute;inset:0}
.hero__photo{margin:0;position:absolute;overflow:hidden;border-radius:14px;background:#eef3ff}
.hero__photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero__photo--main{inset:2% 15% 14% 0;box-shadow:0 44px 84px -30px rgba(10,31,99,.5)}
.hero__photo--main img{object-position:50% 22%}
.hero__photo--sub{width:53%;aspect-ratio:1/1.08;right:0;bottom:0;border-radius:12px;border:6px solid #fff;
  box-shadow:0 26px 52px -22px rgba(10,31,99,.5);animation:bob 7s ease-in-out infinite}
.hero__photo--sub img{object-position:50% 40%}

/* floating glass cards */
.hero__float{position:absolute;z-index:3;background:rgba(255,255,255,.9);backdrop-filter:saturate(160%) blur(12px);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 20px 44px -18px rgba(10,31,99,.4);border-radius:9px;
  animation:bob 6s ease-in-out infinite}
.hero__float--rating{top:9%;left:-6%;padding:12px 16px;text-align:left;animation-delay:.4s}
.hero__float--rating .hero__float-stars{display:flex;gap:1px}
.hero__float--rating svg{width:14px;height:14px;color:var(--amber);fill:var(--amber);stroke:var(--amber)}
.hero__float--rating strong{display:block;font-size:1.5rem;font-weight:800;line-height:1.1;color:var(--ink);letter-spacing:-.02em}
.hero__float--rating strong span{font-size:.9rem;font-weight:600;color:var(--muted)}
.hero__float--rating small{color:var(--muted);font-size:.76rem;font-weight:600}
/* Contact card: heading row, then one pinned row per clinic. */
.hero__float--contact{top:-2%;right:-4%;display:flex;flex-direction:column;gap:9px;padding:12px 16px;animation-delay:1.1s}
.hero__contact-head{display:flex;align-items:center;gap:10px}
.hero__contact-head small{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.hero__contact-ico{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--teal-500),var(--teal-800));color:#fff}
.hero__contact-ico svg{width:17px;height:17px}
.hero__contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hero__contact-item{display:flex;align-items:center;gap:9px}
.hero__contact-pin{flex:0 0 auto;width:20px;height:20px;display:grid;place-items:center;color:var(--teal-700)}
.hero__contact-pin svg{width:16px;height:16px}
.hero__contact-txt{display:flex;flex-direction:column;line-height:1.2}
.hero__contact-txt small{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.hero__contact-txt a{font-size:.97rem;font-weight:800;color:var(--ink);white-space:nowrap}
.hero__contact-txt a:hover{color:var(--teal-700)}

.hero__scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero__scroll span{width:22px;height:34px;border:2px solid var(--teal-300);border-radius:8px;position:relative}
.hero__scroll span::after{content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);width:4px;height:7px;border-radius:2px;background:var(--teal-500);animation:scrolldot 1.8s infinite}

/* ---- Hero quick appointment form ---- */
.hero__appt-wrap{position:relative;margin-top:clamp(30px,4.5vw,52px)}
.appt{position:relative;overflow:hidden;border-radius:var(--radius-lg);
  padding:clamp(20px,2.6vw,30px) clamp(20px,2.8vw,34px);
  background:
    radial-gradient(130% 180% at 0% 0%,rgba(20,184,166,.42),transparent 55%),
    linear-gradient(120deg,var(--teal-700),var(--teal-900));
  box-shadow:0 34px 70px -26px rgba(10,31,99,.55),inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;animation:heroIn .85s var(--ease) .62s forwards}
.appt__head{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:1.06rem;margin-bottom:16px}
.appt__head svg{width:20px;height:20px;color:var(--heal-300)}
.appt__fields{display:grid;grid-template-columns:1.25fr 1fr 1fr auto;gap:18px;align-items:end}
.appt__field label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.78);margin-bottom:7px}
.appt__field input{width:100%;font:inherit;color:#fff;background:transparent;border:0;border-bottom:2px solid rgba(255,255,255,.32);
  padding:.55em .15em;transition:border-color .25s;border-radius:0}
.appt__field input::placeholder{color:rgba(255,255,255,.68)}
.appt__field input:focus{outline:none;border-bottom-color:#fff}
.appt__field input[type=date]{color-scheme:dark}
.appt__btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;white-space:nowrap;cursor:pointer;
  font:inherit;font-weight:800;color:var(--teal-800);background:#fff;border:0;border-radius:var(--radius-sm);
  padding:.92em 1.7em;box-shadow:0 12px 26px -10px rgba(0,0,0,.4);transition:transform .22s var(--ease),box-shadow .22s,color .2s}
.appt__btn svg{width:1.05em;height:1.05em}
.appt__btn:hover:not(:disabled){transform:translateY(-2px);color:var(--teal-900);box-shadow:0 18px 34px -12px rgba(0,0,0,.5)}
.appt__btn:disabled{opacity:.7;cursor:progress}
.appt__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* messages + success state */
.appt__msg{margin-top:16px;padding:12px 16px;border-radius:8px;font-weight:600;font-size:.95rem;
  display:flex;align-items:center;gap:10px}
.appt__msg[hidden]{display:none}
.appt__msg--ok{background:rgba(94,234,212,.16);border:1px solid rgba(94,234,212,.55);color:#eafffb}
.appt__msg--err{background:rgba(255,122,89,.16);border:1px solid rgba(255,122,89,.6);color:#ffe4db}
.appt__msg-ico{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--heal-500);color:#05231f}
.appt__msg-ico svg{width:15px;height:15px}
.appt.is-sent{padding:clamp(26px,3.4vw,38px) clamp(20px,2.8vw,34px)}
.appt.is-sent .appt__head,.appt.is-sent .appt__fields{display:none}
.appt.is-sent .appt__msg{margin-top:0;font-size:1.06rem}
@media(max-width:860px){
  .appt__fields{grid-template-columns:1fr 1fr;gap:16px 18px}
  .appt__btn{grid-column:1 / -1;width:100%;margin-top:2px}
}
@media(max-width:520px){.appt__fields{grid-template-columns:1fr}}

/* Tablet & down: stack into one centered column */
@media(max-width:980px){
  .hero{padding-bottom:clamp(48px,7vw,80px)}
  .hero__inner{grid-template-columns:1fr;min-height:auto;text-align:center;gap:clamp(28px,5vw,48px)}
  .hero__content{max-width:640px;margin-inline:auto;order:1}
  .hero__eyebrow{display:none}          /* eyebrow label: desktop only */
  .hero__lead{margin-inline:auto;max-width:54ch}
  .hero__actions,.hero__badges{justify-content:center}
  .hero__visual{order:2;width:min(84vw,400px)}
  .hero__mesh{opacity:.4}
  .hero__scroll{display:none}
}
@media(max-width:560px){
  .hero__visual{width:min(90vw,340px)}
  .hero__float--rating{left:-2%}
  .branch-hero .hero__float--rating{left:auto;right:-2%}
  .hero__float--contact{right:-2%}
  .hero__float--rating strong{font-size:1.25rem}
  .hero__contact-txt a{font-size:.92rem}
}
@media(prefers-reduced-motion:reduce){
  .hero__eyebrow,.hero__title,.hero__lead,.hero__actions,.hero__badges,.hero__visual{opacity:1;animation:none}
  .hero__orb,.hero__mesh,.hero__float,.hero__photo--sub{animation:none}
  .appt{opacity:1;animation:none}
}

/* ---------- Stats / results panel ---------- */
.statbar{position:relative;z-index:3}
.statbar--overlap{margin-top:-52px}
.statbar__panel{position:relative;overflow:hidden;border-radius:var(--radius-lg);
  padding:clamp(28px,3.6vw,42px) clamp(6px,0.8vw,12px);
  background:
    radial-gradient(120% 140% at 12% -10%,rgba(20,184,166,.34),transparent 55%),
    linear-gradient(135deg,#0a1f63 0%,#173db0 52%,#0a1c58 100%);
  border:1px solid rgba(94,234,212,.16);
  box-shadow:0 34px 70px -26px rgba(6,40,38,.6),inset 0 1px 0 rgba(255,255,255,.05)}
/* moving light sweep */
.statbar__panel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,rgba(126,255,230,.10) 50%,transparent 58%);
  transform:translateX(-120%);animation:sweep 7.5s ease-in-out infinite}
/* soft floating glow blobs */
.statbar__glow{position:absolute;border-radius:50%;filter:blur(14px);pointer-events:none;opacity:.5}
.statbar__glow--a{width:260px;height:260px;top:-120px;right:8%;background:radial-gradient(circle,rgba(94,234,212,.5),transparent 65%);animation:floaty 8s ease-in-out infinite}
.statbar__glow--b{width:220px;height:220px;bottom:-130px;left:4%;background:radial-gradient(circle,rgba(20,184,166,.45),transparent 65%);animation:floaty 10s ease-in-out infinite reverse}
/* ECG heartbeat line */
.statbar__ecg{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);width:100%;height:90px;pointer-events:none;opacity:.9}
.statbar__ecg path{fill:none;stroke:rgba(126,255,230,.55);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:140 1400;filter:drop-shadow(0 0 6px rgba(126,255,230,.6));animation:ecg 4.5s linear infinite}

.statbar__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr)}
.statcard{position:relative;text-align:center;padding:16px 18px}
.statcard:not(:last-child)::after{content:"";position:absolute;right:0;top:16%;height:68%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(94,234,212,.3),transparent)}
.statcard__icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 16px;border-radius:9px;
  background:rgba(94,234,212,.1);border:1px solid rgba(94,234,212,.24);color:#7effe6;transition:transform .35s var(--ease),box-shadow .35s,background .35s}
.statcard__icon svg{width:24px;height:24px}
.statcard:hover .statcard__icon{transform:translateY(-4px);background:rgba(94,234,212,.2);box-shadow:0 0 28px -4px rgba(94,234,212,.55)}
.statcard__value{display:inline-flex;align-items:baseline;gap:5px;font-family:var(--font-head);font-weight:800;
  font-size:clamp(2rem,3.7vw,3rem);line-height:1;letter-spacing:-.03em;
  background:linear-gradient(180deg,#ffffff,#b8f2e8);-webkit-background-clip:text;background-clip:text;color:transparent}
.statcard__star{align-self:center}
.statcard__star svg{width:.62em;height:.62em;color:var(--amber);fill:var(--amber);stroke:var(--amber);filter:drop-shadow(0 0 7px rgba(245,165,36,.6))}
.statcard__label{display:block;margin-top:12px;font-size:.9rem;font-weight:600;color:#a9d6cf}
@media(max-width:720px){
  .statbar__grid{grid-template-columns:1fr 1fr;gap:26px 0}
  .statcard:nth-child(2)::after{display:none}
  .statcard:nth-child(1)::before,.statcard:nth-child(2)::before{content:"";position:absolute;left:14%;bottom:-13px;width:72%;height:1px;background:linear-gradient(90deg,transparent,rgba(94,234,212,.28),transparent)}
}
@keyframes sweep{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
@keyframes ecg{to{stroke-dashoffset:-1540}}
@media(prefers-reduced-motion:reduce){
  .statbar__panel::after,.statbar__ecg path,.statbar__glow{animation:none}
}

/* ---------- Why-choose feature band (full-bleed 3-up) ---------- */
.why-band{position:relative;z-index:3}
.why-band__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.why-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:15px;
  padding:clamp(38px,4.4vw,62px) clamp(26px,3vw,52px) clamp(32px,3.6vw,50px)}
.why-card__icon{width:64px;height:64px;border-radius:9px;background:#fff;display:grid;place-items:center;
  box-shadow:0 14px 30px -14px rgba(6,20,48,.5);margin-bottom:4px}
.why-card__icon svg{width:30px;height:30px}
.why-card__title{font-size:clamp(1.35rem,1.9vw,1.7rem);line-height:1.15;font-weight:700}
.why-card__text{font-size:.98rem;line-height:1.6;max-width:34ch;flex:1;opacity:.92}
.why-card__link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.96rem;margin-top:8px}
.why-card__link span{transition:transform .25s var(--ease)}
.why-card__link:hover span{transform:translateX(5px)}
/* top accent tab (echoes the reference blocks) */
.why-card::before{content:"";position:absolute;top:0;left:clamp(26px,3vw,52px);width:60px;height:6px;border-radius:0 0 4px 4px;z-index:2}
/* hover: deepen each card within its OWN colour (overlay fades in) */
.why-card::after{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .4s var(--ease)}
.why-card--blue::after{background:linear-gradient(160deg,#1636b0,#0a2170)}
.why-card--teal::after{background:linear-gradient(160deg,#0f9e8e,#0a5852)}
.why-card--lime::after{background:linear-gradient(160deg,#c6d52a,#a7ba18)}
.why-card__icon,.why-card__title,.why-card__text,.why-card__link{position:relative;z-index:1}
.why-card__icon{transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.why-card:hover::after{opacity:1}
.why-card:hover .why-card__icon{transform:translateY(-6px);box-shadow:0 22px 40px -16px rgba(6,20,48,.4)}
/* tones — Physiotrix blue / teal / lime */
.why-card--blue{background:linear-gradient(160deg,#1f4ee0,#12329c);color:#e8eeff}
.why-card--blue .why-card__title{color:#fff}
.why-card--blue .why-card__icon{color:#1b45d6}
.why-card--blue::before{background:var(--lime)}
.why-card--teal{background:linear-gradient(160deg,#17c2ae,#0f766e);color:#eafffb}
.why-card--teal .why-card__title{color:#fff}
.why-card--teal .why-card__icon{color:#0f766e}
.why-card--teal::before{background:rgba(255,255,255,.6)}
.why-card--lime{background:linear-gradient(160deg,#d7e34e,#c3d422);color:#2b3405}
.why-card--lime .why-card__title{color:#1e260a}
.why-card--lime .why-card__icon{color:#5f6c12}
.why-card--lime::before{background:#1b45d6}
@media(max-width:820px){.why-band__grid{grid-template-columns:1fr}}

/* ---------- Section scaffolding ---------- */
.section{padding:clamp(60px,9vw,112px) 0}
.section--tint{background:var(--bg-tint)}
.section--deep{background:var(--bg-deep);color:#dff3ef}
.section__head{max-width:660px;margin:0 auto clamp(36px,5vw,56px);text-align:center}
.section__head--left{margin-inline:0;text-align:left}
.section__eyebrow{font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-600);margin-bottom:.6em}
.section__title{font-size:clamp(1.9rem,3.8vw,2.9rem);font-weight:700}
/* Single-line section titles, but not from 768px: the longest branch
   heading ("Home visit physiotherapy across South-West Kolkata") needs
   ~742px of text and the container only offers ~707px there, so it broke
   out of the page. 900px is the first width where it fits. */
@media(min-width:900px){.section__title{white-space:nowrap}
  .section__head:not(.section__head--left) .section__title{width:max-content;position:relative;left:50%;transform:translateX(-50%)}}
.section__sub{margin-top:.9em;color:var(--ink-2);font-size:1.08rem}
.section__foot{text-align:center;margin-top:clamp(30px,4vw,46px)}

/* ---------- Cards / services ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.cards--auto{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;position:relative;overflow:hidden}
.card--compact{padding:22px 22px}
.card--compact .card__icon{width:46px;height:46px;margin-bottom:13px}
.card--compact .card__title{font-size:1.1rem}
.card--compact .card__text{margin-bottom:0}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--teal-500),var(--teal-300));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:8px;background:linear-gradient(135deg,var(--teal-50),var(--teal-100));color:var(--teal-700);margin-bottom:16px}
.card__icon svg{width:26px;height:26px}
.card__title{font-size:1.22rem;font-weight:600;margin-bottom:.5em}
.card__text{color:var(--muted);font-size:.96rem;margin-bottom:1em}
.card__points{display:grid;gap:7px}
.card__points li{display:flex;gap:8px;align-items:flex-start;font-size:.9rem;color:var(--ink-2);font-weight:600}
.card__points svg{width:16px;height:16px;color:var(--teal-500);flex:0 0 auto;margin-top:3px}

/* ---------- Process ---------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
@media(max-width:900px){.process{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.process{grid-template-columns:1fr}}
.process__step{position:relative;padding:28px 22px;background:#fff;border-radius:var(--radius);border:1px solid var(--line)}
.process__num{font-family:var(--font-head);font-size:2.4rem;font-weight:600;color:var(--teal-200,#9be3d7);line-height:1;background:linear-gradient(120deg,var(--teal-400,#2dd4bf),var(--teal-600));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.55}
.process__title{font-size:1.15rem;font-weight:600;margin:.5em 0 .4em}
.process__text{color:var(--muted);font-size:.94rem}

/* ---------- Why / split ---------- */
.why{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,64px);align-items:center}
@media(max-width:900px){.why{grid-template-columns:1fr}}
.why__media{position:relative}
.why__card{position:relative;background:linear-gradient(160deg,var(--teal-700),var(--teal-900));color:#eafffb;border-radius:var(--radius-lg);padding:clamp(28px,4vw,44px);overflow:hidden;box-shadow:var(--shadow-lg)}
.why__card h3{color:#fff;font-size:1.5rem;margin-bottom:.4em}
.why__card p{color:#bfeee6}
.why__card ul{margin-top:1.4em;display:grid;gap:11px}
.why__card li{display:flex;gap:10px;align-items:center;font-weight:600}
.why__card svg{width:18px;height:18px;color:var(--teal-300)}
.why__pulse{position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(94,234,212,.5),transparent 65%);animation:floaty 7s ease-in-out infinite}
.why__content h2{margin-bottom:.5em}
.ticklist{display:grid;gap:13px;margin:1.5em 0 1.8em}
.ticklist li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-2)}
.ticklist svg{width:20px;height:20px;color:var(--teal-500);flex:0 0 auto;margin-top:3px}

/* ---------- Reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.reviews{grid-template-columns:1fr}}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow-sm)}
.review__stars{display:flex;gap:2px;margin-bottom:12px}
.review__stars svg{width:18px;height:18px;color:var(--amber);fill:var(--amber);stroke:var(--amber)}
.review blockquote{margin:0 0 16px;font-size:1.02rem;color:var(--ink-2);line-height:1.6}
.review figcaption{display:flex;flex-direction:column}
.review figcaption strong{color:var(--ink)}
.review figcaption span{font-size:.85rem;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,56px);align-items:start}
@media(max-width:860px){.faq{grid-template-columns:1fr}}
.faq__list{display:grid;gap:12px}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;transition:border-color .25s,box-shadow .25s}
.faq__item[open]{border-color:var(--teal-300);box-shadow:var(--shadow)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font-weight:700;font-size:1.02rem;color:var(--ink)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary i{position:relative;width:18px;height:18px;flex:0 0 auto}
.faq__item summary i::before,.faq__item summary i::after{content:"";position:absolute;background:var(--teal-600);border-radius:2px;transition:transform .3s}
.faq__item summary i::before{left:0;top:8px;width:18px;height:2.5px}
.faq__item summary i::after{left:8px;top:0;width:2.5px;height:18px}
.faq__item[open] summary i::after{transform:scaleY(0)}
.faq__answer{padding:0 20px 20px;color:var(--muted)}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg,var(--teal-800),var(--teal-900));color:#eafffb;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;left:-10%;bottom:-60%;width:50vw;height:50vw;max-width:560px;max-height:560px;background:radial-gradient(circle,rgba(94,234,212,.25),transparent 60%)}
.cta-band__inner{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:clamp(40px,6vw,68px) 0;flex-wrap:wrap;position:relative}
.cta-band__title{color:#fff;font-size:clamp(1.7rem,3.2vw,2.5rem)}
.cta-band__text{color:#bfeee6;max-width:46ch;margin-top:.5em}
.cta-band__actions{display:flex;gap:14px;flex-wrap:wrap}
.cta-band .btn--ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28)}
.cta-band .btn--ghost:hover{background:rgba(255,255,255,.2)}

/* ---------- Footer (light) ---------- */
.site-footer{position:relative;overflow:hidden;background:linear-gradient(180deg,#ffffff,var(--bg-tint));color:var(--ink-2);font-size:.95rem;border-top:1px solid var(--line)}
.site-footer__top{display:grid;grid-template-columns:1.5fr 1.35fr 1fr;gap:clamp(30px,5vw,60px);padding:clamp(48px,6vw,80px) 0 clamp(30px,4vw,44px)}
@media(max-width:900px){.site-footer__top{grid-template-columns:1fr 1fr}.site-footer__brand{grid-column:1 / -1}}
@media(max-width:620px){.site-footer__top{grid-template-columns:1fr}}
.brand--footer{font-size:1.35rem}
.brand--footer .brand__logo{height:46px}
.site-footer__desc{margin:16px 0 24px;max-width:40ch;color:var(--muted)}
.site-footer__head{color:var(--teal-700);font-family:var(--font-head);font-weight:700;font-size:1.1rem;margin-bottom:18px}
/* newsletter */
.site-footer__news-head{font-size:1.15rem;font-weight:700;color:var(--ink);margin-bottom:14px}
.newsletter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px;max-width:440px;box-shadow:var(--shadow-sm)}
/* 16px minimum: the footer sits at .95rem, and iOS Safari zooms the whole
   page in when a focused input is under 16px. */
.newsletter input{flex:1;min-width:150px;border:0;background:transparent;font:inherit;
  font-size:16px;padding:.72em 1.1em;color:var(--ink)}
.newsletter input::placeholder{color:var(--muted)}
.newsletter input:focus{outline:none}
.newsletter button{flex:0 0 auto;background:var(--lime);color:#2b3405;font:inherit;font-weight:800;border:0;border-radius:calc(var(--radius-sm) - 4px);padding:.72em 1.5em;cursor:pointer;transition:transform .22s var(--ease),background .22s,box-shadow .22s}
.newsletter button:hover:not(:disabled){background:var(--lime-600);transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(174,195,38,.7)}
.newsletter__msg{flex-basis:100%;margin:2px 6px 0;font-size:.86rem;font-weight:600}
.newsletter__msg[hidden]{display:none}
.newsletter__msg--ok{color:var(--heal-700)}
.newsletter__msg--err{color:#c0392b}
/* menu pages */
.site-footer__menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.site-footer__menu-cols ul{display:grid;gap:13px;align-content:start}
.site-footer__menu-cols a{display:inline-flex;align-items:center;gap:11px;color:var(--ink-2);font-weight:500;transition:color .2s,gap .2s}
.site-footer__menu-cols a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal-300);flex:0 0 auto;transition:background .2s}
.site-footer__menu-cols a:hover{color:var(--teal-700);gap:14px}
.site-footer__menu-cols a:hover::before{background:var(--lime)}
/* address */
.site-footer__contact address{font-style:normal;display:grid;gap:8px;color:var(--ink-2)}
.site-footer__branch{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.site-footer__branch:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.site-footer__branch-name{font-weight:800;font-size:1rem}
.site-footer__branch-name a{color:var(--teal-700)}
.site-footer__branch-name a:hover{color:var(--teal-800)}
.site-footer__contact p{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:.9rem}
.site-footer__contact a:hover{color:var(--teal-700)}
.site-footer__contact svg{width:16px;height:16px;color:var(--teal-600);flex:0 0 auto;margin-top:3px}
/* giant wordmark */
.site-footer__wordmark{font-family:var(--font-head);font-weight:800;text-align:center;line-height:.82;
  font-size:clamp(3.4rem,21vw,17rem);letter-spacing:-.04em;white-space:nowrap;user-select:none;pointer-events:none;
  color:transparent;background:linear-gradient(180deg,rgba(35,88,239,.13),rgba(20,184,166,.09));-webkit-background-clip:text;background-clip:text;
  padding-top:clamp(16px,2vw,24px)}
/* bottom bar */
.site-footer__bottom{border-top:1px solid var(--line)}
.site-footer__bottom-inner{display:flex;justify-content:space-between;gap:14px;padding:20px 0;flex-wrap:wrap;font-size:.86rem;color:var(--muted)}
.site-footer__made{font-weight:600}
.site-footer__credit{margin:0;font-weight:500}
.site-footer__credit span{font-weight:700;color:var(--ink-2)}
.site-footer__social{display:flex;gap:20px}
.site-footer__social a{color:var(--ink-2);font-weight:600;transition:color .2s}
.site-footer__social a:hover{color:var(--teal-700)}

/* ---------- Always-on contact dock (one group per clinic) ----------
   A frosted card fixed bottom-right, matching the hero's floating glass cards.
   Hierarchy over noise: calling is the primary action so it alone gets a solid
   fill and carries the number; WhatsApp and Directions sit beside it as quiet
   tinted squares. An earlier pass gave all three equal saturated fills, which
   read as a toolbar of clashing chips and fought the blue/teal palette.
   The clinic is named by the heading + coloured dot, never by button colour.
   Mobile: the card flattens into a bar pinned to the bottom edge. */
/* Frosted glass: the panel is mostly see-through and earns its legibility from
   a heavy backdrop blur rather than from opacity. The inset top highlight is
   what sells the glass — it reads as a lit edge catching the light. */
.cta-dock{position:fixed;right:20px;bottom:20px;z-index:95;
  display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:11px;
  background:rgba(255,255,255,.42);
  backdrop-filter:saturate(190%) blur(22px);
  -webkit-backdrop-filter:saturate(190%) blur(22px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 22px 46px -26px rgba(10,31,99,.42),inset 0 1px 0 rgba(255,255,255,.75)}
/* Dismiss + auto-return. Hidden state is inert (pointer-events, tab order) so
   an invisible dock can never swallow a click or a Tab stop. */
.cta-dock{transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s}
.cta-dock.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(calc(100% + 26px))}
.cta-dock__hide{position:absolute;top:-9px;left:-9px;width:24px;height:24px;padding:0;
  border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:#fff;color:var(--muted);border:1px solid var(--line);
  box-shadow:0 5px 12px -5px rgba(10,31,99,.45);
  transition:background .2s,color .2s,transform .2s var(--ease)}
.cta-dock__hide:hover{background:var(--ink);color:#fff;transform:scale(1.1)}
.cta-dock__hide svg{width:11px;height:11px}
@media(prefers-reduced-motion:reduce){.cta-dock{transition:none}}

.cta-dock__group{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.cta-dock__group+.cta-dock__group{padding-top:12px;border-top:1px solid rgba(10,31,99,.1)}
.cta-dock__title{display:flex;align-items:center;gap:7px;margin:0;
  font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--ink);
  /* light halo — the blur behind does most of the work, this covers the case
     where a dark photo sits directly under the panel */
  text-shadow:0 1px 2px rgba(255,255,255,.8)}
/* Dot, not a pin — the pin icon belongs to Directions and repeating it here
   made the heading look like a third button. */
.cta-dock__dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:var(--teal-600);box-shadow:0 0 0 3px rgba(35,88,239,.14)}
/* nth-of-type, not nth-child: the hide button is the dock's first child, so
   nth-child(2) was landing on the FIRST clinic and swapping the two dots. */
.cta-dock__group:nth-of-type(2) .cta-dock__dot{background:var(--heal-500);box-shadow:0 0 0 3px rgba(20,184,166,.18)}
.cta-dock__btns{display:flex;align-items:stretch;gap:7px}

.cta-dock__call{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:9px;
  padding:10px 13px;border-radius:8px;color:#fff;
  background:linear-gradient(135deg,var(--teal-600),var(--teal-800));
  box-shadow:0 10px 20px -10px rgba(18,50,156,.75);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.cta-dock__call:hover{transform:translateY(-2px);color:#fff;box-shadow:0 15px 26px -10px rgba(18,50,156,.85)}
.cta-dock__call svg{width:16px;height:16px;flex:0 0 auto;opacity:.92}
.cta-dock__num{font-size:.8rem;font-weight:800;white-space:nowrap}
.cta-dock__short{display:none;font-size:.8rem;font-weight:800}

/* Translucent white so the glass reads through them as a second layer. */
.cta-dock__icon{flex:0 0 auto;width:42px;border-radius:8px;display:grid;place-items:center;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 4px 12px -6px rgba(10,31,99,.28);
  transition:transform .22s var(--ease),background .22s var(--ease),color .22s}
.cta-dock__icon svg{width:19px;height:19px}
.cta-dock__icon:hover{transform:translateY(-2px)}
.cta-dock__icon--wa{color:#0d8f47}
.cta-dock__icon--wa:hover{background:#0d8f47;color:#fff}
.cta-dock__icon--map{color:var(--teal-700)}
.cta-dock__icon--map:hover{background:var(--teal-700);color:#fff}

@media(max-width:720px){
  /* flatten into a bottom bar; the two clinic groups sit side by side */
  .cta-dock{left:0;right:0;bottom:0;flex-direction:row;gap:0;border-radius:0;border:0;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.72);border-top:1px solid rgba(255,255,255,.7);
    backdrop-filter:saturate(190%) blur(22px);-webkit-backdrop-filter:saturate(190%) blur(22px);
    box-shadow:0 -10px 30px -18px rgba(10,31,99,.4)}
  /* a full-width bar slides down, not sideways */
  .cta-dock.is-hidden{transform:translateY(100%)}
  /* No dismiss on mobile: the bar is the primary call-to-action on a phone,
     and a 24px target hanging off the bar's edge is a mis-tap waiting to
     happen next to the buttons. display:none also drops it from the
     accessibility tree, so it cannot be reached by keyboard or screen reader
     while it is invisible. */
  .cta-dock__hide{display:none}
  .cta-dock__group{flex:1 1 0;min-width:0;gap:6px;align-items:stretch}
  .cta-dock__title{text-shadow:none}   /* bar has its own background */
  .cta-dock__group+.cta-dock__group{padding-top:0;border-top:0;margin-left:12px;padding-left:12px;border-left:1px solid var(--line)}
  .cta-dock__title{font-size:.6rem;letter-spacing:.07em}
  .cta-dock__btns{gap:6px}
  /* half a phone screen cannot hold the number beside two icon buttons */
  .cta-dock__num{display:none}
  .cta-dock__short{display:inline;font-size:.76rem}
  .cta-dock__call{justify-content:center;padding:9px 10px;gap:7px;border-radius:8px;box-shadow:none}
  .cta-dock__call:hover{transform:none}
  .cta-dock__call svg{width:15px;height:15px}
  .cta-dock__icon{width:38px;border-radius:8px}
  .cta-dock__icon:hover{transform:none}
  .cta-dock__icon svg{width:18px;height:18px}
  /* free the page bottom so the bar never covers content */
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
}

/* Two-line call button used in the CTA band */
.btn--call{padding-top:.6em;padding-bottom:.6em}
.btn__stack{display:grid;line-height:1.2;text-align:left}
.btn__stack-sub{font-size:.78rem;font-weight:600;opacity:.8}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{background:radial-gradient(120% 100% at 80% 0%,#e6ecff,#f3f6ff 60%,#fff);padding:clamp(40px,6vw,72px) 0 clamp(30px,4vw,50px);border-bottom:1px solid var(--line)}
.breadcrumb{display:flex;gap:8px;font-size:.85rem;color:var(--muted);margin-bottom:16px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--teal-700)}
.breadcrumb span{color:var(--teal-700);font-weight:600}
.page-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:600;max-width:16ch}
.page-hero p{margin-top:.8em;color:var(--ink-2);font-size:1.1rem;max-width:56ch}

/* ---------- Prose / About ---------- */
.prose{max-width:70ch;margin-inline:auto}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:1.6em 0 .5em}
.prose h3{font-size:1.25rem;margin:1.4em 0 .4em;font-weight:600}
.prose p{color:var(--ink-2);margin-bottom:1em}
.prose ul.dots{display:grid;gap:10px;margin:1em 0 1.4em}
.prose ul.dots li{display:flex;gap:11px;color:var(--ink-2)}
.prose ul.dots svg{width:19px;height:19px;color:var(--teal-500);flex:0 0 auto;margin-top:3px}

/* ---------- Conditions chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.55em 1.05em;font-weight:600;font-size:.92rem;color:var(--ink-2);transition:.25s}
.chip:hover{border-color:var(--teal-300);color:var(--teal-800);background:var(--teal-50)}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,52px);align-items:start}
@media(max-width:860px){.contact{grid-template-columns:1fr}}
.contact__info{display:grid;gap:18px}
.info-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.info-card__icon{width:44px;height:44px;border-radius:8px;background:var(--teal-50);color:var(--teal-700);display:grid;place-items:center;flex:0 0 auto}
.info-card__icon svg{width:22px;height:22px}
.info-card h3{font-size:1.05rem;font-weight:600;margin-bottom:.25em}
.info-card p,.info-card a{color:var(--muted);font-size:.96rem}
.info-card a:hover{color:var(--teal-700)}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(24px,3.5vw,38px);box-shadow:var(--shadow)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.form__row{grid-template-columns:1fr}}
.field{display:grid;gap:7px;margin-bottom:16px}
.field label{font-weight:600;font-size:.9rem;color:var(--ink-2)}
.field input,.field select,.field textarea{font:inherit;padding:.85em 1em;border:1.5px solid var(--line);border-radius:8px;background:var(--bg-tint);transition:border-color .2s,background .2s;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal-500);background:#fff}
.field textarea{resize:vertical;min-height:120px}
.form__note{font-size:.82rem;color:var(--muted);margin-top:6px}
.map-embed{border:0;width:100%;height:100%;min-height:340px;border-radius:var(--radius);filter:saturate(1.05)}
.map-wrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);height:100%}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:800px){.team{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.team{grid-template-columns:1fr}}
.member{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center}
.member__avatar{width:84px;height:84px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;font-family:var(--font-head);font-size:1.8rem;color:#fff;background:linear-gradient(135deg,var(--teal-500),var(--teal-800))}
.member h3{font-size:1.15rem;font-weight:600}
.member__role{color:var(--teal-700);font-weight:600;font-size:.9rem;margin:.2em 0 .6em}
.member p{color:var(--muted);font-size:.92rem}
.member h3 a{color:inherit}
.member h3 a:hover{color:var(--teal-700)}
.member__link{display:inline-block;margin-top:.9em;font-weight:700;font-size:.9rem;color:var(--teal-700)}
.member__link span{display:inline-block;transition:transform .25s var(--ease)}
.member__link:hover span{transform:translateX(5px)}

/* ---------- About intro + big stat cards ---------- */
.about-intro__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,46px)}
.about-intro__title{font-size:clamp(1.9rem,3.8vw,2.9rem)}
@media(min-width:768px){.about-intro__title{white-space:normal;width:auto;left:auto;transform:none}}
.about-intro__cta{flex:0 0 auto}
.about-intro__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(26px,4vw,54px);align-items:stretch}
@media(max-width:900px){.about-intro__grid{grid-template-columns:1fr}.about-intro__head{align-items:flex-start}}
.about-intro__panel{position:relative;overflow:hidden;height:100%;min-height:320px;border-radius:var(--radius-lg);
  background:linear-gradient(150deg,var(--teal-700),var(--teal-900));
  padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--shadow-lg)}
.about-intro__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;z-index:0}
.about-intro__panel::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,31,99,.12) 0%,rgba(10,31,99,.28) 55%,rgba(10,31,99,.82) 100%)}
.about-intro__badge,.about-intro__panel-text{z-index:2}
.about-intro__badge{position:absolute;top:20px;left:20px;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);color:#eafffb;font-weight:700;font-size:.8rem;padding:.5em 1em;border-radius:999px;backdrop-filter:blur(6px)}
.about-intro__badge svg{width:15px;height:15px}
.about-intro__mark{position:absolute;top:-16px;right:-16px;width:200px;height:200px;color:rgba(94,234,212,.16);animation:floaty 8s ease-in-out infinite}
.about-intro__mark svg{width:100%;height:100%}
.about-intro__panel-text{position:relative;color:#eafffb;font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:700;line-height:1.3;max-width:20ch}
.about-intro__lead{font-size:1.12rem;color:var(--ink-2);margin-bottom:clamp(20px,2.6vw,28px);max-width:54ch}
.about-intro__stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:520px){.about-intro__stats{grid-template-columns:1fr}}
.statcard-lg{border-radius:var(--radius-lg);padding:clamp(22px,2.8vw,30px);display:flex;flex-direction:column;gap:6px;min-height:210px}
.statcard-lg--plain{background:#fff;border:1px solid var(--line)}
.statcard-lg--lime{background:linear-gradient(160deg,#d7e34e,#c3d422);color:#2b3405}
.statcard-lg__num{font-family:var(--font-head);font-size:clamp(2.2rem,4vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--teal-800)}
.statcard-lg--lime .statcard-lg__num{color:#1e260a}
.statcard-lg__label{font-weight:700;font-size:1.05rem;color:var(--ink)}
.statcard-lg--lime .statcard-lg__label{color:#1e260a}
.statcard-lg__text{margin-top:auto;font-size:.92rem;color:var(--muted);line-height:1.55}
.statcard-lg--lime .statcard-lg__text{color:#3c470c}

/* ---------- Services split ---------- */
.svc-split{display:grid;grid-template-columns:1.15fr 1fr .82fr;gap:clamp(20px,3vw,40px);align-items:stretch;margin-top:clamp(30px,4vw,48px)}
@media(max-width:1000px){.svc-split{grid-template-columns:1fr 1fr}.svc-aside{grid-column:1 / -1}}
@media(max-width:680px){.svc-split{grid-template-columns:1fr}}
.svc-list{display:flex;flex-direction:column;gap:12px}
.svc-list__item{display:flex;align-items:center;gap:16px;padding:15px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;height:100%}
.svc-list__item:hover{transform:translateX(4px);box-shadow:var(--shadow);border-color:transparent}
.svc-list li{flex:1}
.svc-list__ico{flex:0 0 auto;width:46px;height:46px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,var(--teal-50),var(--teal-100));color:var(--teal-700)}
.svc-list__ico svg{width:23px;height:23px}
.svc-list__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.svc-list__txt strong{font-size:1.04rem;font-weight:700;color:var(--ink)}
.svc-list__txt small{font-size:.85rem;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.svc-list__arrow{margin-left:auto;flex:0 0 auto;color:var(--teal-500);font-weight:800;transition:transform .25s var(--ease)}
.svc-list__item:hover .svc-list__arrow{transform:translateX(4px)}
.svc-media{position:relative;overflow:hidden;border-radius:var(--radius-lg);min-height:300px;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 20%,rgba(63,109,255,.28),transparent 55%),linear-gradient(150deg,var(--teal-600),var(--teal-900))}
.svc-media::after{content:"";position:absolute;width:140%;height:60px;top:40%;left:-20%;background:linear-gradient(100deg,transparent 42%,rgba(126,255,230,.14) 50%,transparent 58%);transform:translateX(-30%);animation:sweep 7s ease-in-out infinite}
.svc-media img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.svc-media__mark{position:relative;width:120px;height:120px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(6px)}
.svc-media__mark svg{width:54px;height:54px}
.svc-aside{display:flex;flex-direction:column;justify-content:center;gap:22px}
.svc-aside p{color:var(--ink-2);font-size:1.05rem}

/* ---------- Process — "recovery journey" timeline ---------- */
.journey{position:relative;max-width:1060px;margin:clamp(36px,5vw,64px) auto 0}
/* centre rail + scroll-fill */
.journey__rail{position:absolute;left:50%;top:8px;bottom:8px;width:4px;transform:translateX(-50%);
  background:var(--teal-100);border-radius:4px;overflow:hidden;z-index:0}
.journey__fill{position:absolute;left:0;top:0;width:100%;height:0;border-radius:4px;
  background:linear-gradient(180deg,var(--heal-500),var(--teal-600));box-shadow:0 0 16px rgba(20,184,166,.65);transition:height .12s linear}
.jstep{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,76px);align-items:center;
  margin-bottom:clamp(38px,6vw,84px)}
.jstep:last-child{margin-bottom:0}
/* node */
.jstep__node{position:absolute;left:50%;top:50%;translate:-50% -50%;scale:.4;opacity:0;z-index:2;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#fff;
  font-family:var(--font-head);font-weight:800;font-size:1.2rem;color:var(--teal-700);border:3px solid var(--teal-100);
  box-shadow:var(--shadow);transition:scale .55s var(--ease),opacity .55s var(--ease),background .45s,color .45s,border-color .45s,box-shadow .45s}
.jstep.is-in .jstep__node{scale:1;opacity:1}
.jstep.is-active .jstep__node{background:linear-gradient(135deg,var(--heal-500),var(--teal-600));color:#fff;border-color:#fff;
  box-shadow:0 0 0 6px rgba(20,184,166,.16),0 14px 26px -8px rgba(20,184,166,.6)}
/* content + media entrance (criss-cross slide) */
.jstep__content{opacity:0;transform:translateX(-48px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.jstep__media{margin:0;position:relative;opacity:0;transform:translateX(48px);transition:opacity .7s var(--ease) .08s,transform .7s var(--ease) .08s}
.jstep:nth-child(even) .jstep__content{grid-column:2;grid-row:1;transform:translateX(48px)}
.jstep:nth-child(even) .jstep__media{grid-column:1;grid-row:1;transform:translateX(-48px)}
.jstep.is-in .jstep__content,.jstep.is-in .jstep__media{opacity:1;transform:none}
/* content */
.jstep__kicker{display:inline-block;font-weight:800;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-600);margin-bottom:.55em}
.jstep__title{font-size:clamp(1.4rem,2.3vw,1.95rem);font-weight:700;margin-bottom:.4em}
.jstep__text{color:var(--ink-2);font-size:1.02rem;line-height:1.6;margin-bottom:1.15em;max-width:42ch}
.jstep__tags{display:flex;flex-wrap:wrap;gap:9px}
.jstep__tag{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;color:var(--teal-800);
  background:var(--teal-50);border:1px solid var(--teal-100);padding:.42em .85em;border-radius:999px}
.jstep__tag svg{width:14px;height:14px;color:var(--teal-600)}
/* media with soft accent shape */
.jstep__media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);position:relative;z-index:1;display:block}
.jstep__media::before{content:"";position:absolute;right:-16px;bottom:-16px;width:62%;height:62%;border-radius:var(--radius-lg);z-index:0;
  background:radial-gradient(120% 120% at 100% 100%,rgba(20,184,166,.4),transparent 62%)}
@media(max-width:900px){
  .journey{max-width:560px}
  .journey__rail{left:23px}
  .jstep{grid-template-columns:1fr;gap:18px;padding-left:62px;margin-bottom:44px}
  .jstep__node{left:23px;top:16px;translate:-50% 0;width:46px;height:46px;font-size:1rem}
  .jstep__content,.jstep__media,.jstep:nth-child(even) .jstep__content,.jstep:nth-child(even) .jstep__media{grid-column:1;grid-row:auto;transform:translateY(26px)}
  .jstep.is-in .jstep__content,.jstep.is-in .jstep__media{transform:none}
  .jstep__media::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .svc-media::after{animation:none}
  .jstep__content,.jstep__media{opacity:1;transform:none;transition:none}
  .jstep__node{opacity:1;scale:1}
  .journey__fill{transition:none}
}

/* ---------- Doctor profile (/dr-…) ---------- */
.doc-hero{background:radial-gradient(120% 100% at 80% 0%,#e6ecff,#f3f6ff 60%,#fff);
  padding:clamp(40px,6vw,72px) 0 clamp(46px,6vw,80px);border-bottom:1px solid var(--line)}
.doc-hero__grid{display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(28px,5vw,56px);align-items:start}
@media(max-width:920px){.doc-hero__grid{grid-template-columns:1fr}}
.doc-hero h1{font-size:clamp(2rem,4.2vw,3.1rem);font-weight:600;margin:.35em 0 .3em}
.doc-hero__badge{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-700);background:rgba(255,255,255,.75);border:1px solid var(--teal-100);padding:.5em 1em;border-radius:999px;box-shadow:var(--shadow-sm)}
.doc-hero__creds{font-weight:700;color:var(--teal-700);font-size:1.02rem;line-height:1.5}
.doc-hero__role{margin-top:.35em;color:var(--ink-2);font-weight:600}
.doc-hero__summary{margin-top:1.1em;color:var(--ink-2);font-size:1.05rem;line-height:1.75;max-width:60ch}

.doc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:26px 0 28px;max-width:580px}
@media(max-width:560px){.doc-stats{grid-template-columns:1fr}}
.doc-stat{background:rgba(255,255,255,.8);border:1px solid var(--teal-100);border-radius:var(--radius-sm);padding:15px 17px;backdrop-filter:blur(6px)}
.doc-stat__value{display:block;font-family:var(--font-head);font-weight:800;font-size:1.55rem;letter-spacing:-.02em;color:var(--teal-800)}
.doc-stat__label{display:block;margin-top:4px;font-size:.81rem;font-weight:600;color:var(--muted);line-height:1.35}

.doc-card{width:100%;max-width:390px;justify-self:end;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow);position:sticky;top:96px}
@media(max-width:920px){.doc-card{position:static;justify-self:start}}
/* 4:5 made the card 721px against a 548px text column — 172px of dead
   space beside the CTA. The card is position:sticky so it cannot be
   stretched to match; shortening the photo closes the gap instead.
   object-position keeps the face in frame through the tighter crop. */
.doc-card__photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  object-position:50% 18%}
/* square while it is an initials monogram; portrait once a real photo lands */
.doc-card__monogram{position:relative;aspect-ratio:1/1;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:clamp(3.4rem,7vw,5rem);letter-spacing:.04em;color:#fff;
  background:linear-gradient(150deg,var(--teal-600),var(--teal-900))}
.doc-card__monogram::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 0%,rgba(255,255,255,.22),transparent 60%)}
.doc-card__body{padding:22px 24px 26px}
.doc-card__eyebrow{display:flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.doc-card__eyebrow svg{width:16px;height:16px;color:var(--teal-600);flex:0 0 auto}
.doc-card__specialty{margin-top:7px;font-family:var(--font-head);font-weight:700;font-size:1.15rem;color:var(--ink)}
.doc-card__rule{border:0;border-top:1px solid var(--line);margin:18px 0}
.doc-card__clinics{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:9px}
.doc-card__clinics a{font-weight:600;font-size:.96rem;color:var(--teal-700)}
.doc-card__clinics a span{display:inline-block;transition:transform .25s var(--ease)}
.doc-card__clinics a:hover span{transform:translateX(5px)}

.doc-split{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(28px,4.5vw,54px);align-items:start}
.doc-split--even{grid-template-columns:1fr 1fr}
@media(max-width:900px){.doc-split,.doc-split--even{grid-template-columns:1fr}}
/* long in-column headings must wrap (the global .section__title is nowrap ≥768px) */
.doc-split .section__title{white-space:normal;width:auto;min-width:0}
.doc-split > *{min-width:0}
.doc-para{margin-top:1.1em;color:var(--ink-2);line-height:1.75;max-width:62ch}

.doc-panel{height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-sm)}
.doc-panel__title{display:flex;align-items:center;gap:12px;font-size:1.25rem;font-weight:700;margin-bottom:24px}
.doc-panel__icon{flex:0 0 auto;width:44px;height:44px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--teal-50),var(--teal-100));color:var(--teal-700)}
.doc-panel__icon svg{width:22px;height:22px}
.doc-list{list-style:none;position:relative;margin:0;padding:0 0 0 30px;display:grid;gap:20px}
.doc-list::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--teal-300),var(--teal-100))}
.doc-list__item{position:relative}
.doc-list__item::before{content:"";position:absolute;left:-30px;top:4px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--teal-500)}
.doc-list__title{font-weight:700;color:var(--ink);line-height:1.4}
.doc-list__org{margin-top:2px;font-weight:600;font-size:.94rem;color:var(--teal-700)}
.doc-list__meta{margin-top:2px;font-size:.86rem;color:var(--muted)}

.doc-strengths{margin-top:clamp(34px,4vw,50px);background:linear-gradient(160deg,var(--teal-50),#fff);
  border:1px solid var(--teal-100);border-radius:var(--radius-lg);padding:clamp(26px,3.5vw,40px)}
.doc-strengths h3{font-size:1.35rem;margin-bottom:.55em}
.doc-strengths p{color:var(--ink-2);line-height:1.75;max-width:82ch}
.doc-strengths .doc-chip{background:#fff}

.doc-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0}
.doc-chip{display:inline-flex;align-items:center;gap:8px;padding:.5em 1.05em;border-radius:999px;
  background:var(--teal-50);border:1px solid var(--teal-100);font-size:.88rem;font-weight:600;color:var(--ink-2)}
.doc-chip svg{width:16px;height:16px;color:var(--teal-600);flex:0 0 auto}
.doc-chip strong{color:var(--teal-800);font-weight:800}

/* Lead-doctor band on the clinic pages */
.doc-band{display:grid;grid-template-columns:290px 1fr;gap:clamp(24px,4vw,44px);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow)}
@media(max-width:820px){.doc-band{grid-template-columns:1fr}}
/* ---- Branch long-form content (clinic landing pages) ---- */
/* Branch hero: same component as the homepage, tuned for a landscape
   team photo instead of the portrait collage. */
.branch-hero .breadcrumb{margin-bottom:14px}
.branch-hero .hero__inner{min-height:min(62vh,540px)}
/* Smaller than the homepage H1: the locality name makes this line longer,
   and at the homepage size it wrapped to three lines and pushed the
   trust strip fully below the fold. */
.branch-hero .hero__title{font-size:clamp(2.1rem,4.3vw,3.25rem);margin:.45em 0 .3em}
/* The branch heroes carry real team photographs — a wide line of people,
   not a single subject. object-fit:cover trims the sides, so this box has
   to stay close to the photo's own 3:2 or it slices the faces off both
   ends of the row. At 1/.80 the full team clears the frame. */
.branch-hero .hero__visual{width:min(100%,560px);aspect-ratio:1/.80}
.branch-hero .hero__photo--main{inset:0}
.branch-hero .hero__photo--main img{object-position:50% 50%}
/* The homepage hero is a stock shot with empty space top-left, so the
   rating card sits there. A real team line-up has a person in that
   corner — on branch pages the card moves to the right, over the wall
   above the cabinet, where it covers nobody's face. */
.branch-hero .hero__float--rating{left:auto;right:-5%;text-align:left}
.branch-hero .hero__badges{gap:10px 18px}
@media(max-width:900px){.branch-hero .hero__visual{aspect-ratio:1/.7;margin-top:8px}}

/* Rich branch pages run long, so sections sit tighter than the homepage
   — the default 112px top+bottom left ~220px of dead air between blocks. */
.branch-rich .section{padding:clamp(34px,3.4vw,54px) 0}
.branch-rich .section__head{margin-bottom:clamp(24px,3vw,34px)}
/* Two tinted sections in a row share one background, so the seam between
   them is invisible and the stacked padding just reads as dead air.
   Drop the second one's top padding and the pair spaces like one gap. */
.branch-rich .section--tint + .section--tint{padding-top:0}

/* Flex (not grid) so an uneven last row stretches to fill the width
   instead of leaving an empty cell — 5 cards used to leave a big hole. */
.why-grid{display:flex;flex-wrap:wrap;gap:16px}
.why-grid > *{flex:1 1 clamp(260px,28%,340px)}
.why-grid .why-card{border-radius:var(--radius);padding:clamp(24px,2.4vw,32px)}
.why-grid .why-card__title{font-size:clamp(1rem,1.15vw,1.13rem);line-height:1.28}
.why-grid .why-card__text{max-width:none;font-size:.85rem;line-height:1.6}
.why-grid .why-card__icon{width:52px;height:52px;border-radius:8px}
.why-grid .why-card__icon svg{width:24px;height:24px}

/* Authority strip directly under the hero — the reason to keep scrolling. */
.trustbar{background:linear-gradient(100deg,#12329c,#1f4ee0 55%,#0f766e);color:#fff}
.trustbar__inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;padding:26px 0}
.trustbar__item{display:flex;flex-direction:column;gap:4px;padding-left:18px;border-left:2px solid rgba(255,255,255,.18)}
.trustbar__item strong{font-family:var(--font-head);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700;letter-spacing:-.01em}
.trustbar__item span{font-size:.86rem;color:rgba(255,255,255,.72);line-height:1.45}
@media(max-width:860px){.trustbar__inner{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:480px){.trustbar__inner{grid-template-columns:1fr}}

/* "Find us" columns: match top and bottom. The info cards used to end
   ~70px short of the booking panel; now both columns stretch to the same
   height and the three cards distribute into it. */
.branch-rich .contact{align-items:stretch}
.branch-rich .contact__info{align-content:space-between}
.branch-rich .contact > div:not(.contact__info){display:flex}
.branch-rich .contact > div:not(.contact__info) > .form{flex:1;width:100%}

/* ---- Dark carousel section (conditions treated) --------------------
   A dark band mid-page breaks up a long scroll, and a horizontal track
   invites interaction. Scrolling is native overflow, so it still works
   with JS disabled; the buttons and progress bar are enhancements. */
.carousel-sec{background:var(--bg-tint)}
.carousel-sec__head{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);
  align-items:end;margin-bottom:clamp(28px,3.4vw,42px)}
@media(max-width:860px){.carousel-sec__head{grid-template-columns:1fr;align-items:start;gap:16px}}
.carousel-sec__eyebrow{margin:0 0 10px;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-700)}
.carousel-sec__title{margin:0;font-family:var(--font-head);font-weight:700;color:var(--ink);
  font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.15;letter-spacing:-.015em}
.carousel-sec__intro{margin:0;font-size:.97rem;line-height:1.7;color:var(--muted);max-width:46ch}

.carousel__track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:4px 0 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track:focus-visible{outline:2px solid var(--teal-600);outline-offset:6px;border-radius:var(--radius)}

.cslide{flex:0 0 clamp(268px,30%,340px);scroll-snap-align:start;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);min-height:330px}
.cslide__top{display:flex;align-items:center;gap:13px;padding:20px 22px}
.cslide__ico{width:44px;height:44px;flex:0 0 auto;border-radius:8px;background:rgba(255,255,255,.9);
  display:grid;place-items:center}
.cslide__ico svg{width:22px;height:22px}
.cslide__tag{font-family:var(--font-head);font-weight:700;font-size:1.02rem;line-height:1.25}
.cslide__body{flex:1;display:flex;flex-direction:column;background:#fff;padding:20px 22px 22px}
.cslide__list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.cslide__list li{position:relative;padding-left:17px;font-size:.885rem;color:var(--ink-2);line-height:1.45}
.cslide__list li::before{content:"";position:absolute;left:2px;top:.52em;width:6px;height:6px;
  border-radius:50%;background:var(--heal-500)}
.cslide__note{margin:16px 0 0;margin-top:auto;padding-top:13px;border-top:1px solid var(--line);
  font-size:.84rem;color:var(--muted);line-height:1.55}
.cslide__note a{color:var(--teal-700);font-weight:600}
/* Tone lives on the card header only, so nine cards stay readable. */
.cslide--blue .cslide__top{background:linear-gradient(120deg,#1f4ee0,#12329c);color:#fff}
.cslide--blue .cslide__ico{color:#1b45d6}
.cslide--teal .cslide__top{background:linear-gradient(120deg,#17c2ae,#0f766e);color:#fff}
.cslide--teal .cslide__ico{color:#0f766e}
.cslide--lime .cslide__top{background:linear-gradient(120deg,#d7e34e,#c3d422);color:#1e260a}
.cslide--lime .cslide__ico{color:#5f6c12}

.area-heading{font-family:var(--font-head);font-weight:700;font-size:clamp(1.1rem,1.5vw,1.3rem);
  color:var(--ink);margin:clamp(26px,3vw,36px) 0 16px}
/* Light variant: this carousel sits on a tinted section, not the dark band. */
.carousel--light .carousel__track > *{flex:0 0 clamp(272px,31%,352px);scroll-snap-align:start}
.area-col--deep{background:linear-gradient(160deg,#12329c,#0a1f63);border-color:transparent}
.area-col--deep .area-col__badge{background:rgba(255,255,255,.18);color:#fff}
.area-col--deep .area-col__count{color:rgba(255,255,255,.66)}
.area-col--deep .area-col__list{color:#dfe7ff}
.carousel__foot{display:flex;align-items:center;gap:clamp(16px,3vw,32px);margin-top:clamp(18px,2.4vw,28px)}
.carousel__link{font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--teal-700);white-space:nowrap}
.carousel__link:hover{color:var(--teal-900)}
.carousel__hint{font-size:.86rem;font-weight:600;color:var(--muted);white-space:nowrap}
.carousel__bar{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.carousel__bar span{display:block;height:100%;width:30%;background:var(--teal-600);border-radius:2px;
  transition:width .25s var(--ease),transform .25s var(--ease)}
.carousel__btns{display:flex;gap:10px;flex:0 0 auto}
.carousel__btn{width:46px;height:46px;border-radius:8px;border:1px solid var(--line);
  background:#fff;color:var(--teal-700);display:grid;place-items:center;cursor:pointer;
  transition:background .25s,border-color .25s,transform .25s,opacity .25s}
.carousel__btn svg{width:20px;height:20px}
.carousel__btn:hover:not(:disabled){background:var(--teal-700);color:#fff;border-color:var(--teal-700);transform:translateY(-2px)}
.carousel__btn:disabled{opacity:.32;cursor:default}
@media(max-width:560px){
  .carousel__link{font-size:.92rem}
  .carousel__btn{width:42px;height:42px}
}

/* Full-width map row (branch pages): the map used to sit inside the left
   column, making it 825px against a 505px booking panel — 320px of dead
   space. Out here the two columns balance and the map reads better. */
.map-wrap--wide{height:auto;margin-top:clamp(22px,3vw,32px)}
.map-wrap--wide .map-embed{height:clamp(280px,32vw,380px);min-height:0}


.card__note{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}

/* ---- Hospital referral rows (replaces a narrow table that left half the
   width empty). Colour cycles blue/teal/lime so the lower half of the page
   keeps the same visual energy as the top. ---- */
.ref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px}
.ref-item{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--teal-600);border-radius:var(--radius-sm);padding:16px 20px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.ref-item:hover{transform:translateX(3px);box-shadow:var(--shadow-sm)}
.ref-item__ico{width:38px;height:38px;flex:0 0 auto;border-radius:7px;display:grid;place-items:center}
.ref-item__ico svg{width:20px;height:20px}
.ref-item__name{flex:1;font-weight:600;font-size:.96rem;color:var(--ink);line-height:1.4}
.ref-item__km{flex:0 0 auto;font-weight:700;font-size:.86rem;padding:.3em .7em;border-radius:999px;white-space:nowrap}
.ref-item--blue{border-left-color:#1f4ee0}
.ref-item--blue .ref-item__ico{background:var(--teal-50);color:#1b45d6}
.ref-item--blue .ref-item__km{background:var(--teal-50);color:#12329c}
.ref-item--teal{border-left-color:#0f9e8e}
.ref-item--teal .ref-item__ico{background:#e6fbf7;color:#0f766e}
.ref-item--teal .ref-item__km{background:#e6fbf7;color:#0f766e}
.ref-item--lime{border-left-color:var(--lime-600)}
.ref-item--lime .ref-item__ico{background:#f6f9dd;color:#5f6c12}
.ref-item--lime .ref-item__km{background:#f6f9dd;color:#5f6c12}
.ref-more{margin:16px 0 0;font-size:.92rem;font-weight:600;color:var(--teal-700)}
/* No max-width: 70ch was breaking this onto two lines even with room to spare. */
.ref-note{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;font-size:.92rem;color:var(--muted)}
.ref-note span{min-width:0}
.ref-note svg{width:19px;height:19px;color:var(--heal-500);flex:0 0 auto;margin-top:2px}

/* ---- Prose + highlighted panel, so a text-only section still has shape ---- */
.split2{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,44px);align-items:start}
@media(max-width:880px){.split2{grid-template-columns:1fr}}
.split2__prose p{color:var(--ink-2);font-size:1rem;line-height:1.7;margin:0 0 1em;max-width:60ch}
.split2__prose a{color:var(--teal-700);font-weight:600}
.split2__panel{background:linear-gradient(160deg,#17c2ae,#0f766e);color:#eafffb;
  border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow)}
.split2__panel h3{font-family:var(--font-head);font-size:1.08rem;font-weight:700;color:#fff;margin:0 0 14px}
.split2__panel .ticklist{margin:0;gap:11px}
.split2__panel .ticklist li{color:#eafffb;font-size:.94rem;line-height:1.45}
.split2__panel .ticklist svg{color:#c9f7ef}

/* ---- Accent band: a short section that looked stranded as bare paragraphs ---- */
.accent-band{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,32px);align-items:center;
  background:linear-gradient(100deg,#12329c,#1f4ee0 55%,#0f766e);color:#e8eeff;
  border-radius:var(--radius-lg);padding:clamp(26px,3.4vw,40px)}
.accent-band__ico{width:60px;height:60px;border-radius:10px;background:rgba(255,255,255,.14);
  display:grid;place-items:center;color:#fff}
.accent-band__ico svg{width:28px;height:28px}
.accent-band__eyebrow{margin:0 0 6px;font-size:.78rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.accent-band__title{font-family:var(--font-head);font-size:clamp(1.4rem,2.2vw,1.85rem);font-weight:700;
  color:#fff;margin:0 0 12px;line-height:1.2}
.accent-band__body p{margin:0 0 .7em;font-size:.97rem;line-height:1.65;max-width:66ch}
.accent-band__body p:last-child{margin-bottom:0}
.accent-band__cta .btn{background:#fff;color:var(--teal-800);border-color:#fff;white-space:nowrap}
.accent-band__cta .btn:hover{background:#eef3ff;color:var(--teal-900)}
.accent-band__cta svg{width:18px;height:18px}
@media(max-width:900px){.accent-band{grid-template-columns:1fr;text-align:left}}

.area-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.area-col{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px}
.area-col__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.area-col__badge{display:inline-flex;align-items:center;background:var(--teal-700);color:#fff;
  border-radius:999px;padding:.36em .95em;font-size:.82rem;font-weight:700;letter-spacing:.01em}
.area-col__count{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.area-col__list{margin:0;font-size:.9rem;line-height:1.85;color:var(--ink-2)}
/* Names never break mid-word; only the separators are break points. */
.area-col__list span{white-space:nowrap}
.area-col__list .sep{font-style:normal;margin:0 .5em;opacity:.45}
.area-col--wide{margin-top:clamp(22px,3vw,30px)}
.area-col--blue{background:linear-gradient(160deg,#1f4ee0,#12329c);border-color:transparent}
.area-col--blue .area-col__badge{background:rgba(255,255,255,.18);color:#fff}
.area-col--blue .area-col__count{color:rgba(255,255,255,.66)}
.area-col--blue .area-col__list{color:#dfe7ff}
.area-col--teal{background:linear-gradient(160deg,#17c2ae,#0f766e);border-color:transparent}
.area-col--teal .area-col__badge{background:rgba(255,255,255,.2);color:#fff}
.area-col--teal .area-col__count{color:rgba(255,255,255,.7)}
.area-col--teal .area-col__list{color:#e3fffa}
.area-col--lime{background:linear-gradient(160deg,#d7e34e,#c3d422);border-color:transparent}
.area-col--lime .area-col__badge{background:rgba(30,38,10,.14);color:#1e260a}
.area-col--lime .area-col__count{color:#4e5a13}
.area-col--lime .area-col__list{color:#2b3405}

/* Clinic team photo (branch pages) */
.team-photo{margin:0;max-width:920px;margin-inline:auto}
.team-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow)}
.team-photo figcaption{margin-top:14px;text-align:center;font-size:.92rem;color:var(--muted)}

.doc-band__figure{max-width:290px}
.doc-band__figure img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.doc-band__monogram{aspect-ratio:1/1;border-radius:var(--radius);display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:clamp(3rem,6vw,4.4rem);letter-spacing:.04em;color:#fff;
  background:linear-gradient(150deg,var(--teal-600),var(--teal-900))}
.doc-band__name{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.doc-band__name a{color:var(--ink)}
.doc-band__name a:hover{color:var(--teal-700)}
.doc-band__creds{margin-top:.45em;font-weight:700;font-size:.98rem;color:var(--teal-700);line-height:1.5}
.doc-band__role{margin-top:.25em;font-weight:600;font-size:.95rem;color:var(--ink-2)}
.doc-band__text{margin-top:1em;color:var(--muted);line-height:1.7;max-width:62ch}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Keyframes ---------- */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(205,220,57,.55)}70%{box-shadow:0 0 0 12px rgba(205,220,57,0)}100%{box-shadow:0 0 0 0 rgba(205,220,57,0)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes scrolldot{0%{opacity:1;transform:translate(-50%,0)}60%{opacity:0;transform:translate(-50%,10px)}100%{opacity:0}}
@keyframes heroIn{0%{opacity:0;transform:translateY(24px)}100%{opacity:1;transform:none}}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes blobMorph{
  0%,100%{border-radius:44% 56% 58% 42%/48% 44% 56% 52%}
  33%{border-radius:56% 44% 47% 53%/52% 57% 43% 48%}
  66%{border-radius:48% 52% 54% 46%/56% 48% 52% 44%}
}

/* ---- Lady physiotherapist: cards + photograph -------------------------
   Uses the site's own blue/teal palette. The card copy repeats claims made elsewhere on the
   page; the photograph is the clinic's own staff, because stock imagery
   next to "a woman will treat you" is the one thing that would undermine
   the section entirely. */
.section--rose{background:linear-gradient(180deg,#f7faff,var(--bg-tint))}
.grad-text--rose{background-image:linear-gradient(120deg,#17c2ae,#1f4ee0 55%,#12329c)}

/* Two-line intro on desktop: the default 660px head wrapped it to three. */
#lady-physiotherapist .section__sub{max-width:76ch;margin-inline:auto}
/* two lines on desktop. Below 1200px the container is too narrow to hold
   them, so it falls back to the normal 76ch measure rather than setting a
   third line that is only three words long. */
@media(min-width:1200px){#lady-physiotherapist .section__sub{max-width:min(100%,1100px)}}
/* Both columns stretch to one shared row height, so their top and bottom
   edges line up exactly; each distributes its own slack internally. */
.ladygrid{display:grid;grid-template-columns:1fr .82fr;gap:clamp(16px,2.2vw,26px);align-items:stretch}
.ladygrid__main{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,18px);height:100%}
.ladygrid__cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,20px);flex:1;align-content:stretch}

/* Left-aligned with the icon on the same row as the text: the earlier
   centred version left a column of dead space down the middle of every
   card once they stretched to the photograph's height. */
.ladycard{display:flex;align-items:center;gap:14px;position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(20px,2.2vw,26px);box-shadow:var(--shadow-sm)}
.ladycard::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(180deg,var(--heal-500),var(--teal-700))}
.ladycard{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.ladycard:hover{transform:translateY(-3px);border-color:var(--teal-300);box-shadow:var(--shadow)}
.ladycard__icon{flex:0 0 auto;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--teal-50),#e6fbf7);color:var(--teal-700)}
.ladycard__icon svg{width:22px;height:22px}
.ladycard__title{font-family:var(--font-head);font-size:1.02rem;font-weight:700;color:var(--ink);
  margin:1px 0 5px;line-height:1.25}
.ladycard__text{margin:0;color:var(--ink-2);font-size:.9rem;line-height:1.55}

.ladycta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;
  padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px);border-radius:var(--radius-lg);
  background:linear-gradient(110deg,#12329c,#1f4ee0 55%,#0f766e);color:#e8eeff;
  box-shadow:0 20px 38px -28px rgba(10,31,99,.7)}
.ladycta__txt{margin:0;font-size:.95rem;line-height:1.5;max-width:46ch}
.ladycta__txt strong{color:#fff}
.ladycta .btn{background:#fff;color:var(--teal-800);border-color:#fff;box-shadow:none;white-space:nowrap}
.ladycta .btn:hover{background:var(--teal-50);color:var(--teal-900)}
.ladycta .btn svg{width:18px;height:18px}

/* Photo column: one lead image plus a grid of the rest, so five real
   session photos fit without dominating the section. */
/* Lead sets its own height from its aspect; the thumbnail row takes
   whatever height is left, so the thumbs are as large as the column allows. */
.ladygrid__figure{margin:0;height:100%;display:grid;grid-template-columns:repeat(4,1fr);
  grid-template-rows:auto 1fr;gap:10px}
.ladyshot{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--radius);
  background:var(--bg-tint);box-shadow:var(--shadow-sm)}
/* aspect-ratio gives the lead a small NATURAL height (the file itself is
   portrait, which otherwise drove the column to ~880px); height:100%
   then lets it absorb whatever slack the row actually has. */
.ladyshot.is-lead{grid-column:1 / -1;aspect-ratio:16/9;height:auto;object-position:50% 26%}
.ladyshot:not(.is-lead){aspect-ratio:auto;height:100%;min-height:110px}
@media(max-width:640px){.ladygrid__figure{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .ladygrid{grid-template-columns:1fr}
  .ladygrid__figure{order:-1;max-height:360px}
  .ladygrid__figure img{object-position:50% 16%}
  /* Stacked, the figure no longer stretches to a sibling column, so
     `grid-template-rows:1fr` resolved against an auto height and the
     tinted photo collapsed to 0. Give it the photograph's own ratio. */
  /* An explicit height, not an aspect-ratio: with a ratio plus a
     max-height the box shrinks its WIDTH to keep the ratio and stops
     filling the column. A definite height lets the image cover instead. */
  .ladygrid__figure--tint{height:clamp(260px,58vw,420px);max-height:none;aspect-ratio:auto}
  .ladygrid__figure--tint .ladyshot{min-height:0}
}
@media(max-width:560px){.ladygrid__cards{grid-template-columns:1fr}.ladycta{flex-direction:column;align-items:flex-start}}

/* ---- Continuously-moving rows (areas we serve) ------------------------
   The seamless second copy is cloned by JS, so the served HTML lists each
   locality once — a marquee that ships the list twice reads as keyword
   repetition on a page that is already dense with place names.
   Without JS, or under reduced-motion, each row degrades to a plain
   horizontally scrollable strip; nothing is lost, it just doesn't move. */
.marquees{display:flex;flex-direction:column;gap:12px}
.marquee{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:2px 0}
.marquee::-webkit-scrollbar{display:none}
.marquee.is-live{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee__track{display:flex;align-items:center;gap:10px;width:max-content}
.marquee.is-live .marquee__track{animation:marquee-x var(--dur,60s) linear infinite;will-change:transform}
.marquee.is-live.marquee--rev .marquee__track{animation-direction:reverse}
/* hover, keyboard focus and off-screen all park it in the same place */
.marquee.is-paused .marquee__track{animation-play-state:paused}
@keyframes marquee-x{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--shift,50%)))}}

.area-chip{display:inline-flex;align-items:center;white-space:nowrap;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:.52em 1.05em;
  font-weight:600;font-size:.92rem;color:var(--ink-2)}
.area-chip--band{font-weight:800;border-color:transparent;color:#fff;
  background:linear-gradient(120deg,var(--teal-600),var(--teal-800))}
.area-chip--teal{background:linear-gradient(120deg,var(--heal-500),var(--teal-700))}
.area-chip--lime{background:linear-gradient(120deg,#7cb518,#3f7d20)}
.area-chip--deep{background:linear-gradient(160deg,#12329c,#0a1f63)}
@media(prefers-reduced-motion:reduce){.marquee.is-live .marquee__track{animation:none}}

/* Behala's lady photograph is captioned on the image itself, under a tint,
   because the colleagues in that shot are blurred and the shared "male and
   female team" note no longer describes what you are looking at. */
/* The gallery figure is a plain grid with no positioning context, so the
   tint and the caption would escape to the page. A tinted branch carries a
   single photograph, so the figure itself becomes the frame. */
.ladygrid__figure--tint{position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--radius);box-shadow:var(--shadow-sm)}
/* The gallery grid sizes its lead shot to a 16/9 box and reserves rows for
   the other thumbnails. A tinted branch has one photograph and an absolutely
   positioned caption, so collapse to a single row and let the image fill —
   otherwise the tint paints ~190px of empty space below it. */
.ladygrid__figure--tint{grid-template-rows:1fr;gap:0}
.ladygrid__figure--tint .ladyshot{border-radius:0;box-shadow:none;
  aspect-ratio:auto;height:100%;min-height:100%;object-position:50% 30%}
.ladygrid__figure--tint::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(165deg,rgba(255,140,182,.10),rgba(176,42,114,.16))}
.ladygrid__figure--tint .ladyfig{z-index:2}
.ladyfig{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:3px;
  padding:44px 20px 18px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(20,6,14,.5) 45%,rgba(20,6,14,.88))}
.ladyfig__title{font-family:var(--font-head);font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:700;
  line-height:1.2;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.ladyfig__sub{font-size:.88rem;font-weight:600;line-height:1.45;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.5)}

/* The lady-section intro is one long sentence; at the default 660px head
   width it broke to four centred lines. Widened so it sets in two on
   desktop, and released back to the normal measure below that. */
@media(min-width:1000px){
  .section--rose .section__head{max-width:min(100%,1120px)}
}

/* ---- Clinics dropdown -------------------------------------------------
   The trigger is a <button>, not a link: there is no /clinics page, and a
   link that goes nowhere is worse than a control that says what it does. */
.nav__item--menu{position:relative}
/* bridges the gap between trigger and panel so the hover does not drop */
.nav__item--menu::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
/* font:inherit also resets line-height, which made this button 44px tall
   against the 35px links beside it. Restate it after the shorthand. */
.nav__link--parent{display:inline-flex;align-items:center;gap:7px;font:inherit;font-weight:600;
  font-size:.96rem;line-height:1.2;border:0;background:transparent;cursor:pointer}
.nav__caret{width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .22s var(--ease)}
.nav__item--menu:hover .nav__caret,
.nav__link--parent[aria-expanded="true"] .nav__caret{transform:rotate(-135deg) translateY(1px)}

.nav__menu{position:absolute;top:calc(100% + 10px);left:50%;z-index:60;min-width:256px;
  transform:translateX(-50%) translateY(-6px);opacity:0;visibility:hidden;
  display:grid;gap:2px;padding:7px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
.nav__item--menu:hover .nav__menu,
.nav__item--menu:focus-within .nav__menu,
.nav__link--parent[aria-expanded="true"] + .nav__menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav__menu-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--radius-sm);
  color:var(--ink-2);transition:background .2s,color .2s}
.nav__menu-link:hover,.nav__menu-link.is-active{background:var(--teal-50);color:var(--teal-800)}
.nav__menu-ico{flex:0 0 auto;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:var(--teal-50);color:var(--teal-700)}
.nav__menu-ico svg{width:17px;height:17px}
.nav__menu-link strong{display:block;font-size:.94rem;font-weight:700;color:var(--ink);line-height:1.25}
.nav__menu-link small{display:block;font-size:.79rem;color:var(--muted);margin-top:1px}

.mobile-nav__group{display:grid;gap:2px}
.mobile-nav__label{display:block;padding:.9em .6em .25em;font-size:.76rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.mobile-nav__group ul{display:grid;gap:2px;padding-left:14px}
@media(prefers-reduced-motion:reduce){.nav__menu,.nav__caret{transition:none}}