/* ==========================================================================
   SD Body — master stylesheet
   Design system: "Coastal" (approved master look)
   Fonts: Prata (display serif) + Poppins (UI/body)
   NOTE: the "checkered" plus-field grid pattern has been removed per client.
   ========================================================================== */

:root{
  --teal:#2e6a79;
  --teal-dark:#24545f;
  --navy:#1c2843;
  --ink:#2b2b2a;
  --mist:#e0eff1;
  --mist-2:#e2f0f3;
  --sky:#76bcd4;
  --slate:#748f95;
  --gray:#7a7a7a;
  --gray-sm:#6b6b6b;
  --logo-teal:#4da9bb;
  --white:#ffffff;
  --ease-quart:cubic-bezier(0.25,1,0.5,1);
  --ease-expo:cubic-bezier(0.16,1,0.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Poppins",system-ui,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:#ffffff;
}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
h1,h2,h3{margin:0;font-weight:400;line-height:1.12}
p{margin:0 0 1.1em}
.prata{font-family:"Prata",Georgia,serif;font-weight:400}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- shared layout ---------- */
.wrap{max-width:1600px;margin:0 auto;padding:0 35px}
.measure{max-width:64ch}
.eyebrow{
  font-size:13px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--teal);margin:0 0 16px;display:block;
}
.section-h{
  font-family:"Prata",Georgia,serif;
  font-size:clamp(1.9rem,4vw,2.7rem);
  color:var(--ink);letter-spacing:-0.01em;line-height:1.42;
}
.pad{padding:100px 0}
.band-mist{background:var(--mist)}
.band-white{background:#ffffff}
.band-navy{background:var(--navy);color:#ffffff}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:"Poppins",sans-serif;font-weight:600;font-size:14px;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:15px 28px;border:1px solid transparent;cursor:pointer;
  background-size:200% 100%;background-position:right center;
  transition:background-position .45s var(--ease-quart),color .3s var(--ease-quart),transform .2s var(--ease-quart),box-shadow .2s var(--ease-quart),border-color .3s var(--ease-quart);
  min-height:48px;
}
/* hover = colour wipes in from the left (two-colour gradient slid on background-position) */
.btn-primary{background-image:linear-gradient(to right,var(--teal-dark) 50%,var(--teal) 50%);color:#ffffff}
.btn-primary:hover{background-position:left center;box-shadow:0 12px 26px -14px rgba(46,106,121,.75)}
.btn-ghost{background-image:linear-gradient(to right,var(--teal) 50%,transparent 50%);border-color:var(--teal);color:var(--teal)}
.btn-ghost:hover{background-position:left center;color:#ffffff}
.btn-on-dark{background-image:linear-gradient(to right,#ffffff 50%,transparent 50%);border-color:rgba(255,255,255,.65);color:#ffffff}
.btn-on-dark:hover{background-position:left center;color:var(--navy);border-color:#ffffff}
.btn:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.calllink{text-transform:none;letter-spacing:.01em;font-weight:600}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- utility bar ---------- */
.utility{
  background:var(--teal);color:#ffffff;min-height:34px;padding:8px 0;
  display:flex;align-items:center;font-size:12.5px;letter-spacing:.03em;
}
.utility .wrap{display:flex;justify-content:center;align-items:center;width:100%;gap:16px;text-align:center}
.utility a{color:#ffffff;font-weight:500}
.utility .u-left{opacity:.92}
.utility .u-hi{opacity:1;font-weight:600;color:#ffffff}

/* ---------- header ---------- */
.header{
  position:sticky;top:0;z-index:60;background:#ffffff;
  border-bottom:1px solid rgba(28,40,67,.10);
  transition:box-shadow .25s var(--ease-quart),background-color .25s var(--ease-quart);
}
.header .wrap{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;min-height:76px;gap:20px;padding-top:12px;padding-bottom:12px}
.brandmark{display:flex;flex-direction:column;line-height:1;text-decoration:none;flex:0 0 auto}
.wordmark{font-family:"Poppins",sans-serif;font-weight:600;font-size:25px;color:var(--ink);letter-spacing:.005em;white-space:nowrap}
.wordmark .pl{color:var(--logo-teal);font-weight:600}
.formerly{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--logo-teal);margin-top:5px;white-space:nowrap}
.nav{display:flex;align-items:center}
.nav .menu{display:flex;flex-wrap:nowrap;gap:22px;align-items:center;list-style:none;margin:0;padding:0}
.nav .menu > .menu-item{position:relative}
.nav .menu > .menu-item > a{font-weight:500;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);white-space:nowrap;position:relative;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.nav .menu > .menu-item > a:hover{color:var(--teal)}
.menu-item-has-children > a::after{content:"+";font-weight:600;font-size:.95em;line-height:1}
.menu-item-has-children:hover > a::after,.menu-item-has-children:focus-within > a::after{content:"\2212"}
.header-cta{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.header-phone{font-size:18px;font-weight:600;letter-spacing:.02em;color:var(--navy);white-space:nowrap;text-decoration:none}
.menu-btn{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:1px solid rgba(28,40,67,.2);width:46px;height:46px;cursor:pointer;z-index:130;position:relative}
.menu-btn span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease-quart),opacity .3s,background-color .3s}
.menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ---- Off-canvas mobile menu (backdrop + slide-in panel + accordion) ---- */
.mobile-backdrop{position:fixed;inset:0;z-index:110;background:rgba(9,13,24,.55);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .4s var(--ease-quart),visibility .4s}
.mobile-backdrop.open{opacity:1;visibility:visible}
.mobile-menu{position:fixed;top:0;right:0;bottom:0;z-index:120;width:min(340px,86vw);background:var(--navy);display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .45s var(--ease-quart),visibility .45s;box-shadow:-24px 0 60px -24px rgba(0,0,0,.55);overflow-y:auto;overscroll-behavior:contain}
.mobile-menu.open{transform:none;visibility:visible}
.mobile-menu__head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:18px 22px;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.12)}
.mobile-menu__brand{font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.mobile-menu__close{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:none;color:#fff;display:grid;place-items:center;flex-shrink:0;cursor:pointer;transition:background .3s,border-color .3s,transform .35s var(--ease-quart)}
.mobile-menu__close:hover{background:var(--teal);border-color:var(--teal);transform:rotate(90deg)}
.mobile-menu__close svg{width:22px;height:22px}
.mobile-nav{flex:1;padding:6px 22px}
.mobile-nav__list,.mobile-nav__sub{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mobile-nav__list>li{border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-nav__row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.mobile-nav a{display:block;flex:1;color:#fff;font-weight:600;font-size:1.02rem;letter-spacing:.01em;text-transform:none;padding:.78em 0;border:0;transition:color .3s}
.mobile-nav a:hover{color:var(--sky)}
.mobile-nav__toggle{width:40px;height:40px;display:grid;place-items:center;background:none;border:0;color:#fff;flex-shrink:0;cursor:pointer}
.mobile-nav__toggle svg{width:20px;height:20px;transition:transform .35s var(--ease-quart)}
.has-sub.open>.mobile-nav__row>.mobile-nav__toggle svg{transform:rotate(180deg)}
.mobile-nav__subwrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease-quart)}
.has-sub.open>.mobile-nav__subwrap{grid-template-rows:1fr}
.mobile-nav__sub{overflow:hidden;min-height:0;padding-left:14px}
.mobile-nav__sub a{font-size:.92rem;font-weight:500;color:rgba(255,255,255,.72)}
.mobile-nav__sub li:not(:last-child) a{border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-menu__cta{display:flex;flex-direction:column;gap:12px;padding:18px 22px calc(22px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.12)}
.mobile-menu__cta .btn-primary{width:100%;justify-content:center}
.mobile-menu__cta .mm-call{color:#fff;text-align:center;font-weight:600;font-size:.95rem;padding:6px 0}
.mobile-menu__cta .mm-call:hover{color:var(--sky)}

/* ---- WordPress-structure dropdown (ul.menu > li.menu-item-has-children > ul.sub-menu) ---- */
.sub-menu{list-style:none;margin:0;padding:14px 10px 10px;position:absolute;z-index:40;top:100%;left:-16px;min-width:236px;display:none;
  background:#fff;border:1px solid rgba(28,40,67,.12);border-radius:12px;box-shadow:0 26px 54px -26px rgba(28,40,67,.5)}
/* small hover-safe bridge above the panel so it doesn't close when the cursor crosses the gap */
.sub-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.sub-menu .menu-item{position:relative}
.sub-menu a{display:block;padding:10px 16px;border-radius:8px;color:var(--navy);text-decoration:none;white-space:nowrap;text-transform:none;letter-spacing:normal;font-size:14px;font-weight:500;transition:background .2s var(--ease-quart),color .2s}
.sub-menu a:hover,.sub-menu a:focus-visible{background:var(--mist);color:var(--teal)}
/* Services: two-column panel, sized to content (no dead space) */
.menu-services > .sub-menu{grid-template-columns:repeat(2,max-content);column-gap:10px;min-width:0}
.menu-item-all{grid-column:1 / -1;margin-top:6px;padding-top:8px;border-top:1px solid rgba(28,40,67,.1)}
.menu-item-all > a{font-weight:600;color:var(--teal)}

/* ==========================================================================
   SCENES — full-bleed image/video sections (Coastal master)
   ========================================================================== */
.scene{position:relative;overflow:hidden;isolation:isolate;background:#1c2843;display:flex;flex-direction:column;justify-content:center}
.scene-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.scene-media img{width:100%;height:100%;object-fit:cover}
.scene-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:1;opacity:0;pointer-events:none;transition:opacity .6s var(--ease-quart);
}
.scene.video-live .scene-media video{opacity:1}
.scene-veil{position:absolute;inset:0;z-index:1;background:rgba(28,40,67,.56)}
.scene-veil.deep{background:rgba(28,40,67,.66)}
.scene-inner{position:relative;z-index:2;color:#ffffff;width:100%;max-width:1600px;margin-inline:auto;padding:62px 40px}

/* hero (full-bleed video, location + service pages) */
.hero-scene{min-height:calc(100svh - 108px);justify-content:flex-end}
.hero-scene .scene-veil{background:linear-gradient(180deg,rgba(28,40,67,.42) 0%,rgba(28,40,67,.30) 42%,rgba(28,40,67,.74) 100%)}
.hero-scene .scene-inner{padding-top:120px;padding-bottom:88px}
@media (max-width:820px){
  /* Tall phones left ~170-270px of empty photo above the kicker. */
  /* Height follows the copy, so the gap above is the padding and nothing
     more. The photo still fills whatever height that comes to. */
  .hero-scene{min-height:0}
  .hero-scene .scene-inner{padding-top:48px;padding-bottom:56px}
}
.hero-scene .hero-kicker{color:#cbeaf4;font-weight:600;letter-spacing:.04em;margin:0 0 18px;text-shadow:0 2px 14px rgba(16,24,40,.7)}
.hero-scene h1,.hero-scene .hero-sub{text-shadow:0 2px 20px rgba(16,24,40,.5)}
.hero-scene h1{
  font-family:"Prata",Georgia,serif;color:#ffffff;
  font-size:clamp(2.7rem,6.4vw,4.6rem);line-height:1.1;letter-spacing:-0.015em;
  max-width:15ch;margin:0 0 22px;
}
.hero-sub{color:rgba(255,255,255,.92);font-size:clamp(1rem,1.5vw,1.2rem);max-width:48ch;margin:0 0 30px;line-height:1.6}
.scroll-cue{
  position:absolute;right:40px;bottom:26px;z-index:2;
  color:rgba(255,255,255,.8);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.scroll-cue i{display:block;width:1px;height:44px;background:rgba(255,255,255,.55)}

/* ---------- light, text-forward hero (homepage / directory pages) ---------- */
.hero-light{position:relative;overflow:hidden;background:var(--mist);padding:96px 0 72px;border-bottom:1px solid rgba(28,40,67,.07)}
.hero-light .wrap{position:relative;z-index:1}
.hero-light .hero-kicker{font-size:16px;font-weight:500;color:var(--teal);margin:0 0 18px;letter-spacing:.01em}
.hero-light h1{
  font-family:"Prata",Georgia,serif;color:var(--ink);
  font-size:clamp(2.6rem,6vw,4.3rem);line-height:1.05;letter-spacing:-0.015em;
  max-width:15ch;margin:0 0 24px;
}
/* Men / women chooser under the hero buttons on the two services that are
   tailored by sex. Sits on a photo, so it inherits the hero's light-on-dark. */
.hero-audience{margin:18px 0 0;font-size:15px;color:rgba(255,255,255,.86)}
.hero-audience a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.hero-audience a:hover{color:var(--sky)}
.hero-capsule{font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--ink);max-width:60ch;margin:0 0 30px;line-height:1.65}
.hero-light .cta-row{margin-bottom:36px}
.hero-proof{display:flex;flex-wrap:wrap;gap:18px 52px;border-top:1px solid rgba(28,40,67,.16);padding-top:28px}
.hp-cell{flex:0 1 auto;display:flex;flex-direction:column}
.hp-num{font-family:"Prata",Georgia,serif;font-size:1.7rem;color:var(--teal);line-height:1}
.hp-txt{font-size:13px;color:var(--gray-sm);letter-spacing:.01em;margin-top:6px}

/* ---------- trust band ---------- */
.trust{background:#1c2843;color:#ffffff}
.trust .wrap{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;padding-top:28px;padding-bottom:28px}
.trust-cell{flex:1 1 220px;padding:10px 30px;border-left:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;justify-content:center}
.trust-cell:first-child{border-left:none}
.trust-num{font-family:"Prata",Georgia,serif;font-size:1.7rem;color:#ffffff;margin-right:.4em}
.trust-txt{font-size:14px;color:rgba(255,255,255,.85);letter-spacing:.01em}
.trust-src{display:block;font-size:12px;color:rgba(255,255,255,.72);letter-spacing:.02em;margin-top:4px}

/* ---------- the feeling / narrative block ---------- */
.feeling{position:relative;overflow:hidden}
.feeling .wrap{position:relative;z-index:1}
.feeling h2{max-width:16ch;margin-bottom:26px}
.feeling-lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--ink);max-width:56ch;margin-bottom:34px;line-height:1.65}
/* feeling: text left, image right (fills empty space) */
.feeling-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
.feeling-media{margin:0;align-self:stretch}
/* Landscape, because the photo is a two-shot: Dr. Shawn and a patient sitting
   across from each other. The old 4/5 portrait crop cut one of them out. */
.feeling-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/11;max-height:600px;display:block}
@media (max-width:820px){.feeling-grid{grid-template-columns:1fr}
  /* The photo stacks under the copy rather than disappearing. */
  .feeling-media{margin-top:8px}
  .feeling-media img{max-height:none;aspect-ratio:16/10}}
/* providers intro: text left, image right */
.prov-head{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:clamp(32px,5vw,60px);align-items:center;margin-bottom:clamp(44px,6vw,68px)}
.prov-head .prov-intro{margin-bottom:0;max-width:none}
.prov-head-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/11;border:1px solid rgba(255,255,255,.14);display:block}
@media (max-width:820px){.prov-head{grid-template-columns:1fr}
  .prov-head-media{margin-top:6px}
  .prov-head-media img{max-height:none;aspect-ratio:4/3}}
.capsule{background:#ffffff;border:1px solid var(--navy);padding:34px;max-width:60ch;margin-bottom:34px}
.capsule p{margin:0;font-size:16px;color:var(--ink);line-height:1.7}
.capsule .cap-tag{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:12px}
.inline-quote{border-top:1px solid rgba(28,40,67,.15);padding-top:26px;max-width:54ch}
.inline-quote blockquote{margin:0 0 10px;font-family:"Prata",Georgia,serif;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.4;color:var(--navy)}
.inline-quote cite{font-style:normal;font-size:13px;letter-spacing:.02em;color:var(--gray-sm)}

/* ---------- symptom checker call-to-action band ----------
   Sits just below the fold on the service pages, and doubles as the break
   between two sections that would otherwise run into each other. Teal, so it
   reads as its own beat against the navy scenes and the white/mist bands. */
.sc-cta{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-dark) 100%);color:#fff;
  padding:clamp(34px,4.4vw,52px) 0;position:relative;overflow:hidden}
.sc-cta::before,.sc-cta::after{content:"";position:absolute;border-radius:50%;pointer-events:none;
  border:1px solid rgba(255,255,255,.13)}
.sc-cta::after{right:-90px;top:-110px;width:320px;height:320px}
.sc-cta::before{right:60px;bottom:-150px;width:230px;height:230px;border-color:rgba(255,255,255,.09)}
.sc-cta-inner{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:space-between;gap:clamp(22px,3.5vw,54px);flex-wrap:wrap}
.sc-cta-copy{flex:1 1 460px;min-width:0}
.sc-cta-eyebrow{display:block;font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.74);margin-bottom:9px}
.sc-cta-h{font-family:"Prata",Georgia,serif;font-weight:400;font-size:clamp(1.5rem,2.6vw,2.05rem);
  line-height:1.16;margin:0 0 10px;color:#fff}
.sc-cta-copy p{margin:0;max-width:58ch;font-size:16px;line-height:1.62;color:rgba(255,255,255,.88)}
.sc-cta-actions{display:flex;flex-wrap:wrap;gap:12px;flex:0 0 auto}
/* keeps the house left-to-right wipe, inverted for a white button on teal */
.sc-cta .btn-primary{background-image:linear-gradient(to right,var(--navy) 50%,#ffffff 50%);
  color:var(--teal-dark);border-color:#ffffff}
.sc-cta .btn-primary:hover{color:#ffffff;border-color:var(--navy);box-shadow:none}
@media (max-width:760px){
  .sc-cta-inner{flex-direction:column;align-items:flex-start}
  /* stacked, the main axis is vertical — a flex-basis here would become a
     height and open a gap under the copy, so the box sizes to its content */
  .sc-cta-copy{flex:0 0 auto;width:100%}
  .sc-cta-actions{width:100%}
  .sc-cta-actions .btn{flex:1 1 auto;justify-content:center}
}

/* ---------- statement scene ---------- */
.statement{min-height:44vh}
.statement h2{font-family:"Prata",Georgia,serif;font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.12;letter-spacing:-0.015em;margin-bottom:24px;max-width:20ch}
.statement p{font-size:clamp(1.05rem,1.6vw,1.28rem);color:rgba(255,255,255,.9);max-width:52ch;margin-bottom:30px}

/* The statement scene carries the membership panel beside the lede; it stacks
   under the copy once there is no longer room for two columns. */
.statement-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,4.5vw,64px);align-items:center}
.statement-lede .cta-row{margin-bottom:0}
.member-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:clamp(26px,3vw,38px)}
.member-kicker{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#bfe0e6;margin-bottom:12px}
.member-title{font-family:"Prata",Georgia,serif;font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem);
  line-height:1.15;margin:0 0 10px;color:#fff}
.statement .member-sub{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.82);margin:0 0 20px;max-width:46ch}
.member-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.member-list > li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.94)}
.member-list > li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;
  border:1.5px solid #7fc4d0;border-radius:50%}
.member-list ul{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:7px}
.member-list ul li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.78)}
.member-list ul li::before{content:"";position:absolute;left:0;top:.66em;width:10px;height:1.5px;background:rgba(127,196,208,.85)}
.statement .member-fine{margin:18px 0 0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.62);max-width:none}
.member-cta{margin-top:22px}
@media (max-width:1024px){
  .statement-grid{grid-template-columns:1fr;gap:34px;align-items:start}
  .statement h2{max-width:none}
}

/* ---------- care model film-strip ---------- */
.care .scene-media img{filter:blur(6px) saturate(.9);transform:scale(1.08)}
.care .scene-veil{background:rgba(28,40,67,.74)}
.care .scene-inner{padding-top:112px;padding-bottom:112px}
.care-head h2{color:#ffffff;max-width:18ch;margin-bottom:10px}
.care-head p{color:rgba(255,255,255,.82);max-width:52ch}
.care-head .eyebrow{color:var(--sky)}
.care-track{display:flex;flex-wrap:wrap;gap:20px;margin-top:44px}
.care-step{flex:1 1 220px;background:#ffffff;border:1px solid var(--navy);padding:26px 24px 30px;display:flex;flex-direction:column;min-height:210px}
.care-num{font-family:"Prata",Georgia,serif;font-size:2.1rem;color:var(--teal);line-height:1;margin-bottom:16px}
.care-step h3{font-family:"Poppins",sans-serif;font-weight:600;font-size:18px;color:var(--navy);margin-bottom:10px;letter-spacing:.01em}
.care-step p{font-size:14.5px;color:var(--ink);margin:0;line-height:1.6}
.care-cta{margin-top:40px}

/* ---------- simple steps grid (light) ---------- */
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.how-figure{border:1px solid var(--navy);overflow:hidden;aspect-ratio:4/3;background:var(--navy);margin:0}
.how-figure img{width:100%;height:100%;object-fit:cover}
.how h2{margin-bottom:14px;max-width:16ch}
.how-lead{color:var(--ink);max-width:48ch;margin-bottom:30px;line-height:1.64}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.step{border:1px solid var(--navy);background:#ffffff;padding:22px 20px 24px;display:flex;flex-direction:column;min-height:150px}
.step .n{font-family:"Prata",Georgia,serif;font-size:1.7rem;color:var(--teal);line-height:1;margin-bottom:12px}
.step h3{font-family:"Poppins",sans-serif;font-weight:600;font-size:16px;color:var(--navy);margin-bottom:8px}
.step p{font-size:13.5px;color:var(--ink);margin:0;line-height:1.55}

/* ---------- symptom mirror cards (homepage) ---------- */
.mirror{background:#ffffff;padding:92px 0 40px}
.mirror .head{max-width:60ch;margin-bottom:40px}
.mirror h2{margin-bottom:14px}
.mirror-lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--ink);max-width:56ch;line-height:1.6}
.mirror-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mirror-card{
  display:flex;flex-direction:column;justify-content:space-between;gap:26px;
  min-height:186px;background:#ffffff;border:1px solid var(--navy);
  padding:30px 28px;color:var(--ink);position:relative;
  transition:background-color .25s var(--ease-quart),transform .25s var(--ease-quart),border-color .25s var(--ease-quart);
}
.mirror-card:hover,.mirror-card:focus-visible{transform:translateY(-3px);border-color:var(--teal);background:var(--mist-2);outline:none}
.mirror-card:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.mc-voice{font-family:"Prata",Georgia,serif;font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.5;color:var(--navy);letter-spacing:-0.01em}
.mc-go{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--teal);display:inline-flex;align-items:center;gap:.5em}

/* ---------- services editorial (sticky figure) ---------- */
.services .head{max-width:56ch;margin-bottom:44px}
.services h2{margin-bottom:16px}
.svc-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4vw,60px);align-items:start}
.svc-stage{position:sticky;top:100px;align-self:start}
.svc-figure{position:relative;border:1px solid var(--navy);overflow:hidden;aspect-ratio:4/5;background:#1c2843}
.svc-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease-quart)}
.svc-figure img.active{opacity:1}
.svc-figure figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px;color:#ffffff;
  background-image:linear-gradient(0deg,rgba(28,40,67,.85),rgba(28,40,67,0));
  font-family:"Prata",Georgia,serif;font-size:1.25rem;letter-spacing:-0.01em;
}
.svc-list{list-style:none;margin:0;padding:0}
.svc-row{border-top:1px solid rgba(28,40,67,.16);padding:22px 6px;transition:padding-left .3s var(--ease-quart)}
.svc-row:last-child{border-bottom:1px solid rgba(28,40,67,.16)}
.svc-row h3{
  font-family:"Poppins",sans-serif;font-weight:600;font-size:clamp(1.05rem,1.7vw,1.35rem);
  color:var(--navy);margin-bottom:8px;display:flex;align-items:baseline;gap:.5em;transition:color .25s var(--ease-quart)
}
.svc-row h3 a{color:inherit;text-decoration:none}
.svc-row p{font-size:14.5px;color:var(--gray-sm);margin:0;max-width:44ch;line-height:1.55}
.svc-row .svc-mark{color:var(--teal);font-size:14px;opacity:0;transition:opacity .25s,transform .3s var(--ease-quart);transform:translateX(-6px)}
.svc-row.active{padding-left:16px}
.svc-row.active h3{color:var(--teal)}
.svc-row.active .svc-mark{opacity:1;transform:translateX(0)}
.svc-cta{margin-top:46px}

/* ---------- pull quote scene ---------- */
.pullscene{min-height:44vh;text-align:center}
.pullscene .scene-inner{max-width:960px;text-align:center}
.pullscene blockquote{margin:0;font-family:"Prata",Georgia,serif;color:#ffffff;font-size:clamp(2rem,5.2vw,3.6rem);line-height:1.14;letter-spacing:-0.01em}
.pullscene cite{display:block;margin-top:26px;font-style:normal;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.pullscene .cta-row{justify-content:center;margin-top:40px}

/* ---- light pull quote ----
   Used where a pull quote lands directly after another full-bleed dark scene.
   Two dark scenes in a row read as one long block, so this one drops the
   image/video and inverts to mist, which breaks the run without stacking yet
   another call to action between two sections that already carry one. */
.pullscene--light{background:var(--mist)}
.pullscene--light .scene-media,.pullscene--light .scene-veil{display:none}
.pullscene--light blockquote{color:var(--navy)}
.pullscene--light cite{color:var(--slate)}
.pullscene--light .scene-inner{color:var(--ink)}
.pullscene--light .btn-on-dark{background-image:linear-gradient(to right,var(--teal) 50%,transparent 50%);
  border-color:var(--teal);color:var(--teal)}
.pullscene--light .btn-on-dark:hover{color:#ffffff;border-color:var(--teal)}

/* ---------- providers — cinematic cast reveal ---------- */
.providers{position:relative;overflow:hidden;background:var(--navy);color:#ffffff;isolation:isolate}
.providers .wrap{position:relative;z-index:1}
.providers .eyebrow{color:var(--sky)}
.providers h2{color:#ffffff;margin-bottom:14px}
/* FAQ heading needs breathing room above the first item */
.faq > h2{margin-bottom:30px}
.prov-intro{color:rgba(255,255,255,.82);max-width:52ch;margin:0 0 clamp(48px,6vw,72px);font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.65}
.cast{display:flex;flex-direction:column;gap:clamp(48px,6vw,74px);margin-bottom:clamp(48px,6vw,64px)}
.cast-member{display:flex;gap:clamp(28px,4vw,54px);align-items:center;width:min(100%,720px)}
.cast-member.one{align-self:flex-start}
.cast-member.two{align-self:flex-end;flex-direction:row-reverse;text-align:right}
.prov-frame{position:relative;flex:0 0 clamp(190px,24vw,228px)}
.prov-frame::before{content:"";position:absolute;z-index:0;left:-16px;top:20px;width:100%;height:100%;border:1px solid var(--teal)}
.cast-member.two .prov-frame::before{left:auto;right:-16px}
.prov-window{position:relative;z-index:1;aspect-ratio:4/5;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.16);display:block}
.prov-window img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.prov-window .pp-label{position:relative;z-index:2;width:100%;padding:11px 12px;font-size:10.5px;letter-spacing:.03em;color:#ffffff;background:rgba(28,40,67,.86);text-align:center;line-height:1.4}
.prov-body{flex:1 1 auto;min-width:0}
.prov-idx{font-size:.95rem;color:var(--sky);letter-spacing:.06em;display:block;margin-bottom:14px}
.prov-body h3{font-family:"Prata",Georgia,serif;font-weight:400;font-size:clamp(1.5rem,2.8vw,2.05rem);color:#ffffff;line-height:1.1;margin-bottom:6px}
.prov-role{font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--sky);margin:0 0 16px}
.prov-rule{width:46px;height:1px;background:var(--teal);margin:0 0 18px}
.cast-member.two .prov-rule{margin-left:auto}
.prov-bio{font-size:14.5px;color:rgba(255,255,255,.8);margin:0 0 16px}
.cast-member.two .prov-bio{margin-left:auto}
.prov-quote{border-top:1px solid rgba(255,255,255,.18);padding-top:34px;max-width:60ch}
.prov-quote blockquote{margin:0 0 12px;font-family:"Prata",Georgia,serif;font-size:clamp(1.2rem,2.1vw,1.6rem);line-height:1.4;color:#ffffff}
.prov-quote cite{font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.prov-cta{margin-top:38px}
/* providers closing: quote left, CTA right (full width) */
.prov-close{display:grid;grid-template-columns:1.5fr .72fr;gap:clamp(32px,5vw,60px);align-items:center;border-top:1px solid rgba(255,255,255,.16);padding-top:clamp(36px,4vw,52px);margin-top:clamp(44px,5vw,64px)}
.prov-close .prov-quote{border-top:0;padding-top:0;max-width:none;margin:0}
.prov-close .prov-quote blockquote{font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.32}
.prov-close .prov-cta{margin-top:0;display:flex;flex-direction:column;gap:12px;justify-self:end;min-width:240px}
.prov-close .prov-cta .btn{width:100%;justify-content:center}
@media (max-width:820px){.prov-close{grid-template-columns:1fr;gap:24px}.prov-close .prov-cta{justify-self:stretch}}

/* provider grid (2-up, for homepage) */
.prov-sep{height:1px;background:rgba(255,255,255,.14);width:100%;margin:clamp(38px,4.5vw,58px) 0}
.cast-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(24px,3vw,34px);margin-bottom:52px}
/* stacked provider cards: image on top, text below */
.cast-grid .cast-member,.cast-grid .cast-member.one,.cast-grid .cast-member.two,.cast-grid .cast-member.three{width:100%;align-self:stretch;flex-direction:column;text-align:left;gap:0;align-items:stretch;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);overflow:hidden;transition:transform .35s var(--ease-quart),box-shadow .35s var(--ease-quart),border-color .35s}
.cast-grid .cast-member:hover{transform:translateY(-5px);border-color:rgba(118,188,212,.5);box-shadow:0 30px 60px -34px rgba(0,0,0,.6)}
.cast-grid .prov-frame{flex:none;width:100%;max-width:none}
.cast-grid .prov-window{aspect-ratio:4/3;height:auto;min-height:0;border:0}
.cast-grid .prov-window img{object-fit:cover;object-position:center 18%;transition:transform .8s var(--ease-quart)}
.cast-grid .cast-member:hover .prov-window img{transform:scale(1.05)}
.cast-grid .prov-body{padding:clamp(24px,2.4vw,32px)}
.cast-grid .cast-member.two .prov-rule,.cast-grid .cast-member.two .prov-bio{margin-left:0}
.cast-grid .prov-frame::before{display:none}
/* keep provider cards two-up down to phones; single column only on narrow screens */
@media (max-width:520px){.cast-grid{grid-template-columns:1fr}}
.prov-proof{display:flex;flex-wrap:wrap;gap:0 54px;margin-bottom:56px;border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2)}
.pp-cell{flex:0 1 auto;padding:28px 0;display:flex;flex-direction:column}
.pp-num{font-family:"Prata",Georgia,serif;font-size:2rem;color:#ffffff;line-height:1}
.pp-txt{font-size:13.5px;color:rgba(255,255,255,.8);margin-top:8px}

/* ---------- locations — full-bleed photo panels ---------- */
.loc-intro{background:var(--mist);padding:96px 0 60px}
.loc-intro .eyebrow{color:var(--teal)}
.loc-intro h2{margin-bottom:14px}
.loc-intro-lead{max-width:52ch;color:var(--ink);font-size:clamp(1.02rem,1.5vw,1.2rem);margin:0;line-height:1.65}
.loc-intro .wrap{text-align:center}
/* no character cap: the heading is meant to sit on one line where there is room */
.loc-intro h2{margin-left:auto;margin-right:auto}
.loc-intro-lead{margin-left:auto;margin-right:auto}
.loc-panel{min-height:clamp(440px,62vh,580px);justify-content:flex-end}
/* full-width split: Mission Hills (left) | La Jolla (right) */
.loc-split{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#ffffff}
.loc-split .loc-panel{min-height:clamp(480px,74vh,660px)}
.loc-split .scene-inner{padding-left:clamp(28px,4vw,56px);padding-right:clamp(28px,4vw,56px)}
@media (max-width:800px){
  .loc-split{grid-template-columns:1fr}
  /* Stacked: each panel is only as tall as its own content. */
  .loc-split .loc-panel{min-height:0}
  .loc-split .loc-panel .loc-inner{padding-top:40px;padding-bottom:36px}
}
.loc-veil{background:linear-gradient(180deg,rgba(28,40,67,.12) 0%,rgba(28,40,67,.30) 38%,rgba(28,40,67,.68) 68%,rgba(28,40,67,.93) 100%);transition:background .4s var(--ease-quart)}
/* locations split: hover effect + clearer imagery */
.loc-split .loc-panel{overflow:hidden}
.loc-split .loc-panel .scene-media img{transition:transform 1.2s var(--ease-quart)}
.loc-split .loc-panel:hover .scene-media img{transform:scale(1.06)}
.loc-split .loc-panel:hover .loc-veil{background:linear-gradient(180deg,rgba(28,40,67,.06) 0%,rgba(28,40,67,.24) 38%,rgba(28,40,67,.64) 68%,rgba(28,40,67,.92) 100%)}
.loc-split .loc-name{transition:color .3s}
.loc-split .loc-panel:hover .loc-name{color:var(--sky)}
.loc-split .loc-kicker{transition:color .3s}
.loc-split .loc-panel:hover .loc-kicker{color:#fff}
.loc-photo-note{position:absolute;top:14px;right:14px;z-index:2;background:rgba(28,40,67,.82);color:#fff;font-size:10px;font-weight:500;letter-spacing:.08em;padding:4px 8px}
.loc-panel .loc-inner{padding-top:72px;padding-bottom:58px}
.loc-content{max-width:44ch}
.loc-kicker{font-family:"Prata",Georgia,serif;font-size:1rem;letter-spacing:.05em;color:var(--sky);display:block;margin-bottom:14px}
.loc-name{font-family:"Prata",Georgia,serif;font-weight:400;font-size:clamp(1.7rem,3.4vw,2.4rem);color:#ffffff;margin:0 0 16px;line-height:1.08}
.loc-nap{font-size:15px;color:rgba(255,255,255,.9);line-height:1.7;margin:0 0 6px}
.loc-hours{font-size:13.5px;color:rgba(255,255,255,.74);margin:0 0 24px}
.loc-actions{display:flex;flex-wrap:wrap;gap:12px}

/* location cards (light grid variant) */
.loc .head{max-width:52ch;margin-bottom:40px}
.loc h2{margin-bottom:14px;max-width:18ch}
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.loc-card{border:1px solid var(--navy);background:#ffffff;padding:34px 32px;display:flex;flex-direction:column}
.loc-card-map{margin:10px 0 22px}
.loc-card .loc-actions{margin-top:auto}
.loc-card .loc-kicker{color:var(--teal)}
.loc-card .loc-name{color:var(--navy)}
.loc-card address{font-style:normal;font-size:15px;color:var(--ink);line-height:1.7;margin:0 0 8px}
.loc-card address a{color:var(--teal);font-weight:600}
.loc-card .loc-hours{color:var(--gray-sm)}
.loc-card .loc-actions{margin-top:auto}

/* embedded map */
.loc-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media (max-width:560px){.loc-detail-grid{grid-template-columns:1fr;gap:22px}}
.map-embed{border:1px solid var(--navy);overflow:hidden;aspect-ratio:16/9;background:var(--mist)}
.map-embed iframe{width:100%;height:100%;border:0;display:block}

/* ---------- content prose (service/symptom pages) ---------- */
.prose{max-width:70ch}
.prose h2{font-family:"Prata",Georgia,serif;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--ink);margin:44px 0 14px;letter-spacing:-0.01em}
.prose h3{font-family:"Poppins",sans-serif;font-weight:600;font-size:1.15rem;color:var(--navy);margin:28px 0 8px}
.prose p{font-size:16px;line-height:1.75;color:var(--ink);margin:0 0 1.1em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.25em}
.prose li{margin:0 0 .5em;line-height:1.7;}
.prose a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.prose strong{font-weight:600;color:var(--navy)}

/* two-column content shell with sticky aside */
.article-shell{display:grid;grid-template-columns:minmax(0,1fr) 366px;gap:clamp(28px,3vw,48px);align-items:start}
.article-main{min-width:0}
.article-aside{position:sticky;top:100px;display:flex;flex-direction:column;gap:22px}
.aside-card{border:1px solid var(--navy);background:#ffffff;padding:26px 24px}
.aside-card.dark{background:var(--navy);color:#fff;border-color:var(--navy)}
.aside-card h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0 0 14px;font-weight:600}
.aside-card.dark h3{color:var(--sky)}
.aside-card p{font-size:14px;line-height:1.6;margin:0 0 14px}
.aside-card.dark p{color:rgba(255,255,255,.85)}
.aside-card .btn{width:100%;justify-content:center}

/* medical reviewer byline */
.reviewer{display:flex;align-items:flex-start;gap:14px;border:1px solid rgba(28,40,67,.16);border-left:3px solid var(--teal);background:var(--mist-2);padding:16px 20px;margin:0 0 28px;max-width:70ch}
.reviewer .rv-meta{font-size:13.5px;line-height:1.5;color:var(--gray-sm)}
.reviewer .rv-meta strong{color:var(--navy);font-weight:600}
.reviewer .rv-meta a{color:var(--teal);font-weight:600;text-decoration:none}

/* ---------- faq ---------- */
.faq .head{max-width:24ch;margin-bottom:34px}
.faq details{border-top:1px solid rgba(28,40,67,.18)}
.faq details:last-of-type{border-bottom:1px solid rgba(28,40,67,.18)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-family:"Prata",Georgia,serif;font-size:clamp(1.08rem,1.7vw,1.35rem);color:var(--navy);line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:20px;color:var(--teal);font-size:1.6rem;line-height:1;font-family:"Poppins",sans-serif}
.faq details[open] summary::after{content:"\2013"}
.faq .faq-a{padding:0 0 24px;color:var(--ink);font-size:15px;line-height:1.7;max-width:66ch}
/* faq inside a dark scene */
.scene .faq h2{color:#fff}
.scene .faq details{border-color:rgba(255,255,255,.2)}
.scene .faq details:last-of-type{border-bottom-color:rgba(255,255,255,.2)}
.scene .faq summary{color:#fff}
.scene .faq summary::after{color:var(--sky)}
.scene .faq .faq-a{color:rgba(255,255,255,.86)}

/* ---------- closing band ---------- */
.closing .scene-veil{background:rgba(28,40,67,.88)}
.closing .scene-inner{padding-top:72px;padding-bottom:72px}
.closing-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,84px);align-items:start}
.closing-solo{max-width:760px}
.closing-solo h2{font-family:"Prata",Georgia,serif;font-size:clamp(2rem,4.4vw,3.2rem);color:#fff;line-height:1.08;margin-bottom:20px;max-width:18ch}
.closing-solo p{color:rgba(255,255,255,.9);max-width:48ch;margin-bottom:32px;font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.6}
.closing .eyebrow{color:var(--sky)}
.final-cta{background:var(--navy);border:1px solid rgba(255,255,255,.16);padding:44px;position:relative;overflow:hidden}
.final-cta .eyebrow{color:var(--sky)}
.final-cta h2{font-family:"Prata",Georgia,serif;font-size:clamp(1.7rem,3vw,2.4rem);color:#ffffff;margin-bottom:18px}
.final-cta p{color:rgba(255,255,255,.85);margin-bottom:26px;max-width:40ch}
.final-actions{display:flex;flex-direction:column;gap:12px}
.final-actions .btn{justify-content:center}

/* ---------- lead form (paid-traffic ready) ---------- */
.lead-form{background:#fff;border:1px solid var(--navy);padding:30px 28px;box-shadow:0 24px 60px -40px rgba(28,40,67,.5)}
.lead-form .lf-tag{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0 0 6px}
.lead-form h3{font-family:"Prata",Georgia,serif;font-size:1.5rem;color:var(--navy);margin:0 0 6px}
.lead-form p.lf-sub{font-size:13.5px;color:var(--gray-sm);margin:0 0 20px}
.lead-form label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--navy);margin:0 0 6px}
.lead-form .field{margin:0 0 15px}
.lead-form input,.lead-form select,.lead-form textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  padding:12px 14px;border:1px solid rgba(28,40,67,.28);background:#fff;
}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:2px solid var(--sky);outline-offset:0;border-color:var(--teal)}
.lead-form .btn{width:100%;justify-content:center}
.lead-form .lf-fine{font-size:11.5px;color:var(--gray-sm);margin:14px 0 0;line-height:1.5}

/* ==========================================================================
   Gravity Forms-structured forms (GF class names, styled premium)
   ========================================================================== */
.sdb-form{background:#fff;border:1px solid var(--navy);padding:30px 28px;box-shadow:0 24px 60px -40px rgba(28,40,67,.5)}
.sdb-form .lf-tag{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0 0 6px}
.sdb-form .gform_title{font-family:"Prata",Georgia,serif;font-size:1.5rem;color:var(--navy);margin:0 0 6px;line-height:1.2}
.sdb-form .gform_description{font-size:13.5px;color:var(--gray-sm);margin:0 0 20px}
.gform_fields{list-style:none;margin:0;padding:0}
.gfield{margin:0 0 15px}
.gfield_label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--navy);margin:0 0 6px}
.gfield_required_asterisk{color:var(--teal);margin-left:2px}
.ginput_container input,.ginput_container select,.ginput_container textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);padding:12px 14px;border:1px solid rgba(28,40,67,.28);background:#fff}
.ginput_container input:focus,.ginput_container select:focus,.ginput_container textarea:focus{outline:2px solid var(--sky);outline-offset:0;border-color:var(--teal)}
.gform_footer{margin:0}
.gform_button{width:100%;justify-content:center;margin-top:2px}
.sdb-form .lf-fine{font-size:11.5px;color:var(--gray-sm);margin:14px 0 0;line-height:1.5}
/* centered, large contact form */
.contact-form-wrap{max-width:1000px;margin:0 auto}
.sdb-form.big{padding:48px clamp(28px,4vw,56px)}
.sdb-form.big .lf-tag{text-align:center}
.sdb-form.big .gform_title{font-size:clamp(1.7rem,3vw,2.3rem);text-align:center}
.sdb-form.big .gform_description{text-align:center;max-width:52ch;margin:0 auto 26px;font-size:15px}
.sdb-form.big .gfield{margin:0 0 18px}
.sdb-form.big .gfield_label{font-size:13px}
.sdb-form.big .ginput_container input,.sdb-form.big .ginput_container select{padding:14px 16px;font-size:16px}
.sdb-form.big .gform_button{padding:17px 28px;font-size:15px;margin-top:6px}
@media (max-width:600px){.sdb-form.big{padding:30px 22px}}

/* ==========================================================================
   Premium booking modal (injected on every page by site.js)
   ========================================================================== */
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-overlay{position:absolute;inset:0;background:rgba(16,24,40,.62);opacity:0;transition:opacity .3s var(--ease-quart)}
.modal.open .modal-overlay{opacity:1}
.modal-dialog{position:relative;z-index:1;width:min(560px,100%);max-height:92vh;overflow:auto;background:#fff;
  transform:translateY(18px) scale(.985);opacity:0;transition:transform .4s var(--ease-quart),opacity .4s var(--ease-quart);
  box-shadow:0 44px 100px -30px rgba(0,0,0,.6)}
.modal.open .modal-dialog{transform:none;opacity:1}
.modal-close{position:absolute;top:12px;right:12px;z-index:3;width:44px;height:44px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:24px;line-height:1;cursor:pointer;transition:background-color .2s}
.modal-close:hover{background:rgba(255,255,255,.14)}
.modal-head{background:var(--navy);color:#fff;padding:30px 34px 26px}
.modal-head .eyebrow{color:var(--sky);margin:0 0 8px}
.modal-head h2{font-family:"Prata",Georgia,serif;font-size:clamp(1.5rem,3vw,2rem);color:#fff;margin:0 0 8px;line-height:1.12}
.modal-head p{color:rgba(255,255,255,.82);font-size:14px;margin:0}
.modal .sdb-form{border:none;box-shadow:none;padding:30px 34px 34px}
body.modal-open{overflow:hidden}
@media (max-width:600px){.modal-head{padding:24px 22px 20px}.modal .sdb-form{padding:24px 22px 28px}}

/* ---------- footer ---------- */
.footer{background:var(--navy);color:#ffffff}
.footer .wrap{padding-top:64px;padding-bottom:40px}
.ia-footer-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:0 0 30px;border-bottom:1px solid rgba(255,255,255,.16)}
.ia-footer-nav h3{margin:0 0 14px;font:600 16px/1.4 "Poppins",sans-serif;letter-spacing:.04em;color:var(--sky)}
.ia-footer-nav a{display:block;margin:7px 0;color:rgba(255,255,255,.82);text-decoration:none;font-size:13px}
.ia-footer-nav a:hover{color:#fff;text-decoration:underline}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding:44px 0;border-bottom:1px solid rgba(255,255,255,.15)}
.footer .wordmark{color:#ffffff;font-size:24px}
.footer .formerly{color:var(--logo-teal)}
.footer-brand p{color:rgba(255,255,255,.72);font-size:14px;max-width:34ch;margin-top:18px}
.footer h3{font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);margin:0 0 16px;font-weight:600}
.footer address{font-style:normal;font-size:14px;line-height:1.7;color:rgba(255,255,255,.82)}
.footer address a{color:#ffffff;font-weight:600}
.footer-social{display:flex;gap:16px;margin-top:14px}
.footer-social a{color:rgba(255,255,255,.7);font-size:13px}
.footer-social a:hover{color:#fff}
.footer-legal{padding-top:26px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:12.5px;color:rgba(255,255,255,.72)}
.footer-legal p{margin:0;max-width:62ch;line-height:1.6}

/* Scroll lock for the overlays (lightbox, off-canvas menu). A class rather
   than an inline style so nothing writes to the style attribute. */
body.scroll-locked{overflow:hidden}

/* ---------- sticky mobile bar ---------- */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:rgba(28,40,67,.2);
  border-top:1px solid rgba(255,255,255,.16);
}
.mobile-bar a{
  display:flex;align-items:center;justify-content:center;gap:.4em;min-height:56px;
  font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
}
.mobile-bar .mb-book{background:var(--teal);color:#ffffff}
.mobile-bar .mb-call{background:#ffffff;color:var(--navy)}
/* Once the footer is on screen its own Book and Call links are in reach, so
   the sticky bar slides out of the way rather than covering them. */
.mobile-bar{transition:transform .3s var(--ease-quart)}
.mobile-bar.is-tucked{transform:translateY(100%)}

/* ---------- reveal / unmask ----------
   Animated by GSAP (motion.js) when motion is allowed. Visible by default so the
   page is complete without JS and never stuck-hidden if GSAP fails to load. ---------- */
.reveal{opacity:1}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .mirror-grid{grid-template-columns:1fr 1fr}
  /* minmax(0,1fr), not 1fr: a bare 1fr track cannot shrink below its
     min-content, so the sidebar's cards pushed the column past the screen
     on narrow phones. */
  .article-shell{grid-template-columns:minmax(0,1fr)}
  .article-aside{position:relative;top:auto;flex-direction:row;flex-wrap:wrap;min-width:0}
  .article-aside > *{min-width:0}
  .article-aside .aside-card{flex:1 1 260px}
}
@media (max-width:420px){
  /* Below the 260px card basis there is no room for two across. */
  .article-aside .aside-card{flex:1 1 100%}
}
/* Header collapses to the hamburger up to 1279px; full nav only from 1280px (fits the larger menu font) */
@media (max-width:1299px){
  .nav,.header-phone{display:none}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:#ffffff;border-bottom:1px solid rgba(28,40,67,.12);
    padding:6px 24px 14px;z-index:70}
  .nav a{padding:13px 0;border-bottom:1px solid rgba(28,40,67,.08)}
  .nav a:last-child{border-bottom:none}
  .treatment-menu{width:100%}
  .treatment-menu summary{width:100%;justify-content:space-between;padding:13px 0;border-bottom:1px solid rgba(28,40,67,.08)}
  .treatment-panel{position:static;min-width:0;width:100%;margin:2px 0 8px;padding:8px;border:none;grid-template-columns:1fr}
  .menu-btn{display:flex;align-items:center;justify-content:center}
  /* below 1190 the header shows only logo + hamburger (Book now lives in the menu + sticky bar) */
  .header-cta .btn{display:none}
  .header .wrap{gap:12px}
}
@media (max-width:900px){
  .svc-layout{grid-template-columns:1fr;gap:24px}
  .svc-stage{position:relative;top:auto}
  .svc-figure{position:relative;aspect-ratio:16/10;max-height:320px}
  .closing-grid{grid-template-columns:1fr}
  .how-grid,.loc-grid{grid-template-columns:1fr}
  .cast{gap:44px}
  .cast-member,.cast-member.one,.cast-member.two{flex-direction:column;align-items:stretch;text-align:left;align-self:stretch;width:100%;gap:24px}
  .cast-member.two .prov-rule,.cast-member.two .prov-bio{margin-left:0}
  .prov-frame{max-width:280px}
  .cast-member.two .prov-frame{align-self:flex-end}
  .prov-frame::before,.cast-member.two .prov-frame::before{left:-12px;right:auto;top:16px}
  .footer-top{grid-template-columns:1fr 1fr}
  .prov-proof{gap:0}
  .prov-proof .pp-cell{flex:1 1 100%;padding:20px 0}
}
@media (max-width:600px){
  body{padding-bottom:56px}
  .mobile-bar{display:grid}
  .wrap{padding:0 20px}
  .scene-inner{padding:64px 20px}
  .pad{padding:64px 0}
  .hero-light{padding:56px 0 48px}
  .mirror{padding:60px 0 30px}
  .mirror-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .hero-proof{gap:18px}
  .hp-cell{flex:1 1 100%}
  /* The three figures read as one row on phones, not a stacked list. */
  .trust .wrap{flex-wrap:nowrap;gap:0}
  .trust-cell{flex:1 1 0;min-width:0;padding:10px 12px;border-left:1px solid rgba(255,255,255,.16);border-top:none;text-align:center;align-items:center}
  .trust-cell:first-child{border-left:none}
  .trust-num{font-size:1.25rem;margin-right:0;display:block}
  .trust-txt{font-size:12.5px;line-height:1.35}
  .trust-src{font-size:11px;line-height:1.3;margin-top:2px}
  .loc-intro{padding:56px 0 40px}
  .loc-panel,
  .loc-split .loc-panel{min-height:0}
  .loc-panel .loc-inner,
  .loc-split .loc-panel .loc-inner{padding-top:34px;padding-bottom:30px}
  .prov-frame{max-width:200px}
  .ia-footer-nav{grid-template-columns:1fr 1fr;gap:22px 16px}
  .footer-top{grid-template-columns:1fr}
  .hero-scene h1,.hero-light h1{font-size:clamp(2.2rem,9vw,3.1rem)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .svc-figure img{opacity:0}
  .svc-figure img.active,.svc-figure img:first-of-type{opacity:1}
  .care .scene-media img{transform:scale(1.08)}
  .scene-media video,.scene.video-live .scene-media video{opacity:0}
}

/* ==========================================================================
   POLISH LAYER — spacing rhythm, micro-interactions, alignment
   ========================================================================== */

/* anchor targets clear the sticky header */
[id]{scroll-margin-top:96px}

/* buttons: subtle lift on hover (transition + hover shadow merged into base rules) */
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* nav underline micro-interaction (direct links only, not the dropdown) */
.nav .menu > .menu-item:not(.menu-item-has-children) > a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--teal);transition:right .28s var(--ease-quart)}
.nav .menu > .menu-item:not(.menu-item-has-children) > a:hover::after{right:0}
@media (max-width:1299px){ .nav .menu > .menu-item > a::after{display:none} }

/* section rhythm */
.head{max-width:64ch}

/* hero rhythm */
.hero-light .hero-proof{margin-top:6px}

/* prose extras */
.prose > h2:first-child,.prose > h3:first-child,.prose > p:first-child{margin-top:0}
.prose li::marker{color:var(--teal)}

/* cards: unified hover lift for a cohesive, premium feel */
.loc-card,.care-step,.step,.aside-card,.capsule{transition:transform .25s var(--ease-quart),box-shadow .25s var(--ease-quart),border-color .25s var(--ease-quart)}
.loc-card:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:0 18px 40px -28px rgba(28,40,67,.45)}
.svc-list .svc-row:hover{padding-left:12px}

/* map + figures share the card language */
.map-embed,.how-figure{box-shadow:0 18px 44px -34px rgba(28,40,67,.5)}

/* headings kerning for the display serif */
h1,h2{text-wrap:balance}

/* keep everything from ever forcing a horizontal scrollbar.
   NOTE: use overflow-x:clip (NOT hidden) — hidden makes body a scroll container
   and breaks position:sticky on the header. */
html,body{overflow-x:clip}

/* sticky header: subtle shadow once scrolled (transition merged into base .header) */
.header.stuck{box-shadow:0 6px 24px -16px rgba(28,40,67,.5)}

/* Services submenu opens on hover (desktop), in addition to click/focus */
@media (min-width:1300px){
  .menu-item-has-children:hover > .sub-menu,
  .menu-item-has-children:focus-within > .sub-menu{display:block}
  .menu-services:hover > .sub-menu,
  .menu-services:focus-within > .sub-menu{display:grid}
}

/* inner-page (location) hero — compact, not the homepage's full-viewport cinematic hero */
.hero-scene.hero-inner{min-height:clamp(380px,50vh,500px)}
.hero-scene.hero-inner .scene-inner{padding-top:76px;padding-bottom:60px}
.hero-scene.hero-inner .scroll-cue{display:none}

/* breadcrumb (inner pages) */
.crumbs{background:var(--navy)}
.crumbs .wrap{padding-top:13px;padding-bottom:13px;font-size:12.5px;letter-spacing:.02em;color:rgba(255,255,255,.6)}
.crumbs a{color:rgba(255,255,255,.82)}
.crumbs a:hover{color:#fff}
.crumbs .sep{margin:0 8px;color:rgba(255,255,255,.35)}
.crumbs [aria-current="page"]{color:var(--sky)}

/* ==========================================================================
   Premium condition/hormone pages — full-bleed parallax panels
   ========================================================================== */
.px-panel{position:relative;overflow:hidden;isolation:isolate;color:#fff;display:flex;align-items:center;min-height:clamp(520px,80vh,760px)}
.px-bg{position:absolute;left:0;right:0;top:-14%;bottom:-14%;z-index:0;will-change:transform}
.px-bg img{width:100%;height:100%;object-fit:cover}
.px-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(28,40,67,.9) 0%,rgba(28,40,67,.66) 48%,rgba(28,40,67,.32) 100%)}
.px-panel.right .px-veil{background:linear-gradient(245deg,rgba(28,40,67,.9) 0%,rgba(28,40,67,.66) 48%,rgba(28,40,67,.32) 100%)}
.px-inner{position:relative;z-index:2;width:100%;max-width:1600px;margin:0 auto;padding:clamp(64px,9vw,120px) 40px}
.px-panel.right .px-inner{text-align:right}
.px-copy{max-width:90ch}
.px-panel.right .px-copy{margin-left:auto}
.px-index{font-family:"Prata",Georgia,serif;font-size:clamp(2.4rem,5vw,3.6rem);color:var(--sky);line-height:1;display:block;margin-bottom:14px;opacity:.85}
.px-eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sky);display:block;margin:0 0 14px}
.px-panel h2{font-family:"Prata",Georgia,serif;font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.06;letter-spacing:-0.015em;margin:0 0 20px}
.px-lead{font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.65;color:rgba(255,255,255,.9);margin:0 0 22px}
.px-lead + .px-lead{margin-top:-6px}

/* symptoms + treatment band beneath each panel */
.hx-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(36px,6vw,80px);align-items:start}
.hx-grid .eyebrow{margin-bottom:12px}
.hx-grid h3{font-family:"Prata",Georgia,serif;font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--navy);margin:0 0 16px;line-height:1.15}
.hx-treat p{color:var(--ink);line-height:1.7;margin:0 0 1em}
@media (max-width:900px){.hx-grid{grid-template-columns:1fr;gap:36px}.px-panel.right .px-inner{text-align:left}.px-panel.right .px-copy{margin-left:0}}

/* ==========================================================================
   Symptom checker (multi-step, Gravity Forms-classed)
   ========================================================================== */
.checker{max-width:960px;margin:0 auto;background:#fff;border:1px solid var(--navy);box-shadow:0 34px 80px -48px rgba(28,40,67,.6);padding:clamp(28px,4vw,52px)}
.chk-q{font-family:"Prata",Georgia,serif;font-size:clamp(1.4rem,2.6vw,2rem);color:var(--navy);text-align:center;margin:0 0 8px;line-height:1.15}
.chk-sub{text-align:center;color:var(--gray-sm);margin:0 0 26px}
/* progress steps */
.chk-steps{list-style:none;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 0 30px;padding:0}
.chk-steps li{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-sm);padding:9px 16px;border:1px solid rgba(28,40,67,.16);transition:color .3s,background-color .3s,border-color .3s}
.chk-steps li.on{color:#fff;background:var(--teal);border-color:var(--teal)}
.chk-steps li.done{color:var(--teal);border-color:var(--teal)}
/* tabs */
.chk-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:520px;margin:0 auto 34px;border:1px solid var(--navy);padding:6px;background:var(--mist)}
.chk-tab{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 20px;background:transparent;border:0;cursor:pointer;font:inherit;font-weight:600;font-size:1.05rem;letter-spacing:.03em;color:var(--navy);transition:background-color .25s var(--ease-quart),color .25s}
.chk-tab .cg-ic{font-size:1.35rem;line-height:1;color:var(--teal);transition:color .25s}
.chk-tab:hover{color:var(--teal)}
.chk-tab.sel{background:var(--teal);color:#fff}
.chk-tab.sel .cg-ic{color:#fff}
.cg-ic{font-size:1.35rem;line-height:1;color:var(--teal)}
/* symptom checker uses authentic Gravity Forms markup (.gfield / .gfield_checkbox / .gchoice) */
.checker .gform_body,.checker .gform_fields{margin:0;padding:0}
.checker .gfield[hidden]{display:none}
.checker .gfield--type-checkbox>.gfield_label{font-family:"Prata",Georgia,serif;font-weight:400;font-size:clamp(1.3rem,2.4vw,1.8rem);color:var(--navy);text-align:center;letter-spacing:0;text-transform:none;margin:0 0 6px}
.checker .gfield--type-checkbox>.gfield_description{text-align:center;color:var(--gray-sm);font-size:14px;margin:0 0 22px}
/* checkbox choices as premium chips */
.chk-grid.gfield_checkbox{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.chk-grid .gchoice{position:relative;display:flex;align-items:center;gap:12px;margin:0;padding:14px 16px;border:1px solid rgba(28,40,67,.22);background:#fff;transition:border-color .2s,background-color .2s}
.chk-grid .gchoice:hover{border-color:var(--teal)}
.chk-grid .gchoice:has(.gfield-choice-input:checked){border-color:var(--teal);background:var(--mist-2)}
.chk-grid .gfield-choice-input{appearance:none;-webkit-appearance:none;margin:0;flex:none;width:20px;height:20px;border:1px solid rgba(28,40,67,.35);background:#fff;cursor:pointer;transition:.18s}
.chk-grid .gfield-choice-input:checked{border-color:var(--teal);background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.chk-grid .gfield-choice-input:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.chk-grid .gchoice label{margin:0;cursor:pointer;font-size:14.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}
/* live results (Gravity Forms HTML field) */
.chk-results .chk-results-inner{margin:6px 0 4px;padding:22px 26px;background:var(--mist);border-left:4px solid var(--teal);animation:chkFade .35s var(--ease-quart)}
@keyframes chkFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chk-results-h{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:0 0 12px}
.chk-results-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.chk-results-list li{position:relative;padding-left:26px;color:var(--navy);font-weight:600;font-size:1.02rem}
.chk-results-list li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--teal);border-radius:50%}
/* section divider before the contact fields */
.checker .gsection{margin:34px 0 22px;padding-top:34px;border-top:1px solid rgba(28,40,67,.14)}
.checker .gsection_title{font-family:"Prata",Georgia,serif;font-weight:400;font-size:clamp(1.3rem,2.4vw,1.8rem);color:var(--navy);text-align:center;margin:0}
.checker .gform_footer{margin-top:24px}
/* two-step (Gravity Forms pagination) */
.chk-step[hidden],.gform_page[hidden]{display:none}
.checker .gform_page_fields{margin:0}
.checker .gform_page_footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px}
.checker .gform_page_footer .gform_next_button{margin-left:auto}
.checker .gform_page[data-step="2"] .gsection{border-top:0;margin-top:0;padding-top:0}
.chk-thanks{text-align:center;padding:20px 0}
.chk-thanks h3{font-family:"Prata",Georgia,serif;font-size:1.7rem;color:var(--navy);margin:0 0 12px}
@media (max-width:800px){.chk-grid.gfield_checkbox{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.chk-grid.gfield_checkbox{grid-template-columns:1fr}}
/* ---- How can HRT help? (5-up feature band) ---- */
.hrt-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.hrt-col{text-align:center}
.hrt-ic{display:inline-flex;align-items:center;justify-content:center;width:78px;height:78px;border-radius:50%;background:rgba(118,188,212,.14);border:1px solid rgba(118,188,212,.4);color:var(--sky);margin:0 0 20px}
.hrt-ic svg{width:34px;height:34px}
.hrt-col h3{font-family:"Prata",Georgia,serif;font-weight:400;font-size:1.8rem;color:var(--sky);margin:0 0 12px}
.hrt-col p{color:rgba(255,255,255,.72);font-size:16px;line-height:1.7;margin:0}
.hrt-foot{margin:56px auto 0;text-align:center;color:rgba(255,255,255,.6);font-size:25px;line-height:38px}
.hrt-foot a{color:var(--sky);text-decoration:underline;text-underline-offset:3px}
@media (max-width:1000px){.hrt-grid{grid-template-columns:repeat(2,1fr);gap:40px 28px}}
@media (max-width:560px){.hrt-grid{grid-template-columns:1fr}}

/* ---- Hormones hub: type cards + delivery + goals + physician-led feature ---- */
.hz-grid{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:20px}
.hz-grid .hz-card{flex:0 1 calc(33.333% - 14px)}
.hz-card{background:#fff;border:1px solid rgba(28,40,67,.16);padding:30px 28px;position:relative;transition:transform .3s var(--ease-quart),box-shadow .3s var(--ease-quart),border-color .3s}
.hz-card:hover{transform:translateY(-4px);border-color:var(--teal);box-shadow:0 26px 54px -34px rgba(28,40,67,.5)}
.hz-tag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:0 0 12px}
.hz-card h3{font-family:"Prata",Georgia,serif;font-weight:400;font-size:1.35rem;color:var(--navy);margin:0 0 10px}
.hz-card p{color:var(--gray-sm);font-size:14.5px;line-height:1.7;margin:0}
.micro-note{font-size:15px;color:var(--gray-sm);text-align:center;margin:22px 0 0}
@media (max-width:900px){.hz-grid .hz-card{flex-basis:calc(50% - 10px)}}
@media (max-width:560px){.hz-grid .hz-card{flex-basis:100%}}
/* big full-bg feature */
.horm-feature{padding:clamp(72px,9vw,124px) 0}
.horm-feature .scene-inner{max-width:1600px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.hf-head{max-width:60ch;margin:0 0 50px}
.hf-head .eyebrow{color:var(--sky)}
.hf-head h2{font-size:clamp(2rem,4vw,3rem);color:#fff;margin:12px 0 16px;line-height:1.1}
.hf-head p{color:rgba(255,255,255,.82);font-size:1.05rem;line-height:1.7;max-width:60ch}
.horm-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.horm-steps li{border-top:2px solid rgba(118,188,212,.5);padding-top:20px}
.hs-n{font-family:"Prata",Georgia,serif;font-size:1.6rem;color:var(--sky);display:block;margin:0 0 10px}
.horm-steps h3{font-size:1.05rem;color:#fff;margin:0 0 8px}
.horm-steps p{color:rgba(255,255,255,.72);font-size:13.5px;line-height:1.6;margin:0}
@media (max-width:900px){.horm-steps{grid-template-columns:1fr 1fr;gap:26px}}
@media (max-width:520px){.horm-steps{grid-template-columns:1fr}}
/* delivery + goals */
.horm-subhead{font-family:"Prata",Georgia,serif;font-weight:400;font-size:clamp(1.95rem,3vw,2.55rem);color:var(--navy);text-align:center;line-height:1.15;margin:0 0 34px}
.deliv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.deliv-card{border:1px solid rgba(28,40,67,.16);background:var(--mist);padding:24px 22px}
.deliv-card h3{font-size:1rem;font-weight:600;color:var(--navy);margin:0 0 8px}
.deliv-card p{color:var(--gray-sm);font-size:13.5px;line-height:1.6;margin:0}
@media (max-width:820px){.deliv-grid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.deliv-grid{grid-template-columns:1fr}}
.goal-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px 24px;max-width:900px;margin-left:auto;margin-right:auto}
.goal-grid li{position:relative;padding-left:28px;color:var(--navy);font-weight:500;font-size:14.5px}
.goal-grid li::before{content:"\00BB";position:absolute;left:0;top:-2px;color:var(--teal);font-weight:700;font-size:1.15rem}
@media (max-width:820px){.goal-grid{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.goal-grid{grid-template-columns:1fr}}

/* ---- Hormones hub: full content (premium splits + boxed lists) ---- */
.reviewer-inline{margin:24px 0 0;max-width:64ch}
.reviewer-inline .rv-meta{font-size:12.5px;color:var(--gray-sm);line-height:1.6;border-left:3px solid var(--teal);padding:4px 0 4px 14px}
.reviewer-inline .rv-meta a{color:var(--teal)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center;max-width:1600px;margin:0 auto}
.split.flip .split-media{order:2}
.split-media{margin:0;overflow:hidden;align-self:stretch}
.split-media img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;min-height:320px}
.split-copy .eyebrow{margin-bottom:12px}
.split-h{font-family:"Prata",Georgia,serif;font-weight:400;font-size:clamp(1.6rem,2.8vw,2.3rem);color:var(--navy);line-height:1.16;margin:0 0 18px}
.split-copy p{color:var(--gray-sm);line-height:1.8;margin:0 0 14px;font-size:15.5px}
.split-copy p:last-child{margin-bottom:0}
.split-sublist{margin:22px 0 4px}
.split-sublist .chev-cols{grid-template-columns:1fr;gap:10px}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:26px}.split.flip .split-media{order:0}.split-media img{aspect-ratio:16/10;min-height:0}}
/* boxed lists */
.chev-cols{list-style:none;margin:0 auto;padding:0;max-width:960px;display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.chev-cols li{position:relative;padding:12px 0 12px 30px;color:var(--navy);font-weight:500;font-size:15.5px;border-bottom:1px solid rgba(28,40,67,.09)}
.chev-cols li::before{content:"\00BB";position:absolute;left:2px;top:11px;color:var(--teal);font-weight:700;font-size:1.15rem}
@media (max-width:640px){.chev-cols{grid-template-columns:1fr}}
.learn-grid{list-style:none;margin:0 auto;padding:0;max-width:1000px;display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px}
.learn-grid li{position:relative;padding:11px 0 11px 24px;color:var(--navy);font-size:14.5px;border-bottom:1px solid rgba(28,40,67,.08)}
.learn-grid li::before{content:"\00BB";position:absolute;left:0;top:10px;color:var(--teal);font-weight:700}
@media (max-width:820px){.learn-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.learn-grid{grid-template-columns:1fr}}
/* cause cards */
.cause-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1000px;margin:36px auto 0}
.cause-card{background:#fff;border:1px solid rgba(28,40,67,.14);border-left:3px solid var(--teal);padding:26px 28px;transition:transform .3s var(--ease-quart),box-shadow .3s var(--ease-quart)}
.cause-card:hover{transform:translateY(-3px);box-shadow:0 22px 48px -32px rgba(28,40,67,.5)}
.cause-card h3{font-size:1.08rem;color:var(--navy);margin:0 0 10px;font-weight:600}
.cause-card p{color:var(--gray-sm);font-size:14px;line-height:1.7;margin:0}
@media (max-width:700px){.cause-grid{grid-template-columns:1fr}}
/* video + guide media */
.split-media:has(.video-embed){align-self:center}
/* Overview: sticky video + facts (left) beside a lead-driven reading column (right) */
.ov-split{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);gap:clamp(34px,5vw,72px);align-items:start}
.ov-media{position:sticky;top:104px;display:flex;flex-direction:column;gap:18px}
.ov-media .video-embed{margin:0}
.ov-note{background:var(--mist);border-radius:14px;padding:18px 20px}
.ov-note-k{display:block;font-family:"Poppins",sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 6px}
.ov-note p{margin:0;font-size:14px;line-height:1.65;color:var(--gray-sm)}
.ov-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#e0eff1;border-radius:14px;overflow:hidden}
.ov-fact{background:#fff;padding:18px 14px;text-align:center;display:flex;flex-direction:column;gap:7px;align-items:center}
.ov-fact-n{font-family:"Prata",Georgia,serif;font-size:30px;line-height:1;color:var(--teal)}
.ov-fact-l{font-size:11.5px;line-height:1.4;color:var(--gray-sm)}
.ov-copy .eyebrow{display:block;margin:0 0 10px}
.ov-copy .split-h{margin:0 0 22px}
.ov-copy p{color:var(--gray-sm);line-height:1.85;margin:0 0 16px;font-size:15.5px;max-width:62ch}
.ov-copy p:last-child{margin-bottom:0}
.ov-lead{font-size:19px !important;line-height:1.65 !important;color:var(--navy) !important;font-weight:500;padding-left:20px;border-left:3px solid var(--sky)}
@media (max-width:900px){
  .ov-split{grid-template-columns:1fr;gap:30px}
  .ov-media{position:static}
  .ov-copy .split-h{margin-bottom:16px}
}
@media (max-width:520px){
  .ov-facts{grid-template-columns:1fr}
  .ov-fact{flex-direction:row;justify-content:flex-start;text-align:left;gap:14px}
}
/* back-to-top (desktop only) */
.to-top{position:fixed;right:26px;bottom:26px;z-index:60;width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;background:var(--teal);color:#fff;border:0;border-radius:50%;cursor:pointer;box-shadow:0 14px 34px -14px rgba(28,40,67,.6);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s var(--ease-quart),transform .3s var(--ease-quart),visibility .3s,background-color .25s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--navy)}
.to-top svg{width:22px;height:22px}
.to-top:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
/* On a phone held upright the arrow sits centred at the foot of the screen,
   clear of the sticky bar. Held sideways there is room at the edge, so it
   keeps the desktop position. */
@media (max-width:768px) and (orientation:portrait){
  .to-top{left:50%;right:auto;transform:translate(-50%,12px)}
  .to-top.show{transform:translate(-50%,0)}
}
@media (max-width:600px){
  .to-top{bottom:72px}
  /* Centred inside the strip the tucked bar leaves, with room either side so it
     neither crowds the last line of the footer nor hugs the screen edge. */
  body.at-footer .to-top{bottom:10px}
}

/* ===== Status pages (404 / thank-you) ===== */
.status-scene{position:relative;min-height:74vh;display:flex;align-items:center;padding:clamp(80px,12vh,140px) 0;overflow:hidden;isolation:isolate}
.status-scene .scene-media{position:absolute;inset:0;z-index:-2}
.status-scene .scene-media img{width:100%;height:100%;object-fit:cover}
.status-scene .scene-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(28,40,67,.86),rgba(28,40,67,.74))}
.status-inner{max-width:730px;margin:0 auto;text-align:center;color:#fff;padding:0 20px}
.status-num{font-family:"Prata",Georgia,serif;font-size:clamp(76px,15vw,158px);line-height:.86;color:var(--sky);margin:0 0 6px;letter-spacing:.01em}
.status-inner .eyebrow{color:var(--sky);display:block;margin:0 0 14px}
.status-inner h1{font-family:"Prata",Georgia,serif;font-weight:400;font-size:clamp(2rem,5vw,3.2rem);line-height:1.12;margin:0 0 18px;color:#fff}
.status-inner p{color:rgba(255,255,255,.85);font-size:16px;line-height:1.7;margin:0 auto 28px;max-width:56ch}
.status-inner .cta-row{justify-content:center}
.status-badge{width:92px;height:92px;border-radius:50%;background:rgba(118,188,212,.16);border:1px solid rgba(118,188,212,.55);display:flex;align-items:center;justify-content:center;margin:0 auto 26px}
.status-badge svg{width:46px;height:46px;stroke:var(--sky);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.status-links{margin:38px auto 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:center}
.status-links a{color:rgba(255,255,255,.9);font-size:14px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.32);padding-bottom:2px;transition:color .2s,border-color .2s}
.status-links a:hover{color:#fff;border-color:var(--sky)}

/* ===== In-page section nav (hormones): sticky sub-nav under the header ===== */
.hz-subnav{position:fixed;left:0;right:0;top:var(--hz-header-h,76px);z-index:55;background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid #e0eff1;box-shadow:0 12px 30px -22px rgba(28,40,67,.45);opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .3s var(--ease-quart),transform .3s var(--ease-quart),visibility .3s}
.hz-subnav.show{opacity:1;visibility:visible;transform:none}
.hz-subnav .wrap{display:flex;gap:2px;justify-content:space-between;overflow-x:auto;min-height:56px;align-items:stretch;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hz-subnav .wrap::-webkit-scrollbar{display:none}
.hz-subnav a{display:inline-flex;align-items:center;white-space:nowrap;padding:0 16px;font-family:"Poppins",sans-serif;font-weight:500;font-size:13.5px;letter-spacing:.01em;color:var(--navy);text-decoration:none;border-bottom:2px solid transparent;transition:color .2s,border-color .2s,background-color .2s}
/* laptop / tablet-landscape: tighten so all tabs fit the bar without scrolling */
/* Laptops: tighten so all tabs fit inside the centred wrap; below that it scrolls cleanly */
@media (max-width:1440px){.hz-subnav .wrap{justify-content:flex-start;gap:0;padding-left:24px;padding-right:24px}.hz-subnav a{padding:0 13px;font-size:12.5px;letter-spacing:0}}
@media (max-width:1200px){.hz-subnav a{padding:0 11px;font-size:12px}}
@media (max-width:900px){.hz-subnav a{padding:0 9px;font-size:11.5px}}
.hz-subnav a:hover{color:var(--teal);background:rgba(224,239,241,.5)}
.hz-subnav a.active{color:var(--teal);border-bottom-color:var(--teal)}
[id^="sec-"]{scroll-margin-top:calc(var(--hz-header-h,76px) + 62px)}
/* hide the in-page tab strip below 978px — too cramped; the page reads top-to-bottom there */
@media (max-width:978px){
  .hz-subnav{display:none !important}
  [id^="sec-"]{scroll-margin-top:calc(var(--hz-header-h,64px) + 12px)}
}

/* full-bleed cinematic feature bands (bg image / bg video) */
.feature-band{position:relative;display:flex;align-items:center;min-height:min(78vh,660px);padding:clamp(72px,10vw,132px) 0;overflow:hidden;isolation:isolate}
.feature-band .scene-media{position:absolute;inset:0;z-index:-2;margin:0}
.feature-band .scene-media img,.feature-band .scene-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature-band .scene-media .px-bg{height:122%;top:-11%}
.feature-band .scene-media video{opacity:0;transition:opacity .9s ease}
.feature-band.video-live .scene-media video{opacity:1}
.feature-band .scene-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(19,29,49,.68),rgba(19,29,49,.78))}
.feature-band .scene-inner{position:relative;z-index:1;width:100%}
.fb-copy{max-width:1000px;margin:0 auto;text-align:center;padding:0 clamp(20px,4vw,40px)}
.fb-copy .eyebrow{display:block;color:var(--sky);margin:0 0 12px}
.fb-h{font-family:"Prata",Georgia,serif;font-weight:400;font-size:clamp(1.9rem,4vw,2.7rem);color:#fff;line-height:1.14;margin:0 0 20px}
.fb-copy p{color:rgba(255,255,255,.86);line-height:1.8;font-size:16px;margin:0 auto 14px}
.fb-copy p:last-child{margin-bottom:0}
.video-embed{position:relative;width:100%;aspect-ratio:16/9;background:var(--navy);overflow:hidden;box-shadow:0 30px 70px -42px rgba(28,40,67,.65)}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.guide-media img{box-shadow:0 30px 70px -42px rgba(28,40,67,.65)}

/* ============ SITE-WIDE PREMIUM POLISH ============ */
/* text heroes get depth (soft brand-color glows) so they never read as empty */
.hero-light::after{content:"";position:absolute;z-index:0;right:-7%;top:-32%;width:min(60vw,660px);height:min(60vw,660px);pointer-events:none;
  background:radial-gradient(circle at center,rgba(118,188,212,.30),rgba(118,188,212,0) 68%)}
.hero-light::before{content:"";position:absolute;z-index:0;left:-12%;bottom:-46%;width:min(48vw,520px);height:min(48vw,520px);pointer-events:none;
  background:radial-gradient(circle at center,rgba(46,106,121,.16),rgba(46,106,121,0) 70%)}
/* image hover-zoom on media blocks (subtle, premium) */
.split-media,.feeling-media,.prov-head-media,.guide-media,.bio-portrait,.prov-window{overflow:hidden}
.split-media img,.feeling-media img,.prov-head-media img,.guide-media img,.bio-portrait img,.prov-window img{transition:transform .8s var(--ease-quart)}
.split-media:hover img,.feeling-media:hover img,.prov-head-media:hover img,.guide-media:hover img,.bio-portrait:hover img,.cast-member:hover .prov-window img{transform:scale(1.05)}
/* consistent focus ring site-wide */
a:focus-visible,button:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
/* premium split hero (content pages: text + topical image) */
.hero-split-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero-split .hero-capsule{margin-bottom:26px}
.hero-split-media{margin:0;overflow:hidden;align-self:stretch;box-shadow:0 34px 80px -50px rgba(28,40,67,.6)}
.hero-split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:5/4;max-height:520px;display:block;transition:transform .8s var(--ease-quart)}
.hero-split-media:hover img{transform:scale(1.05)}
@media (max-width:860px){.hero-split-grid{grid-template-columns:1fr;gap:28px}.hero-split-media img{aspect-ratio:16/10;max-height:300px}}
/* ===== homepage "Explore services" premium card grid ===== */
.svc-cardgrid{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:22px;margin-top:12px}
.svc-cardgrid .svc-card{flex:0 1 calc(33.333% - 15px)}
/* big CTA block that fills the last-row space (homepage services) */
.svc-cta-card{flex:0 1 100%;display:flex;flex-direction:column;justify-content:center;gap:24px;background:var(--navy);color:#fff;padding:clamp(32px,4vw,52px);position:relative;overflow:hidden}
.svc-cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.svc-cta-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(19,29,49,.94) 0%,rgba(19,29,49,.8) 50%,rgba(19,29,49,.5) 100%)}
.svc-cta-card>div{position:relative;z-index:2}
.svc-cta-card .eyebrow{color:var(--sky)}
.svc-cta-card h3{font-family:"Prata",Georgia,serif;font-weight:400;font-size:clamp(1.6rem,2.8vw,2.3rem);color:#fff;margin:10px 0 12px;line-height:1.14}
.svc-cta-card p{color:rgba(255,255,255,.82);font-size:15.5px;line-height:1.65;margin:0;max-width:46ch}
.svc-cta-actions{display:flex;flex-wrap:wrap;gap:12px;position:relative;z-index:2}
@media (max-width:900px){.svc-cta-card{flex-basis:100%}}
/* The checker panel is two thirds wide and ends up alone on the last row, so it
   is centred rather than left-hanging with a third of empty space beside it.
   Scoped above 900px: below that it is full width, and below 760px it is a card
   in the swipe rail, where an auto margin would knock the snapping out. */
.svc-cardgrid--4 .svc-card{flex-basis:calc(25% - 17px)}
.svc-cardgrid--4 .svc-card-body{padding:20px 20px 22px}
.svc-cardgrid--4 .svc-card-body h3{font-size:1.15rem}
@media (max-width:1000px){.svc-cardgrid--4 .svc-card{flex-basis:calc(50% - 11px)}}
.svc-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(28,40,67,.14);overflow:hidden;text-decoration:none;transition:transform .35s var(--ease-quart),box-shadow .35s var(--ease-quart),border-color .35s}
.svc-card:hover{transform:translateY(-6px);border-color:var(--teal);box-shadow:0 30px 60px -34px rgba(28,40,67,.5)}
.svc-card-media{aspect-ratio:16/11;overflow:hidden}
.svc-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-quart)}
.svc-card:hover .svc-card-media img{transform:scale(1.06)}
.svc-card-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.svc-card-body h3{font-family:"Prata",Georgia,serif;font-weight:400;font-size:1.3rem;color:var(--navy);margin:0 0 10px;line-height:1.2}
.svc-card:hover .svc-card-body h3{color:var(--teal)}
.svc-card-body p{color:var(--gray-sm);font-size:14px;line-height:1.6;margin:0 0 18px}
.svc-card-go{margin-top:auto;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);display:inline-flex;align-items:center;gap:8px}
.svc-card-go span{transition:transform .3s var(--ease-quart)}
.svc-card:hover .svc-card-go span{transform:translateX(6px)}
/* Services ladder: three across on a desktop, two on a tablet, one on a phone.
   The cards keep the same gap at every step so the rhythm does not change. */
@media (max-width:1000px){
  .svc-cardgrid .svc-card{flex-basis:calc(50% - 11px)}
}
@media (max-width:620px){
  .svc-cardgrid{gap:18px}
  .svc-cardgrid .svc-card,
  .svc-cardgrid .svc-cta-card{flex-basis:100%}
}

@media (max-width:1000px){.svc-cardgrid--4 .svc-card{flex-basis:calc(50% - 11px)}}
.svc-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(28,40,67,.14);overflow:hidden;text-decoration:none;transition:transform .35s var(--ease-quart),box-shadow .35s var(--ease-quart),border-color .35s}
.svc-card:hover{transform:translateY(-6px);border-color:var(--teal);box-shadow:0 30px 60px -34px rgba(28,40,67,.5)}
.svc-card-media{aspect-ratio:16/11;overflow:hidden}
.svc-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-quart)}
.svc-card:hover .svc-card-media img{transform:scale(1.06)}
.svc-card-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.svc-card-body h3{font-family:"Prata",Georgia,serif;font-weight:400;font-size:1.3rem;color:var(--navy);margin:0 0 10px;line-height:1.2}
.svc-card:hover .svc-card-body h3{color:var(--teal)}
.svc-card-body p{color:var(--gray-sm);font-size:14px;line-height:1.6;margin:0 0 18px}
.svc-card-go{margin-top:auto;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);display:inline-flex;align-items:center;gap:8px}
.svc-card-go span{transition:transform .3s var(--ease-quart)}
.svc-card:hover .svc-card-go span{transform:translateX(6px)}

/* Services ladder — one column on a phone, two on a tablet, three above that.
   The symptom-checker panel is a card like any other, so it flows with them.
   Portrait and landscape are both covered: the breakpoints follow the viewport
   width, so a phone turned sideways picks up the two-column step. */
@media (max-width:1000px){
  .svc-cardgrid .svc-card{flex-basis:calc(50% - 11px)}
}
@media (max-width:620px){
  .svc-cardgrid{gap:18px}
  .svc-cardgrid .svc-card,
  .svc-cardgrid .svc-cta-card{flex-basis:100%}
  .svc-cardgrid .svc-cta-card{padding:30px 26px}
}
/* Below the three-across step the panel is only half a row wide, which is less
   than the two buttons need at their natural widths, so they would drop into a
   stack. Half each keeps them paired the way the intro buttons are. */
@media (max-width:1000px){
  .svc-cta-actions > .btn{flex:1 1 calc(50% - 6px);min-width:0;justify-content:center;text-align:center;padding-left:10px;padding-right:10px}
}

/* ===== inner-page hero banner (background image + veil) ===== */
.hero-banner{position:relative;display:flex;align-items:center;min-height:clamp(190px,28vh,300px);padding:clamp(44px,5.5vw,72px) 0;overflow:hidden;isolation:isolate}
.hero-banner .scene-media{position:absolute;inset:0;z-index:-2;margin:0}
.hero-banner .scene-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-banner .scene-media .px-bg{height:122%;top:-11%}
/* split banner: male (left) | female (right) */
.hero-banner--duo .scene-media.duo-media{display:grid;grid-template-columns:1fr 1fr}
.hero-banner--duo .scene-media.duo-media img{position:relative;inset:auto;width:100%;height:100%;object-fit:cover}
.hero-banner--duo .hero-banner-veil{background:radial-gradient(ellipse 68% 108% at 50% 50%,rgba(19,29,49,.84) 0%,rgba(19,29,49,.72) 46%,rgba(19,29,49,.4) 100%)}
.hero-banner--duo .hero-banner-inner{margin-left:auto;margin-right:auto;text-align:center;max-width:660px}
.hero-banner--duo .hero-capsule{margin-left:auto;margin-right:auto}
.hero-banner--duo .cta-row{justify-content:center}
@media (max-width:600px){.hero-banner--duo .scene-media.duo-media{grid-template-columns:1fr 1fr}}
.hero-banner-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,rgba(19,29,49,.86) 0%,rgba(19,29,49,.66) 52%,rgba(19,29,49,.48) 100%)}
.hero-banner .scene-inner{position:relative;z-index:1;width:100%}
.hero-banner-inner{max-width:800px}
.hero-banner .hero-kicker{color:var(--sky);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:13px;margin:0 0 16px}
.hero-banner h1{font-family:"Prata",Georgia,serif;color:#fff;font-size:clamp(2.4rem,5.2vw,3.9rem);line-height:1.14;margin:0 0 18px}
.hero-banner .hero-capsule{color:rgba(255,255,255,.9);max-width:62ch;margin:0 0 28px;font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.65}
.hero-banner .cta-row{margin:0}
@media (max-width:600px){.hero-banner{min-height:300px}}
/* about page: prose left, sticky clinic image right */
.about-split{align-items:start}
.about-split .split-copy .prose{max-width:none}
.about-split .split-media{position:sticky;top:100px;align-self:start}
.about-split .split-media img{aspect-ratio:4/5;max-height:640px}
@media (max-width:820px){.about-split .split-media{position:static}.about-split .split-media img{aspect-ratio:16/10;max-height:320px}}

/* image placeholder (until real photos arrive) */
.spread-figure.ph{display:flex;align-items:center;justify-content:center;background:var(--mist);border:1px dashed rgba(28,40,67,.28)}
.spread-figure.ph span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);font-weight:600}

/* symptom checklist (used on condition/hormone pages) */
.band-navy .eyebrow{color:var(--sky)}
.band-navy .section-h{color:#fff}
.symlist{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,5vw,72px)}
.symlist li{display:flex;align-items:center;gap:14px;padding:16px 2px;font-size:15.5px;line-height:1.4;border-top:1px solid rgba(255,255,255,.14)}
.symlist.on-light li{border-top-color:rgba(28,40,67,.12);color:var(--ink)}
.band-navy .symlist li{color:rgba(255,255,255,.9)}
.symlist li::before{content:"";width:9px;height:9px;flex:none;background:var(--teal);transform:rotate(45deg)}
@media (max-width:700px){.symlist{grid-template-columns:1fr}}

/* premium services grid (services hub) */
.svc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.svc-grid > .svc-tile{flex:0 1 calc(33.333% - 12px)}
a.svc-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:220px;
  background:#fff;border:1px solid rgba(28,40,67,.16);padding:40px 38px 32px;text-decoration:none;
  transition:transform .3s var(--ease-quart),box-shadow .3s var(--ease-quart),border-color .3s var(--ease-quart)}
a.svc-tile::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--teal);transition:width .4s var(--ease-quart)}
a.svc-tile:hover,a.svc-tile:focus-visible{transform:translateY(-4px);border-color:var(--teal);box-shadow:0 26px 52px -30px rgba(28,40,67,.5);outline:none}
a.svc-tile:hover::before,a.svc-tile:focus-visible::before{width:100%}
.svc-tile-n{font-family:"Prata",Georgia,serif;font-size:1.7rem;color:var(--sky);line-height:1;margin-bottom:22px}
.svc-tile h3{font-family:"Poppins",sans-serif;font-weight:600;font-size:clamp(1.15rem,1.5vw,1.4rem);color:var(--navy);margin:0 0 10px;line-height:1.25;transition:color .25s var(--ease-quart)}
a.svc-tile:hover h3{color:var(--teal)}
.svc-tile h3 .tag{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--teal)}
.svc-tile p{font-size:14.5px;color:var(--gray-sm);line-height:1.6;margin:0 0 24px;max-width:44ch}
.svc-tile-go{margin-top:auto;font-size:13px;font-weight:600;letter-spacing:.03em;color:var(--teal);display:inline-flex;align-items:center;gap:.5em}
.svc-tile-go .ar{transition:transform .3s var(--ease-quart)}
a.svc-tile:hover .svc-tile-go .ar{transform:translateX(6px)}
@media (max-width:1000px){.svc-grid > .svc-tile{flex-basis:calc(50% - 9px)}}
@media (max-width:640px){.svc-grid > .svc-tile{flex-basis:100%}}

