/* ============================================================
   E. MICHAEL HEALTH — "Blend" design system
   Etsy-template elegance + her warmth + Flourish restraint.

   HOW TO RE-SKIN THE WHOLE SITE: change the tokens in :root below.
   Nothing else hardcodes a color, font, or radius. One accent
   color (--clay) does all the work — that is why it reads calm.
   ============================================================ */

:root{
  /* --- palette (edit here to re-skin) --- */
  --cream:#FAF6EF;        /* page background */
  --ivory:#FFFDF8;        /* raised surfaces */
  --tint:#F1EBDF;         /* quiet band */
  --sage:#46503F;         /* statement bands + footer */
  --sage-soft:#5C6653;
  --ink:#38402F;          /* body text */
  --soft:#6F7566;         /* secondary text */
  --clay:#B97350;         /* THE accent — buttons, italics, links */
  --clay-d:#9E5D3E;
  --clay-soft:#F3E4DA;    /* blush band */
  --line:#E8E1D2;
  --gold:#C89A4B;         /* stars only */

  /* --- type --- */
  --serif:"Cormorant Garamond",Georgia,serif;
  --display:"Fraunces","Cormorant Garamond",Georgia,serif;
  --sans:"Karla",system-ui,-apple-system,sans-serif;

  /* --- shape + rhythm --- */
  --arch:320px 320px 16px 16px;
  --r:14px;
  --gap:32px;
  --section:100px;
  --wrap:1120px;
  --shadow:0 10px 28px rgba(56,64,47,.09);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:16.5px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.wrap.narrow{max-width:760px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:var(--ivory);padding:10px 16px;border-radius:8px;z-index:999}

/* ---------- type scale ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:395;line-height:1.15;
  font-variation-settings:"opsz" 120;letter-spacing:-.018em}
h1 em,h2 em,h3 em{font-weight:360}
h1{font-size:58px;line-height:1.08}
h2{font-size:42px;line-height:1.2}
h3{font-size:25px;font-weight:500}
h4{font-size:21px;font-weight:500}
h1 em,h2 em,h3 em{font-style:italic;color:var(--clay)}
.eyebrow{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--clay);margin-bottom:14px;text-transform:capitalize}
.eyebrow::first-letter{text-transform:uppercase}
.lede{font-size:16.5px;color:var(--soft);max-width:540px;margin-top:18px}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
.rule{width:56px;height:1px;background:var(--clay);opacity:.5;margin:26px 0}
.center .rule{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.pill{display:inline-block;border-radius:999px;padding:13px 30px;font-family:var(--sans);
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  transition:background .18s,color .18s,border-color .18s;cursor:pointer}
.pill.solid{background:var(--clay);color:var(--ivory)}
.pill.solid:hover{background:var(--clay-d)}
.pill.ghost{border:1px solid var(--clay);color:var(--clay)}
.pill.ghost:hover{background:var(--clay);color:var(--ivory)}
.pill.light{border:1px solid rgba(255,253,248,.55);color:var(--ivory)}
.pill.light:hover{background:var(--ivory);color:var(--sage)}
.pill.soon{opacity:.85;border-width:1.5px;cursor:default;pointer-events:none}
.tlink{color:var(--clay);border-bottom:1px solid rgba(185,115,80,.4)}
.tlink:hover{border-bottom-color:var(--clay)}
.actions{display:flex;align-items:center;gap:20px;margin-top:32px;flex-wrap:wrap}
.center .actions,.actions.center{justify-content:center}
.alt{font-size:13.5px;color:var(--soft)}

/* ---------- header ---------- */
header{padding:22px 0;border-bottom:1px solid var(--line);background:var(--cream);
  position:sticky;top:0;z-index:60}
.nav{display:flex;align-items:center;gap:30px}
.logo img{height:34px;width:auto}
.nav-links{display:flex;gap:24px;margin-left:auto;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:var(--ink)}
.nav-links a{padding-bottom:2px;border-bottom:1px solid transparent}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--clay)}
.hdr-phone{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;letter-spacing:.03em}
.hdr-phone:hover{color:var(--clay)}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:999px;padding:9px 18px;font-family:var(--sans);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
/* nav dropdowns (Brian 8/30): thin cream panels, serif items — restrained */
.navitem{position:relative}
.dropdown{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);
  background:var(--ivory);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 14px 34px rgba(56,64,47,.14);padding:12px 0;min-width:235px;
  display:none;z-index:80;text-align:left}
.dropdown::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.navitem:hover .dropdown,.navitem:focus-within .dropdown{display:block}
.dropdown a{display:block;padding:9px 24px;font-family:var(--serif);font-size:16.5px;
  font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink);border-bottom:none}
.dropdown a:hover{color:var(--clay);background:var(--cream)}

/* ---------- hero (home) ---------- */
.hero{padding:76px 0 88px}
.hero-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:center}
.arch{border-radius:var(--arch);overflow:hidden;position:relative;background:var(--tint)}
.arch img,.arch video{width:100%;height:540px;object-fit:cover;object-position:50% 30%}
/* hero video enlarged per Brian 8/29 — hero-scoped so team/card arches are untouched;
   the <=900px media overrides below still rule on phones */
