/*
Theme Name: St Albert Physio and Lymphatic Centre
Theme URI: https://stalbertphysioclinic.com
Author: ClientEnginePro
Description: Custom theme for St Albert Physio and Lymphatic Centre. Brand DNA derived from the clinic's own logo: faceted figure (rehabilitation) and flowing lymphatic wave (drainage). Built by ClientEnginePro.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: Proprietary
Text Domain: sapl
*/

/* ============================================================
   1. TOKENS - every colour sampled from the clinic's own logo
   ============================================================ */
:root{
  --forest:#1E3A24;
  --forest-deep:#12281A;
  --sage:#A8C088;
  --sage-lt:#C3D6AB;
  --olive:#88A868;
  --accent-ink:#3E6B4A;  /* eyebrows, icons, rules: NOT the CTA colour */
  --teal:#2E8B8B;   /* RESERVED: booking CTA fills and icons, never small text */
  --teal-deep:#2E7E80;
  --teal-lt:#7FC4C2;
  /* Audit F14: --teal on --paper measured 3.79:1, under the 4.5:1 AA floor for
     normal text, and it was carrying every "Learn more" link on the site. This
     is the text-safe teal: 5.56:1 on paper, 5.94:1 on white, 5.03:1 on mist. */
  --teal-text:#256E6E;

  --paper:#F6F8F4;
  --mist:#E8EEE4;
  --stone:#5C6B5E;
  --stone-lt:#849687;
  --white:#FFFFFF;
  --rule:#DCE5D6;

  --ink:var(--forest);
  --body:#3D4A40;

  --display:"Sora","Public Sans",system-ui,sans-serif;
  --sans:"Public Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --sec:clamp(64px,9vw,132px);
  --gut:clamp(20px,5vw,64px);
  --maxw:1240px;
  --radius:14px;

  --shadow-sm:0 1px 2px rgba(30,58,36,.05),0 8px 24px -18px rgba(30,58,36,.25);
  --shadow-md:0 2px 4px rgba(30,58,36,.06),0 24px 48px -28px rgba(30,58,36,.35);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   2. RESET + BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0;line-height:1.14;
  letter-spacing:-.012em;font-weight:600;text-wrap:balance}
h1{font-size:clamp(35px,5.1vw,60px);line-height:1.1}
h2{font-size:clamp(27px,3.5vw,42px)}
h3{font-size:clamp(21px,2.3vw,27px);line-height:1.2}
h4{font-size:19px;line-height:1.3}
p{margin:0 0 1.05em;text-wrap:pretty}
p:last-child{margin-bottom:0}
::selection{background:var(--teal);color:#fff}
:focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:720px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--forest);
  color:#fff;padding:12px 20px;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* eyebrow: clinical register, mono */
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 16px;display:block}
.on-dark .eyebrow{color:var(--sage)}

/* ============================================================
   3. FLOW - the one motion idea, from the logo's wave
   ============================================================ */