/* directory card grids (hub "explore" sections) */
.dir{background:#fff}
.dir.sec1{background:#f6feff}
.dir .head{max-width:64ch;margin-bottom:40px}
.dir-grid{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:20px}
.dir-grid a.dir-card{flex:0 1 calc(33.333% - 14px)}
a.dir-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:190px;
  border:1px solid transparent;border-radius:4px;padding:34px 32px 28px;text-decoration:none;
  transition:transform .3s var(--ease-quart),box-shadow .3s var(--ease-quart)}
/* premium muted colour palette — each box a different, cohesive tint */
a.dir-card:nth-child(6n+1){background:#e8f0f1}
a.dir-card:nth-child(6n+2){background:#eef0e7}
a.dir-card:nth-child(6n+3){background:#f4ede4}
a.dir-card:nth-child(6n+4){background:#e9edf3}
a.dir-card:nth-child(6n+5){background:#f1eae8}
a.dir-card:nth-child(6n+6){background:#e6f1ec}
a.dir-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--teal);transition:width .35s var(--ease-quart)}
a.dir-card:hover,a.dir-card:focus-visible{transform:translateY(-5px);box-shadow:0 26px 52px -28px rgba(28,40,67,.55);outline:none}
a.dir-card:hover::before,a.dir-card:focus-visible::before{width:4px}
.dir-card h3{font-family:"Poppins",sans-serif;font-weight:600;font-size:1.14rem;color:var(--navy);margin:0 0 14px;padding-bottom:14px;line-height:1.25;border-bottom:1px solid rgba(28,40,67,.14);transition:color .25s var(--ease-quart)}
a.dir-card:hover h3{color:var(--teal)}
.dir-card p{font-size:14.5px;color:var(--gray-sm);line-height:1.58;margin:0 0 22px}
.dir-card .dir-link{margin-top:auto;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);display:inline-flex;align-items:center;gap:.55em}
.dir-card .dir-link span{transition:transform .3s var(--ease-quart)}
a.dir-card:hover .dir-link span{transform:translateX(5px)}
@media (max-width:900px){.dir-grid a.dir-card{flex-basis:calc(50% - 10px)}}
@media (max-width:600px){.dir-grid a.dir-card{flex-basis:100%}}

/* clinic photo gallery */
.gallery-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.gallery-grid a{flex:0 1 calc(33.333% - 10px);display:block;position:relative;border:1px solid var(--navy);overflow:hidden;aspect-ratio:4/3;background:var(--navy)}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease-quart)}
.gallery-grid a:hover img,.gallery-grid a:focus-visible img{transform:scale(1.06)}
.gallery-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 14px 12px;color:#fff;font-size:12.5px;font-weight:500;letter-spacing:.02em;background:linear-gradient(0deg,rgba(28,40,67,.85),rgba(28,40,67,0))}
.gallery-grid a:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
@media (max-width:700px){.gallery-grid{gap:10px}.gallery-grid a{flex-basis:calc(50% - 5px)}}
@media (max-width:460px){.gallery-grid a{flex-basis:100%}}

/* provider bio portrait */
.bio-portrait{border:1px solid var(--navy);max-width:300px;margin:0 0 28px;aspect-ratio:3/4;overflow:hidden}
.bio-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.bio-portrait--empty{display:flex;align-items:center;justify-content:center;background:var(--mist)}
.bio-portrait--empty span{font-size:12px;color:var(--gray-sm);padding:16px;text-align:center}

/* medium-desktop: ease the section padding a touch */
@media (max-width:1100px){ .pad{padding:88px 0} }
@media (max-width:600px){ .pad{padding:60px 0} .prose h2{margin:34px 0 12px} }

/* ==========================================================================
   EDITORIAL LAYER — "The Practice" concept, reused for the Symptoms pages
   (Coastal master tokens; the drifting plus-pattern is intentionally removed)
   ========================================================================== */
.ed-rule{width:56px;height:2px;background:var(--teal);border:0;margin:0 0 22px}

/* masthead: asymmetric editorial hero */
.ed-masthead{background:#fff;padding:72px 0 92px}
.ed-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,66px);align-items:center}
.ed-copy h1{font-family:"Prata",Georgia,serif;font-size:clamp(2.5rem,5.6vw,4rem);line-height:1.06;letter-spacing:-0.015em;color:var(--ink);margin:0 0 22px}
.ed-dek{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--ink);max-width:52ch;line-height:1.6;margin:0 0 26px}
.ed-capsule{border:1px solid var(--navy);background:#fff;padding:24px 26px;max-width:56ch;margin:0 0 28px}
.ed-capsule p{margin:0;font-size:15px;line-height:1.7;color:var(--ink)}
.ed-figure{border:1px solid var(--navy);overflow:hidden;background:var(--navy)}
.ed-figure img{width:100%;height:100%;object-fit:cover;display:block}
.photo{margin:0}
.photo-cap{font-size:13px;color:var(--gray-sm);margin-top:12px;line-height:1.55;max-width:46ch}
.photo-cap .cap-mk{color:var(--teal);font-weight:600}

/* standfirst with drop-cap */
.standfirst{max-width:60ch}
.standfirst h2{margin:0 0 18px}
.ed-lede{font-size:clamp(1.05rem,1.6vw,1.24rem);color:var(--ink);line-height:1.68;margin:0 0 20px}
.ed-lede.drop::first-letter{font-family:"Prata",Georgia,serif;font-size:3.4rem;line-height:.8;float:left;padding:6px 12px 0 0;color:var(--teal)}
.brandline{font-family:"Prata",Georgia,serif;color:var(--teal);font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.2;margin:0}
.sf-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);align-items:center}