.hero .arch img,.hero .arch video{height:620px}
.arch.short img,.arch.short video{height:300px}
.badge{position:absolute;left:18px;bottom:18px;background:var(--ivory);border-radius:var(--r);
  padding:12px 18px;box-shadow:var(--shadow)}
.badge b{display:block;font-family:var(--serif);font-size:17px}
.badge span{font-size:12px;color:var(--soft)}
.stars{margin-top:26px;font-size:13.5px;color:var(--soft)}
.stars b{color:var(--gold);letter-spacing:3px}

/* ---------- page hero (inner pages) ---------- */
.pagehead{padding:72px 0 56px;text-align:center;border-bottom:1px solid var(--line)}
/* dark pagehead variant (About, Brian 8/29): sage band so the page opening
   doesn't blend into the cream header */
.pagehead.dark{background:var(--sage);border-bottom:0}
.pagehead.dark h1{color:var(--ivory)}
.pagehead.dark h1 em{color:#E6C3AC}
.pagehead.dark .eyebrow{color:rgba(255,253,248,.7)}
.pagehead.dark .lede{color:rgba(255,253,248,.82)}
.pagehead.dark .alt{color:rgba(255,253,248,.75)}
.pagehead.dark .alt .tlink{color:#E6C3AC;border-bottom-color:rgba(230,195,172,.4)}
/* New Patients pagehead: words on clean sage, then the real photo (CC0 mossy
   stone path) fades up into the band so the two read as one piece */
.pagehead.dark.woods{padding-bottom:0}
.woods-fade{margin-top:48px;height:240px;
  background:linear-gradient(rgba(70,80,63,.35), rgba(70,80,63,0) 65%),
    url("img/first-visit-woods.jpg") center 28%/cover no-repeat;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 60%);
  mask-image:linear-gradient(to bottom, transparent, #000 60%)}
.pagehead h1{font-size:52px}
.pagehead .lede{margin:18px auto 0;max-width:620px}
.crumbs{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:18px}
.crumbs a:hover{color:var(--clay)}

/* ---------- science stat tiles (WAVi, Brian 8/30) ---------- */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
.statrow>div{background:var(--ivory);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 18px;text-align:center}
.statrow b{display:block;font-family:var(--serif);font-size:34px;font-weight:500;
  color:var(--ink);line-height:1.1}
.statrow span{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--soft);margin-top:8px;line-height:1.55}

/* ---------- trust ribbon ---------- */
.trustline{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.trustline .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}

/* ---------- sections + bands ---------- */
section{padding:var(--section) 0}
section.tight{padding:64px 0}
.band{background:var(--sage);color:var(--ivory);padding:96px 0;text-align:center}
.band h2{font-size:44px;color:var(--ivory)}
.band h3,.band h4{color:var(--ivory)}
.band .eyebrow{color:rgba(255,253,248,.7)}
.band p,.band .lede{color:rgba(255,253,248,.8);max-width:620px;margin-left:auto;margin-right:auto}
.band em{color:#E6C3AC}
.band a{color:#E6C3AC;border-bottom:1px solid rgba(230,195,172,.4)}
/* Components dropped INSIDE a band inherit the light palette. Without
   these, .steps p / .card p / .rows would paint their normal grey on
   sage and fall below readable contrast. */
.band .steps p,.band .cards p,.band .card p,.band .prose p,.band .qrow blockquote{color:rgba(255,253,248,.8)}
.band .steps h4,.band .card h3,.band .prose strong{color:var(--ivory)}
.band .prose a{color:#E6C3AC}
.band .rows{border-top-color:rgba(255,253,248,.2)}
.band .rows>div{border-bottom-color:rgba(255,253,248,.2)}
.band .rows>div>span:first-child{color:rgba(255,253,248,.6)}
.tinted{background:var(--ivory);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.blush{background:var(--clay-soft)}

/* ---------- arch cards (3-up) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:58px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr);gap:30px}
.card{text-align:center;display:flex;flex-direction:column}
.card h3{margin-top:22px}
.card p{font-size:14.5px;color:var(--soft);margin-top:8px}
.card .acts{margin-top:auto;padding-top:14px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase}
.card .acts a{color:var(--clay);border-bottom:1px solid rgba(185,115,80,.4);margin:0 7px}
.card .acts a.pill{background:var(--sage);color:var(--ivory);border-bottom:none;margin:0;padding:11px 28px}
.card .acts a.pill:hover{background:var(--sage-soft)}

/* ---------- numbered columns ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:54px;text-align:left}
.steps.two{grid-template-columns:repeat(2,1fr)}
.steps h4{margin-bottom:8px}
.steps p{font-size:14.5px;color:var(--soft)}
.gnum{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--clay);display:block;margin-bottom:6px}
.gnum::first-letter{text-transform:uppercase}
.band .gnum{color:#E6C3AC}

/* ---------- split (image + text, alternating) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split h1{font-size:44px;line-height:1.15}
/* framed variant: thin clay edge with an ivory mat around the photo */
.split .media.framed{padding:10px;border:1.5px solid var(--clay);border-radius:var(--arch);background:var(--ivory)}
.split.text-first .media{order:2}
.split.top{align-items:start}
/* the two columns read as separate documents: hairline divider between them */
.split.top>div:last-child{border-left:1px solid rgba(185,115,80,.4);padding-left:48px}
.split .media img,.split .media video{width:100%;height:460px;object-fit:cover;border-radius:var(--r)}
.split .media.arched img,.split .media.arched video{border-radius:var(--arch);height:520px}
/* Ellen's portrait: face sits in the upper third — bias the crop up so her
   head is never clipped (scope-by-src pattern; applies on About + her page) */
.split .media img[src*="team-ellen"]{object-position:50% 15%}
.split .media img[src*="intimate-couple"]{object-position:50% 18%}
.split .media.low{border-radius:18px}
.split .media.low img{height:360px;border-radius:var(--r)}

/* ---------- long-form prose (condition + service pages) ---------- */
.prose{max-width:720px}
.center .prose{margin:0 auto}
.prose>*+*{margin-top:20px}
.prose h2{margin-top:52px}
/* an eyebrow directly above a prose heading should hug it, not push it away */
.prose .eyebrow+h2,.prose .eyebrow+h3{margin-top:0}
.prose h3{margin-top:40px}
.prose p{color:var(--soft)}
.prose strong{color:var(--ink);font-weight:500}
.prose a{color:var(--clay);border-bottom:1px solid rgba(185,115,80,.35)}
.prose ul,.prose ol{padding-left:0;list-style:none;color:var(--soft)}
.prose ol{counter-reset:n}
.prose li{position:relative;padding-left:26px;margin-top:11px}
/* list marker: small clay diamond (classier than the old dash - Brian 8/30) */
.prose ul li::before{content:"";position:absolute;left:3px;top:11px;width:5px;height:5px;background:var(--clay);transform:rotate(45deg)}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n) ".";position:absolute;left:0;top:0;
  font-family:var(--serif);font-style:italic;color:var(--clay)}

/* ---------- quote band ---------- */
.quote{padding:112px 0;text-align:center;background:var(--clay-soft)}
.quote .actions{justify-content:center}
.quote .gbadge{margin-top:34px}
.quote p{font-family:var(--serif);font-style:italic;font-size:32px;line-height:1.45;max-width:760px;margin:24px auto 0}
.quote cite{display:block;margin-top:24px;font-style:normal;font-size:12px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--soft)}
.gbadge{display:inline-block;border:1px solid var(--line);background:var(--ivory);border-radius:999px;
  padding:10px 24px;font-size:13.5px;color:var(--soft);margin-top:30px}
.gbadge b{color:var(--ink);font-weight:600}
.gstars{color:var(--gold);letter-spacing:2px;margin-left:4px}

/* ---------- small quote row ---------- */
.qrow{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:52px}
.qrow blockquote{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.5}
.qrow cite{display:block;margin-top:12px;font-style:normal;font-family:var(--sans);
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}

/* ---------- media library (videos — reused for product videos later) ---------- */
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:52px}
.media-grid.two{grid-template-columns:repeat(2,1fr);gap:40px}
.media-item video,.media-item img{width:100%;height:230px;object-fit:cover;border-radius:var(--r);background:var(--tint)}
/* The about-page clinic photos are near-portrait with faces in the top
   third — bias their crop window upward so heads stay in frame. Scoped by
   src on purpose: the testimonial video posters have centered faces and
   need the default centered crop. */
.media-item img[src*="about-welcome"],.media-item img[src*="about-labwork"]{object-position:50% 10%}
.media-item h4{margin-top:16px;font-size:19px}
.media-item p{font-size:13.5px;color:var(--soft);margin-top:4px}
.embed{position:relative;padding-top:56.25%;border-radius:var(--r);overflow:hidden;background:var(--tint)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- video testimonial card (arched, quiet controls) ---------- */
.vcard{text-align:center}
.vcard .arch video{height:300px;object-position:50% 40%}
.vcard h4{margin-top:18px}
.vcard p{font-size:14px;color:var(--soft);margin-top:6px}

/* ---------- notes / callouts ---------- */
.note{background:var(--ivory);border:1px solid var(--line);border-left:2px solid var(--clay);
  border-radius:var(--r);padding:24px 28px;font-size:14.5px;color:var(--soft);margin-top:32px}
.note b,.note strong{color:var(--ink);font-weight:500}

/* ---------- FAQ / disclosure ---------- */
.faq{max-width:760px;margin:52px auto 0}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq summary{font-family:var(--serif);font-size:22px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--clay);font-size:22px;flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq details p{font-size:15px;color:var(--soft);margin-top:14px}
.faq details p+p{margin-top:12px}

/* ---------- definition rows (hours, details) ---------- */
.rows{margin-top:36px;border-top:1px solid var(--line)}
.rows>div{display:flex;justify-content:space-between;gap:24px;
  padding:15px 0;border-bottom:1px solid var(--line);font-size:15px}
.rows>div>span:first-child{color:var(--soft)}
/* contact hours: serif, ink-dark, a touch larger (Brian 8/29: "classier and darker") */
.rows.hours>div{font-family:var(--serif);font-size:21px;color:var(--ink)}
.rows.hours>div>span:first-child{color:var(--ink);font-weight:500}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:56px}
.team .arch img{height:340px}
.team h4{margin-top:20px}
.team .role{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin-top:4px}
.team p{font-size:14.5px;color:var(--soft);margin-top:10px}

/* ---------- chips (in-page nav / condition index) ---------- */
/* "how care works here" band: steps removed, remaining copy reads larger */
.goals h2{font-size:46px}
.goals .lede{font-size:19px;max-width:640px}
.arrow-go{display:inline-block;color:var(--clay);animation:arrow-nudge 1.6s ease-in-out infinite}
@keyframes arrow-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}

.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:56px}
.chips.chips-all{margin-top:16px}
.center .chips{justify-content:center}
.chips a{text-transform:capitalize;border:1.5px solid var(--sage-soft);background:var(--ivory);border-radius:999px;
  padding:11px 24px;font-size:14px;font-weight:500;color:var(--sage);
  box-shadow:0 1px 6px rgba(0,0,0,.05)}
