/* ============================================================
   Welo Chiropractic, shared site stylesheet (Direction A)
   Single source of truth for every /a/ page.
   Extracted from a/index.html, then extended with the
   inner-page components documented in /_ds/.
   Do not fork this file per page: add a component here instead.
   ============================================================ */
:root{
  --green:#2C4A3E;
  --green-d:#1F362D;
  --green-l:#3C5F50;
  --sage:#E7EEE7;
  --amber:#E0A458;
  --amber-d:#C98C3F;
  --amber-soft:#F5E3C5;
  --cream:#FBF7F0;
  --sand:#F2EADD;
  --ink:#22302A;
  --muted:#5C6B63;
  --line:#EAE0CF;
  --wa:#25D366;
  --zh:'Noto Sans SC',sans-serif;
  --r:18px;
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream);
  color:var(--ink);
  font:16px/1.65 "Cabin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:64px;
}
h1,h2,h3,.serif{
  font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.01em;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}

/* kicker: short accent bar plus one uppercase factual line, never wraps */
.kicker{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--green-l);
  font-weight:600;
  white-space:nowrap;
}
.kicker::before{content:"";flex:0 0 34px;height:2px;background:var(--amber)}
.kicker.on-dark{color:var(--amber)}

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:14px 24px;
  border-radius:100px;
  text-decoration:none;
  font-size:15.5px;
  font-weight:600;
  border:0;
  cursor:pointer;
}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:#1FB857}
.btn-ghost{background:transparent;color:var(--green);border:1.5px solid #CFC3AE}
.btn-ghost:hover{border-color:var(--green)}
.btn-light{background:#fff;color:var(--green-d)}
.btn-light:hover{background:var(--sand)}

/* header */
header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(251,247,240,.95);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #E6DCCB;
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;position:relative}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:38px;width:auto;display:block}
.menu{display:none;gap:28px;font-size:15px;align-items:center}
.menu a{text-decoration:none;color:var(--muted)}
.menu a:hover{color:var(--green)}
.menu .book-link{color:var(--green);font-weight:600;border-bottom:2px solid var(--amber);padding-bottom:2px}
.hamb{display:block;background:none;border:0;padding:10px;cursor:pointer}
.hamb span{display:block;width:23px;height:2px;background:var(--green);margin:5px 0;transition:.25s}
header.open .hamb span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.open .hamb span:nth-child(2){opacity:0}
header.open .hamb span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drop{
  display:none;
  position:absolute;
  top:74px;
  left:-22px;
  right:-22px;
  background:var(--cream);
  border-bottom:1px solid #E6DCCB;
  padding:10px 22px 22px;
}
.drop a{display:block;padding:13px 0;font-size:17px;text-decoration:none;color:var(--green);border-bottom:1px solid var(--line)}
.drop a:last-child{border-bottom:0;font-weight:600}
header.open .drop{display:block}
@media(min-width:940px){
  .menu{display:flex}
  .hamb,.drop{display:none}
}