/* feature spreads: alternating image / text */
.spread-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px);align-items:center}
.spread-row + .spread-row{margin-top:clamp(48px,7vw,88px)}
.spread-row.flip .spread-media{order:2}
.spread-figure{position:relative;border:1px solid var(--navy);overflow:hidden;aspect-ratio:3/2;background:var(--navy)}
.spread-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spread-figure video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease-quart)}
.spread-figure.video-live video{opacity:1}
.lead-frag{font-family:"Prata",Georgia,serif;font-size:clamp(1.3rem,2.4vw,1.9rem);color:var(--navy);line-height:1.28;margin:0 0 18px}
.spread-text h2{margin:0 0 16px}
.spread-text p{margin:0 0 1em;color:var(--ink);line-height:1.7}

/* pull-quote interlude */
.interlude .wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,4vw,54px);align-items:center}
figure.pull{margin:0}
figure.pull .thumb{width:min(300px,42vw);aspect-ratio:1/1;border:1px solid var(--navy);overflow:hidden}
figure.pull .thumb img{width:100%;height:100%;object-fit:cover}
.quote-block blockquote{margin:0;font-family:"Prata",Georgia,serif;font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.3;color:var(--navy)}
.quote-block figcaption{margin-top:16px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-sm)}

/* the method — numbered editorial list */
ol.method{list-style:none;margin:0;padding:0}
ol.method li{display:grid;grid-template-columns:auto 1fr 120px;gap:clamp(18px,3vw,32px);align-items:center;padding:26px 0;border-top:1px solid rgba(28,40,67,.16)}
ol.method li:last-child{border-bottom:1px solid rgba(28,40,67,.16)}
.m-num{font-family:"Prata",Georgia,serif;font-size:2rem;color:var(--teal);line-height:1}
.m-body h3{font-family:"Poppins",sans-serif;font-weight:600;font-size:1.15rem;color:var(--navy);margin:0 0 6px}
.m-body p{margin:0;color:var(--ink);line-height:1.6}
.m-thumb{width:120px;height:84px;border:1px solid var(--navy);overflow:hidden;justify-self:end}
.m-thumb img{width:100%;height:100%;object-fit:cover}
.method-actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px}