.chips a:hover{background:var(--sage);border-color:var(--sage);color:var(--ivory)}

/* ---------- product card — RESERVED for the future online store ----------
   Not used by any page yet. Kept here so a shop page inherits this look
   for free the day she wants to sell supplements or packages online. */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:52px}
.product img{width:100%;height:300px;object-fit:cover;border-radius:var(--r);background:var(--tint)}
.product h4{margin-top:16px}
.product .price{font-size:14px;color:var(--soft);margin-top:4px}
.product .pill{margin-top:14px;padding:10px 22px}

/* ---------- closing CTA ---------- */
.cta{text-align:center;padding:106px 0}
.cta h2{font-size:46px}
.cta .sub{margin-top:18px;font-size:13.5px;color:var(--soft)}
.cta .actions{justify-content:center}
/* banner variant (homepage, Brian 8/29): a SLIM one-row call-to-action strip,
   not a full section — heading and buttons ride the same line on desktop */
.cta.banner,.ctaline{background:var(--sage);padding:34px 0}
.cta.banner .wrap,.ctaline .wrap{display:flex;align-items:center;justify-content:center;gap:38px;flex-wrap:wrap}
.cta.banner .eyebrow{display:none}
.cta.banner h2,.ctaline h2{color:var(--ivory);font-size:30px}
.cta.banner h2 em,.ctaline h2 em{color:#E6C3AC}
.cta.banner .actions,.ctaline .actions{margin-top:0}
/* banner phone pill: real tel: link so phones tap-to-call, but inert on
   desktop where clicking would only raise an app-picker popup */
@media (min-width:901px){
  .cta.banner a[href^="tel:"],.ctaline a[href^="tel:"]{pointer-events:none}
}
.cta.banner .pill.ghost,.ctaline .pill.ghost{border-color:rgba(255,253,248,.55);color:var(--ivory)}
.cta.banner .pill.ghost:hover,.ctaline .pill.ghost:hover{background:var(--ivory);color:var(--sage)}
.cta.banner .sub{display:none}
/* warm variant for CLOSING banners (they sit against the sage footer —
   blush keeps them distinct; the homepage mid-page banner stays sage) */
.cta.banner.warm{background:var(--clay-soft)}
.cta.banner.warm h2{color:var(--ink)}
.cta.banner.warm h2 em{color:var(--clay)}
.cta.banner.warm .pill.ghost{border-color:var(--clay);color:var(--clay)}
.cta.banner.warm .pill.ghost:hover{background:var(--clay);color:var(--ivory)}

/* ---------- footer ---------- */
footer{background:var(--sage);color:rgba(255,253,248,.72);padding:64px 0 40px;font-size:13.5px}
footer a:hover{color:var(--ivory)}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px}
.foot img{height:30px;filter:brightness(0) invert(1);opacity:.92;margin-bottom:12px}
.foot .slog{font-family:var(--serif);font-style:italic;font-size:16px;color:#E6C3AC;margin-bottom:10px}
.foot h4{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ivory);margin-bottom:14px}
.foot ul{list-style:none}
.foot li{margin-bottom:9px}
.areas{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,253,248,.16);
  font-size:12.5px;color:rgba(255,253,248,.6);text-align:center}