@keyframes sapl-flow{to{stroke-dashoffset:-1000}}
@keyframes sapl-drift{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-18px,-9px,0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes sapl-node{
  0%,100%{opacity:.35;r:3}
  50%{opacity:1;r:4.6}
}
.flowfield{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.flowfield path{fill:none;stroke-linecap:round;stroke-dasharray:5 13;
  animation:sapl-flow 15s linear infinite}
.flowfield g{animation:sapl-drift 22s ease-in-out infinite}
.flowfield circle{animation:sapl-node 6s ease-in-out infinite}

/* reveal on scroll */
.js-motion .rev{opacity:0;transform:translateY(26px)}
.rev{transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rev.in{opacity:1;transform:none}
.js-motion .rev-d1{transition-delay:.09s}
.js-motion .rev-d2{transition-delay:.18s}
.js-motion .rev-d3{transition-delay:.27s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js-motion .rev{opacity:1!important;transform:none!important}
}

/* ============================================================
   4. HEADER - compact single row, true pill CTA, nothing wrapping
   ============================================================ */
.hdr{position:sticky;top:0;z-index:90;background:rgba(246,248,244,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.hdr.stuck{border-bottom-color:var(--rule);box-shadow:0 6px 24px -20px rgba(30,58,36,.5)}
.hdr-in{display:flex;align-items:center;gap:22px;height:96px;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.brand{display:flex;align-items:center;gap:11px;flex:none;margin-right:auto}
.brand img{height:50px;width:auto;filter:drop-shadow(0 2px 12px rgba(46,139,139,.20))}
.brand-tx{display:block;line-height:1.06}
.brand-tx b{display:block;font-family:var(--display);font-size:15.5px;color:var(--forest);
  letter-spacing:-.015em;font-weight:700}
.brand-tx span{font-family:var(--mono);font-size:8.6px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--teal-text)}
@media(min-width:430px){.brand img{height:62px}.brand-tx b{font-size:19px}.brand-tx span{font-size:10.5px}}
@media(min-width:900px){.brand img{height:70px}.brand-tx b{font-size:22px}.brand-tx span{font-size:11px}}

.nav{display:none;align-items:center;gap:2px}
@media(min-width:1060px){.nav{display:flex}}
.nav a{position:relative;padding:9px 13px;font-size:14.6px;font-weight:500;
  color:var(--body);border-radius:8px;transition:color .25s}
.nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
.nav a:hover,.nav a:focus-visible{color:var(--forest)}
.nav a:hover::after{transform:scaleX(1)}
.nav .has>button{display:flex;align-items:center;gap:6px;background:none;border:0;
  font:inherit;font-size:14.6px;font-weight:500;color:var(--body);cursor:pointer;
  padding:9px 13px;border-radius:8px}
.nav .has{position:relative}
.nav .has>button svg{width:10px;height:10px;transition:transform .3s}
.nav .has[aria-expanded="true"]>button svg{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 8px);left:0;min-width:286px;background:#fff;
  border:1px solid var(--rule);border-radius:var(--radius);padding:8px;
  box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.nav .has[aria-expanded="true"] .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:10px 13px;border-radius:9px;font-size:14.4px}
.drop a::after{display:none}
.drop a:hover{background:var(--mist);color:var(--forest)}

/* CTA pill - the one focal action */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  position:relative;overflow:hidden;flex:none;
  background:var(--teal-deep);color:#fff;font-weight:600;font-size:15px;
  padding:13px 24px;border-radius:999px;border:0;cursor:pointer;
  transition:color .4s var(--ease),box-shadow .4s var(--ease),transform .3s var(--ease);
  box-shadow:0 4px 16px -6px rgba(46,126,128,.6)}
.cta::before{content:"";position:absolute;inset:0;background:var(--forest);
  transform:translateX(-101%);transition:transform .48s var(--ease);z-index:0}
.cta span{position:relative;z-index:1}
.cta svg{position:relative;z-index:1;width:15px;height:15px;transition:transform .4s var(--ease)}
.cta:hover::before,.cta.fx::before{transform:translateX(0)}
.cta:hover,.cta.fx{color:#fff;box-shadow:0 10px 30px -10px rgba(30,58,36,.65)}
.cta:hover svg,.cta.fx svg{transform:translateX(4px)}
.cta.ghost{background:transparent;color:var(--forest);border:1.5px solid var(--rule);
  box-shadow:none}
.cta.ghost::before{background:var(--forest)}
.cta.ghost:hover,.cta.ghost.fx{color:#fff;border-color:var(--forest)}
.cta.lg{padding:17px 34px;font-size:16.5px}
.hdr .cta{display:none}
@media(min-width:760px){.hdr .cta{display:inline-flex}}

.burger{display:grid;place-items:center;width:44px;height:44px;flex:none;
  background:none;border:1px solid var(--rule);border-radius:11px;cursor:pointer}
@media(min-width:1060px){.burger{display:none}}
.burger span{display:block;width:19px;height:2px;background:var(--forest);
  border-radius:2px;transition:transform .3s,opacity .2s}
.burger span+span{margin-top:4.5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile drawer - no gaps, no duplicate toggles */
.drawer{position:fixed;inset:96px 0 0;background:var(--paper);z-index:89;
  transform:translateX(100%);transition:transform .42s var(--ease);
  overflow-y:auto;padding:22px var(--gut) 40px;visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer a{display:block;padding:14px 0;font-size:18px;font-weight:600;color:var(--forest);
  border-bottom:1px solid var(--rule)}
.drawer .sub a{padding:11px 0 11px 18px;font-size:15.6px;font-weight:400;color:var(--body);
  border-bottom:1px dashed var(--rule)}
.drawer .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-text);margin:26px 0 6px}
.drawer .cta{width:100%;margin-top:26px}
@media(min-width:1060px){.drawer{display:none}}

/* ============================================================
   5. HERO
   ============================================================ */
.hero{position:relative;background:var(--forest-deep);color:#EAF1E6;overflow:hidden;
  padding:clamp(72px,11vw,132px) 0 clamp(64px,9vw,108px)}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:#fff;margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--sage);position:relative;white-space:nowrap}
.hero .lede{font-size:clamp(17.5px,2vw,21px);max-width:60ch;color:#CFDCC9;margin-bottom:30px}
.hero-grid{display:grid;gap:clamp(34px,5vw,64px);align-items:center}
@media(min-width:980px){.hero-grid{grid-template-columns:1.08fr .92fr}}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:34px}
.hero .cta.ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.hero .cta.ghost::before{background:#fff}
.hero .cta.ghost:hover,.hero .cta.ghost.fx{color:var(--forest);border-color:#fff}
.trust{display:flex;flex-wrap:wrap;gap:9px}
.trust li{list-style:none;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.6px;letter-spacing:.05em;text-transform:uppercase;
  color:#BACCB4;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);
  padding:8px 14px;border-radius:999px}
.trust svg{width:13px;height:13px;color:var(--sage);flex:none}
.hero-media{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-md);
  aspect-ratio:4/5}
@media(min-width:980px){.hero-media{aspect-ratio:3/4}}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,transparent 42%,rgba(18,40,26,.55))}
.hero-tag{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;
  background:rgba(18,40,26,.72);backdrop-filter:blur(9px);border-radius:13px;
  padding:14px 17px;border:1px solid rgba(255,255,255,.12)}
.hero-tag b{display:block;font-family:var(--display);font-size:15.5px;color:#fff;margin-bottom:2px}
.hero-tag span{font-family:var(--mono);font-size:10.6px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sage)}

/* ============================================================
   6. SECTIONS + CARDS
   ============================================================ */
.sec{padding:var(--sec) 0;position:relative}
.sec.tint{background:var(--mist)}
.sec.dark{background:var(--forest);color:#D9E4D4}
.sec.dark h2,.sec.dark h3{color:#fff}
.sec-head{max-width:66ch;margin-bottom:clamp(38px,5vw,60px)}
.sec-head p{font-size:18px;color:var(--stone);margin-top:16px}
.sec.dark .sec-head p{color:#B7C7B2}

.grid{display:grid;gap:20px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
@media(min-width:700px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.g3{grid-template-columns:repeat(3,1fr)}}

/* service card - colour + text change + flow sweep, never lift-only */
.card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--rule);
  border-radius:var(--radius);padding:30px 26px 26px;display:flex;flex-direction:column;
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease)}
.card::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg,var(--forest) 0%,var(--teal-deep) 100%);
  transform:translateY(101%);transition:transform .5s var(--ease)}
.card>*{position:relative;z-index:1}
.card:hover,.card.fx{transform:translateY(-5px);border-color:transparent;box-shadow:var(--shadow-md)}
.card:hover::before,.card.fx::before{transform:translateY(0)}
.card:hover h3,.card.fx h3,.card:hover p,.card.fx p{color:#fff}
.card:hover .card-ic,.card.fx .card-ic{background:rgba(255,255,255,.14);color:var(--sage)}
.card:hover .card-go,.card.fx .card-go{color:var(--sage);gap:12px}
.card h3{transition:color .45s var(--ease);margin-bottom:9px}
.card p{font-size:15.4px;color:var(--stone);transition:color .45s var(--ease);flex:1}
.card-ic{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;
  background:var(--mist);color:var(--accent-ink);margin-bottom:19px;
  transition:background .45s var(--ease),color .45s var(--ease)}
.card-ic svg{width:25px;height:25px}
.card-go{display:inline-flex;align-items:center;gap:7px;margin-top:19px;
  font-family:var(--mono);font-size:11.4px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-ink);transition:color .45s var(--ease),gap .35s var(--ease)}
.card-go svg{width:13px;height:13px}

/* split feature */
.split{display:grid;gap:clamp(30px,5vw,66px);align-items:center}
@media(min-width:940px){.split{grid-template-columns:1fr 1fr}.split.rev-img{direction:rtl}
  .split.rev-img>*{direction:ltr}}
.split-media{border-radius:20px;overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:4/3;
  position:relative}
.split-media img{width:100%;height:100%;object-fit:cover}

/* checklist */
.checks{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.checks svg{width:19px;height:19px;color:var(--accent-ink);flex:none;margin-top:3px}
.sec.dark .checks svg{color:var(--sage)}

/* stat / fact strip - mono, clinical */
.facts{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden;grid-template-columns:1fr 1fr}
@media(min-width:860px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{background:#fff;padding:24px 20px}
.fact b{display:block;font-family:var(--display);font-size:clamp(25px,3vw,34px);
  color:var(--forest);line-height:1;margin-bottom:8px;letter-spacing:-.02em}
.fact span{font-family:var(--mono);font-size:10.6px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--stone);line-height:1.45;display:block}

/* FAQ - direct answers, AI-quotable */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:23px 46px 23px 0;position:relative;
  font-family:var(--display);font-size:clamp(17px,2vw,20.5px);font-weight:600;color:var(--forest);
  transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-ink)}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq .ans{padding:0 46px 25px 0;color:var(--stone);font-size:16.2px;max-width:74ch}

/* team */
.person{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;transition:box-shadow .45s var(--ease),transform .45s var(--ease)}
.person:hover,.person.fx{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.person-img{aspect-ratio:1/1;overflow:hidden;background:var(--mist);position:relative}
.person-img img{width:100%;height:100%;object-fit:cover;object-position:center 22%;
  transition:transform .7s var(--ease)}
.person:hover .person-img img,.person.fx .person-img img{transform:scale(1.05)}
.person-b{padding:22px 24px 26px}
.person-b h3{margin-bottom:4px}
.person-b .role{font-family:var(--mono);font-size:11.2px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:12px}
.person-b p{font-size:15.2px;color:var(--stone)}
.ph{display:grid;place-items:center;height:100%;color:var(--olive);text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:20px}

/* proof placeholder - honest, structural, clearly marked */
.slot{border:1.5px dashed var(--olive);border-radius:var(--radius);background:rgba(168,192,136,.09);
  padding:26px;text-align:center}
.slot b{display:block;font-family:var(--mono);font-size:10.6px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px}
.slot p{font-size:15px;color:var(--stone);max-width:48ch;margin:0 auto}

/* CTA band */
.band{background:var(--forest);color:#fff;position:relative;overflow:hidden;
  padding:clamp(58px,8vw,96px) 0}
.band .wrap{position:relative;z-index:2;text-align:center}
.band h2{color:#fff;margin-bottom:16px}
.band p{color:#BDCDB7;font-size:18px;max-width:56ch;margin:0 auto 30px}
.band .cta{background:var(--sage);color:var(--forest-deep)}
.band .cta::before{background:#fff}
.band .cta:hover,.band .cta.fx{color:var(--forest-deep)}

/* ============================================================
   7. ARTICLE (service + legal pages)
   ============================================================ */
.article{padding:clamp(50px,7vw,86px) 0 var(--sec)}
.article .narrow>h2{margin:46px 0 14px}
.article .narrow>h3{margin:32px 0 10px}
.article .narrow>ul,.article .narrow>ol{padding-left:1.15em;margin:0 0 1.1em;color:var(--body)}
.article .narrow>ul li,.article .narrow>ol li{margin-bottom:.5em}
.article .narrow>ul li::marker{color:var(--teal)}
.pagehero{background:var(--mist);padding:clamp(52px,7vw,92px) 0 clamp(40px,5vw,64px);
  position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.pagehero .wrap{position:relative;z-index:2}
.pagehero p.lede{font-size:19px;color:var(--stone);max-width:62ch;margin-top:18px}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:14px}
.crumb a:hover{text-decoration:underline}

/* ============================================================
   8. FOOTER - standardized across every page
   ============================================================ */
.ftr{background:var(--forest-deep);color:#B7C7B2;padding:clamp(58px,7vw,86px) 0 34px;
  position:relative;overflow:hidden}
.ftr .wrap{position:relative;z-index:2}
.ftr-grid{display:grid;gap:38px;margin-bottom:44px}
@media(min-width:760px){.ftr-grid{grid-template-columns:1.5fr 1fr 1fr}}
@media(min-width:1040px){.ftr-grid{grid-template-columns:1.7fr 1fr 1fr 1.15fr}}
.ftr h4{color:#fff;font-family:var(--mono);font-size:10.8px;letter-spacing:.15em;
  text-transform:uppercase;font-weight:500;margin-bottom:17px;color:var(--sage)}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:10px}
.ftr a{font-size:15px;transition:color .28s,padding-left .28s}
.ftr a:hover{color:#fff;padding-left:5px}
.ftr-brand img{height:88px;width:auto;margin-bottom:19px;opacity:.96}
.ftr-brand p{font-size:14.8px;max-width:36ch;color:#9BAF97}
.ftr-nap{font-style:normal;font-size:15px;line-height:1.85}
.ftr-nap a:hover{color:var(--sage)}
.ftr-btm{border-top:1px solid rgba(255,255,255,.11);padding-top:24px;
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  font-size:13.4px;color:#8DA089}
.ftr-btm a{font-size:13.4px}
.ftr-btm .sp{margin-left:auto}

/* ============================================================
   9. PRINT
   ============================================================ */
@media print{
  .hdr,.drawer,.band,.ftr .ftr-grid,.flowfield{display:none}
  body{background:#fff;font-size:12pt}
}

/* ============================================================
   10. THE 3D LYMPHATIC HERO
   The hero object is the lymphatic system: fluid moving along
   vessels, through nodes, upward. Not decoration.
   ============================================================ */
.hero{min-height:auto}
.lymph-wrap{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9;overflow:hidden}
.lymph-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#lymph{width:100%;height:100%;display:block}
.hero-fallback{position:absolute;inset:0;z-index:0;display:none;
  background:radial-gradient(46% 46% at 62% 38%,rgba(168,192,136,.34),transparent 68%),
             radial-gradient(40% 40% at 28% 72%,rgba(46,139,139,.26),transparent 70%)}
@media(max-width:760px){ .lymph-wrap{opacity:.55} }

/* ============================================================
   11. CINEMATIC INTRO - logo lands LAST, then opens into the site
   ============================================================ */
.intro{position:fixed;inset:0;z-index:300;background:var(--forest-deep);
  display:grid;place-items:center;overflow:hidden}
.intro[hidden]{display:none}
.intro-vessel{position:absolute;width:min(120vw,1500px);height:auto;opacity:.85}
.intro-vessel path{fill:none;stroke:var(--sage);stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:intro-draw 1.5s cubic-bezier(.4,0,.2,1) forwards}
.intro-vessel path:nth-child(2){stroke:var(--teal-lt);animation-delay:.16s}
.intro-vessel path:nth-child(3){animation-delay:.32s;opacity:.6}
.intro-vessel path:nth-child(4){stroke:var(--teal-lt);animation-delay:.48s;opacity:.5}
@keyframes intro-draw{to{stroke-dashoffset:0}}

.intro-node{fill:var(--sage);opacity:0;animation:intro-pop .5s ease forwards}
@keyframes intro-pop{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.35)}100%{opacity:.95;transform:scale(1)}}

/* The opening. The mark alone said nothing to a first-time visitor, so the
   clinic NAME carries it now, at hero scale and bright, with the mark above.
   Sequence: vessels draw, mark lands, name rises line by line, tagline, split. */
.intro-stack{position:relative;z-index:2;display:grid;justify-items:center;gap:0;
  padding:0 22px;text-align:center}
.intro-logo{width:min(34vw,150px);opacity:0;transform:scale(.9);
  filter:drop-shadow(0 0 40px rgba(168,192,136,.55));
  animation:intro-logo .9s cubic-bezier(.2,.7,.3,1) 1.55s forwards}
@media(min-width:760px){.intro-logo{width:min(20vw,190px)}}
@keyframes intro-logo{to{opacity:1;transform:scale(1)}}

.intro-name{margin:18px 0 0;font-family:var(--display);font-weight:700;
  line-height:1.02;letter-spacing:-.028em;color:#fff;
  text-shadow:0 0 60px rgba(168,192,136,.35)}
.intro-name span{display:block}
.intro-n1{font-size:clamp(32px,7.4vw,80px)}
.intro-n2{font-size:clamp(19px,3.9vw,42px);color:var(--sage);
  letter-spacing:-.012em;margin-top:.1em}
/* each line rises in turn, so the name assembles rather than simply appearing */
.intro-n1,.intro-n2{opacity:0;transform:translateY(26px);
  animation:intro-rise .85s cubic-bezier(.2,.7,.25,1) forwards}
.intro-n1{animation-delay:2.05s}
.intro-n2{animation-delay:2.28s}
@keyframes intro-rise{to{opacity:1;transform:none}}

.intro-word{margin:28px 0 0;font-family:var(--mono);
  font-size:clamp(11.5px,1.7vw,15px);letter-spacing:.28em;text-transform:uppercase;
  color:var(--sage-lt);opacity:0;animation:intro-word .7s ease 2.75s forwards}
@keyframes intro-word{to{opacity:1}}

/* the split: the composition parts and opens into the hero */
.intro-half{position:absolute;left:0;right:0;height:50.5%;background:var(--forest-deep);z-index:1}
.intro-half.t{top:0;animation:intro-up .95s cubic-bezier(.7,0,.2,1) 3.75s forwards}
.intro-half.b{bottom:0;animation:intro-dn .95s cubic-bezier(.7,0,.2,1) 3.75s forwards}
@keyframes intro-up{to{transform:translateY(-100%)}}
@keyframes intro-dn{to{transform:translateY(100%)}}
.intro.done{animation:intro-gone .45s ease 4.55s forwards}
@keyframes intro-gone{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){ .intro{display:none} }

/* ============================================================
   12. TEXT EFFECTS - words rise in, headline term stays alive
   ============================================================ */
.w{display:inline-block;overflow:hidden;vertical-align:bottom}
.w>i{display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform .78s cubic-bezier(.2,.7,.25,1)}
.in .w>i,.no-motion .w>i{transform:none}
.js-motion .w>i{transform:translateY(105%)}
.js-motion .in .w>i{transform:none}

/* the one live term: a flowing sage underline that never stops */
.live{position:relative;color:var(--sage);white-space:nowrap}
.live::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.09em;
  background:linear-gradient(90deg,transparent,var(--sage),var(--teal-lt),var(--sage),transparent);
  background-size:220% 100%;animation:live-flow 4.5s linear infinite;border-radius:2px}
@keyframes live-flow{to{background-position:220% 0}}

/* section headings get a rising rule that draws as they enter */
.sec-head h2{position:relative;padding-bottom:16px}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--accent-ink);transition:width .9s cubic-bezier(.2,.7,.25,1) .15s}
.sec-head.in h2::after{width:100%;max-width:340px;opacity:.35}
.sec.dark .sec-head h2::after{background:var(--sage)}

/* ============================================================
   13. ALTERNATING SECTION RHYTHM
   paper > mist > forest > paper > mist, so the eye gets a beat
   and no two adjacent bands read the same.
   ============================================================ */
.sec.tint{background:var(--mist)}
.sec.paper{background:var(--paper)}
.sec.deep{background:var(--forest-deep);color:#CBD9C6}
.sec.deep h2,.sec.deep h3{color:#fff}
.sec.deep .sec-head p{color:#AFC2AA}

/* ============================================================
   14. MAP - clicking it opens directions
   ============================================================ */
.map{display:block;position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--rule);background:var(--mist);aspect-ratio:16/10;
  transition:box-shadow .45s var(--ease),transform .45s var(--ease)}
.map:hover,.map.fx{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.map iframe{width:100%;height:100%;border:0;filter:saturate(.82) contrast(1.03)}
.map-badge{position:absolute;left:14px;bottom:14px;z-index:2;display:flex;align-items:center;gap:9px;
  background:var(--forest);color:#fff;padding:11px 17px;border-radius:999px;
  font-size:14.2px;font-weight:600;box-shadow:var(--shadow-md);pointer-events:none}
.map-badge svg{width:15px;height:15px;color:var(--sage)}
.map:hover .map-badge,.map.fx .map-badge{background:var(--teal)}

/* ============================================================
   15. BOOKING FORM (GHL form stands in here)
   ============================================================ */
.bookform{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);
  padding:clamp(24px,4vw,38px);box-shadow:var(--shadow-md)}
.bookform .row{display:grid;gap:16px;margin-bottom:16px}
@media(min-width:640px){.bookform .row.two{grid-template-columns:1fr 1fr}}
.bookform label:not(.consent){display:block;font-family:var(--mono);font-size:10.6px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:7px}
.bookform input,.bookform select,.bookform textarea{width:100%;font:inherit;font-size:16px;
  padding:13px 15px;border:1.5px solid var(--rule);border-radius:10px;background:var(--paper);
  color:var(--ink);transition:border-color .3s,box-shadow .3s}
.bookform input:focus,.bookform select:focus,.bookform textarea:focus{outline:none;
  border-color:var(--accent-ink);box-shadow:0 0 0 4px rgba(62,107,74,.13)}
.bookform .consent{display:flex;gap:11px;align-items:flex-start;font-size:14.2px;color:var(--stone)}
.bookform .consent input{width:19px;height:19px;flex:none;margin-top:2px}
.bookform .cta{width:100%;margin-top:6px}
.bookform .note{font-size:13.2px;color:var(--stone);margin-top:14px}
.formstate{display:none;text-align:center;padding:30px 10px}
.formstate.on{display:block}
.formstate h3{margin-bottom:10px}
.formstate p{color:var(--stone)}

/* ============================================================
   16. INTERIOR PAGE HERO WITH IMAGERY
   ============================================================ */
.pagehero-grid{display:grid;gap:clamp(28px,4vw,54px);align-items:center}
@media(min-width:900px){
  .pagehero.has-media .pagehero-grid{grid-template-columns:1.05fr .95fr}
}
.pagehero-media{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-md);
  aspect-ratio:3/2}
.pagehero-media img{width:100%;height:100%;object-fit:cover;display:block}
.pagehero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(210deg,transparent 55%,rgba(18,40,26,.28))}

/* in-article imagery */
.article figure{margin:34px 0;border-radius:16px;overflow:hidden;border:1px solid var(--rule);
  box-shadow:var(--shadow-sm);background:var(--mist)}
.article figure img{width:100%;height:auto;display:block}
.article figcaption{padding:13px 18px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--stone);background:#fff;border-top:1px solid var(--rule)}
.imgrow{display:grid;gap:16px;margin:34px 0}
@media(min-width:680px){.imgrow.two{grid-template-columns:1fr 1fr}
  .imgrow.three{grid-template-columns:repeat(3,1fr)}}
.imgrow img{width:100%;height:100%;object-fit:cover;aspect-ratio:10/7;border-radius:14px;
  border:1px solid var(--rule);display:block;transition:transform .6s var(--ease)}
.imgrow a:hover img,.imgrow img:hover{transform:scale(1.03)}

/* ============================================================
   17. ARTICLES (blog provision)
   ============================================================ */
.postmeta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink);display:block;margin-bottom:9px}
.card.postcard{padding:0;overflow:hidden}
.card.postcard .postcard-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--mist)}
.card.postcard .postcard-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.card.postcard:hover .postcard-img img,.card.postcard.fx .postcard-img img{transform:scale(1.04)}
.card.postcard .postmeta,.card.postcard h3,.card.postcard p,.card.postcard .card-go{
  margin-left:26px;margin-right:26px}
.card.postcard .postmeta{margin-top:24px}
.card.postcard .card-go{margin-bottom:26px}
.card.postcard:hover .postmeta,.card.postcard.fx .postmeta{color:var(--sage)}
.pager{display:flex;gap:8px;justify-content:center;margin-top:44px}
.pager .page-numbers{display:grid;place-items:center;min-width:44px;height:44px;padding:0 14px;
  border:1px solid var(--rule);border-radius:10px;background:#fff;font-size:15px;
  transition:background .3s,color .3s,border-color .3s}
.pager .page-numbers:hover,.pager .page-numbers.current{background:var(--forest);color:#fff;
  border-color:var(--forest)}
/* article body rhythm */
.article .narrow>p{font-size:17.4px;line-height:1.78}
.article .narrow>h2{font-size:clamp(24px,3vw,32px)}
.article .narrow>blockquote{margin:30px 0;padding:20px 26px;border-left:3px solid var(--sage);
  background:var(--mist);border-radius:0 12px 12px 0;font-size:17.5px;color:var(--ink)}
.article .narrow>blockquote p:last-child{margin-bottom:0}

/* ============================================================
   PREMIUM COMPONENT SYSTEM  (v2.0)
   Mobile-first. Every interactive element gets an animated
   colour + text-colour change on desktop hover and an .fx twin
   fired by scroll on touch, per the CEP design standard.
   ============================================================ */

/* ---- brand wordmark: geometric sans matching the logo letterforms ---- */
.brand-tx b{font-family:"Jost",var(--display);font-weight:600;letter-spacing:.005em}
.brand-tx span{font-family:"Jost",var(--mono);font-weight:500}

/* ---- section rhythm: no two adjacent sections share a ground ---- */
.sec-tight{padding:56px 0}
.sec-dark{background:var(--forest-deep);color:#E7EFE6}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark p{color:#BFD2BC}
.sec-dark .eyebrow{color:var(--sage)}
.sec-mist{background:var(--mist)}

/* ---- TRUST STRIP ---- */
.tstrip{background:var(--forest);color:#fff;padding:26px 0}
.tstrip-in{display:grid;grid-template-columns:1fr 1fr;gap:22px 14px;text-align:center}
.tstrip-i b{display:block;font-family:var(--display);font-size:20px;line-height:1.1;color:#fff}
.tstrip-i span{display:block;margin-top:5px;font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--sage)}
@media(min-width:760px){
  .tstrip-in{grid-template-columns:repeat(4,1fr);gap:18px}
  .tstrip-i b{font-size:25px}
  .tstrip-i span{font-size:10.5px}
}

/* ---- CARD BASE: the hover contract lives here ---- */
.card{
  --card-h:var(--forest);      /* heading   */
  --card-p:var(--body);        /* body      */
  --card-w:var(--stone);       /* who-line  */
  --card-go:var(--teal-text);  /* go-link: AA-safe, see --teal-text */
  --card-ic-bg:var(--mist);
  --card-ic-fg:var(--accent-ink);
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--rule);border-radius:16px;
  padding:26px 22px;overflow:hidden;
  transition:transform .42s cubic-bezier(.2,.7,.3,1),
             box-shadow .42s cubic-bezier(.2,.7,.3,1),
             background-color .42s ease,border-color .42s ease;
}
.card::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(150deg,var(--forest) 0%,var(--forest-deep) 100%);
  opacity:0;transition:opacity .42s ease;
}
.card > *{position:relative;z-index:1}
.card h3{transition:color .42s ease}
.card p,.card li{transition:color .42s ease}
.card .card-ic{
  width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:var(--card-ic-bg);color:var(--card-ic-fg);margin-bottom:16px;
  transition:background-color .42s ease,color .42s ease,transform .42s cubic-bezier(.2,.7,.3,1);
}
.card .card-ic svg{width:22px;height:22px}
.card .card-go{
  margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--card-go);transition:color .42s ease,gap .42s ease;
}
.card .card-go svg{width:15px;height:15px;transition:transform .42s cubic-bezier(.2,.7,.3,1)}