/* full-width lifestyle band */
.band-figure{border:1px solid var(--navy);overflow:hidden;aspect-ratio:3/1.3;background:var(--navy)}
.band-figure img{width:100%;height:100%;object-fit:cover}

/* clip-path image unmask — GSAP animates it (motion.js); visible by default */
.unmask img{clip-path:inset(0)}

@media (max-width:900px){
  .ed-grid,.sf-grid,.spread-row,.spread-row.flip{grid-template-columns:1fr;gap:32px}
  .spread-row.flip .spread-media{order:0}
  .interlude .wrap{grid-template-columns:1fr}
  figure.pull{max-width:320px}
  ol.method li{grid-template-columns:auto 1fr}
  .m-thumb{width:96px;height:68px;justify-self:start}
}
@media (prefers-reduced-motion:reduce){ .js .unmask img{clip-path:inset(0)!important} }


/* ============================================================
   PREMIUM PROVIDER (doctor) PROFILE PAGES  — .dr-*
   ============================================================ */
/* --- Split hero: copy + framed portrait over a dark coastal gradient --- */
.dr-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--navy);padding:clamp(52px,7vw,104px) 0}
.dr-hero-bg{position:absolute;inset:0;z-index:-2}
.dr-hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.26}
.dr-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 130% at 82% -10%,rgba(46,106,121,.5),rgba(28,40,67,0) 58%),linear-gradient(180deg,rgba(28,40,67,.66),rgba(28,40,67,.94))}
.dr-hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(34px,5vw,76px);align-items:center}
.dr-hero-copy{color:#fff}
.dr-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:"Poppins",sans-serif;font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);margin:0 0 20px}
.dr-eyebrow::before{content:"";width:36px;height:1px;background:var(--sky)}
.dr-hero h1{font-family:"Prata",Georgia,serif;font-size:clamp(2.5rem,5vw,4rem);line-height:1.1;color:#fff;margin:0 0 14px}
.dr-role{font-size:15.5px;letter-spacing:.02em;color:rgba(255,255,255,.8);margin:0 0 22px}
.dr-role strong{color:var(--sky);font-weight:600}
.dr-hero-lead{color:rgba(255,255,255,.82);font-size:16.5px;line-height:1.8;margin:0 0 26px}
.dr-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 32px}
.dr-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid rgba(255,255,255,.22);border-radius:999px;font-size:12.5px;letter-spacing:.02em;color:rgba(255,255,255,.92);background:rgba(255,255,255,.05)}
.dr-chip svg{width:15px;height:15px;stroke:var(--sky);fill:none;stroke-width:2;flex:none}
/* The credential pills keep their natural widths, so the last one dropped to a
   line of its own and left a ragged hole at the end of the row above. From
   tablet up they share the row two across instead; phones keep the plain wrap,
   where stretching would squeeze a pill down to a couple of words per line. */