.legal{margin-top:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12px;color:rgba(255,253,248,.5)}

/* ---------- sticky mobile call/book bar ---------- */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--ivory);border-top:1px solid var(--line);padding:10px 12px;
  gap:10px;box-shadow:0 -6px 20px rgba(56,64,47,.08)}
.callbar a{flex:1;text-align:center;border-radius:999px;padding:13px 0;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.callbar .c{background:var(--clay);color:var(--ivory)}
.callbar .b{border:1px solid var(--clay);color:var(--clay)}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:900px){
  :root{--section:52px;--arch:220px 220px 14px 14px}
  h1{font-size:40px} h2{font-size:30px} .band h2{font-size:30px}
  .pagehead h1{font-size:36px} .pagehead{padding:44px 0 36px}
  .hero{padding:36px 0 48px}
  .hero-grid,.split{grid-template-columns:1fr;gap:30px}
  .split.text-first .media{order:0}
  .arch img,.arch video{height:300px}
  .hero .arch img,.hero .arch video{height:260px}
  .foot li{margin-bottom:6px}
  .split .media img,.split .media video,
  .split .media.arched img,.split .media.arched video{height:280px;object-position:50% 22%}
  /* cards and team portraits sit shorter than a hero arch on a phone,
     so a stack of them does not turn into an endless scroll */
  .card .arch img,.arch.short img,.arch.short video,.team .arch img{height:230px}
  .cards,.cards.two,.cards.four,.steps,.steps.two,.qrow,
  .media-grid,.media-grid.two,.team,.products{grid-template-columns:1fr;gap:38px}
  .band{padding:60px 0}
  .cta{padding:64px 0}
  .split.top>div:last-child{border-left:0;border-top:1px solid rgba(185,115,80,.4);padding-left:0;padding-top:34px;margin-top:8px}
  .statrow{grid-template-columns:1fr 1fr;gap:14px}
  .foot{grid-template-columns:1fr 1fr;gap:32px}
  footer{padding:48px 0 32px}
  .areas{margin-top:28px}
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;gap:14px;width:100%;order:3;
    margin-left:0;padding-top:18px;border-top:1px solid var(--line);font-size:16px;
    max-height:70vh;overflow-y:auto}
  .navtoggle{display:block}
  /* mobile: dropdowns render as compact indented sub-lists inside the menu */
  .navitem{position:static}
  .dropdown{display:block;position:static;transform:none;border:0;box-shadow:none;
    background:none;padding:6px 0 4px 16px;min-width:0}
  .dropdown::before{content:none}
  .dropdown a{padding:5px 0;font-size:15px;color:var(--soft)}
  .dropdown a:hover{background:none}
  .nav{flex-wrap:wrap;gap:14px}
  .hdr-phone{display:none}
  .quote{padding:60px 0} .quote p{font-size:24px}
  .trustline .wrap{justify-content:center;text-align:center;gap:10px 20px}
  .callbar{display:flex}
  body{padding-bottom:66px}
  .badge{left:12px;bottom:12px;padding:10px 14px}
}
@media (max-width:640px){
  h1{font-size:33px} h2{font-size:26px} .band h2{font-size:26px} .cta h2{font-size:30px}
  .wrap{padding:0 22px}
  .quote p{font-size:21px}
  .split .media img,.split .media video,
  .split .media.arched img,.split .media.arched video{height:240px}
  .foot{grid-template-columns:1fr 1fr;gap:26px 20px}
  .foot>div:first-child{grid-column:1/-1}
}