/* hero: the baby photo leads, no heavy overlay */
.hero{padding:44px 0 30px}
.hero-grid{display:grid;gap:30px}
.hero h1{font-size:clamp(32px,8.4vw,62px);margin:16px 0 16px;color:var(--green-d)}
.hero h1 em{font-style:italic;color:var(--green-l)}
.lede{font-size:17.5px;color:var(--muted);max-width:50ch}
.cta-row{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.cta-row .btn{width:100%}
.hero-note{margin-top:14px;font-size:13.5px;color:var(--muted)}
.hero-photo{margin:0}
.hero-photo img{
  width:100%;
  aspect-ratio:4/3.4;
  object-fit:cover;
  object-position:50% 32%;
  border-radius:24px;
  box-shadow:0 24px 60px -32px rgba(44,74,62,.45);
}
.hero-photo figcaption{
  margin-top:12px;
  font-size:13.5px;
  color:var(--muted);
  padding-left:14px;
  border-left:3px solid var(--amber);
}
@media(min-width:560px){.cta-row{flex-direction:row}.cta-row .btn{width:auto}}
@media(min-width:940px){
  .hero{padding:70px 0 40px}
  .hero-grid{grid-template-columns:1.02fr .98fr;align-items:center;gap:56px}
}

/* proof strip, sits on the second screen */
.proof{background:var(--green);color:#EFEAE0;padding:34px 0}
.proof-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 18px}
.pf b{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:38px;line-height:1;color:var(--amber);font-weight:600}
.pf span{display:block;margin-top:7px;font-size:13.5px;color:#C8D4CB;line-height:1.45}
@media(min-width:860px){.proof-grid{grid-template-columns:repeat(4,1fr)}}

/* sections */
section{padding:58px 0}
.head{max-width:62ch;margin-bottom:32px}
.head h2{font-size:clamp(28px,5vw,42px);margin:12px 0 12px;color:var(--green-d)}
.head p{color:var(--muted)}

/* life stages */
.stage{padding:34px 0;border-top:1px solid var(--line)}
.stage:last-child{border-bottom:1px solid var(--line)}
.stage-grid{display:grid;gap:24px}
.stage-no{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:15px;
  color:var(--amber-d);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.stage h3{font-size:clamp(25px,4.4vw,34px);color:var(--green-d);margin-bottom:12px}
.stage p{color:var(--muted);max-width:56ch}
.stage-quote{
  margin-top:20px;
  background:#fff;
  border:1px solid var(--line);
  border-left:4px solid var(--amber);
  border-radius:12px;
  padding:16px 18px;
  font-size:14.5px;
  color:var(--muted);
}
.stage-quote b{display:block;margin-top:8px;font-size:13px;color:var(--green);font-weight:600}
.stage-quote.big{
  margin-top:0;
  align-self:center;
  padding:30px 28px;
  border-radius:var(--r);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;
  font-size:clamp(20px,4.6vw,25px);
  line-height:1.45;
  color:var(--green-d);
}
.stage-quote.big b{font-family:"Cabin",sans-serif;font-style:normal;font-size:13px;margin-top:14px}
.stage-photo{margin:0}
.stage-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.stage-photo figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
@media(min-width:880px){
  .stage-grid{grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
  .stage-grid.flip>.stage-txt{order:2}
  .stage-grid.flip>.stage-photo{order:1}
}

/* service thumbs inside the adults stage */
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}
.sv{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.sv img{width:100%;aspect-ratio:16/10;object-fit:cover}
.sv b{display:block;padding:11px 13px;font-size:13.5px;font-weight:600;color:var(--green)}
.sv-txt{background:var(--sage);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:14px}
.sv-txt b{padding:0}
.sv-txt p{font-size:13px;color:var(--green-l);line-height:1.5}
@media(min-width:880px){.svc{grid-template-columns:repeat(4,1fr)}}

/* booking strip between major sections */
.strip{background:var(--green-d);border-radius:22px;padding:30px 24px;margin:10px 0}
.strip-in{display:grid;gap:18px;align-items:center}
.strip h3{color:#fff;font-size:clamp(22px,4vw,28px)}
.strip p{color:#B7C6BC;font-size:14.5px;margin-top:6px;max-width:52ch}
.strip .branch{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);font-weight:600;margin-bottom:8px}
@media(min-width:820px){
  .strip{padding:36px 40px}
  .strip-in{grid-template-columns:1fr auto}
}

/* practitioners */
.team-grid{display:grid;gap:18px}
.dr{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.dr img{width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:top}
.dr .body{padding:20px 20px 22px}
.dr h3{font-size:23px;color:var(--green-d)}
.dr .role{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-d);font-weight:600;margin:6px 0 10px}
.dr p{font-size:14.5px;color:var(--muted)}
@media(min-width:620px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.team-grid{grid-template-columns:repeat(5,1fr)}}
.team-note{
  margin-top:18px;
  background:var(--sage);
  border-radius:14px;
  padding:18px 20px;
  font-size:14.5px;
  color:var(--green-l);
  max-width:72ch;
}
/* scroll reveal: JS adds .sre, observer adds .in. No JS or reduced motion means no hiding at all */
@media (prefers-reduced-motion:no-preference){
 .sre{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;transition-delay:var(--rvd,0ms)}
 .sre.in{opacity:1;transform:none}
}

/* reviews */
.revs{background:var(--sand)}
.score{display:flex;align-items:center;gap:16px;margin:14px 0 26px}
.score .big{font-family:"Cormorant Garamond",Georgia,serif;font-size:56px;font-weight:700;line-height:1;color:var(--green-d)}
.stars{color:#F5A623;letter-spacing:2px;font-size:15px}
.score small{display:block;color:var(--muted);font-size:13.5px;margin-top:5px}
.rgrid{display:grid;gap:16px}
.rv{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column}
/* quotes vary in length, so push the name and source to the foot of the card;
   without this the attributions sit at different heights across a row */
.rv b{margin-top:auto}
.rv p{font-size:15px;color:var(--muted);margin:10px 0 14px;line-height:1.6}
.rv b{font-size:14px;color:var(--ink)}
.gsrc{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-top:8px}
@media(min-width:900px){.rgrid{grid-template-columns:repeat(3,1fr)}}
.glink{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-weight:600;color:var(--green);text-decoration:none;border-bottom:2px solid var(--amber)}
.glink:hover{color:var(--green-d)}

/* locations */
.locs{display:grid;gap:20px}
@media(min-width:860px){.locs{grid-template-columns:1fr 1fr}}
.loc{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.loc .ph{margin:0}
.loc .ph img{width:100%;height:190px;object-fit:cover}
.loc .body{padding:24px}
.loc .area{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-d);font-weight:600;margin-bottom:6px}
.loc h3{font-size:25px;color:var(--green-d);margin-bottom:10px}
.loc address{font-style:normal;font-size:15px;color:var(--muted);margin-bottom:12px}
.loc .hours{font-size:14px;color:var(--muted);margin-bottom:18px;border-top:1px solid var(--line);padding-top:12px}
.loc .hours b{color:var(--green);font-weight:600}
.loc .row{display:flex;gap:10px;flex-wrap:wrap}

/* faq */
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:19px 22px;margin-bottom:11px}
details[open]{border-color:#D9CBB2}
summary{
  cursor:pointer;
  font-weight:600;
  font-size:16.5px;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  color:var(--green);
}
summary::-webkit-details-marker{display:none}
summary .chev{flex:0 0 18px;transition:transform .25s}
details[open] summary .chev{transform:rotate(180deg)}
details p{margin-top:12px;color:var(--muted);font-size:15.5px}

/* booking form */
.book{background:var(--sand);border-radius:26px;padding:38px 24px}
form{display:grid;gap:14px;max-width:560px;margin-top:22px}
label{font-size:13.5px;font-weight:600;color:var(--green)}
input,select,textarea{
  width:100%;
  padding:13px 15px;
  border:1px solid #DCCFB8;
  border-radius:11px;
  background:#fff;
  font:inherit;
  font-size:15px;
  color:var(--ink);
}
textarea{min-height:104px;resize:vertical}
.book .alt{margin-top:16px;font-size:14px;color:var(--muted)}
.book .alt a{color:var(--green);font-weight:600}
@media(min-width:820px){.book{padding:50px 48px}}

/* footer */
footer{background:var(--green-d);color:#A9BCB0;padding:52px 0 34px;margin-top:58px}
footer h4{color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.fgrid{display:grid;gap:30px}
@media(min-width:860px){.fgrid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
footer .brand p{font-size:14.5px;max-width:36ch;margin-top:12px}
footer .brand img{height:34px;width:auto;filter:brightness(0) invert(1);opacity:.92}
footer a{color:#A9BCB0;text-decoration:none}
footer a:hover{color:var(--amber)}
footer .fl{display:block;padding:3px 0;font-size:14.5px}
footer address{font-style:normal;font-size:14px;line-height:1.6}
footer .hrs{font-size:13.5px;margin-top:10px;color:#8FA699}
.legal{margin-top:14px;font-size:13px;color:#7E9187}

/* sticky mobile bar */
.mbar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:90;
  display:flex;
  background:#fff;
  border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(31,54,45,.14);
}
.mbar a{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:15px 8px;
  font-size:15.5px;
  font-weight:600;
  text-decoration:none;
}
.mbar .mwa{background:var(--wa);color:#fff}
.mbar .mcall{color:var(--green)}
/* desktop fabs */
.fabs{display:none}
@media(min-width:940px){
  body{padding-bottom:0}
  .mbar{display:none}
  .fabs{position:fixed;right:16px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:11px}
  .fab{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.24);text-decoration:none}
  .fab.wa{background:var(--wa);color:#fff}
  .fab.call{background:var(--green);color:#fff}
}
.stage-more{margin-top:18px}.stage-more a{color:var(--teal,#024B6C);font-weight:600;text-decoration:none;border-bottom:2px solid var(--orange,#E9490A);padding-bottom:2px}.stage-more a:hover{opacity:.75}

/* ============================================================
   Inner-page components
   Added for the shared design system; rendered live and
   documented with copyable markup in /_ds/.
   ============================================================ */

/* tick bullet list (same marks as the homepage stage lists) */
.ticks{list-style:none;margin:18px 0 0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:24px;font-size:15px;color:var(--ink)}
.ticks li::before{
  content:"";
  position:absolute;
  left:0;
  top:.5em;
  width:12px;
  height:7px;
  border-left:2px solid var(--amber-d);
  border-bottom:2px solid var(--amber-d);
  transform:rotate(-45deg);
}

/* breadcrumb */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:18px}
.crumb a{color:var(--green);text-decoration:none;font-weight:600}
.crumb a:hover{color:var(--green-d)}
.crumb .sep{color:#C9BBA2}

/* inner-page hero: crumb, kicker, h1, lede, optional arch photo */
.hero-sub{padding:40px 0 34px}
.hero-sub h1{font-size:clamp(30px,6.6vw,46px);margin:14px 0 14px;color:var(--green-d)}
.hero-sub .lede{max-width:56ch}
.hero-sub .sub-grid{display:grid;gap:30px}
@media(min-width:940px){
  .hero-sub{padding:56px 0 44px}
  .hero-sub .sub-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:52px}
}
.trust-line{margin-top:16px;font-size:13.5px;color:var(--muted)}

/* accent word inside a heading, italic amber with a hand drawn squiggle */
.accent{font-style:italic;color:var(--amber-d);position:relative;white-space:nowrap}
.accent svg{position:absolute;left:0;bottom:-.22em;width:100%;height:.3em;color:var(--amber)}

/* arch photo.
   IMPORTANT: the img MUST sit inside a .arch wrapper div.
   .arch-figure::before paints the soft arch behind the photo and
   .arch clips the photo to the same radius and stacks it above. */
.arch-figure{position:relative;max-width:420px;margin:0}
.arch-figure::before{
  content:"";
  position:absolute;
  inset:16px -14px -14px 16px;
  background:var(--amber-soft);
  border-radius:999px 999px 26px 26px;
}
.arch-figure .arch{
  position:relative;
  z-index:1;
  overflow:hidden;
  border-radius:999px 999px 26px 26px;
}
.arch-figure .arch img{width:100%;aspect-ratio:4/4.2;object-fit:cover}

/* alt background: sand band */
.band{background:var(--sand)}

/* dark green section (doctor bands, big CTA sections) */
.dark{background:var(--green-d);color:#E9EFE9}
.dark .head h2,.dark h2,.dark h3{color:#fff}
.dark .head p,.dark p{color:#B7C6BC}
.dark .kicker{color:var(--amber)}
.dark .kicker::before{background:var(--amber)}

/* centered section heading */
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head.center .kicker{justify-content:center}

/* card grid: 1 col, 2 col from 640px, 3 col from 960px */
.cards{display:grid;gap:16px}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.cards{grid-template-columns:repeat(3,1fr)}}
/* .cards.two locks the grid to 2 across on desktop */
@media(min-width:960px){.cards.two{grid-template-columns:repeat(2,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.card h3{font-size:21px;color:var(--green-d);margin-bottom:8px}
.card p{font-size:14.5px;color:var(--muted)}
.card .ic{
  width:42px;height:42px;
  border-radius:12px;
  background:var(--sage);
  display:grid;place-items:center;
  margin-bottom:14px;
  color:var(--green);
}

/* numbered steps (ol, counter driven) */
.steps{list-style:none;counter-reset:step;display:grid;gap:16px;margin-top:8px}
.steps li{counter-increment:step;position:relative;padding-left:56px;font-size:15px;color:var(--muted)}
.steps li b{display:block;color:var(--ink);font-size:16px;margin-bottom:2px}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:2px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:26px;
  font-weight:600;
  color:var(--amber-d);
  line-height:1;
}
@media(min-width:760px){.steps{grid-template-columns:repeat(2,1fr);gap:18px 28px}}

/* two column feature: text + media, optional .flip swaps sides on desktop */
.split{display:grid;gap:28px;align-items:center}
.split-copy h2{font-size:clamp(26px,4.6vw,38px);color:var(--green-d);margin:12px 0}
.split-copy p{color:var(--muted)}
.split-media{margin:0}
.split-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.split-media figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
@media(min-width:880px){
  .split{grid-template-columns:1fr 1fr;gap:52px}
  .split.flip>.split-copy{order:2}
  .split.flip>.split-media{order:1}
}
.dark .split-copy h2{color:#fff}
.dark .split-copy p{color:#B7C6BC}

/* practitioner card without a photo: initials avatar, same crop as .dr img */
.dr .avatar{
  width:100%;
  aspect-ratio:4/4.4;
  display:grid;
  place-items:center;
  background:linear-gradient(160deg,var(--sage),#D9E4DB);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:64px;
  font-weight:600;
  color:var(--green-l);
  letter-spacing:.03em;
}

/* credential chips, designed for dark bands */
.cred-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.cred-chip{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--amber);
  border:1px solid rgba(224,164,88,.55);
  border-radius:100px;
  padding:7px 14px;
}

/* light pill tags (spans or links) */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.chip{
  font-size:13.5px;
  color:var(--green);
  background:#fff;
  border:1px solid #E3D8C4;
  border-radius:100px;
  padding:8px 15px;
  text-decoration:none;
}
a.chip:hover{border-color:var(--amber);color:var(--amber-d)}

/* fact line: small icon plus a line of info, used in location and contact blocks */
.fact-line{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--muted);padding:7px 0}
.fact-line svg{flex:0 0 17px;margin-top:3px;color:var(--amber-d)}
.fact-line b{color:var(--green);font-weight:600}
.maps-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  font-size:14px;
  font-weight:600;
  color:var(--green);
  text-decoration:none;
  border-bottom:2px solid var(--amber);
}
.maps-link:hover{color:var(--green-d)}

/* single column variants */
.locs.single{max-width:640px}
@media(min-width:860px){.locs.single{grid-template-columns:1fr}}
@media(min-width:900px){.rgrid.single{grid-template-columns:1fr}}

/* narrow content wrap (FAQ columns) */
.wrap.narrow{max-width:860px}

/* keep anchored sections clear of the sticky header */
section{scroll-margin-top:90px}


/* ---- Chinese typography ----
   Mirrors the Hae approach: a --zh token plus a lang hook. Chinese does not sit
   well in Cormorant, so headings on Chinese pages use the same face as body copy
   and drop the negative tracking. */
:lang(zh-Hans){font-family:var(--zh)}
html[lang="zh-Hans"] body{font-family:var(--zh);line-height:1.85}
html[lang="zh-Hans"] h1,
html[lang="zh-Hans"] h2,
html[lang="zh-Hans"] h3,
html[lang="zh-Hans"] .lede{font-family:var(--zh);letter-spacing:0;line-height:1.45}
html[lang="zh-Hans"] .kicker{letter-spacing:.08em}
.zh{font-family:var(--zh)}
/* English runs inside a Chinese page: patients' reviews are quoted in the words
   they wrote. Noto Sans SC carries Latin, so the text inherits it silently, but
   its curly quotes and apostrophes are full-width and read as "patient' s".
   Send anything marked lang="en" back to the Latin stack. */
html[lang="zh-Hans"] [lang="en"]{font-family:"Cabin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}

/* location map: keyless Google embed at the top of each .loc card */
.loc-map{position:relative;width:100%;aspect-ratio:16/9;background:#e9e6e0;border-radius:12px 12px 0 0;overflow:hidden}
.loc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media(max-width:640px){.loc-map{aspect-ratio:4/3}}

/* address map: keyless Google embed under an <address> */
.map-embed{position:relative;width:100%;max-width:520px;aspect-ratio:16/10;margin-top:16px;border-radius:10px;overflow:hidden;background:#e9e6e0}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* clinic picker: two clinics, so the sticky buttons ask which one first */
.picker{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center;background:rgba(20,34,28,.5);padding:18px}
.picker[hidden]{display:none}
.picker-card{background:#fff;border-radius:16px;padding:22px 20px 20px;width:100%;max-width:390px;position:relative;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.picker-t{font-weight:700;font-size:17px;margin:0 0 14px}
.picker-x{position:absolute;top:10px;right:12px;background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--muted,#6b7a72)}
.picker-set{display:flex;flex-direction:column;gap:10px}
.picker-set[hidden]{display:none}
.picker-set .btn{width:100%;justify-content:flex-start;gap:10px}
.btn-call{background:var(--green,#2C4A3E);color:#fff;border-color:var(--green,#2C4A3E)}
.btn-call:hover{background:#22392f;color:#fff}
body.picker-open{overflow:hidden}
@media(min-width:721px){.picker{align-items:center}}

.picker-card{outline:none}
.picker-set a:focus{outline:none}
.picker-set a:focus-visible{outline:3px solid var(--orange,#E9490A);outline-offset:3px}
.picker-x:focus-visible{outline:2px solid var(--orange,#E9490A);outline-offset:2px}

/* Google review proof in the hero. Real Google mark, single star, exact count. */
.gbadge{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:9px 14px;background:#fff;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:inherit}
.gbadge,.gbadge *{text-decoration:none}
.gbadge b{font-size:15px;font-weight:700}
.gbadge span{font-size:13px;color:var(--muted)}
.gbadge .gb-star{flex:0 0 auto}
a.gbadge:hover{border-color:var(--green)}

/* Google badge spacing: hairline divider so the rating and the review count
   cannot read as a single number. */
.gbadge{gap:12px;padding:13px 20px;margin-top:36px;margin-bottom:10px}
.gbadge .gb-div{width:1px;height:15px;background:var(--line);flex:0 0 auto}
.gbadge b{font-size:15px;font-weight:700;letter-spacing:.01em}
.gbadge span{font-size:13px;line-height:1.4}
/* beat .home a{text-decoration:underline} */
.home a.gbadge,.home a.gbadge *,a.gbadge,a.gbadge *,.gbadge,.gbadge *{text-decoration:none}

/* MOH / T&CM mandatory disclaimer, required on every page */
.compliance{border-top:1px solid rgba(255,255,255,.14);margin-top:18px;padding-top:18px}
.compliance p{font-size:12px;line-height:1.65;opacity:.72;max-width:100ch;margin-bottom:8px}

/* Services dropdown: hover on desktop, tap on touch. The mobile drawer stays
   flat, so nothing is hidden behind an extra tap on a phone. */
.menu .has-sub{position:relative}
.menu .sub-toggle{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.menu .sub{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:230px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 38px rgba(31,54,45,.16);padding:10px;display:none;flex-direction:column;gap:2px;z-index:120}
.menu .sub a{display:block;padding:9px 12px;border-radius:8px;white-space:nowrap}
.menu .sub a:hover{background:var(--bg-2,#f1f5f2)}
.menu .has-sub:hover .sub,.menu .has-sub:focus-within .sub{display:flex}
@media(max-width:939px){.menu .has-sub{display:none}}

/* Services grid on the home page: eight underlined headings in a row reads as a
   list of links rather than a set of services. Underline on hover instead. */
#services .card h3 a{text-decoration:none}
#services .card h3 a:hover,#services .card h3 a:focus-visible{text-decoration:underline}

/* The Adults stage puts its service mosaic in the second grid column. Four
   across would be a row of slivers there, so it stays 2x2 and drops the
   flow margin it needs when it sits inside a text column. */
@media(min-width:880px){
  .stage-grid>.svc{grid-template-columns:repeat(2,1fr);margin-top:0;align-self:center}
}

/* Article heroes carry only a crumb, kicker and title, with no photo, but they
   still used the two-column .sub-grid meant for pages that have one. That left
   a ~515px dead column on all 46 blog pages. Collapse to one column whenever the
   wrap has a single child, and cap the measure so the title does not run the
   full width. Browsers without :has() simply keep the old behaviour. */
@media(min-width:900px){
  .hero-sub .sub-grid:has(> :only-child){grid-template-columns:minmax(0,54rem)}
}

/* Service cards on the home page carry the hero of the page they open, so the
   card and the destination show the same thing. The icon tile sits over the
   join between photo and text, which keeps the icons doing their job as
   wayfinding without competing with the photograph. */
.card:has(.card-photo){padding:0;overflow:hidden}
.card-photo{margin:0}
.card-photo img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
/* The icon used to hang half over the photo on a negative margin, which the
   card's overflow:hidden clipped into a broken looking tile. It sits in normal
   flow under the photo instead. */
.card:has(.card-photo) .ic{margin:18px 0 12px 22px}
.card:has(.card-photo) h3,.card:has(.card-photo)>p{padding:0 22px}
.card:has(.card-photo)>p:last-child{padding-bottom:22px}

/* The Cliniko booking frame reports its own height, so it starts tall enough to
   show the first step and is resized from the message it posts back. Overflow is
   hidden because the frame scrolls itself before the script takes over. */
.cliniko-embed{margin-top:26px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.cliniko-embed iframe{display:block;width:100%;height:900px;border:0}
.cliniko-fallback{margin-top:14px;font-size:14px;color:var(--mu)}
@media(max-width:700px){
  .cliniko-embed iframe{height:1100px}
}

/* Photo strip: real patients at the centre, four across on desktop, two on
   phones. Portrait crops because these are people standing, not rooms. */
.photo-strip{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.photo-strip{grid-template-columns:repeat(4,1fr)}}
.photo-strip figure{margin:0;border-radius:14px;overflow:hidden;background:var(--sand)}
.photo-strip img{display:block;width:100%;aspect-ratio:560/720;object-fit:cover}

/* Rating in the footer. It is here because aggregateRating is marked up on every
   page, and Google requires the marked up value to be visible to the reader. */
.foot-rating{margin-top:10px;font-size:14px}
.foot-rating b{color:var(--amber);font-size:16px}