@media (min-width:601px){
  .dr-chip{flex:1 1 calc(50% - 5px);min-width:0;justify-content:center;text-align:center;padding-left:13px;padding-right:13px}
}
/* On a wide screen all four fit on a single line once the copy column takes the
   width it needs. The portrait keeps its shape and simply sits narrower. */
@media (min-width:1400px){
  .dr-hero-grid{grid-template-columns:1.5fr .5fr}
  .dr-chip{flex:1 1 auto}
}
.dr-hero .cta-row{gap:12px}
.dr-portrait{position:relative;justify-self:center;max-width:410px;width:100%}
.dr-portrait-img{position:relative;z-index:1;overflow:hidden;border:1px solid rgba(255,255,255,.16)}
.dr-portrait-img img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;transition:transform 1s var(--ease-quart)}
.dr-portrait:hover .dr-portrait-img img{transform:scale(1.04)}
.dr-portrait::before{content:"";position:absolute;left:-18px;top:24px;width:100%;height:100%;border:1px solid var(--sky);z-index:0}
.dr-portrait-tag{position:absolute;z-index:2;left:0;bottom:22px;background:var(--teal);color:#fff;padding:11px 20px;font-family:"Prata",Georgia,serif;font-size:1rem;letter-spacing:.01em;box-shadow:0 18px 40px -20px rgba(0,0,0,.6)}

/* --- Stats strip --- */
.dr-stats-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(28,40,67,.14);border:1px solid rgba(28,40,67,.14)}
.dr-stat{background:var(--mist);text-align:center;padding:clamp(26px,3vw,40px) 16px;display:flex;flex-direction:column;gap:9px;align-items:center;justify-content:center}
.dr-stat-n{font-family:"Prata",Georgia,serif;font-size:clamp(1.9rem,3.2vw,2.7rem);color:var(--teal);line-height:1}
.dr-stat-l{font-size:12.5px;letter-spacing:.02em;color:var(--gray-sm);line-height:1.45;max-width:22ch}

/* --- About: sticky heading + prose + pull-quote --- */
.dr-about-grid{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:clamp(36px,6vw,84px);align-items:start}
.dr-about-head{position:sticky;top:104px}
.dr-about-head .eyebrow{display:block;margin-bottom:14px}
.dr-about-head h2{font-family:"Prata",Georgia,serif;font-size:clamp(1.8rem,3vw,2.6rem);color:var(--navy);line-height:1.12}
.dr-sig{margin-top:20px;font-family:"Prata",Georgia,serif;font-size:1.35rem;color:var(--teal)}
.dr-about-body>p{color:var(--gray-sm);line-height:1.85;font-size:16px;margin:0 0 18px}
.dr-about-body>p:first-child{font-size:17.5px;color:var(--navy)}
.dr-pullquote{margin:30px 0;padding:22px 32px;border-left:3px solid var(--teal);background:var(--mist);font-family:"Prata",Georgia,serif;font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.5;color:var(--navy)}

/* --- Timeline --- */
.dr-tl-grid{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:clamp(36px,6vw,84px);align-items:start}
.dr-tl-head{position:sticky;top:104px}
.dr-tl-head .eyebrow{display:block;margin-bottom:14px}
.dr-tl-head h2{font-family:"Prata",Georgia,serif;font-size:clamp(1.8rem,3vw,2.6rem);color:var(--navy);line-height:1.12}
.dr-tl-head p{color:var(--gray-sm);font-size:15px;line-height:1.7;margin-top:16px;max-width:36ch}
.dr-timeline{position:relative;padding-left:36px}
.dr-timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--sky),var(--teal))}
.dr-tl-item{position:relative;padding-bottom:34px}
.dr-tl-item:last-child{padding-bottom:0}
.dr-tl-item::before{content:"";position:absolute;left:-35px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--teal);transition:transform .3s var(--ease-quart)}
.dr-tl-item:hover::before{transform:scale(1.18)}
.dr-tl-year{font-family:"Prata",Georgia,serif;color:var(--teal);font-size:1.05rem;margin:0 0 4px}
.dr-tl-item h3{font-size:1.08rem;color:var(--navy);font-weight:600;margin:0 0 6px;font-family:"Poppins",sans-serif}
.dr-tl-item p{color:var(--gray-sm);font-size:14.5px;line-height:1.7;margin:0}