/* homepage services rail: all five cards ride one horizontal row on
   desktop too — visible scrollbar + arrow buttons to move it */
.railwrap{position:relative}
.railbtn{display:none}
@media (min-width:901px){
  #services .cards.rail{display:flex;overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:14px;scrollbar-width:thin;scrollbar-color:var(--sage) rgba(70,80,63,.18)}
  #services .cards.rail::-webkit-scrollbar{height:6px}
  #services .cards.rail::-webkit-scrollbar-thumb{background:var(--sage);border-radius:3px}
  #services .cards.rail::-webkit-scrollbar-track{background:rgba(70,80,63,.18);border-radius:3px}
  #services .cards.rail>*{flex:0 0 29%;scroll-snap-align:start;min-width:0}
  #services .rail-hint{display:block;text-align:center;font-size:11.5px;
    letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-top:14px}
  .railbtn{display:grid;place-items:center;position:absolute;z-index:2;top:34%;
    width:44px;height:44px;border-radius:50%;border:1px solid var(--sage);
    background:var(--ivory);color:var(--sage);cursor:pointer;font-size:18px;
    box-shadow:0 2px 10px rgba(0,0,0,.08)}
  .railbtn:hover{background:var(--sage);color:var(--ivory)}
  .railbtn.prev{left:-22px}
  .railbtn.next{right:-22px}
  .railbtn.off{opacity:.25;pointer-events:none}
}

/* ---------- swipe rails: any grid can become a phone carousel ----------
   Add class "rail" to a grid to get scroll-snap swiping instead of a
   very long stack. On phones every grid of 3+ same-shape items rails
   automatically (two-up grids stay stacked — a swipe that hides half
   the content isn't worth it). The partial next card is the cue that
   there is more to the side. */