/* the activated state: one rule, two triggers (hover, and .fx on touch) */
.card:hover,.card.fx{
  transform:translateY(-7px);
  box-shadow:0 22px 48px -18px rgba(18,40,26,.42);
  border-color:var(--forest);
}
.card:hover::before,.card.fx::before{opacity:1}
.card:hover h3,.card.fx h3{color:#fff}
.card:hover p,.card.fx p,.card:hover li,.card.fx li{color:#C6D8C2}
.card:hover .card-ic,.card.fx .card-ic{background:var(--sage);color:var(--forest-deep);transform:rotate(-6deg) scale(1.06)}
.card:hover .card-go,.card.fx .card-go{color:var(--sage);gap:13px}
.card:hover .card-go svg,.card.fx .card-go svg{transform:translateX(4px)}

/* ---- SERVICE GRID ---- */
.svc-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:680px){.svc-grid{grid-template-columns:1fr 1fr;gap:20px}}
@media(min-width:1040px){.svc-grid{grid-template-columns:repeat(3,1fr);gap:22px}}
.svc-grid .card h3{font-family:var(--display);font-size:20px;line-height:1.25;
  color:var(--card-h);margin:0 0 10px;text-wrap:balance}
.svc-grid .card p{font-size:15.5px;line-height:1.62;color:var(--card-p);margin:0;text-wrap:pretty}
.svc-grid .card .who{margin-top:12px;font-size:13.5px;color:var(--card-w);font-style:italic}
/* the lead service reads louder than its siblings */
.card-lead{background:linear-gradient(155deg,#F2F7EE 0%,#E6EFDF 100%);border-color:var(--sage)}

/* ---- PROBLEM GRID ---- */
.prob-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:30px}
@media(min-width:760px){.prob-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
.prob{padding:24px 22px;border-radius:14px;background:var(--white);
  border-left:3px solid var(--sage);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .4s ease,background-color .4s ease}
.prob:hover,.prob.fx{transform:translateX(5px);border-left-color:var(--teal);background:#FBFDF9}
.prob b{display:block;font-family:var(--display);font-size:17px;color:var(--forest);margin-bottom:8px}
.prob span{font-size:15px;line-height:1.6;color:var(--body)}

/* ---- PROCESS STEPS ---- */
.steps{display:grid;grid-template-columns:1fr;gap:18px;counter-reset:s;margin-top:34px}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:26px}}
.step{position:relative;padding:30px 24px 26px;border-radius:16px;background:rgba(255,255,255,.055);
  border:1px solid rgba(168,192,136,.24);
  transition:background-color .42s ease,border-color .42s ease,transform .42s cubic-bezier(.2,.7,.3,1)}
.step:hover,.step.fx{background:rgba(168,192,136,.13);border-color:var(--sage);transform:translateY(-5px)}
.step-n{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:17px;font-weight:600;
  background:var(--sage);color:var(--forest-deep);margin-bottom:16px;
  transition:transform .42s cubic-bezier(.2,.7,.3,1)}
.step:hover .step-n,.step.fx .step-n{transform:scale(1.09) rotate(-5deg)}
.step b{display:block;font-family:var(--display);font-size:19px;color:#fff;margin-bottom:9px}
.step p{font-size:15px;line-height:1.62;color:#BFD2BC;margin:0}
@media(min-width:820px){
  .step::after{content:"";position:absolute;top:52px;right:-17px;width:14px;height:1px;
    background:linear-gradient(90deg,var(--sage),transparent)}
  .step:last-child::after{display:none}
}

/* ---- SPLIT (solution / team / any 2-up) ---- */
.split2{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}
@media(min-width:900px){.split2{grid-template-columns:1.05fr .95fr;gap:60px}}
.split2.flip .s2-media{order:-1}
@media(min-width:900px){.split2.flip .s2-media{order:0}}
.s2-media{position:relative;border-radius:18px;overflow:hidden;background:var(--mist)}
.s2-media img{display:block;width:100%;height:auto;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.s2-media:hover img,.s2-media.fx img{transform:scale(1.045)}
.s2-tag{position:absolute;left:16px;bottom:16px;right:16px;padding:13px 16px;border-radius:11px;
  background:rgba(18,40,26,.88);backdrop-filter:blur(7px);color:#fff}
.s2-tag b{display:block;font-family:var(--display);font-size:15px}
.s2-tag span{display:block;margin-top:3px;font-size:12.5px;color:var(--sage)}

/* ---- BENEFIT LIST (solution) ---- */
.bens{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:13px}
.bens li{display:flex;gap:13px;align-items:flex-start;padding:13px 15px;border-radius:11px;
  background:var(--white);border:1px solid var(--rule);
  transition:border-color .4s ease,transform .4s cubic-bezier(.2,.7,.3,1),background-color .4s ease}
.bens li:hover,.bens li.fx{border-color:var(--sage);transform:translateX(5px);background:#FBFDF9}
.bens svg{width:19px;height:19px;color:var(--teal);flex:none;margin-top:2px}
.bens b{display:block;font-family:var(--display);font-size:15.5px;color:var(--forest);margin-bottom:2px}
.bens span{font-size:14.5px;line-height:1.55;color:var(--body)}

/* ---- PROOF / QUOTE ---- */
.quote{border-radius:18px;padding:32px 26px;background:var(--white);border:1px solid var(--rule)}
@media(min-width:820px){.quote{padding:46px 44px}}
.quote-mark{font-family:var(--display);font-size:56px;line-height:.7;color:var(--sage);margin-bottom:14px}
.quote p{font-family:var(--display);font-size:19px;line-height:1.55;color:var(--forest);margin:0;text-wrap:pretty}
@media(min-width:820px){.quote p{font-size:23px}}
.quote cite{display:block;margin-top:20px;font-style:normal;font-size:14px;color:var(--stone)}
.stars{display:flex;gap:3px;margin-bottom:16px}
.stars svg{width:17px;height:17px;color:#E0A32E}

/* ---- FINAL CTA BAND ---- */
.endcta{background:linear-gradient(140deg,var(--forest) 0%,var(--forest-deep) 100%);
  color:#fff;padding:64px 0;text-align:center;position:relative;overflow:hidden}
.endcta h2{font-size:clamp(28px,6vw,44px);line-height:1.12;color:#fff;margin:0 0 14px;text-wrap:balance}
.endcta p{font-size:17px;color:#C6D8C2;max-width:52ch;margin:0 auto 28px;text-wrap:pretty}
.endcta .note{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--sage)}

/* ---- STICKY MOBILE BOOK BAR ---- */
.mbook{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(246,248,244,.94);backdrop-filter:blur(12px);border-top:1px solid var(--rule);
  display:flex;gap:10px;transform:translateY(105%);transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.mbook.show{transform:translateY(0)}
.mbook a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 12px;border-radius:11px;font-size:15px;font-weight:600;text-decoration:none;
  white-space:nowrap;line-height:1}
.mbook a svg{width:17px;height:17px;flex:none}
.mbook .m-call{flex:0 0 34%}
.mbook .m-call{background:var(--mist);color:var(--forest)}
.mbook .m-book{background:var(--teal);color:#fff}
@media(min-width:900px){.mbook{display:none}}
body.has-mbook{padding-bottom:0}
@media(max-width:899px){body.has-mbook{padding-bottom:76px}}

/* ---- ARTICLE, RE-LAID OUT AS SECTIONS ---- */
.sec-lead{padding-top:44px;padding-bottom:10px}
.sec-paper-alt{background:var(--paper)}
.lead-well{position:relative;padding-left:20px;border-left:3px solid var(--sage)}
.lead-well p{font-size:19px;line-height:1.62;color:var(--forest);margin:0 0 14px;text-wrap:pretty}
.lead-well p:last-child{margin-bottom:0}
.lead-well p strong{color:var(--forest);font-weight:700}
@media(min-width:820px){
  .sec-lead{padding-top:60px}
  .lead-well{padding-left:28px}
  .lead-well p{font-size:21px;line-height:1.6}
}
h2.blk-h{font-family:var(--display);font-size:clamp(23px,4.6vw,33px);line-height:1.16;
  color:var(--forest);margin:0 0 18px;text-wrap:balance}
.sec-dark h2.blk-h{color:#fff}
.split2 h2.blk-h{margin-bottom:16px}

/* short lists become a scannable check grid instead of bullets */
.checkgrid{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:1fr;gap:11px}
@media(min-width:700px){.checkgrid{grid-template-columns:1fr 1fr;gap:13px}}
.checkgrid li{display:flex;gap:12px;align-items:flex-start;padding:15px 17px;border-radius:12px;
  background:var(--white);border:1px solid var(--rule);
  transition:border-color .4s ease,transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s ease}
.checkgrid li:hover,.checkgrid li.fx{border-color:var(--sage);transform:translateY(-3px);
  box-shadow:0 12px 26px -14px rgba(18,40,26,.28)}
.checkgrid svg{width:18px;height:18px;color:var(--teal);flex:none;margin-top:2px}
.checkgrid span{font-size:15.4px;line-height:1.55;color:var(--body)}
.sec-mist .checkgrid li,.sec-paper-alt .checkgrid li{background:var(--white)}

/* prose inside the re-laid-out sections */
.sec .wrap.narrow p{font-size:17.5px;line-height:1.72;color:var(--body);text-wrap:pretty}
.article-sections .wrap.narrow{max-width:780px}

/* ---- READING MEASURE (audit F11) ----------------------------------------
   The old markup nested a centred .wrap.narrow inside the wide .wrap, so a
   heading and the paragraph directly beneath it began 230px apart, and the
   left edge of the text jumped in and out as you scrolled past sections that
   had an image and sections that did not.

   .measure keeps the comfortable reading width but aligns LEFT to the page
   container instead of centring itself inside it, so every heading, every
   paragraph and every image in the page shares one left edge. */
.measure{max-width:72ch;margin-left:0;margin-right:0}
.measure p{font-size:17.5px;line-height:1.72;color:var(--body);text-wrap:pretty}
.measure>h2.blk-h{margin-bottom:14px}
.measure>ul,.measure>ol{padding-left:20px}
.measure>ul li,.measure>ol li{margin-bottom:8px}
.measure>ul li::marker,.measure>ol li::marker{color:var(--accent-ink)}
/* A text-only section still needs the right-hand side to do something, so the
   measure sits against a soft rule rather than a void. */
@media(min-width:1000px){
  .sec>.wrap>.measure{position:relative;padding-right:40px}
  .sec>.wrap>.measure::after{content:"";position:absolute;top:6px;bottom:6px;
    right:0;width:1px;background:linear-gradient(to bottom,transparent,var(--rule) 18%,var(--rule) 82%,transparent)}
}
.split2 p{font-size:16.5px;line-height:1.7;color:var(--body);text-wrap:pretty}
.split2 .s2-media figure{margin:0}
.split2 .s2-media figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:13px 16px;background:rgba(18,40,26,.88);backdrop-filter:blur(7px);
  color:#D6E4D2;font-size:12.6px;line-height:1.45}
.split2 .s2-media img{border-radius:0}

/* ---- CONTACT PAGE ---- */
.ct-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:760px){.ct-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
.ct-card{display:flex;flex-direction:column;gap:12px;padding:26px 22px;border-radius:16px;
  background:var(--white);border:1px solid var(--rule);text-decoration:none;
  transition:transform .42s cubic-bezier(.2,.7,.3,1),border-color .42s ease,box-shadow .42s ease,background-color .42s ease}
.ct-card:hover,.ct-card.fx{transform:translateY(-6px);border-color:var(--forest);
  box-shadow:0 20px 44px -20px rgba(18,40,26,.4);background:var(--forest)}
.ct-ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:var(--mist);color:var(--accent-ink);transition:background-color .42s ease,color .42s ease}
.ct-ic svg{width:21px;height:21px}
.ct-card:hover .ct-ic,.ct-card.fx .ct-ic{background:var(--sage);color:var(--forest-deep)}
.ct-card b{font-family:var(--display);font-size:18px;color:var(--forest);transition:color .42s ease}
.ct-card span{font-size:15px;line-height:1.55;color:var(--body);transition:color .42s ease}
.ct-card em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--teal);transition:color .42s ease}
.ct-card:hover b,.ct-card.fx b{color:#fff}
.ct-card:hover span,.ct-card.fx span{color:#C6D8C2}
.ct-card:hover em,.ct-card.fx em{color:var(--sage)}
.ct-hero-map{border-radius:18px;overflow:hidden;min-height:300px;position:relative}
@media(min-width:900px){.ct-hero-map{min-height:420px}}
.ct-note{margin-top:26px;padding:18px 20px;border-radius:13px;background:#FFF8E8;
  border:1px solid #E8D9AE;display:flex;gap:13px;align-items:flex-start}
.ct-note svg{width:19px;height:19px;color:#A67C1A;flex:none;margin-top:2px}
.ct-note b{display:block;font-family:var(--display);font-size:15.5px;color:#6B4E10;margin-bottom:4px}
.ct-note span{font-size:14.6px;line-height:1.6;color:#6B4E10}

/* ---- IMAGE FORMATS: the page should not present every picture the same way ---- */

/* full-bleed cinematic band */
.media-band{position:relative;width:100%;overflow:hidden;background:var(--forest-deep)}
/* Height is capped. Left uncapped a 16:9 band fills the whole viewport on a
   wide screen and dominates the page for no reason. */
.media-band img{display:block;width:100%;height:210px;object-fit:cover;
  transition:transform 1.3s cubic-bezier(.2,.7,.3,1)}
@media(min-width:700px){.media-band img{height:280px}}
@media(min-width:1100px){.media-band img{height:340px}}
.media-band:hover img,.media-band.fx img{transform:scale(1.035)}
.media-band figcaption,.media-band .cap{position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:20px 24px;color:#E3EDE0;font-size:13.5px;line-height:1.5;
  background:linear-gradient(transparent,rgba(18,40,26,.86))}
@media(min-width:900px){
  .media-band figcaption,.media-band .cap{padding:34px 44px;font-size:14.6px}
}

/* two images side by side */
.media-pair{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:700px){.media-pair{grid-template-columns:1fr 1fr;gap:20px}}
.media-pair figure{margin:0;position:relative;border-radius:16px;overflow:hidden;background:var(--mist)}
.media-pair img{display:block;width:100%;height:auto;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.media-pair figure:hover img,.media-pair figure.fx img{transform:scale(1.05)}
.media-pair figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:13px 15px;
  background:rgba(18,40,26,.88);backdrop-filter:blur(6px);color:#D6E4D2;font-size:12.4px;line-height:1.45}

/* tall portrait beside text */
.media-tall{border-radius:18px;overflow:hidden;position:relative;background:var(--mist)}
.media-tall img{display:block;width:100%;height:auto;
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.media-tall:hover img,.media-tall.fx img{transform:scale(1.04)}
.media-tall figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 16px;
  background:rgba(18,40,26,.88);color:#D6E4D2;font-size:12.5px;line-height:1.45}
.split2.tall{align-items:stretch}
@media(min-width:900px){.split2.tall{grid-template-columns:1.15fr .85fr}}

/* offset duo: a large image with a smaller one overlapping its corner */
.media-duo{position:relative;padding-bottom:52px}
.media-duo .big{border-radius:18px;overflow:hidden}
.media-duo .big img{display:block;width:100%;height:auto}
.media-duo .small{position:absolute;right:0;bottom:0;width:46%;max-width:290px;
  border-radius:14px;overflow:hidden;border:5px solid var(--paper);
  box-shadow:0 18px 40px -18px rgba(18,40,26,.5)}
.media-duo .small img{display:block;width:100%;height:auto}
@media(min-width:900px){.media-duo{padding-bottom:70px}.media-duo .small{width:38%}}

/* ============================================================
   ACTIVATED CARD
   The card lays a dark overlay over its own ground, so its text has
   to invert. Driving that through variables the card itself owns
   means the activated state can never be out-specified by a rule
   further down the file, which is exactly how this broke before.
   ============================================================ */
.card:hover,.card.fx{
  --card-h:#FFFFFF;
  --card-p:#C9DBC4;
  --card-w:#A9C2A4;
  --card-go:var(--sage);
  --card-ic-bg:var(--sage);
  --card-ic-fg:var(--forest-deep);
}
.card-lead::before{background:linear-gradient(150deg,var(--forest) 0%,var(--forest-deep) 100%)}
.card-lead:hover,.card-lead.fx{border-color:var(--forest)}

/* ---- one relevant image per content section, at a sane size ---- */
.sec-img{border-radius:16px;overflow:hidden;position:relative;background:var(--mist);align-self:start}
.sec-img img{display:block;width:100%;height:300px;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
@media(min-width:900px){.sec-img img{height:360px}}
.sec-img:hover img,.sec-img.fx img{transform:scale(1.045)}
.sec-img figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:12px 15px;
  background:rgba(18,40,26,.88);backdrop-filter:blur(6px);color:#D6E4D2;
  font-size:12.4px;line-height:1.45}

/* ---- accessibility ---- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;
  padding:12px 18px;background:var(--forest);color:#fff;border-radius:0 0 10px 0;
  font-size:15px;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}
:where(a,button,summary,input,textarea,select):focus-visible{
  outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){
  .media-band img,.s2-media img,.sec-img img,.media-tall img,.media-pair img{transition:none}
}

/* ---- interior hero animation ---- */
.pagehero{position:relative;overflow:hidden}
.pagehero .lymph-wrap{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.85}
.pagehero .lymph-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pagehero .wrap{position:relative;z-index:1}
@media(max-width:760px){.pagehero .lymph-wrap{opacity:.6}}

/* ============================================================
   AUDIT REMEDIATION 3.0.0
   New components introduced by the fixes. Everything here exists
   because a specific finding asked for it.
   ============================================================ */

/* F09: the CASL consent used to render as eight lines of all-caps monospace
   directly above the submit button, so legal shouting was the last thing a
   hesitant patient read. Same words, ordinary sentence case, and the fine
   print steps down a level instead of competing with the button. */
.bookform label.consent,.consent{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  font-family:var(--sans);font-size:15.4px;line-height:1.55;color:var(--body);
  text-transform:none;letter-spacing:normal;font-weight:400}
.consent input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--teal-deep)}
.consent-fine{display:block;margin-top:6px;font-size:13.4px;line-height:1.5;color:var(--stone)}
.consent-fine a{text-decoration:underline}

/* Honeypot. Off-screen rather than display:none, because some bots skip
   hidden fields but fill positioned ones. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formerr{background:#FBEDEA;border:1px solid #E7C4BC;border-left:3px solid #A8382A;
  color:#7C2A1F;padding:13px 16px;border-radius:8px;margin:0 0 20px;font-size:15.4px}

/* F01: the confirmation state is now driven by the server redirect, not by JS
   hiding the form, so it survives a page reload and tells the truth. */
.formstate{display:none}
.formstate.on{display:block;background:var(--mist);border:1px solid var(--rule);
  border-radius:var(--radius);padding:28px 26px}
.formstate h3{margin-bottom:10px}

/* F12: the ninth service card, filling the empty grid cell and catching the
   patient who does not know which of the eight they need. */
.card-alt{background:linear-gradient(150deg,var(--forest) 0%,var(--forest-deep) 100%);
  border-color:transparent}
.card-alt h3,.card-alt p{color:#fff}
.card-alt p{color:#C6D8C2}
.card-alt .card-ic{background:rgba(255,255,255,.14);color:var(--sage)}
.card-alt .card-go{color:var(--sage)}
.card-alt:hover,.card-alt.fx{transform:translateY(-5px);box-shadow:var(--shadow-md)}

/* Booking page: three steps as a row rather than a bullet list buried beside
   the form. */
.steps3{list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media(min-width:820px){.steps3{grid-template-columns:repeat(3,1fr);gap:22px}}
.steps3 li{display:flex;gap:14px;align-items:flex-start;background:var(--white);
  border:1px solid var(--rule);border-radius:var(--radius);padding:20px 22px;
  font-size:15.8px;line-height:1.6}
.steps3 .n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--mist);
  color:var(--forest);font-family:var(--mono);font-size:14px;font-weight:600;
  display:grid;place-items:center}
.steps3 strong{color:var(--ink);font-weight:650}

/* Booking + contact: both columns start on the same line. The old layout let
   the form column begin higher than the explanation column, which left a
   visible hole in the top left of the section. */
.split-top{align-items:start}
.split-top>*{margin-top:0}

/* Figures returned by sapl_picture() when a caption is supplied. */
.fig{margin:0}
.fig figcaption{margin-top:10px;font-size:13.4px;line-height:1.5;color:var(--stone)}
.sec-img.fig figcaption,figure.sec-img figcaption{margin-top:10px}

/* F16: footer hours block and the site-pages column. */
.ftr-hours{list-style:none;margin:10px 0 0;padding:0;font-size:14.4px}
.ftr-hours li{display:flex;justify-content:space-between;gap:14px;padding:3px 0;
  max-width:210px;color:#C6D8C2}
.ftr-hours li span:first-child{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#9FB59B}
.ftr-note{margin-top:16px;font-size:14.2px;line-height:1.6;color:#B7C7B2}
.ftr-note a{text-decoration:underline}
.ftr-links{list-style:none;margin:16px 0 0;padding:0;display:flex;gap:16px;font-size:14.4px}

/* F15: the map iframe is lazy and arrived as an empty green box for several
   seconds. It now sits on a tinted ground with the address already showing, so
   the space is never blank and the "tap the map" instruction is never a lie. */
.map{background:var(--mist)}
.map::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(30,58,36,.03) 12px,rgba(30,58,36,.03) 24px);
  z-index:0}
.map iframe{position:relative;z-index:1}
.map-badge{z-index:2}

/* F08: the self-quote, restyled so it stops impersonating a testimonial.
   Different grammar from a review on purpose: a labelled statement block, no
   quotation mark, no attribution line pretending to be a person. */
.stance{margin-top:30px;background:var(--white);border:1px solid var(--rule);
  border-left:4px solid var(--accent-ink);border-radius:var(--radius);padding:26px 28px}
.stance-lbl{display:flex;align-items:center;gap:9px;margin:0 0 12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-ink)}
.stance-lbl svg{width:16px;height:16px;flex:none}
.stance-body{margin:0;font-size:19px;line-height:1.6;color:var(--forest);font-weight:500}
@media(min-width:820px){.stance-body{font-size:21px}}

/* F08: credential marks standing in for the reviews the clinic does not yet
   have. Everything shown is documented in the client record. */
.marks{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px}
@media(min-width:700px){.marks{grid-template-columns:1fr 1fr;gap:14px}}
@media(min-width:1060px){.marks{grid-template-columns:repeat(4,1fr)}}
.marks li{display:flex;gap:12px;align-items:flex-start;background:var(--white);
  border:1px solid var(--rule);border-radius:12px;padding:16px 18px;
  transition:transform .35s var(--ease),border-color .35s ease,box-shadow .35s ease}
.marks li:hover,.marks li.fx{transform:translateY(-3px);border-color:var(--sage);
  box-shadow:var(--shadow-sm)}
.marks svg{width:20px;height:20px;color:var(--teal-text);flex:none;margin-top:1px}
.marks b{display:block;font-family:var(--display);font-size:14.6px;color:var(--forest);
  font-weight:650;line-height:1.3;margin-bottom:4px}
.marks span{font-size:13.4px;line-height:1.5;color:var(--stone)}

/* Two-up figure row used on the home page problem section. */
.grid.g2{display:grid;gap:18px}
@media(min-width:800px){.grid.g2{grid-template-columns:1fr 1fr;gap:24px}}

/* ============================================================
   CONTACT HERO + MAP CARD (v3.0.1)
   The map used to carry the contact hero and it looked cheap: Google's own
   business card sat over the pin showing the single review count, its
   keyboard-shortcuts and error-reporting chrome ran along the bottom edge,
   and the whole frame was cut off at the fold. The hero is now a welcome,
   and the map is a designed card in the section about finding the place.
   ============================================================ */

/* The contact hero borrows the home hero's dark ground so the page opens with
   warmth instead of a pale empty band. */
.ct-hero{padding-bottom:clamp(52px,6vw,84px)}
.ct-hero .crumb.on-dark{color:var(--sage)}
.ct-hero .crumb.on-dark a:hover{color:#fff}
.ct-hero h1{font-size:clamp(33px,4.6vw,54px)}
.ct-hero .lede{color:#C6D8C2;max-width:52ch}

/* Two large tap targets: the phone and the address. On a caseload that skews
   older, a phone number is the action people actually take. */
.ct-reach{display:grid;gap:12px;margin:30px 0 8px}
@media(min-width:620px){.ct-reach{grid-template-columns:1fr 1fr;gap:14px}}
.ct-reach a{display:flex;align-items:center;gap:13px;padding:15px 18px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.ct-reach a:hover,.ct-reach a.fx{background:rgba(255,255,255,.11);border-color:var(--sage);
  transform:translateY(-3px)}
.ct-reach svg{width:21px;height:21px;color:var(--sage);flex:none}
.ct-reach em{display:block;font-style:normal;font-family:var(--mono);font-size:10.4px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--sage);margin-bottom:3px}
.ct-reach b{display:block;font-family:var(--display);font-size:17px;color:#fff;font-weight:600;
  letter-spacing:-.01em}

/* The map card. Google's furniture never touches an edge: the frame is inset,
   the name and address sit in our own header bar above it, and the bottom edge
   is masked so the attribution strip does not read as part of the design. */
.mapcard{border:1px solid var(--rule);border-radius:18px;overflow:hidden;
  background:var(--white);box-shadow:var(--shadow-sm)}
.mapcard-head{display:flex;align-items:center;gap:14px;padding:16px 20px;
  background:var(--forest);color:#fff}
.mapcard-pin{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.13)}
.mapcard-pin svg{width:19px;height:19px;color:var(--sage)}
.mapcard-nap{flex:1;min-width:0}
.mapcard-nap b{display:block;font-family:var(--display);font-size:15.6px;font-weight:650;
  letter-spacing:-.01em;color:#fff;line-height:1.25}
.mapcard-nap span{display:block;font-size:13.4px;color:#B7C7B2;margin-top:2px}
.mapcard-go{flex:none;display:inline-flex;align-items:center;gap:7px;padding:10px 16px;
  border-radius:999px;background:var(--teal);color:#fff;font-size:14px;font-weight:600;
  white-space:nowrap;transition:background .3s var(--ease),gap .3s var(--ease)}
.mapcard-go:hover,.mapcard-go.fx{background:#fff;color:var(--forest);gap:11px}
.mapcard-go svg{width:14px;height:14px}
/* The map body: designed content instead of a Google iframe. Renders instantly,
   carries no third-party chrome, and the button still opens the real route. */
.mapcard-body{padding:26px 24px 24px;background:var(--white)}
@media(min-width:760px){.mapcard-body{padding:30px 30px 28px}}
.mapcard-facts{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:16px}
@media(min-width:820px){.mapcard-facts{grid-template-columns:repeat(3,1fr);gap:26px}}
.mapcard-facts li{display:flex;gap:13px;align-items:flex-start}
.mapcard-facts svg{width:20px;height:20px;color:var(--teal-text);flex:none;margin-top:2px}
.mapcard-facts b{display:block;font-family:var(--display);font-size:15.4px;color:var(--forest);
  font-weight:650;letter-spacing:-.01em;margin-bottom:4px}
.mapcard-facts span{font-size:14.6px;line-height:1.6;color:var(--stone)}
.mapcard-open{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;
  background:var(--mist);color:var(--forest);font-size:15px;font-weight:600;
  border:1px solid var(--rule);
  transition:background .3s var(--ease),color .3s var(--ease),gap .3s var(--ease)}
.mapcard-open:hover,.mapcard-open.fx{background:var(--forest);color:#fff;gap:14px;border-color:transparent}
.mapcard-open svg{width:16px;height:16px}
.mapcard-open svg:first-child{color:var(--teal-text)}
.mapcard-open:hover svg:first-child,.mapcard-open.fx svg:first-child{color:var(--sage)}

@media(max-width:619px){
  .mapcard-head{flex-wrap:wrap}
  .mapcard-go{width:100%;justify-content:center}
}

/* ============================================================
   TEAM (v3.2.0)
   The client's own live site publishes both clinicians and their
   designations, so the page could finally be built. Registration numbers
   and real headshots are still outstanding, so this leads with the
   credential rather than a portrait, and says so.
   ============================================================ */
.clin{display:grid;gap:26px 38px;padding:34px 0;border-top:1px solid var(--rule)}
.clin:first-of-type{border-top:2px solid var(--forest)}
@media(min-width:900px){.clin{grid-template-columns:300px 1fr;gap:30px 48px}}
.clin-av{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;
  background:linear-gradient(145deg,var(--forest),var(--forest-deep));color:var(--sage);
  font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:.02em;
  margin-bottom:16px}
.clin-id h2{font-size:clamp(23px,2.6vw,30px);margin-bottom:6px}
.clin-role{font-size:15px;line-height:1.55;color:var(--teal-text);font-weight:600;margin:0 0 18px}
.clin-creds{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.clin-creds li{display:flex;gap:10px;align-items:flex-start;font-size:14.6px;line-height:1.5;
  color:var(--body)}
.clin-creds svg{width:16px;height:16px;color:var(--accent-ink);flex:none;margin-top:2px}
.clin-lead{font-size:18px;line-height:1.65;color:var(--forest)}
.clin-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.clin-links a{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--rule);font-size:14.4px;font-weight:600;color:var(--forest);
  transition:background .3s var(--ease),border-color .3s var(--ease),gap .3s var(--ease)}
.clin-links a:hover,.clin-links a.fx{background:var(--forest);color:#fff;border-color:transparent;gap:11px}
.clin-links svg{width:13px;height:13px}

/* Team: each clinician card carries one image of the work, never a portrait.
   Captioning an anonymous model as a named clinician is the one thing this
   page exists to avoid, so the caption describes the treatment, not a person. */
.clin-img{margin:26px 0 0}
.clin-img img{height:270px;object-fit:cover}
@media(min-width:900px){.clin-img img{height:320px}}

/* Footer social. One confirmed profile, so it is a single labelled link rather
   than a row of icons: an icon rail with one icon in it looks like the others
   failed to load. */
.ftr-social{margin:18px 0 0}
.ftr-social a{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);color:#BDCDB7;font-size:14px;line-height:1;
  text-decoration:none;transition:background .25s ease,color .25s ease,border-color .25s ease}
.ftr-social a:hover,.ftr-social a:focus-visible{background:rgba(255,255,255,.1);color:#fff;
  border-color:rgba(255,255,255,.34)}
.ftr-social svg{width:17px;height:17px;flex:none}

/* Real clinic photographs, shot on a phone by the clinician. They are not
   studio work and the grid does not pretend otherwise: even tiles, honest
   captions, no filter. Their job is to answer "what am I walking into", which
   a generated image cannot do at all. */
.clinicgrid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:30px}
@media(min-width:640px){.clinicgrid{grid-template-columns:1fr 1fr;gap:16px}}
@media(min-width:1000px){.clinicgrid{grid-template-columns:repeat(3,1fr);gap:18px}}
.clinicgrid-i{margin:0;position:relative;border-radius:14px;overflow:hidden;
  background:var(--mist);box-shadow:var(--shadow-sm)}
.clinicgrid-i img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.clinicgrid-i:hover img,.clinicgrid-i.fx img{transform:scale(1.04)}
.clinicgrid-i figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:12px 14px;
  font-size:13.2px;line-height:1.4;color:#fff;
  background:linear-gradient(transparent,rgba(18,40,26,.86) 55%)}
@media(prefers-reduced-motion:reduce){.clinicgrid-i img{transition:none}}