/* --- Specialty / approach cards --- */
.dr-spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.dr-spec{background:#fff;border:1px solid rgba(28,40,67,.12);padding:32px 28px;transition:transform .35s var(--ease-quart),box-shadow .35s var(--ease-quart),border-color .35s}
.dr-spec:hover{transform:translateY(-6px);box-shadow:0 34px 64px -42px rgba(28,40,67,.55);border-color:rgba(46,106,121,.4)}
.dr-spec-ic{width:54px;height:54px;border-radius:50%;background:var(--mist);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:background .35s}
.dr-spec:hover .dr-spec-ic{background:var(--teal)}
.dr-spec-ic svg{width:26px;height:26px;stroke:var(--teal);fill:none;stroke-width:1.6;transition:stroke .35s}
.dr-spec:hover .dr-spec-ic svg{stroke:#fff}
.dr-spec h3{font-size:1.1rem;color:var(--navy);font-weight:600;margin:0 0 8px;font-family:"Poppins",sans-serif}
.dr-spec p{color:var(--gray-sm);font-size:14px;line-height:1.65;margin:0}

/* --- Credentials --- */
.dr-cred-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
.dr-cred{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid rgba(28,40,67,.12);border-left:3px solid var(--teal);padding:24px 26px}
.dr-cred svg{flex:none;width:26px;height:26px;stroke:var(--teal);fill:none;stroke-width:1.8;margin-top:2px}
.dr-cred h3{font-size:1rem;color:var(--navy);font-weight:600;margin:0 0 4px;font-family:"Poppins",sans-serif}
.dr-cred p{color:var(--gray-sm);font-size:13.5px;line-height:1.6;margin:0}

/* --- Cross-link to the other physician --- */
.dr-other{display:grid;grid-template-columns:minmax(0,36%) minmax(0,1fr);gap:0;background:#fff;border:1px solid rgba(28,40,67,.14);overflow:hidden;transition:transform .35s var(--ease-quart),box-shadow .35s var(--ease-quart),border-color .35s}
.dr-other:hover{transform:translateY(-5px);box-shadow:0 34px 64px -42px rgba(28,40,67,.5);border-color:rgba(46,106,121,.4)}
.dr-other-media{overflow:hidden}
.dr-other-media img{width:100%;height:100%;object-fit:cover;object-position:center 15%;min-height:252px;transition:transform .8s var(--ease-quart)}
.dr-other:hover .dr-other-media img{transform:scale(1.05)}
.dr-other-body{padding:34px 38px;display:flex;flex-direction:column;justify-content:center;border-left:3px solid transparent;transition:border-color .35s}
.dr-other-body .eyebrow{display:block;margin-bottom:10px}
.dr-other-body h3{font-family:"Prata",Georgia,serif;font-size:1.6rem;line-height:1.25;color:var(--navy);margin:0 0 6px}
.dr-other-role{color:var(--teal);font-size:13.5px;font-weight:600;margin:0 0 12px}
.dr-other-body p{color:var(--gray-sm);font-size:14.5px;line-height:1.7;margin:0 0 16px;max-width:52ch}
.dr-other-link{font-family:"Poppins",sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.03em;color:var(--teal);margin-top:18px;transition:color .3s}
/* The teal edge is the marker the credential cards already use, so a hovered
   tile reads as part of the same family rather than a new pattern. */
.dr-other:hover .dr-other-body{border-left-color:var(--teal)}
.dr-other:hover .dr-other-link{color:var(--navy)}

/* --- Closing CTA band --- */
.dr-cta{position:relative;overflow:hidden;isolation:isolate;background:var(--navy);text-align:center;padding:clamp(64px,8vw,110px) 0}
.dr-cta-bg{position:absolute;inset:0;z-index:-2}
.dr-cta-bg img{width:100%;height:100%;object-fit:cover;opacity:.22}
.dr-cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(28,40,67,.8),rgba(28,40,67,.92))}
.dr-cta .eyebrow{color:var(--sky);display:block;margin-bottom:14px}
.dr-cta h2{font-family:"Prata",Georgia,serif;font-size:clamp(2rem,4vw,3rem);color:#fff;line-height:1.1;margin:0 auto 16px;max-width:20ch}
.dr-cta p{color:rgba(255,255,255,.82);font-size:16px;line-height:1.7;margin:0 auto 30px;max-width:56ch}
.dr-cta .cta-row{justify-content:center}

/* --- Responsive --- */
@media (max-width:980px){
  .dr-hero-grid{grid-template-columns:1fr;gap:40px}
  .dr-portrait{order:-1;max-width:340px}
  .dr-about-grid,.dr-tl-grid{grid-template-columns:1fr;gap:28px}
  .dr-about-head,.dr-tl-head{position:static}
  .dr-spec-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .dr-stats-wrap{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .dr-spec-grid{grid-template-columns:1fr}
  .dr-cred-grid{grid-template-columns:1fr}
  .dr-other{grid-template-columns:1fr}
  .dr-other-media img{min-height:240px;aspect-ratio:16/10}
}
@media (max-width:520px){
  .dr-hero .cta-row .btn{flex:1 1 calc(50% - 6px);justify-content:center;min-width:0}
}

/* ===== Gallery lightbox (clinic photos) ===== */
.gallery-grid a{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(10,15,26,.93);backdrop-filter:blur(4px);padding:6vh 4vw}
.lb.open{display:flex}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;max-width:min(1100px,92vw)}
.lb-img{max-width:100%;max-height:80vh;object-fit:contain;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.lb-cap{color:rgba(255,255,255,.88);font-family:"Poppins",sans-serif;font-size:14.5px;letter-spacing:.02em;margin-top:16px;text-align:center}
.lb-count{color:rgba(255,255,255,.5);font-size:12px;letter-spacing:.06em;margin-top:5px}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .25s,border-color .25s}
.lb-btn:hover{background:var(--teal);border-color:var(--teal)}
.lb-btn svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2}
.lb-prev{left:max(14px,3vw)}
.lb-next{right:max(14px,3vw)}
.lb-close{position:absolute;top:max(16px,3vh);right:max(16px,3vw);width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .25s,transform .35s var(--ease-quart)}
.lb-close:hover{background:var(--teal);transform:rotate(90deg)}
@media (max-width:600px){.lb-btn{width:44px;height:44px}.lb-prev{left:8px}.lb-next{right:8px}}

/* Center the Services section head (no dead space beside it) */
.services .head{text-align:center;max-width:64ch;margin-left:auto;margin-right:auto}
.services .head .measure{margin-left:auto;margin-right:auto}

/* Care section head: heading left, buttons filling the right (no dead space) */
.care-head{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(20px,4vw,56px);flex-wrap:wrap}
.care-head-text{max-width:60ch}
.care-head-cta{flex:none;margin-bottom:6px}
@media (max-width:700px){.care-head{align-items:flex-start}.care-head-cta{width:100%;justify-content:center;margin-top:6px}}

/* Brooke page: twin physician cross-link cards */
/* Held to the width of the centred heading above so the two tiles read as one
   block rather than a full-bleed band under a narrow title. */
.dr-other-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1120px;margin-left:auto;margin-right:auto}
@media (max-width:760px){.dr-other-pair{grid-template-columns:1fr}}

/* Care section heading stays on one line on desktop */
@media (min-width:761px){.care .care-head-text h2{white-space:nowrap}}