.rail-hint{display:none}
@media (max-width:900px){
  .rail,
  .cards:not(.two),.steps,.qrow,
  .media-grid:not(.two),.team{display:flex;overflow-x:auto;gap:20px;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:8px;margin-left:-22px;margin-right:-22px;
    padding-left:22px;padding-right:22px;scrollbar-width:none}
  .rail::-webkit-scrollbar,.cards::-webkit-scrollbar,.steps::-webkit-scrollbar,
  .qrow::-webkit-scrollbar,.media-grid::-webkit-scrollbar,.team::-webkit-scrollbar{display:none}
  .rail>*,.cards:not(.two)>*,.steps>*,.qrow>*,
  .media-grid:not(.two)>*,.team>*{flex:0 0 78%;scroll-snap-align:center;min-width:0}
  .rail-hint{display:block;text-align:center;font-size:11.5px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--soft);margin-top:14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
@media print{header,footer,.callbar,.cta{display:none}body{background:#fff}}

/* ---------- backdrop wall: fixed clinic scene behind opt-in pages ----------
   Add class="haswall" to <body> plus <div class="backdrop" aria-hidden="true">
   right after it, then drop <div class="window"><p>…</p></div> strips between
   sections to let the scene show through. Scene photo: img/waiting-room.jpg
   (front waiting room, from the clinic's own shoot). Currently on: home,
   conditions. Any page can opt in the same way. */
.backdrop{position:fixed;inset:0;z-index:-1;
  background:linear-gradient(rgba(70,80,63,.58),rgba(70,80,63,.72)),
  url("img/waiting-room.jpg") center/cover no-repeat}
body.haswall{background:transparent}
body.haswall .hero,body.haswall main>section{background:var(--cream)}
body.haswall main>section.tinted{background:var(--ivory)}
body.haswall main>section.blush{background:var(--clay-soft)}
.window{height:250px;display:flex;align-items:center;justify-content:center;
  background:transparent;padding:0 24px;text-align:center}
.window p{font-family:var(--serif);font-style:italic;font-size:clamp(24px,4vw,36px);
  color:#FFFDF8;text-shadow:0 2px 22px rgba(0,0,0,.4);max-width:820px}
@media print{.backdrop,.window{display:none}}


/* ---------- glossy pass (promoted from proto/glossy.html, Brian 8/30) ----------
   Fraunces display serif is set via --display on h1-h4 above. Below: the same
   voice on quote/window lines, soft depth shadows, panelized cards, hover
   life (pointer devices only; reduced-motion kills transitions globally),
   and a subtle warm grade on content media. */
.quote p,.window p{font-family:var(--display);font-weight:380;font-variation-settings:"opsz" 90}
.arch{box-shadow:0 30px 70px -22px rgba(42,46,38,.32)}
.split .media.framed{box-shadow:0 26px 60px -20px rgba(42,46,38,.25)}
.cards .card,.cards.two .card{background:#FFFDF8;border:1px solid rgba(185,115,80,.14);
  border-radius:20px;padding:30px 26px 34px;
  box-shadow:0 10px 34px -14px rgba(42,46,38,.12)}
.band .cards .card{background:rgba(255,253,248,.05);border-color:rgba(255,253,248,.14)}
.qrow blockquote,.gcard{box-shadow:0 12px 36px -16px rgba(42,46,38,.14)}
@media (hover:hover){
  .cards .card,.pill,.railbtn{transition:transform .35s ease,box-shadow .35s ease}
  .arch img{transition:transform .9s cubic-bezier(.2,.6,.2,1)}
  .cards .card:hover{transform:translateY(-5px);box-shadow:0 24px 48px -16px rgba(42,46,38,.2)}
  .arch:hover img{transform:scale(1.045)}
  .pill:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(185,115,80,.45)}
}
main img,main video{filter:saturate(1.05) sepia(.05) contrast(1.015)}

/* ---------- ANS results screen in the conditions #circulation split:
   screen-focused crop (src-scoped). Its border now comes from the
   sitewide picture-border rule below. Appended at END. */
.split .media img[src*="ans-results-screen"]{object-position:50% 32%}
/* Split photos slide DOWN THE PAGE per Brian 9/1 (they sat high above the
   text beside them): the pellet split in #hormones and the coaching consult
   split in #weightloss. Mobile stacks, so no offset there. */
#hormones .split .media,
#weightloss .split .media{margin-top:72px}
@media(max-width:900px){#hormones .split .media,#weightloss .split .media{margin-top:0}}

/* ---------- sitewide picture borders per Brian 2026-09-01: every content
   image and video gets the 2px clay line (same scope as the glossy pass:
   main only, so header/footer logos stay clean). The two overflow-hidden
   containers (.arch, .embed) carry the border themselves so the line
   follows their curve instead of being clipped; framed media keeps its
   existing mat border with no doubled inner line. */
main img,main video{border:2px solid var(--clay)}
main .arch,main .embed{border:2px solid var(--clay)}
main .arch img,main .arch video,
main .split .media.framed img,
main .embed iframe{border:0}

/* ---------- snug: a tight section that also trims its bottom (services
   intro after the signpost note was removed per Brian 9/1). Appended. */
section.tight.snug{padding-bottom:28px}

/* ---------- full-screen video hero (homepage; Brian 9/1, from the approved
   mock). Only the headline rides the footage; the small wording lives in
   .hero-sub on solid cream below. The full-bleed video is deliberately
   exempt from the sitewide picture border. Appended at END. */
.hero-full{position:relative;height:64vh;min-height:440px;max-height:700px;overflow:hidden;background:var(--sage)}
.hero-full video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.hero-full-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(30,34,26,.28) 0%,rgba(30,34,26,.34) 55%,rgba(30,34,26,.52) 100%)}
.hero-full-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--ivory)}
.hero-full .eyebrow{color:#E6C3AC}
.hero-full h1{color:var(--ivory);font-size:56px;line-height:1.12;max-width:920px;text-shadow:0 2px 24px rgba(0,0,0,.38)}
.hero-full h1 em{color:#E9C9B2}
.hero-sub{background:var(--ivory);padding:46px 0 54px;text-align:center}
.hero-sub .lede{max-width:780px;margin:0 auto}
.hero-sub .actions{margin-top:24px;justify-content:center}
.hero-sub .stars{margin-top:14px}
@media(max-width:640px){
  .hero-full{height:46vh;min-height:340px}
  .hero-full h1{font-size:34px}
  .hero-sub{padding:34px 0 44px}
  .hero-sub .lede{font-size:15px}
}

/* ---------- hormone section, styled to Brian's reference mock (9/1 v3):
   quiet rounded rectangles, left-aligned headings, soft tints, small white
   method cards, centered finale box with a deep-green button. Appended. */
.horm-label{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-bottom:10px}
.horm-duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px}
.horm-card{background:rgba(70,80,63,.08);border-radius:var(--r);padding:26px 28px;text-align:left}
.horm-card+.horm-card{background:rgba(70,80,63,.13)}
.horm-card p{font-size:15px;line-height:1.65;margin:0;color:var(--ink)}
.horm-card p+p{margin-top:12px}
.horm-quote{margin:30px 0 0;border-left:2px solid var(--clay);padding:4px 0 4px 18px;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--soft);text-align:left}
.horm-act{font-family:var(--display);font-weight:480;font-size:24px;line-height:1.25;text-align:left;margin:52px 0 12px;color:var(--ink)}
.horm-lede{margin:14px 0 0;text-align:left;font-size:16.5px}
.horm-nums{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.horm-nums>div{background:var(--clay-soft);border-radius:var(--r);padding:24px 26px;text-align:left}
.horm-nums h3{font-family:var(--sans);font-weight:700;font-size:16px;color:var(--clay-d);margin:0 0 8px}
.horm-nums p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink)}
.horm-ways{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.horm-way{background:var(--ivory);border:1px solid var(--line);border-radius:var(--r);padding:20px 18px;text-align:left;box-shadow:0 4px 14px -8px rgba(56,64,47,.12)}
.horm-way::before{content:"";display:block;width:26px;height:26px;border-radius:50%;background:var(--clay-soft);margin-bottom:12px}
.horm-way h4{font-family:var(--sans);font-weight:700;font-size:14.5px;margin:0 0 4px;color:var(--ink)}
.horm-way p{font-size:12.5px;line-height:1.5;color:var(--soft);margin:0}
.horm-goal{margin-top:44px;background:rgba(70,80,63,.13);border-radius:18px;padding:44px 30px;text-align:center}
.horm-goal h3{font-family:var(--sans);font-weight:700;font-size:20px;line-height:1.5;color:var(--ink);margin:0}
.horm-goal .actions{margin-top:22px;justify-content:center}
.pill.pine{background:var(--sage);color:var(--ivory)}
.pill.pine:hover{background:#3A4234;color:var(--ivory)}
/* ---------- medical weight loss section (Brian's supplied design, 9/1):
   numbered four-part program cards on the tinted section, ivory summary
   band, italic ready line, testing CTA. */
.mwl-sub{color:var(--soft);margin:6px 0 0;text-align:left}
.mwl-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.mwl-card{background:var(--ivory);border:1px solid var(--line);border-radius:var(--r);padding:22px 18px;text-align:left;box-shadow:0 4px 14px -8px rgba(56,64,47,.12)}
.mwl-num{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--clay)}
.mwl-card h4{font-family:var(--sans);font-weight:700;font-size:15px;margin:8px 0 6px;color:var(--ink)}
.mwl-card p{font-size:13.5px;line-height:1.55;color:var(--soft);margin:0}
.mwl-band{margin-top:34px;background:var(--ivory);border-radius:18px;padding:34px;text-align:left}
.mwl-band h3{font-family:var(--display);font-weight:480;font-size:22px;line-height:1.3;margin:0 0 10px;color:var(--ink)}
.mwl-band p{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink)}
.mwl-ready{margin:34px 0 0;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--soft);text-align:center}
@media(max-width:900px){.mwl-cards{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.mwl-band{padding:26px 20px}.mwl-band h3{font-size:19px}}
/* ---------- BAHI red-light info design (Brian's supplied mock, 9/1):
   big spec figures, depth list, comparison table (scrolls sideways on
   phones inside its own wrapper — the page never scrolls horizontally). */
.bahi-spec{font-family:var(--display);font-size:24px;font-weight:480;color:var(--sage);letter-spacing:0}
.bahi-depthnote{color:var(--soft);font-size:14px;margin-top:14px!important}
.mwl-band p+p{margin-top:10px}
/* The whole compares/system area classed up per Brian 9/2: centered act
   headings on the BAHI intro, serif voices in the table, soft-shadow card. */
.tight.snug .horm-act{text-align:center}
.tight.snug .mwl-sub{text-align:center;font-family:var(--serif);font-style:italic;font-size:17px}
/* Compare-table accent = SAGE per Brian 9/2 ("try the sage green") — the
   site sage used in the LIGHT structure (crown + soft wash + colored
   text), not the rejected solid-pillar look. Emerald, red and teal all
   superseded same day. */
.bahi-tablewrap{overflow-x:auto;margin-top:28px;background:var(--ivory);border:1px solid rgba(70,80,63,.4);border-radius:20px;padding:14px;box-shadow:var(--shadow)}
.bahi-compare{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;text-align:left;font-family:var(--sans)}
.bahi-compare th,.bahi-compare td{padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.bahi-compare tr:last-child th,.bahi-compare tr:last-child td{border-bottom:0}
.bahi-compare th{font-family:var(--serif);font-style:italic;font-weight:500;font-size:17px;color:var(--sage);white-space:nowrap}
.bahi-compare tr:first-child th{font-family:var(--display);font-style:normal;font-weight:480;font-size:16px;color:var(--soft)}
.bahi-compare tr:first-child th:nth-child(2){background:var(--sage);color:#FFFDF8;font-size:17px;border-radius:14px 14px 0 0}
.bahi-compare td{color:var(--soft)}
.bahi-compare td:first-of-type{background:rgba(70,80,63,.10);font-weight:600;color:var(--sage);border-bottom:1px solid rgba(70,80,63,.18)}
.bahi-compare tr:last-child td:first-of-type{border-radius:0 0 14px 14px;border-bottom:0}
/* BAHI: close the big gap between the intro info design and the red-light
   split (Brian 9/1) — the intro also carries tight+snug in the HTML. */
#redlight{padding-top:44px}
@media(max-width:900px){
  .horm-duo,.horm-nums{grid-template-columns:1fr}
  .horm-ways{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .horm-act{font-size:21px;margin-top:44px}
  .horm-goal{padding:34px 20px}
  .horm-goal h3{font-size:17.5px}
}


/* ---------- IV menu boards (services #iv rebuild from Brian's docx 9/2).
   Two tier boards: sage crown = book online, quiet tint crown = labs
   first - extends the approved bahi sage-crown grammar. Deliberately a
   plain grid (NOT .steps/.cards) so phones stack the boards instead of
   swipe-railing a whole tier off-screen. Tokens only. Appended at END. */
.ivm-duo{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:52px;text-align:left}
.ivm-panel{display:flex;flex-direction:column;background:var(--ivory);border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:var(--shadow)}
.ivm-panel.go{border-color:rgba(70,80,63,.4)}
.ivm-crown{background:#E3D8BF;border-radius:14px 14px 0 0;padding:22px 24px;text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:190px}
.ivm-tag{display:block;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.ivm-crown h3{margin-top:6px}
.ivm-crown p{font-size:14px;color:var(--soft);margin-top:6px}
.go .ivm-crown{background:var(--sage)}
.go .ivm-tag{color:rgba(255,253,248,.75)}
.go .ivm-crown h3{color:var(--ivory)}
.go .ivm-crown p{color:rgba(255,253,248,.85)}
.ivm-item{padding:22px 24px;border-bottom:1px solid var(--line)}
.ivm-item:last-of-type{border-bottom:0}
.ivm-sub{font-family:var(--serif);font-style:italic;font-size:16.5px;font-weight:500;color:var(--clay);margin-left:4px}
.ivm-item p{font-size:14px;color:var(--soft);margin-top:8px}
.ivm-req{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:13px}
.ivm-req b{color:var(--ink);font-weight:500}
.ivm-foot{margin-top:auto;padding:20px 24px 14px;text-align:center}
.ivm-after{margin-top:84px}
.ivm-when{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--clay);margin-bottom:6px}
.ivm-after .note{margin-top:44px;text-align:left}
.ivm-team{margin-top:18px}
.ivm-ready{margin-top:64px}
.ivm-price{margin-top:16px}
@media(max-width:900px){.ivm-duo{grid-template-columns:1fr;gap:30px}.ivm-crown{min-height:0}}
@media(max-width:640px){.ivm-crown{padding:18px 16px}.ivm-item{padding:18px 16px}.ivm-foot{padding:16px}}
.ivm-photo{margin-top:84px}

/* ---------- add-on injection cards (Brian's follow-up design 9/2):
   three book-online quick shots under the menu boards. Sage badge chip
   = the tier language; left sage rule echoes his mock's accent edge. */
.ivm-addhead{margin-top:84px}
.ivm-addons{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;text-align:left}
.ivm-addon{background:var(--ivory);border:1px solid var(--line);border-left:3px solid var(--sage);border-radius:14px;padding:22px 24px;box-shadow:var(--shadow)}
.ivm-badge{display:inline-block;background:var(--sage);color:var(--ivory);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;border-radius:999px;padding:4px 12px}
.ivm-addon h4{margin-top:12px}
.ivm-kicker{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);margin-top:2px}
.ivm-addon p{font-size:14px;color:var(--soft);margin-top:10px}
.ivm-fine{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--sage-soft)}
.ivm-mention{background:var(--tint);border-radius:var(--r);padding:16px 22px;text-align:center;font-size:14.5px;color:var(--soft);margin-top:26px}
.ivm-mention b{color:var(--ink);font-weight:600}
@media(max-width:900px){.ivm-addons{grid-template-columns:1fr}}