/* Homepage location panels — readable badge label, bigger fonts, stronger contrast */
.loc-split .loc-veil{background:linear-gradient(180deg,rgba(28,40,67,.38) 0%,rgba(28,40,67,.48) 36%,rgba(28,40,67,.74) 68%,rgba(28,40,67,.95) 100%)}
.loc-split .loc-content{max-width:46ch;text-shadow:0 2px 18px rgba(16,24,40,.45)}
.loc-split .loc-kicker{display:inline-block;font-family:"Poppins",sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--teal);padding:7px 15px;border-radius:3px;margin-bottom:18px;text-shadow:none}
.loc-split .loc-panel:hover .loc-kicker{color:#fff;background:var(--teal-dark)}
.loc-split .loc-name{font-size:clamp(2.1rem,4vw,3.1rem);margin-bottom:18px}
.loc-split .loc-nap{font-size:20px;color:#fff;margin-bottom:8px}
.loc-split .loc-hours{font-size:16px;color:rgba(255,255,255,.9);margin-bottom:28px}

/* Service-page sidebar: all services, current one active */
.svc-sidebar{margin-top:22px;background:#fff;border:1px solid rgba(28,40,67,.14)}
.svc-sidebar-h{font-family:"Poppins",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0;padding:18px 22px 10px}
.svc-sidebar ul{list-style:none;margin:0;padding:0 0 8px}
.svc-sidebar a{display:block;padding:11px 22px;color:var(--navy);font-size:14.5px;line-height:1.35;border-left:3px solid transparent;transition:color .2s,background .2s,border-color .2s}
.svc-sidebar a:hover{color:var(--teal);background:rgba(224,239,241,.45)}
.svc-sidebar li.is-current a{color:var(--teal);font-weight:600;background:var(--mist);border-left-color:var(--teal)}

/* Provider head: standard section-heading size, wider column keeps it to two lines */
.prov-head h2{font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.14}

/* Gallery head (locations): centered, with spaced buttons */
.gallery-head{text-align:center;margin:0 auto}
.gallery-head-text{max-width:60ch;margin-left:auto;margin-right:auto}
.gallery-head-cta{display:flex;justify-content:center;gap:16px;margin-top:22px;flex-wrap:wrap}

/* services.html — image-background CTA tile filling the last grid cell */
.svc-tile-cta{position:relative;overflow:hidden;border:0;padding:0;isolation:isolate;color:#fff;display:flex}
.svc-tile-cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s var(--ease-quart)}
.svc-tile-cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(28,40,67,.5),rgba(28,40,67,.88))}
.svc-tile-cta:hover .svc-tile-cta-bg{transform:scale(1.05)}
.svc-tile-cta-inner{padding:30px 28px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;width:100%}
.svc-tile-cta-k{font-family:"Poppins",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
.svc-tile-cta h3{color:#fff;font-family:"Prata",Georgia,serif;font-size:1.4rem;line-height:1.15;margin:0}
.svc-tile-cta-go{margin-top:6px;font-family:"Poppins",sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.02em;color:#fff}

/* Keep the image-BG CTA tile text readable on hover */
a.svc-tile-cta:hover h3{color:#fff}
a.svc-tile-cta:hover{border-color:transparent}
.svc-tile-cta:hover .svc-tile-cta-go{color:var(--sky)}

/* Right-side feeling image sticks while the left content scrolls (homepage + locations, laptop+) */
@media (min-width:821px){
  .feeling-grid{align-items:start}
  .feeling-media{position:sticky;top:100px;align-self:start}
}

/* symptoms.html: keep these section headings on one line (desktop) */
@media (min-width:761px){.hf-head h2{white-space:nowrap}}
.hrt .head{max-width:none}

/* Location pages: give the visit/consultation form a bit more width (desktop) */
@media (min-width:981px){
  body[data-page-family="location"] .article-shell{grid-template-columns:minmax(0,1fr) 384px}
}

/* Explore more services (service detail pages): center orphan cards in the last row */
section[aria-label="Explore more services"] .svc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
section[aria-label="Explore more services"] .svc-grid .svc-tile{flex:0 1 calc(33.333% - 12px)}
@media (max-width:1000px){section[aria-label="Explore more services"] .svc-grid .svc-tile{flex-basis:calc(50% - 9px)}}
@media (max-width:640px){section[aria-label="Explore more services"] .svc-grid .svc-tile{flex-basis:100%}}

/* Intro (about-split) highlights — fill the space beside the tall image */
.about-highlights{list-style:none;margin:30px 0 0;padding:24px 0 0;border-top:1px solid rgba(28,40,67,.12);display:grid;gap:15px;max-width:46ch}
.about-highlights li{display:flex;gap:12px;align-items:flex-start;color:var(--navy);font-size:15px;line-height:1.5}
.about-highlights svg{flex:none;width:22px;height:22px;stroke:var(--teal);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}

/* Reviews page — testimonial card grid */
.review-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.review-card{margin:0;position:relative;overflow:hidden;background:#fff;border:1px solid rgba(28,40,67,.12);border-radius:14px;padding:32px 32px 28px;display:flex;flex-direction:column;gap:16px;transition:transform .35s var(--ease-quart),box-shadow .35s var(--ease-quart),border-color .35s}
.review-card:hover{transform:translateY(-5px);box-shadow:0 34px 64px -42px rgba(28,40,67,.5);border-color:rgba(46,106,121,.4)}
.review-stars{color:#e6b800;letter-spacing:3px;font-size:15px;position:relative;z-index:1}
.review-card blockquote{margin:0;font-family:"Prata",Georgia,serif;font-size:1.22rem;line-height:1.5;color:var(--navy);position:relative;z-index:1}
.review-card figcaption{margin-top:auto;font-size:13px;color:var(--gray-sm);position:relative;z-index:1}
.review-src{font-weight:600;color:var(--teal)}
@media (max-width:700px){.review-grid{grid-template-columns:1fr}}

/* Inset light border framing inside each homepage location panel */
.loc-split .loc-panel::after{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.45);pointer-events:none;z-index:3;transition:border-color .35s var(--ease-quart)}
.loc-split .loc-panel:hover::after{border-color:rgba(255,255,255,.75)}

/* About dropdown (rightmost) opens leftward */
.menu-about > .sub-menu{left:auto;right:-16px}


/* ===== Comment batch (client review) — solo prov-head, stronger borders, aligned buttons ===== */
.prov-head-cta{display:grid;gap:14px;justify-content:end;align-content:center}
.prov-head-cta .btn{min-width:230px;justify-content:center;text-align:center}
@media (max-width:820px){.prov-head-cta{justify-content:start;margin-top:8px}.prov-head-cta .btn{min-width:0}}
/* Equal-height provider cards with the profile button pinned to the bottom */
.cast-grid .prov-body{display:flex;flex-direction:column;height:100%}
.cast-grid .prov-body > p:last-child{margin-top:auto;margin-bottom:0;padding-top:18px}
/* Provider-card borders were too light on the navy background */
.cast-grid .cast-member{border-color:rgba(255,255,255,.30)}
.cast-grid .cast-member:hover{border-color:rgba(118,188,212,.6)}
/* Location split: clearer, branded divider between the two clinics + stronger inner frame */
.loc-split{gap:6px;background:var(--teal)}
.loc-split .loc-panel::after{border-color:rgba(255,255,255,.75);border-width:1.5px}


/* ===== Comment batch: px-panel copy legibility over photos (client: 'not easy to read') ===== */
.px-veil{background:linear-gradient(115deg,rgba(28,40,67,.94) 0%,rgba(28,40,67,.8) 50%,rgba(28,40,67,.6) 100%)}
.px-panel.right .px-veil{background:linear-gradient(245deg,rgba(28,40,67,.94) 0%,rgba(28,40,67,.8) 50%,rgba(28,40,67,.6) 100%)}
.px-copy{text-shadow:0 2px 20px rgba(16,24,40,.55)}


/* ===== Client: show all photo-panel (px-panel) copy on the LEFT, not right ===== */
.px-panel.right .px-inner{text-align:left}
.px-panel.right .px-copy{margin-left:0;margin-right:auto}
.px-panel.right .px-veil{background:linear-gradient(115deg,rgba(28,40,67,.94) 0%,rgba(28,40,67,.8) 50%,rgba(28,40,67,.6) 100%)}


/* ===== Consistent vertical padding for background-image content sections (match .pad = 100px / 64px). Heroes and location image-cards are intentionally excluded. ===== */
.statement,.pullscene,.px-panel,.feature-band{min-height:0}
.statement .scene-inner,.pullscene .scene-inner,.care .scene-inner,.closing .scene-inner{padding-top:100px;padding-bottom:100px}
.px-inner{padding-top:100px;padding-bottom:100px}
.feature-band{padding-top:100px;padding-bottom:100px}
.feature-band .scene-inner{padding-top:0;padding-bottom:0}
@media (max-width:768px){
  .statement .scene-inner,.pullscene .scene-inner,.care .scene-inner,.closing .scene-inner,.px-inner{padding-top:64px;padding-bottom:64px}
  .feature-band{padding-top:64px;padding-bottom:64px}
}


/* how-it-works steps: 4 across on desktop, collapse responsively (fixes mobile overflow) */
.steps.steps--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){.steps.steps--4{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps.steps--4{grid-template-columns:1fr}}

/* ===== Utility classes extracted from former inline styles ===== */
.ix-1{display:block;margin-top:8px}
.ix-2{margin-top:30px}
.ix-3{padding:clamp(40px,5vw,64px) 0}
.ix-4{text-align:center;max-width:60ch;margin:0 auto 40px}
.ix-5{text-align:center;max-width:58ch;margin:0 auto 40px}
.ix-6{text-align:center;max-width:56ch;margin:0 auto 34px}
.ix-7{text-align:center;max-width:80ch;margin:0 auto 44px}
.ix-8{margin:14px auto 0}
.ix-9{max-width:56ch;margin-bottom:40px}
.ix-10{margin:4px 0 20px}
.ix-11{min-height:clamp(360px,50vh,480px)}
.ix-12{color:rgba(255,255,255,.82);font-size:15.5px;line-height:1.5;margin:18px 0 0;max-width:60ch}
.ix-13{color:#fff}
.ix-14{text-align:center;max-width:64ch;margin:0 auto 40px}
.ix-15{text-align:center;max-width:70ch;margin:0 auto 8px}
.ix-16{text-align:center;margin:14px auto 0}
.ix-17{text-align:center;max-width:52ch;margin:0 auto 40px}
.ix-18{opacity:.5}
.ix-19{margin-top:40px}
.ix-20{margin-top:34px}
.ix-21{margin-bottom:36px}
.ix-22{max-width:56ch}
.ix-23{margin-bottom:26px}
.ix-24{font-family:'Prata',Georgia,serif;font-size:1.2rem;color:var(--navy);margin:0 0 10px}
.ix-25{font-style:normal;line-height:1.7;color:var(--ink)}
.ix-26{color:var(--teal);font-weight:600}
.ix-27{margin-top:14px}
.ix-28{font-size:13px;color:var(--gray-sm)}
.ix-29{line-height:1.9;color:var(--ink);margin:0}
.ix-30{margin-top:26px}
.ix-31{margin-top:8px}
.ix-32{justify-content:center}
.ix-33{text-align:center;max-width:52ch;margin:0 auto 44px}
.ix-34{justify-content:center;margin-top:44px}
.ix-35{margin-top:36px}
.ix-36{margin-bottom:10px}
.ix-37{grid-template-columns:1fr}
.ix-38{aspect-ratio:4/5}
.ix-39{max-width:60ch;margin-bottom:36px}
.ix-40{max-width:60ch;margin-bottom:32px}
.ix-41{text-align:center;max-width:62ch;margin:0 auto 40px}
.ix-42{text-align:center;margin:0 auto 48px}
.ix-43{margin-top:24px}
.ix-44{color:rgba(255,255,255,.82);margin:14px 0 0;max-width:56ch;line-height:1.7}
.ix-45{text-align:center;max-width:62ch;margin:0 auto 44px}


/* ===== Soft, consistent hover on all form fields (text, email, tel, select, textarea) ===== */
.ginput_container input,.ginput_container select,.ginput_container textarea,
.lead-form input,.lead-form select,.lead-form textarea{transition:border-color .2s var(--ease-quart),box-shadow .2s var(--ease-quart),background-color .2s var(--ease-quart)}
.ginput_container input:hover,.ginput_container select:hover,.ginput_container textarea:hover,
.lead-form input:hover,.lead-form select:hover,.lead-form textarea:hover{border-color:var(--teal);background-color:#fbfdfd;box-shadow:0 0 0 3px rgba(46,106,121,.08)}


/* ===== Class-based reveals (JS toggles .in; no inline styles) ===== */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-quart),transform .8s var(--ease-quart)}
.js .reveal.in{opacity:1;transform:none}
/* Hero headline gets a clip-wipe on load instead of the fade */
@keyframes sdbHeroWipe{from{clip-path:inset(0 0 100% 0);transform:translateY(40px)}to{clip-path:inset(0 0 0% 0);transform:none}}
.js .hero-scene h1.reveal,.js .ed-copy h1.reveal{opacity:1;transform:none;animation:sdbHeroWipe 1.1s var(--ease-quart) .15s both}
/* Editorial image unmask */
.js .unmask img{clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease-quart)}
.js .unmask.in img{clip-path:inset(0 0 0% 0)}
/* Ambient slow zoom on statement + pull-quote stills */
@keyframes sdbBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.js .statement .scene-media img,.js .pullscene .scene-media img{animation:sdbBreathe 14s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .js .reveal,.js .reveal.in{opacity:1;transform:none;transition:none}
  .js .hero-scene h1.reveal,.js .ed-copy h1.reveal{animation:none}
  .js .unmask img,.js .unmask.in img{clip-path:none;transition:none}
  .js .statement .scene-media img,.js .pullscene .scene-media img{animation:none}
}


/* Hormones hero: keep the cyclists heads in frame at every width (no parallax up-shift) */
.hero-banner .scene-media img.hero-img-full{height:100%;top:0;object-position:center 22%}


/* ===== Larger, more legible type for older patients (client request) ===== */
body{font-size:17px}
.measure{font-size:1.1rem;line-height:1.7}
.hero-sub{font-size:clamp(1.12rem,1.6vw,1.3rem)}
.hero-capsule{font-size:clamp(1.12rem,1.6vw,1.3rem)}
.feeling-lead{font-size:1.16rem;line-height:1.72}
.px-lead{font-size:clamp(1.14rem,1.7vw,1.34rem)}
.prose p,.prose li{font-size:1.08rem;line-height:1.78}
.faq-a{font-size:1.05rem;line-height:1.7}
.faq summary{font-size:1.06rem}
.svc-card-body p,.cause-card p,.svc-tile p,.dir-card p,.mirror-card p{font-size:15.5px;line-height:1.62}
.care-step p{font-size:15.5px}
.step p{font-size:15px}
.prov-bio{font-size:15.5px;line-height:1.6}
.symlist li{font-size:16.5px}
.chev-cols li{font-size:16.5px}
.learn-grid li{font-size:16px}
.ginput_container input,.ginput_container select,.ginput_container textarea,.lead-form input,.lead-form select,.lead-form textarea{font-size:16.5px}
.gfield_label,.gform-field-label{font-size:16px}
.ia-footer-nav a{font-size:15px}

/* de-inlined from hormones v4 mockup */
.ix-46{max-width:1680px}
.ix-47{justify-content:center;margin-top:36px}
.ix-48{margin-top:48px}
.ix-49{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.ix-50{margin-top:64px}
.ix-51{margin-top:56px}
.ix-52{max-width:1600px;padding:0 40px}


/* ===== +2px bump on eyebrows, all headings, and paragraphs (client request) ===== */
/* Eyebrows / kickers (+2px) */
.eyebrow{font-size:15px}
.px-eyebrow{font-size:14px}
.dr-eyebrow{font-size:14px}
.hero-kicker{font-size:15px}
.ov-note-k{font-size:13px}
.loc-split .loc-kicker{font-size:14px}

/* Headings (+2px  ~ +0.125rem on clamp) */
.section-h,.fb-h,.statement h2,.prov-head h2{font-size:clamp(2.025rem,4vw,2.825rem)}
.split-h{font-size:clamp(1.725rem,2.8vw,2.425rem)}
.hero-scene h1{font-size:clamp(2.825rem,6.4vw,4.725rem)}
.hero-banner h1{font-size:clamp(2.525rem,5.2vw,4.025rem)}
.dr-hero h1{font-size:clamp(2.625rem,5vw,4.125rem)}
.ed-copy h1{font-size:clamp(2.625rem,5.6vw,4.125rem)}
.prov-body h3{font-size:clamp(1.625rem,2.8vw,2.175rem)}
.loc-name{font-size:clamp(1.825rem,3.4vw,2.525rem)}
.loc-split .loc-name{font-size:clamp(2.225rem,4vw,3.225rem)}
.pullscene blockquote{font-size:clamp(2.125rem,5.2vw,3.725rem)}
.review-card blockquote{font-size:1.345rem}
.svc-card-body h3{font-size:1.425rem}
.svc-tile h3{font-size:clamp(1.275rem,1.5vw,1.525rem)}
.dir-card h3{font-size:1.265rem}
.cause-card h3{font-size:1.205rem}
.step h3{font-size:18px}
.care-step h3{font-size:20px}
.prose h2{font-size:calc(1em + 2px)}

/* Paragraphs / body copy (+2px) */
body{font-size:19px}
.measure{font-size:1.225rem}
.hero-sub{font-size:clamp(1.245rem,1.6vw,1.425rem)}
.hero-capsule{font-size:clamp(1.245rem,1.6vw,1.425rem)}
.feeling-lead{font-size:1.285rem}
.px-lead{font-size:clamp(1.265rem,1.7vw,1.465rem)}
.prose p,.prose li{font-size:1.205rem}
.faq-a{font-size:1.175rem}
.faq summary{font-size:1.185rem}
.svc-card-body p,.cause-card p,.svc-tile p,.dir-card p,.mirror-card p{font-size:17.5px}
.care-step p{font-size:17.5px}
.step p{font-size:17px}
.prov-bio{font-size:17.5px}
.symlist li{font-size:18.5px}
.chev-cols li{font-size:18.5px}
.learn-grid li{font-size:18px}


/* ===== v4 mockup components (goals accordion, section CTA, chev-2) — with larger fonts ===== */
.sec-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}
.sec-cta .btn{justify-content:center}
@media (max-width:520px){.sec-cta{flex-direction:column;align-items:stretch}}

.split-sublist .chev-cols.chev-2{grid-template-columns:1fr 1fr;gap:0 26px}
.split-sublist .chev-cols.chev-2 li{padding:9px 0 9px 26px;font-size:17px}
.split-sublist .chev-cols.chev-2 li::before{top:9px}
@media (max-width:640px){.split-sublist .chev-cols.chev-2{grid-template-columns:1fr}}

.goal-acc{max-width:1600px;margin:20px auto 0}
.goal-acc details{border-top:1px solid rgba(28,40,67,.16)}
.goal-acc details:last-of-type{border-bottom:1px solid rgba(28,40,67,.16)}
.goal-acc summary{list-style:none;cursor:pointer;padding:20px 46px 20px 0;position:relative;font-family:"Prata",Georgia,serif;font-size:clamp(1.2rem,1.6vw,1.42rem);color:var(--navy);line-height:1.3;transition:color .25s}
.goal-acc summary:hover{color:var(--teal)}
.goal-acc summary::-webkit-details-marker{display:none}
.goal-acc summary::after{content:"+";position:absolute;right:4px;top:17px;color:var(--teal);font-size:1.7rem;line-height:1;font-family:"Poppins",sans-serif}
.goal-acc details[open] summary{color:var(--teal)}
.goal-acc details[open] summary::after{content:"–"}
.goal-acc-body{display:grid;grid-template-columns:340px 1fr;gap:30px;padding:0 0 28px;align-items:start}
.goal-acc-media{margin:0;overflow:hidden}
.goal-acc-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.goal-acc-copy p{color:var(--gray-sm);font-size:17px;line-height:1.72;margin:0 0 12px}
.goal-acc-copy p:last-child{margin-bottom:0}
@media (max-width:760px){.goal-acc-body{grid-template-columns:1fr;gap:16px}.goal-acc-media img{aspect-ratio:16/10}}


/* ===== All paragraphs 20px (older-reader readability); fine print protected ===== */
p{font-size:20px;line-height:1.65}
.prose p,.measure,.faq-a,.svc-card-body p,.cause-card p,.svc-tile p,.dir-card p,.step p,.care-step p,.prov-bio,.goal-acc-copy p{font-size:20px;line-height:1.65}
.footer-legal p{font-size:13px;line-height:1.6}
.lf-fine{font-size:11.5px}
.rv-meta{font-size:13.5px}
.gform_description{font-size:15px}

/* ===== Grid card headings +4px ===== */
.svc-card-body h3{font-size:1.675rem}
.svc-tile h3{font-size:clamp(1.525rem,1.6vw,1.775rem)}
.dir-card h3{font-size:1.515rem}
.cause-card h3{font-size:1.455rem}
.prov-body h3{font-size:clamp(1.875rem,2.8vw,2.425rem)}
.step h3{font-size:22px}
.care-step h3{font-size:24px}

/* ===== Responsive scaling for recent large custom values ===== */
.hrt-foot{font-size:clamp(17px,2.6vw,25px);line-height:1.5}
.hrt-col h3{font-size:clamp(1.4rem,3.2vw,1.8rem)}


/* ===== Readability floor: enlarge secondary/support text for older readers ===== */
.trust-txt{font-size:16px}
.trust-src{font-size:14px}
.cap-tag{font-size:14px}
.prov-role{font-size:16px}
.loc-nap{font-size:17px}
.loc-hours{font-size:15.5px}
.ia-footer-nav a{font-size:16px}
.footer-brand p{font-size:16px}
.crumbs .wrap{font-size:14px}
.ov-fact-l{font-size:14px}
.svc-card-go{font-size:15px}
.svc-tile-go{font-size:15px}
.dir-link{font-size:15px}
.svc-tile h3 .tag{font-size:14px}
.dr-stat-l{font-size:14.5px}
.review-src{font-size:15px}


/* ===== Typography recalibration (readable + balanced; ref: Pons scale, body kept large for older readers) ===== */
/* Body copy — generous for older readers */
p{font-size:20px;line-height:1.7}
.prose p,.prose li,.measure,.faq-a,.svc-card-body p,.cause-card p,.svc-tile p,.dir-card p,.step p,.care-step p,.prov-bio,.goal-acc-copy p{font-size:20px;line-height:1.7}
.hero-sub,.hero-capsule{font-size:clamp(1.2rem,1.5vw,1.35rem)}
.feeling-lead{font-size:1.3rem}
.px-lead{font-size:clamp(1.075rem,1.6vw,1.275rem)}
/* Headings — sensible, not over-inflated */
.hero-scene h1{font-size:clamp(2.6rem,5.6vw,4rem)}
.hero-banner h1{font-size:clamp(2.25rem,4.6vw,3.4rem)}
.dr-hero h1{font-size:clamp(2.35rem,4.8vw,3.6rem)}
.ed-copy h1{font-size:clamp(2.35rem,5vw,3.6rem)}
.section-h,.fb-h,.statement h2,.prov-head h2{font-size:clamp(1.95rem,3vw,2.55rem)}
.split-h{font-size:clamp(1.7rem,2.6vw,2.2rem)}
.prov-body h3{font-size:clamp(1.55rem,2.4vw,2rem)}
.loc-name{font-size:clamp(2rem,3.4vw,2.9rem)}
.loc-split .loc-name{font-size:clamp(2rem,3.4vw,2.9rem)}
.pullscene blockquote{font-size:clamp(2rem,4.6vw,3.2rem)}
.review-card blockquote{font-size:1.32rem}
/* Grid card titles — readable and prominent (~21-24px) */
.svc-card-body h3{font-size:1.45rem}
.svc-tile h3{font-size:clamp(1.3rem,1.5vw,1.55rem)}
.dir-card h3{font-size:1.4rem}
.cause-card h3{font-size:1.35rem}
.step h3{font-size:19px}
.care-step h3{font-size:20px}
.goal-acc summary{font-size:clamp(1.25rem,1.5vw,1.45rem)}


/* ===== p -2px (20 -> 18) + larger reviewer credit & highlights (client) ===== */
p{font-size:18px;line-height:1.7}
.prose p,.prose li,.measure,.faq-a,.svc-card-body p,.cause-card p,.svc-tile p,.dir-card p,.step p,.care-step p,.prov-bio,.goal-acc-copy p{font-size:18px;line-height:1.7}
.reviewer .rv-meta,.reviewer-inline .rv-meta,.rv-meta{font-size:16px;line-height:1.6}
.about-highlights li{font-size:18px}


/* hormones.html: locations section heading band -> white */
body[data-page-family="treatment"] .loc-intro{background:#fff}


/* ===================================================================
   CONSISTENT PARAGRAPH TYPE — every body/lead paragraph = 18px site-wide
   (true fine-print / credits keep their own smaller class sizes)
   =================================================================== */
p{font-size:18px;line-height:1.7}
.prose p,.prose li,.measure,.faq-a,
.hero-sub,.hero-capsule,.feeling-lead,.px-lead,
.svc-card-body p,.cause-card p,.svc-tile p,.dir-card p,.mirror-card p,
.step p,.care-step p,.prov-bio,.goal-acc-copy p,.loc-intro-lead,
.split-copy p,.about-split p,.aside-card p,.final-cta p,.closing-solo p,.svc-cta-card p
{font-size:18px;line-height:1.7}
/* protect genuine fine print */
.footer-legal p{font-size:13px;line-height:1.6}
.lf-fine{font-size:11.5px}
.gform_description{font-size:15px}


/* ===================================================================
   PARAGRAPH TYPE (final, consistent):
   cards / tiles / grid boxes = 16px   |   all other paragraphs = 18px
   =================================================================== */
p{font-size:18px;line-height:1.7}
.prose p,.prose li,.measure,.faq-a,.hero-sub,.hero-capsule,.feeling-lead,.px-lead,
.loc-intro-lead,.split-copy p,.about-split p,.closing-solo p,.final-cta p{font-size:18px;line-height:1.7}
/* inside cards / tiles / grid boxes -> 16px */
.svc-card-body p,.svc-tile p,.dir-card p,.cause-card p,.mirror-card p,
.step p,.care-step p,.prov-bio,.goal-acc-copy p,.aside-card p,.svc-cta-card p,.fb-copy p{font-size:18px;line-height:1.65}
/* fine print */
.footer-legal p{font-size:13px;line-height:1.6}
.lf-fine{font-size:11.5px}
.gform_description{font-size:15px}


/* ===== Content list items = 16px (navigation menus excluded) ===== */
.prose li,.symlist li,.chev-cols li,.learn-grid li{font-size:16px;line-height:1.6}
.split-sublist .chev-cols.chev-2 li{font-size:16px}


/* content lists missed earlier -> 16px */
.goal-grid li,.chk-results-list li{font-size:16px;line-height:1.6}


/* Phone-number call buttons stay on one line */
.calllink{white-space:nowrap}


/* Scene hero images carrying .px-bg must fill the whole scene (no navy gap at the bottom) */
.scene-media > img.px-bg{position:absolute;inset:0;top:0;bottom:0;width:100%;height:100%;object-fit:cover}
.hero-banner .scene-media > img.px-bg{height:122%;top:-11%;bottom:auto}
.hero-banner .scene-media > img.px-bg.hero-img-full{height:100%;top:0}


/* ---- Button rows keep two across on phones ----
   A single column of full-width buttons pushed the next section off the first
   screen; two per row keeps the pair together and lets a third wrap. */
@media (max-width:600px){
  /* One gap for every button row, because the half-width basis below has to
     subtract it — a row that kept its own wider gap overflowed by a pixel or
     two and dropped its second button onto a line of its own. */
  .cta-row,
  .sec-cta,
  .prov-head-cta,
  .gallery-head-cta,
  .svc-cta-actions,
  .final-actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}
  .cta-row > .btn,
  .sec-cta > .btn,
  .prov-head-cta .btn,
  .gallery-head-cta .btn,
  .svc-cta-actions > .btn,
  .final-actions > .btn{flex:1 1 calc(50% - 6px);min-width:0;justify-content:center;text-align:center}
  /* The final CTA stacks by design; on phones the two clinic numbers pair up
     under the full-width primary. With only two buttons they simply pair. */
  .final-actions > .btn:first-child:nth-last-child(n+3){flex-basis:100%}
  /* A 44px inset costs a quarter of a small phone's width, which is what
     pushed the clinic numbers past the edge of their own buttons. */
  .final-cta{padding:32px 22px}
  /* Narrower gutters keep a nowrap phone number inside its half-width button,
     and stretching the row makes a one-line label match a two-line one instead
     of floating at a different height beside it. */
  .cta-row,
  .sec-cta,
  .gallery-head-cta,
  .svc-cta-actions,
  .final-actions{align-items:stretch}
  .cta-row > .btn,
  .sec-cta > .btn,
  .prov-head-cta .btn,
  .gallery-head-cta .btn,
  .svc-cta-actions > .btn,
  .final-actions > .btn{padding-left:5px;padding-right:5px}
  /* The checker panel's own inset is wider than the other CTA blocks, which is
     what left its pair of buttons too little room to sit side by side. */
  .svc-cta-card{padding:32px 22px}
  /* One step down so a two-word label stays on a single line at half width. */
  .btn{font-size:13px}

  /* The checker's step footer holds Back and the submit side by side and does
     not wrap, so on the narrowest phones the submit ran off the edge and was
     clipped — not scrollable, just cut. Two across, like every other pair. */
  .checker .gform_page_footer,
  .checker .gform-page-footer,
  .checker .gform_footer,
  .checker .gform-footer{flex-wrap:wrap;gap:12px}
  .checker .gform_page_footer > .btn,
  .checker .gform-page-footer > .btn,
  .checker .gform_footer > .btn,
  .checker .gform-footer > .btn{flex:1 1 calc(50% - 6px);min-width:0;margin-left:0;justify-content:center;text-align:center}

  /* site.js adds .is-split to a row only when a sibling label genuinely wraps;
     the number then takes its own line so the pair reads as an even block.
     A .btn is a flex container, so the number needs a full-width flex basis —
     display:block alone would leave it sitting beside the words. */
  .btn .btn-num{white-space:nowrap}
  .is-split .btn{flex-wrap:wrap}
  .is-split .btn .btn-num{flex:0 0 100%;text-align:center}
  .cta-row > .btn.calllink,
  .sec-cta > .btn.calllink,
  .final-actions > .btn.calllink{white-space:normal}

  /* Three proof cells across one row. The readability floor above sets 16px
     unconditionally, which is wider than a third of a phone can carry, so it is
     eased back here only — and the cells align to the top so the three numbers
     sit on the same line instead of drifting with their copy length. */
  .trust .wrap{align-items:flex-start}
  .trust-cell{justify-content:flex-start}
  .trust-txt{font-size:14px;line-height:1.35}
  .trust-src{font-size:12px;line-height:1.3}

  /* The strip the sticky bar sits over belongs to the footer, so when the bar
     tucks away at the end of the page the space left behind is footer navy
     rather than a white band under it. */
  body{padding-bottom:0}
  .footer{padding-bottom:70px}

  /* A single narrow column reads better centred, and the addresses and phone
     numbers — the two things people reach for from a phone — are set larger
     than the surrounding copy. */
  .footer .ia-footer-nav,
  .footer-top,
  .footer-legal{text-align:center}
  .footer-brand p{margin-left:auto;margin-right:auto}
  .footer-brand .brand-logo{margin-left:auto;margin-right:auto}
  .footer address{font-size:16px;line-height:1.8}
  .footer address a{font-size:18px}
  .footer-legal{justify-content:center}
  .footer-legal p{margin-left:auto;margin-right:auto}
  .footer-social{justify-content:center}
}
@media (max-width:340px){
  /* A phone number will not hyphenate, so on the narrowest phones the type
     comes down one more step rather than letting the digits spill. */
  .btn{font-size:12px}
}
@media (max-width:300px){
  /* Narrower than any shipping phone — the last resort before labels break
     mid-word. Everything from 320px up stays two across. */
  .cta-row > .btn,
  .sec-cta > .btn,
  .prov-head-cta .btn,
  .gallery-head-cta .btn,
  .final-actions > .btn{flex:1 1 100%}
}

/* ==========================================================================
   CMS-introduced components (blog, deep menus, logo image, menu states).
   Kept here so the static build and the WordPress theme share one stylesheet.
   ========================================================================== */

/* ---- Brand logo image (replaces the CSS-drawn wordmark) ---- */
.brandmark-img{display:flex;align-items:center;text-decoration:none}
/* On a full desktop the logo is sized by its width, so the wordmark reads at the
   scale the artwork was drawn for. Below that the fixed height comes back, because
   a width-driven logo starts crowding the navigation. */
.brandmark-img .brand-logo{display:block;width:auto;max-width:280px}
.footer-brand .brand-logo{display:block;width:auto;max-width:260px;margin-bottom:18px}

@media (max-width:1440px){
  .brandmark-img .brand-logo{height:46px}
  .footer-brand .brand-logo{height:44px}
}

@media (max-width:900px){
  .brandmark-img .brand-logo{height:38px;max-width:220px}
}
@media (max-width:600px){
  .brandmark-img .brand-logo{height:34px;max-width:190px}
}

/* ---- Menu states WordPress adds that the static build had baked in ---- */
.menu .current-menu-item > a,
.menu .current-menu-ancestor > a,
.menu .current-page-ancestor > a{color:var(--teal,#2c7a8c)}
.ia-footer-nav a.is-current{color:#ffffff}

/* ---- Images must be sized by the CSS, not by WordPress's attributes ----
   wp_get_attachment_image() prints width/height on every image. The height
   attribute is a presentational hint, so it wins over the design's
   aspect-ratio and the photo renders at its natural height instead of the
   framed crop. The static build carries no height attribute on content
   images, so let the stylesheet decide; anything with its own CSS height
   (.px-bg, logos) has a class rule and is unaffected. */
img{height:auto}

/* ============================================================
   Blog — the static build has no blog, so these are the only
   WordPress-introduced components. They reuse the design's
   tokens, spacing scale and card language so posts sit inside
   the same visual system as the rest of the site.
   ============================================================ */

/* ---- post grid ---- */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
@media (max-width:1000px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.post-grid{grid-template-columns:1fr}}

.post-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(28,40,67,.14);overflow:hidden;transition:transform .35s var(--ease-quart),box-shadow .35s var(--ease-quart),border-color .35s}
/* The title link covers the card, so the whole card is clickable while the
   category chip above it stays its own link. */
.post-card-link{color:inherit;text-decoration:none}
.post-card-link::after{content:"";position:absolute;inset:0;z-index:1}
.post-card .post-meta{position:relative;z-index:2}
.post-card:focus-within{border-color:var(--teal)}
.post-card:hover{transform:translateY(-5px);box-shadow:0 34px 64px -42px rgba(28,40,67,.5);border-color:rgba(46,106,121,.4)}
.post-card-media{aspect-ratio:16/10;overflow:hidden;background:var(--mist,#eef3f5)}
.post-card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-quart)}
.post-card:hover .post-card-media img{transform:scale(1.04)}
.post-card-body{display:flex;flex-direction:column;gap:10px;padding:26px 26px 24px;flex:1}
.post-card-body h2,.post-card-body h3{font-family:"Prata",Georgia,serif;font-size:1.24rem;line-height:1.3;color:var(--navy);margin:0}
.post-card-body p{margin:0;color:var(--gray-sm);line-height:1.6}
.post-card-go{margin-top:auto;padding-top:14px;font-weight:600;letter-spacing:.02em;color:var(--teal)}

/* ---- post meta ---- */
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--gray-sm);font-size:14px}
.post-meta a{color:var(--teal);text-decoration:none}
.post-meta a:hover{text-decoration:underline}
.post-meta .sep{opacity:.5}
.post-cat{display:inline-block;padding:5px 12px;border:1px solid rgba(46,106,121,.35);border-radius:999px;color:var(--teal);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.post-cat:hover{background:var(--teal);color:#fff}

/* ---- single post ---- */
.post-hero-media{margin:0 0 30px;overflow:hidden}
.post-hero-media img{width:100%;height:auto;display:block}
.post-body p{margin:0 0 1.1em}
.post-body h2{font-family:"Prata",Georgia,serif;font-size:clamp(1.5rem,2.4vw,2rem);color:var(--ink);margin:42px 0 14px}
.post-body h3{font-family:"Poppins",sans-serif;font-weight:600;font-size:1.15rem;color:var(--navy);margin:28px 0 8px}
.post-body ul,.post-body ol{margin:0 0 1.2em;padding-left:1.25em}
.post-body li{margin:0 0 .5em;line-height:1.7}
.post-body li::marker{color:var(--teal)}
.post-body blockquote{margin:26px 0;padding:22px 26px;background:var(--mist,#eef3f5);border-left:3px solid var(--teal);font-family:"Prata",Georgia,serif;font-size:1.15rem;line-height:1.5;color:var(--navy)}
.post-body img{height:auto;margin:26px 0}
.post-body a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.post-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;padding-top:24px;border-top:1px solid rgba(28,40,67,.12)}

/* ---- pagination ---- */
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:44px}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;padding:0 14px;border:1px solid rgba(28,40,67,.18);color:var(--navy);text-decoration:none;font-weight:600;transition:background .3s,color .3s,border-color .3s}
.pager .page-numbers:hover{border-color:var(--teal);color:var(--teal)}
.pager .page-numbers.current{background:var(--teal);border-color:var(--teal);color:#fff}
.pager .page-numbers.dots{border-color:transparent}

/* ---- search form ---- */
.search-form{display:flex;gap:10px;max-width:520px}
.search-form input[type="search"]{flex:1;min-width:0;padding:14px 16px;border:1px solid rgba(28,40,67,.25);background:#fff;font:inherit;color:var(--ink)}
.search-form input[type="search"]:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(46,106,121,.15)}
.search-empty{margin-top:18px}

/* ---- comments ---- */
.comments{margin-top:52px;padding-top:34px;border-top:1px solid rgba(28,40,67,.12)}
.comments h2{font-family:"Prata",Georgia,serif;font-size:1.5rem;color:var(--navy);margin:0 0 22px}
.comment-list{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:20px}
.comment-list .children{list-style:none;margin:20px 0 0 26px;padding:0;display:grid;gap:20px}
.comment-body{background:#fff;border:1px solid rgba(28,40,67,.14);padding:22px 24px}
.comment-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:10px;font-size:14px;color:var(--gray-sm)}
.comment-author{font-weight:600;color:var(--navy)}
.comment-form{display:grid;gap:14px;max-width:640px}
.comment-form label{font-weight:600;color:var(--navy);font-size:14px}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{width:100%;padding:13px 15px;border:1px solid rgba(28,40,67,.25);background:#fff;font:inherit;color:var(--ink)}
.comment-form textarea{min-height:150px;resize:vertical}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(46,106,121,.15)}
.comment-notes,.comment-form .form-submit{margin:0}

/* ---- empty state ---- */
.blog-empty{max-width:60ch;color:var(--gray-sm)}

/* ---- Menus deeper than the design's two levels ----
   The static build's nav is two levels; WordPress menus can be any depth, so
   anything below the first drop-down opens as a flyout to the side instead of
   stacking on top of its parent. The off-canvas mobile menu nests on its own. */
.nav .sub-menu .sub-menu{
  position:absolute;
  top:0;
  left:100%;
  margin:0;
  min-width:220px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s var(--ease-quart),visibility .25s;
}
.nav .sub-menu > .menu-item{position:relative}
.nav .sub-menu > .menu-item:hover > .sub-menu,
.nav .sub-menu > .menu-item:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
/* A deep branch near the right edge opens leftward. */
.nav > .menu > .menu-item:last-child .sub-menu .sub-menu,
.nav > .menu > .menu-item:nth-last-child(2) .sub-menu .sub-menu{left:auto;right:100%}

/* ---- WordPress admin bar ----
   Inert unless a logged-in admin is viewing the page (WordPress puts
   .admin-bar on <body>), so it lives here with everything else rather than in
   a second stylesheet. WordPress already clears its own bar with
   html{margin-top:32px} and the utility strip rides in that flow — offsetting
   it again left a white band under the admin bar. The header is the element
   that needs it, being position:sticky at top:0. */
.admin-bar .header{top:32px}
@media screen and (max-width:782px){
  /* WordPress's bar is 46px here and stops being fixed once the page scrolls,
     so the sticky header returns to the very top. */
  .admin-bar .header{top:0}
}

/* ==========================================================================
   Lab panel assessment (lab-assessment.html)
   A branching questionnaire that recommends a lab panel. It shares the symptom
   checker's visual language but keeps its own .la-* classes so the two tools
   can be restyled independently — and so the checker's .checker box rule is
   never applied twice when this is ported to a Gravity Form.
   ========================================================================== */
.la-shell{max-width:960px;margin:0 auto;background:#fff;border:1px solid var(--navy);box-shadow:0 34px 80px -48px rgba(28,40,67,.6);padding:clamp(28px,4vw,52px)}
.la-steps{list-style:none;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 30px;padding:0}
.la-steps li{font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--gray-sm);padding:10px 15px;border:1px solid rgba(28,40,67,.16);transition:color .3s,background-color .3s,border-color .3s}
.la-steps li.on{color:#fff;background:var(--teal);border-color:var(--teal)}
.la-steps li.done{color:var(--teal);border-color:var(--teal)}
.la-shell .gform_body,.la-shell .gform_fields{margin:0;padding:0;list-style:none}
.la-shell .gfield{margin:0}
.la-shell .gfield[hidden],.la-step[hidden],.la-exit[hidden],.la-note[hidden]{display:none}
.la-shell .gform_page_fields{margin:0}
.la-shell .gform_page_footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px}
.la-shell .gform_page_footer .gform_next_button{margin-left:auto}
/* Scoped to .la-field: only the assessment's own questions read as display
   headings. The contact fields under the result keep the site's form labels. */
.la-shell .la-field>.gfield_label{display:block;font-family:"Prata",Georgia,serif;font-weight:400;font-size:clamp(1.32rem,2.5vw,1.9rem);color:var(--navy);text-align:center;letter-spacing:0;text-transform:none;margin:0 0 8px}
.la-shell .la-field>.gfield_description{text-align:center;color:var(--gray-sm);font-size:14px;margin:0 0 24px}

/* ---- choice grids (radio + checkbox share one look) ---- */
.la-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.la-grid--3{grid-template-columns:repeat(3,1fr)}
.la-grid .gchoice{position:relative;display:flex;align-items:center;gap:12px;margin:0;padding:16px 18px;border:1px solid rgba(28,40,67,.22);background:#fff;transition:border-color .2s,background-color .2s}
.la-grid .gchoice:hover{border-color:var(--teal)}
.la-grid .gchoice:has(.gfield-choice-input:checked){border-color:var(--teal);background:var(--mist-2)}
/* padding:0 is load-bearing — the generic .ginput_container input rule sets
   12px 14px, and with border-box that inflates the 20px box to 30x26, which
   turns the radio into an ellipse. */
.la-grid .gfield-choice-input{appearance:none;-webkit-appearance:none;margin:0;padding:0;flex:none;width:20px;height:20px;border:1px solid rgba(28,40,67,.35);background:#fff;cursor:pointer;transition:.18s}
.la-grid .gfield-choice-input:checked{border-color:var(--teal);background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.la-grid .gfield-choice-input[type="radio"]{border-radius:50%}
.la-grid .gfield-choice-input[type="radio"]:checked{background-image:none;box-shadow:inset 0 0 0 4px #fff}
.la-grid .gfield-choice-input:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.la-grid .gchoice label{margin:0;cursor:pointer;font-size:15px;font-weight:400;letter-spacing:0;line-height:1.45;text-transform:none;color:var(--ink);-webkit-user-select:none;user-select:none}
/* The whole tile is the target, not just the words. The label is stretched over
   the choice with a pseudo-element, so a click anywhere in the box ticks it and
   nobody has to hunt for the control. */
.la-grid .gchoice label::after{content:"";position:absolute;inset:0;cursor:pointer}

/* Step 1 reads as two tiles; the glyphs come from CSS so the choice text stays
   plain (Gravity Forms escapes HTML inside a choice label). */
/* Step one is a segmented control, the same switch the symptom checker uses for
   gender: one bordered strip, the chosen half filled. The input is taken out of
   the flow and the label becomes the control, so the whole half is clickable and
   a keyboard focus ring still lands on it. */
.la-grid--sex{grid-template-columns:1fr 1fr;gap:0;max-width:520px;margin:0 auto;border:1px solid var(--navy);padding:6px;background:var(--mist)}
.la-grid--sex .gchoice,
.la-grid--sex .gchoice:hover,
.la-grid--sex .gchoice:has(.gfield-choice-input:checked){display:block;margin:0;padding:0;border:0;background:none}
.la-grid--sex .gfield-choice-input{position:absolute;width:1px;height:1px;opacity:0;margin:0;padding:0;border:0}
.la-grid--sex .gchoice label{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;padding:16px 20px;cursor:pointer;font-weight:600;font-size:1.05rem;letter-spacing:.03em;line-height:1.3;color:var(--navy);text-align:center;transition:background-color .25s var(--ease-quart),color .25s}
.la-grid--sex .gchoice label::after{content:none}
.la-grid--sex .gchoice label:hover{color:var(--teal)}
.la-grid--sex .gfield-choice-input:checked + label{background:var(--teal);color:#fff}
.la-grid--sex .gfield-choice-input:focus-visible + label{outline:3px solid var(--sky);outline-offset:-3px}
/* The step heading is focused programmatically so screen readers follow the
   flow; a visible ring there would read as an editable box. */
.la-shell [tabindex="-1"]:focus{outline:none}
.la-grid--age{grid-template-columns:repeat(5,1fr)}
.la-grid--age .gchoice{flex-direction:column;text-align:center;gap:10px;padding:22px 12px}
.la-grid--age .gchoice label{font-weight:600;color:var(--navy)}

.la-note{margin:18px 0 0;text-align:center;color:#a33b3b;font-size:14px}
.la-fine{font-size:12.5px;line-height:1.6;color:var(--gray-sm);margin:18px 0 0}
.la-back{background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-sm);cursor:pointer;transition:color .2s}
.la-back:hover{color:var(--teal)}
.la-back:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* ---- result + pregnancy exit ---- */
.la-result,.la-exit{animation:chkFade .35s var(--ease-quart)}
.la-result-tag{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0 0 12px}
.la-result-h{font-family:"Prata",Georgia,serif;font-weight:400;font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.2;color:var(--navy);margin:0 0 16px}
.la-lede{color:var(--gray-sm);font-size:1.02rem;margin:0}
.la-lede + .la-lede{margin-top:1em}
.la-block{margin-top:26px;padding:22px 26px;background:var(--mist);border-left:4px solid var(--teal)}
.la-block h3{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:0 0 12px;font-family:"Poppins",sans-serif}
.la-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.la-list li{position:relative;padding-left:26px;color:var(--navy);font-size:16px;line-height:1.6}
.la-list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--teal);border-radius:50%}
.la-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}
.la-result-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(28,40,67,.14)}

/* ---- optional follow-up capture under the result ---- */
.la-lead{margin-top:26px;padding-top:26px;border-top:1px solid rgba(28,40,67,.14)}
.la-lead h3{font-family:"Prata",Georgia,serif;font-weight:400;font-size:1.4rem;color:var(--navy);margin:0 0 6px}
.la-lead p{color:var(--gray-sm);font-size:15px}
.la-lead .gform_fields{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.la-lead .gform_footer{margin-top:20px}
.la-thanks{padding:6px 0}
.la-thanks h3{font-family:"Prata",Georgia,serif;font-weight:400;font-size:1.5rem;color:var(--navy);margin:0 0 10px}
.la-thanks p{color:var(--gray-sm);margin:0}

/* ---- the three panels, explained on the page itself ---- */
.la-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.la-panel-card{background:#fff;border:1px solid rgba(28,40,67,.16);padding:32px 30px;display:flex;flex-direction:column;transition:border-color .3s var(--ease-quart),transform .3s var(--ease-quart),box-shadow .3s var(--ease-quart)}
.la-panel-card:hover{border-color:var(--teal);transform:translateY(-4px);box-shadow:0 26px 60px -40px rgba(28,40,67,.7)}
.la-panel-card .la-panel-n{font-family:"Prata",Georgia,serif;font-size:1.1rem;color:var(--teal);margin:0 0 14px;display:block}
.la-panel-card h3{font-family:"Prata",Georgia,serif;font-size:1.45rem;color:var(--navy);margin:0 0 12px;line-height:1.25}
.la-panel-card p{color:var(--gray-sm);font-size:15px}
.la-panel-card .la-list li{font-size:15px}

@media (max-width:1024px){
  .la-panels{grid-template-columns:1fr}
  .la-lead .gform_fields{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .la-grid--3{grid-template-columns:repeat(2,1fr)}
  .la-grid--age{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:620px){
  .la-grid,.la-grid--3,.la-grid--age,.la-lead .gform_fields{grid-template-columns:1fr}
  .la-grid--sex{grid-template-columns:1fr 1fr}
  /* Stacked in one column, the age tiles read as rows like every other question
     rather than five tall cards the visitor has to scroll past. */
  .la-grid--age .gchoice{flex-direction:row;text-align:left;padding:16px 18px}
  .la-shell .gform_page_footer{flex-direction:column-reverse;align-items:stretch}
  .la-shell .gform_page_footer .btn{justify-content:center}
  .la-actions .btn{width:100%;justify-content:center}
}
@media (max-width:420px){
  /* At full size the five pills stack one per row on a small phone and push the
     question off screen, so they tighten up rather than wrap five deep. */
  .la-steps{gap:6px;margin-bottom:24px}
  .la-steps li{font-size:11px;letter-spacing:.05em;padding:8px 10px}
  .la-shell{padding:24px 18px}
}

/* ============================================================== PRICE LIST
   Menu-style pricing for the IV/NAD page and the wellness day pass. The client
   publishes these numbers on hormonesbysdb.com and confirmed them as current
   (Basecamp, Aug 14), so they are shown rather than hidden behind a call. */
.pricelist{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;list-style:none;margin:0;padding:0}
.price-row{background:#fff;border:1px solid rgba(28,40,67,.16);padding:26px 28px;display:flex;flex-direction:column;
  transition:border-color .3s var(--ease-quart),transform .3s var(--ease-quart),box-shadow .3s var(--ease-quart)}
.price-row:hover{border-color:var(--teal);transform:translateY(-3px);box-shadow:0 14px 34px rgba(28,40,67,.09)}
.price-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.price-head h3{font-family:"Prata",Georgia,serif;font-weight:400;font-size:1.35rem;color:var(--navy);margin:0;line-height:1.25}
.price-amt{font-family:"Prata",Georgia,serif;font-size:1.45rem;color:var(--teal);line-height:1;white-space:nowrap}
.price-row p{color:var(--gray-sm);font-size:15.5px;line-height:1.65;margin:0}
.price-row .price-note{margin-top:14px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--teal)}
.price-tag{display:inline-block;align-self:flex-start;margin-bottom:12px;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);background:rgba(46,106,121,.09);padding:5px 11px}
.price-foot{margin-top:32px;max-width:70ch;color:var(--gray-sm);font-size:15.5px;line-height:1.7}

/* Single injections: one card holding several priced lines instead of one price. */
.injection-list{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid rgba(28,40,67,.12)}
.injection-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid rgba(28,40,67,.09)}
.injection-list li:last-child{border-bottom:none;padding-bottom:0}
.inj-name{color:var(--navy);font-size:15.5px;font-weight:500}
.inj-amt{font-family:"Prata",Georgia,serif;font-size:1.15rem;color:var(--teal);line-height:1;white-space:nowrap}

/* Add-on boosters read as a row of chips, not another priced card. */
.boosters-block{margin-top:44px}
.boosters-block h3{font-family:"Prata",Georgia,serif;font-weight:400;font-size:1.5rem;color:var(--navy);margin:0 0 10px}
.boosters-block > p{max-width:64ch;color:var(--gray-sm);font-size:15.5px;line-height:1.7;margin:0}
.boosters{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:22px 0 0;padding:0}
.booster{background:#fff;border:1px solid rgba(28,40,67,.16);padding:12px 18px;font-size:15px;font-weight:500;color:var(--navy)}
.booster span{display:block;margin-top:3px;font-size:13px;font-weight:400;color:var(--gray-sm)}

@media (min-width:1400px){
  .price-head h3{font-size:1.5rem}
  .price-row p{font-size:17px}
  .boosters-block > p{font-size:17px}
  .price-foot{font-size:17px}
}
@media (max-width:760px){
  .pricelist{grid-template-columns:1fr}
  .price-row{padding:22px 20px}
  .price-head{gap:12px}
}

/* ================================================================ DAY PASS
   The Performance Pass from the printed pamphlet: one offer, one number, one
   booking route. Dark card so it reads as an offer rather than another tile. */
.daypass{background:var(--navy);color:#fff;padding:clamp(32px,5vw,60px);
  display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,4vw,56px);align-items:center}
.daypass .eyebrow{color:var(--sky)}
.daypass-copy h2{font-family:"Prata",Georgia,serif;font-weight:400;font-size:clamp(1.9rem,4vw,2.6rem);
  color:#fff;margin:0 0 16px;line-height:1.15}
.daypass-copy p{color:rgba(255,255,255,.84);font-size:17px;line-height:1.7;margin:0 0 14px;max-width:56ch}
.daypass-copy p strong{color:#fff}
.daypass-copy .daypass-fine{color:rgba(255,255,255,.6);font-size:14.5px;margin:0}
.daypass-price{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  border-left:1px solid rgba(255,255,255,.2);padding-left:clamp(24px,3vw,40px)}
.daypass-amt{font-family:"Prata",Georgia,serif;font-size:clamp(3rem,7vw,4.4rem);color:var(--sky);line-height:1}
.daypass-label{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin-bottom:8px}
.daypass-price .btn{width:100%;justify-content:center}

@media (max-width:860px){
  .daypass{grid-template-columns:1fr;gap:28px}
  .daypass-price{border-left:none;border-top:1px solid rgba(255,255,255,.2);
    padding-left:0;padding-top:28px;align-items:stretch;text-align:center}
  .daypass-amt{text-align:center}
}
@media (max-width:480px){
.ginput_recaptcha {transform:scale(0.77) !important;-webkit-transform:scale(0.77)!important;transform-origin:0 0 !important;-webkit-transform-origin:0 0 !important;}
.ginput_container.ginput_recaptcha.gform-initialized {transform:scale(0.77) !important;-webkit-transform:scale(0.77)!important;transform-origin:0 0 !important;-webkit-transform-origin:0 0 !important;}
}