/* ============ TOKENS — LifeBoost brand (from live site Elementor globals) ============
   primary #1C81C4 · accent #0065C0 · sky #BBE4FF · secondary #54595F · text #7A7A7A
   supporting sage #4F7661 / #EFF5FA · display Tenor Sans · body Public Sans
=================================================================================== */
:root{
  --ink:#0A3355;          /* deep navy derived from brand — headings, dark sections */
  --ink-2:#0065C0;        /* brand accent */
  --sea:#BBE4FF;          /* brand sky */
  --brass:#1C81C4;        /* BRAND PRIMARY — eyebrows, rules, markers, hovers */
  --brass-lt:#7FC0EE;     /* light brand blue for dark backgrounds */
  --sage:#4F7661;         /* brand supporting green */
  --surface:#F4F9FD;      /* pale brand-blue tint */
  --paper:#FFFFFF;
  --line:#DBE7F1;
  --body:#54595F;         /* brand secondary */
  --muted:#7A7A7A;        /* brand text grey */

  --display:"Tenor Sans",Georgia,serif;
  --ui:"Public Sans",system-ui,-apple-system,sans-serif;
  --mono:"Public Sans",system-ui,sans-serif;

  --wrap:1200px;
  --r:14px;
  --shadow:0 1px 2px rgba(10,51,85,.04),0 12px 32px -12px rgba(10,51,85,.16);
  --shadow-lg:0 2px 4px rgba(10,51,85,.05),0 28px 60px -24px rgba(10,51,85,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--surface);color:var(--body);
  font-family:var(--ui);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* height:auto is load-bearing: any <img> carrying width/height ATTRIBUTES alongside
   width:100% gets its intrinsic height honoured and the aspect ratio breaks. The
   provider photos rendered 459x632 from a 538x632 source — visibly stretched, and the
   93px of extra height was what made the hero look mis-spaced. Rules that set an
   explicit height (.brand__img, .prov__ph img, .pcard__ph img) are class-scoped and
   still win. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* Tenor Sans ships a single weight (400) — never ask for a bold it doesn't have */
h1,h2,h3{font-family:var(--display);color:var(--ink);font-weight:400;letter-spacing:-.005em;line-height:1.14;margin:0}
h1{font-size:clamp(2.3rem,4.8vw,3.7rem)}
h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
h3{font-size:1.24rem;line-height:1.3}

/* ============ FULL SERVICE INDEX ============ */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 34px}
.svc__grp{border-top:2px solid var(--brass);padding-top:18px}
.svc__h{font-size:1.08rem;margin-bottom:14px;color:var(--ink)}
.svc__l{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.svc__l a{
  text-decoration:none;font-size:.95rem;color:var(--body);display:inline-flex;align-items:baseline;gap:9px;
  transition:color .18s ease;
}
.svc__l a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--sea);flex:none;transform:translateY(-3px);transition:background .18s}
.svc__l a:hover{color:var(--brass)}
.svc__l a:hover::before{background:var(--brass)}
p{margin:0 0 1rem}

/* eyebrow = clinical label, mono */
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);margin:0 0 14px;display:flex;align-items:center;gap:10px;
}
.eyebrow::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--brass),transparent);opacity:.45}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ui);font-weight:600;font-size:.97rem;letter-spacing:.005em;
  padding:15px 26px;border-radius:100px;text-decoration:none;border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease;
  white-space:nowrap;
}
.btn--primary{background:var(--ink);color:#fff;box-shadow:0 10px 22px -12px rgba(10,51,85,.7)}
.btn--primary:hover{background:var(--brass);transform:translateY(-2px);box-shadow:0 16px 28px -14px rgba(28,129,196,.8)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:var(--brass);color:#fff}
.btn--wide{width:100%}
.btn:focus-visible{outline:3px solid var(--brass);outline-offset:3px}

/* ============ UTILITY BAR ============ */
.util{background:#072441;color:#BBD3E8;font-size:.8rem}
.util__in{display:flex;align-items:center;gap:22px;min-height:42px;flex-wrap:wrap}
.util__item{display:flex;align-items:center;gap:7px;font-family:var(--mono);letter-spacing:.03em}
.util__spacer{margin-left:auto;display:flex;gap:8px;align-items:center}
.util a{text-decoration:none}
.util__call{color:#fff;font-weight:600;font-family:var(--ui);letter-spacing:0}
.util__call:hover{color:var(--brass-lt)}
.dot{width:6px;height:6px;border-radius:50%;background:#5FBF8A;box-shadow:0 0 0 3px rgba(95,191,138,.2)}
.dot--closed{background:var(--brass-lt);box-shadow:0 0 0 3px rgba(28,129,196,.2)}

/* ============ HEADER ============ */
/* Navy header: LifeBoost only publish a WHITE logo, so the bar is built around it. */
.hdr{position:sticky;top:0;z-index:60;background:rgba(10,51,85,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.12)}
.hdr__in{display:flex;align-items:center;gap:34px;min-height:78px}
.hdr .nav a{color:#EAF3FA;opacity:.9}
.hdr .nav a:hover{opacity:1;color:#fff}
.hdr .nav a::after{background:var(--brass-lt)}
.hdr__phone{color:#fff}
.hdr__phone:hover{color:var(--brass-lt)}
.hdr .btn--primary{background:#fff;color:var(--ink);box-shadow:none}
.hdr .btn--primary:hover{background:var(--brass);color:#fff}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand__img{height:42px;width:auto}
/* footer sits on navy, so invert the light-background logo there */
.ft__brand img{height:44px;width:auto;filter:brightness(0) invert(1);opacity:.95}
/* flex-shrink:0 is load-bearing — with min-width:0 the nav box shrinks narrower than its
   own text and the last link ("Contact") overlaps the phone number to its right. */
.nav{display:flex;gap:17px;margin-left:4px;flex-shrink:0}
.hdr__in{gap:22px}
.hdr__cta{flex-shrink:0}
/* Seven nav items + logo + CTA leaves no room for a second phone number in this row.
   The utility bar directly above already shows it, the sticky bar covers mobile, and the
   footer repeats it — so the header phone is redundant, not a lost conversion path. */
.hdr__phone{display:none}
@media (max-width:1180px){ .nav{gap:15px} .nav a{font-size:.88rem} }
/* six items now — keep each on one line or the header grows to two rows */
.nav a{text-decoration:none;font-size:.94rem;font-weight:500;color:var(--ink);opacity:.82;position:relative;padding:4px 0;white-space:nowrap}
/* Scope the white current-page colour to TOP-LEVEL nav links only. Unscoped, it also
   hit links inside the dropdown — where the background is near-white — rendering the
   current page's own menu item as white-on-white. */
.hdr .nav > a[aria-current="page"],
.hdr .nav > .nav__item > a[aria-current="page"]{opacity:1;color:#fff}
.hdr .nav > a[aria-current="page"]::after,
.hdr .nav > .nav__item > a[aria-current="page"]::after{width:100%;background:var(--brass-lt)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--brass);transition:width .22s ease}
.nav a:hover{opacity:1}
.nav a:hover::after{width:100%}
.hdr__cta{margin-left:auto;display:flex;gap:12px;align-items:center}
/* give the phone its own outline so it reads as a control, not a run-on from the last nav link */
.hdr .hdr__phone{
  border:1px solid rgba(255,255,255,.28);border-radius:100px;padding:9px 16px;
  transition:background .18s ease,border-color .18s ease;
}
.hdr .hdr__phone:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);color:#fff}
/* colour lives in the navy-header block above — keep it out of here so it can't be re-overridden */
.hdr__phone{font-family:var(--ui);font-weight:600;text-decoration:none;font-size:.97rem;white-space:nowrap}

/* ============ HERO ============ */
.hero{padding:64px 0 72px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 420px at 12% 0%,rgba(28,129,196,.16),transparent 62%);
}
.hero__grid{display:grid;grid-template-columns:1.32fr .95fr;gap:56px;align-items:start;position:relative}
.hero h1{margin-bottom:22px}
/* The accent applies to EVERY h1, not just the hero's. The blog index and category
   pages build their h1 inside .sec, so scoping this to .hero rendered their accent as
   italic dark navy instead of upright brand blue — the exact inconsistency this rule
   exists to prevent. */
h1 em{font-style:normal;color:var(--brass);}
.hero__deck{font-size:1.13rem;color:var(--body);max-width:56ch;margin-bottom:22px}
.hero__deck strong{color:var(--ink);font-weight:600}

.docline{display:flex;align-items:center;gap:14px;padding:16px 0 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:24px}
.docline img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:top center;flex:none;border:2px solid var(--paper);box-shadow:var(--shadow)}
.docline__t{font-size:.93rem;line-height:1.45}
.docline__t b{color:var(--ink);font-weight:600;display:block;font-size:1rem}
.docline__t span{color:var(--muted)}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}
.chip{
  font-family:var(--mono);font-size:.735rem;letter-spacing:.045em;color:var(--ink-2);
  background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:7px 13px;
}
.chip b{color:var(--brass);font-weight:500}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap}

/* form card */
.card{
  background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow-lg);
  border:1px solid var(--line);overflow:hidden;
}
.card__hd{padding:26px 28px 0}
.card__hd h3{margin-bottom:6px;font-size:1.32rem}
.card__hd p{font-size:.88rem;color:var(--muted);margin:0}
.form{padding:22px 28px 26px;display:grid;gap:13px}
.f{display:grid;gap:6px}
.f label{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.f input,.f select{
  font-family:var(--ui);font-size:1rem;padding:13px 14px;border:1.5px solid var(--line);
  border-radius:9px;background:var(--surface);color:var(--ink);width:100%;transition:border-color .18s,background .18s;
}
.f input:focus,.f select:focus{outline:none;border-color:var(--brass);background:#fff}
.f--row{grid-template-columns:1fr 1fr;gap:11px}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:.78rem;color:var(--muted);line-height:1.45}
.consent input{margin-top:3px;flex:none;accent-color:var(--brass)}
.fineprint{font-size:.73rem;color:var(--muted);text-align:center;margin:2px 0 0}

/* ============ PROTOCOL RAIL (signature) ============ */
.rail{background:var(--ink);color:#D7E6F2;padding:58px 0 62px;position:relative}
.rail h2{color:#fff;margin-bottom:8px}
.rail__lede{color:#9DB4C9;max-width:62ch;margin-bottom:40px;font-size:1.02rem}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.steps::before{content:"";position:absolute;top:26px;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(28,129,196,.55),rgba(28,129,196,.55),transparent)}
.step{padding:0 22px;position:relative;text-align:left}
.step__n{
  width:53px;height:53px;border-radius:50%;background:var(--ink);border:1.5px solid rgba(28,129,196,.6);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.9rem;
  color:var(--brass-lt);margin-bottom:18px;position:relative;z-index:2;transition:background .25s,transform .25s;
}
.step:hover .step__n{background:var(--brass);color:#fff;transform:scale(1.07)}
.step h3{color:#fff;font-size:1.09rem;margin-bottom:7px}
.step p{font-size:.9rem;color:#9DB4C9;margin:0}
.step--key .step__n{background:var(--brass);color:#fff;border-color:var(--brass)}
.step--key h3::after{
  content:"the part nobody else does";display:block;font-family:var(--mono);font-size:.63rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brass-lt);margin-top:6px;font-weight:400;
}

/* ============ SECTIONS ============ */
.sec{padding:78px 0}
.sec--paper{background:var(--paper)}
.sec__head{max-width:64ch;margin-bottom:44px}
.sec__head p{font-size:1.05rem;color:var(--muted);margin-top:14px}

/* money paths */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:26px}
/* five practices, ONE grid, identical card size. Hormone + weight loss lead by
   ORDER (first two cards), never by being visually bigger. */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.path{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:34px 32px 30px;
  position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s;
}
.sec--paper .path{background:var(--surface)}
.path:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--brass)}
.path__k{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:14px}
.path h3{font-size:1.62rem;margin-bottom:12px}
.path p{font-size:.97rem;margin-bottom:18px}
.path ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:9px}
.path li{font-size:.93rem;padding-left:24px;position:relative;color:var(--body)}
.path li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:1.5px;background:var(--brass)}
.path__link{font-family:var(--ui);font-weight:600;color:var(--ink);text-decoration:none;font-size:.96rem;display:inline-flex;gap:8px;align-items:center}
.path__link:hover{color:var(--brass)}
.path__link span{transition:transform .2s}
.path__link:hover span{transform:translateX(4px)}

/* contrast block: why one doctor */
.why{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.why__col{padding:34px 34px 32px}
.why__col+.why__col{border-left:1px solid var(--line)}
.why__col--them{background:var(--surface)}
.why__k{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}
.why__col--them .why__k{color:var(--muted)}
.why__col--us .why__k{color:var(--brass)}
.why__col ul{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.why__col li{font-size:.96rem;padding-left:26px;position:relative;line-height:1.5}
.why__col--them li{color:var(--muted)}
.why__col--them li::before{content:"—";position:absolute;left:0;color:#B7C8D8}
.why__col--us li{color:var(--ink)}
.why__col--us li::before{content:"✓";position:absolute;left:0;color:var(--brass);font-weight:700}

/* doctor */
.doc{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center}
.doc__ph{position:relative}
.doc__ph img{border-radius:var(--r);width:100%;box-shadow:var(--shadow-lg)}
.doc__badge{
  position:absolute;right:-14px;bottom:26px;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:14px 18px;box-shadow:var(--shadow-lg);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.06em;color:var(--ink);line-height:1.7;
}
.doc__badge b{color:var(--brass);font-weight:500}
.doc blockquote{
  font-family:var(--display);font-size:1.42rem;line-height:1.42;color:var(--ink);
  border-left:2px solid var(--brass);padding-left:24px;margin:0 0 26px;font-weight:400;
}
.doc__meta{display:grid;gap:11px;margin-bottom:28px}
.doc__meta div{font-size:.94rem;display:flex;gap:12px}
.doc__meta dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:112px;padding-top:3px}
.doc__meta dd{margin:0;color:var(--ink)}

/* two-provider team grid */
.team{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.prov{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.sec--paper .prov{background:var(--surface)}
.prov__ph{aspect-ratio:4/3.05;overflow:hidden;background:var(--surface)}
.prov__ph img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.prov__b{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.prov__role{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:10px}
.prov h3{font-size:1.5rem;margin-bottom:6px}
.prov__cred{font-size:.9rem;color:var(--muted);margin-bottom:16px}
.prov blockquote{
  font-family:var(--display);font-size:1.1rem;line-height:1.46;color:var(--ink);
  border-left:2px solid var(--brass);padding-left:18px;margin:0 0 18px;font-weight:400;
}
.prov__meta{display:grid;gap:9px;margin:0 0 22px}
.prov__meta div{font-size:.9rem;display:flex;gap:11px}
.prov__meta dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:86px;padding-top:3px}
.prov__meta dd{margin:0;color:var(--ink)}
.prov .btn{margin-top:auto;align-self:flex-start}

/* reviews */
.rev{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev__c{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px}
.sec--paper .rev__c{background:var(--surface)}
.stars{color:var(--brass);letter-spacing:2px;font-size:.9rem;margin-bottom:12px}
.rev__c p{font-size:.97rem;color:var(--ink);margin-bottom:16px}
.rev__w{font-family:var(--mono);font-size:.73rem;letter-spacing:.07em;color:var(--muted)}
.rev__score{display:flex;align-items:baseline;gap:14px;margin-bottom:34px}
.rev__num{font-family:var(--display);font-size:3.4rem;color:var(--ink);line-height:1}
.rev__meta{font-size:.9rem;color:var(--muted)}

/* faq */
.faq{max-width:820px}
.q{border-bottom:1px solid var(--line)}
.q summary{
  cursor:pointer;padding:22px 40px 22px 0;font-family:var(--display);font-size:1.16rem;color:var(--ink);
  position:relative;list-style:none;line-height:1.35;
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";position:absolute;right:6px;top:20px;font-family:var(--ui);font-size:1.5rem;color:var(--brass);transition:transform .22s}
.q[open] summary::after{transform:rotate(45deg)}
.q__a{padding:0 40px 24px 0;color:var(--body);font-size:.99rem}
.q__a p:last-child{margin-bottom:0}

/* final cta */
.final{background:var(--ink);color:#D7E6F2;padding:76px 0}
.final__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.final h2{color:#fff;margin-bottom:16px}
.final p{color:#9DB4C9;font-size:1.04rem;max-width:52ch}
.final .card{background:var(--paper)}

/* footer */
.ft{background:#06213A;color:#9DB4C9;padding:56px 0 30px;font-size:.9rem}
.ft__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:38px;margin-bottom:38px}
.ft h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brass-lt);margin:0 0 16px;font-weight:500}
.ft a{color:#B7CCE0;text-decoration:none}
.ft a:hover{color:#fff}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.ft__brand{font-family:var(--display);font-size:1.5rem;color:#fff;margin-bottom:12px}
.ft__legal{border-top:1px solid rgba(255,255,255,.09);padding-top:22px;font-size:.78rem;line-height:1.6;color:#6E8598}
.disclaimer{
  font-family:var(--mono);font-size:.68rem;line-height:1.7;letter-spacing:.02em;text-transform:uppercase;
  color:#7E94A8;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:14px 16px;margin-bottom:22px;
}

/* sticky mobile call bar */
.mbar{display:none}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:1020px){
  .hero__grid{grid-template-columns:1fr;gap:40px}
  .steps{grid-template-columns:1fr 1fr;gap:34px 0}
  .steps::before{display:none}
  .doc{grid-template-columns:1fr;gap:32px}
  .final__grid{grid-template-columns:1fr;gap:36px}
  .rev{grid-template-columns:1fr}
  .ft__grid{grid-template-columns:1fr 1fr;gap:30px}
  .nav{display:none}
  .svc{grid-template-columns:1fr 1fr;gap:28px 30px}
  /* .pillars is the 3-up "what we treat" grid. It had NO responsive rule at all, so it
     held 3 columns all the way down to a phone — 91px wide, with the card text spilling
     out of the box. .paths (the 2-up variant) had a rule; .pillars was simply missed. */
  .pillars{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .sec{padding:54px 0}
  .paths{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  /* two provider cards side by side leaves each ~146px, which squeezed .prov__meta to
     89px while its dt label alone reserves 86px — the values had nowhere to go */
  .team{grid-template-columns:1fr}
  .prov__meta dt{min-width:80px}
  .prov__meta dd,.prov__b{min-width:0}
  .prov__meta div{flex-wrap:wrap}
  /* the 3-up service index squeezes to ~108px columns on a phone — stack it */
  .svc{grid-template-columns:1fr;gap:26px}
  .why{grid-template-columns:1fr}
  .why__col+.why__col{border-left:none;border-top:1px solid var(--line)}
  .steps{grid-template-columns:1fr;gap:28px}
  .step{padding:0}
  /* Keep the open/closed status on a phone — it is the most useful thing in this bar for
     someone deciding whether to call right now. The full street address is what made the
     bar wrap to two lines, and it is already in the footer and on /contact/. */
  .util__item:not(.util__item--hours){display:none}
  .util__in{min-height:38px;flex-wrap:nowrap;gap:12px}
  .util__item--hours{font-size:.78rem}
  .hdr__cta .btn{display:none}
  /* the sticky bottom bar carries "Call now" on mobile — drop the header copy so the logo gets the room */
  .hdr__phone{display:none}
  .ft__grid{grid-template-columns:1fr}
  body{padding-bottom:76px}
  .mbar{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;bottom:0;left:0;right:0;z-index:80;
    background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:11px 14px;
  }
  .mbar .btn{padding:13px 12px;font-size:.9rem}
  .doc__badge{position:static;margin-top:14px;display:inline-block}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* LegitScript certification seal — a real third-party trust signal for a healthcare
   advertiser, so give it room rather than burying it. */
.seal{display:inline-block;margin-top:18px;transition:opacity .18s ease}
.seal img{width:110px;height:auto;border-radius:6px;background:#fff;padding:6px}
.seal:hover{opacity:.85}

/* ============ NAV DROPDOWNS ============
   Puts all 16 service pages one click from anywhere — good for patients, and it
   spreads internal link equity to the leaf pages that need to rank.
   Opens on hover AND on keyboard focus (:focus-within), so it is not mouse-only. */
.nav__item{position:relative;display:flex;align-items:center}
.nav__car{font-size:.62em;margin-left:5px;opacity:.7;transition:transform .2s ease;display:inline-block}
.nav__item:hover .nav__car,.nav__item:focus-within .nav__car{transform:rotate(180deg)}
.nav__menu{
  position:absolute;top:100%;left:-16px;min-width:266px;z-index:70;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:9px;margin-top:12px;
  display:grid;gap:1px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
/* bridge the gap so the menu doesn't close while the cursor travels to it */
.nav__item::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
.nav__item:hover .nav__menu,.nav__item:focus-within .nav__menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav__menu a{
  display:block;padding:9px 13px;border-radius:8px;font-size:.9rem;font-weight:500;
  color:var(--body);opacity:1;white-space:nowrap;text-decoration:none;
}
.nav__menu a::after{display:none}          /* kill the underline animation inside menus */
.nav__menu a:hover{background:var(--surface);color:var(--brass)}
/* deep navy, not brand blue: #1C81C4 on the pale surface is only 3.97:1 (below AA).
   The blue left bar carries the "you are here" signal instead of the text colour. */
.hdr .nav__menu a[aria-current="page"],
.nav__menu a[aria-current="page"]{
  color:var(--ink);background:var(--surface);font-weight:600;
  box-shadow:inset 3px 0 0 var(--brass);
}
.nav__all{border-bottom:1px solid var(--line);border-radius:8px 8px 0 0!important;
  font-weight:600!important;color:var(--ink)!important;margin-bottom:4px}
.hdr .nav__menu a{color:var(--body)}
.hdr .nav__menu a:hover{color:var(--brass)}
/* ...but NOT the current page's own row: it sits on the pale --surface highlight, where
   brass is 3.9:1 (below AA). It keeps --ink on hover; the blue left bar is the affordance. */
.hdr .nav__menu a[aria-current="page"]:hover,
.nav__menu a[aria-current="page"]:hover{color:var(--ink)}

/* ============ FLOATING CALL BUTTON (desktop) ============
   The header phone had to go to fit seven nav items, which left desktop with no
   persistent way to call. This restores it without competing for header space.
   Under 760px the sticky .mbar handles it, so this hides. */
.callfab{
  position:fixed;right:22px;bottom:22px;z-index:75;display:flex;align-items:center;gap:12px;
  background:var(--ink);color:#fff;text-decoration:none;padding:13px 20px 13px 16px;
  border-radius:100px;box-shadow:0 10px 30px -8px rgba(10,51,85,.55);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s,background .18s ease;
}
.callfab.is-on{opacity:1;visibility:visible;transform:translateY(0)}
.callfab:hover{background:var(--brass)}
.callfab:focus-visible{outline:3px solid var(--brass-lt);outline-offset:3px;opacity:1;visibility:visible;transform:none}
.callfab__ic{width:22px;height:22px;fill:currentColor;flex:none}
.callfab__t{display:flex;flex-direction:column;line-height:1.2}
.callfab__t b{font-family:var(--ui);font-size:.86rem;font-weight:600}
.callfab__t span{font-family:var(--ui);font-size:.95rem;font-weight:700;letter-spacing:.01em}
@media (max-width:760px){ .callfab{display:none} }
@media (prefers-reduced-motion:reduce){ .callfab{transition:none} }

/* ============ MOBILE NAVIGATION ============
   Below 1020px `.nav` is display:none (see RESPONSIVE above). Until this block
   existed there was no toggle to bring it back, so on a phone the only route to a
   service page was the footer — which links 10 of the site's 25 pages. Everything
   else was reachable only from the homepage body copy.

   The sub-menus render EXPANDED rather than as a second tap layer: a phone has no
   hover, and hiding the children behind another tap would bury exactly the pages
   this panel exists to surface. */
.navbtn{display:none;background:none;border:0;padding:9px 4px;cursor:pointer;color:#fff;line-height:0}
.navbtn span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
.navbtn span+span{margin-top:5px}
.hdr.nav-open .navbtn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr.nav-open .navbtn span:nth-child(2){opacity:0}
.hdr.nav-open .navbtn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1020px){
  .navbtn{display:block}
  .hdr__in{flex-wrap:wrap}
  .hdr.nav-open .nav{
    display:flex;flex-direction:column;align-items:stretch;gap:0;flex-shrink:1;
    order:3;width:100%;margin:2px 0 12px;padding-top:10px;
    border-top:1px solid rgba(255,255,255,.16);
    max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch
  }
  .hdr.nav-open .nav__item{display:block;position:static}
  .hdr.nav-open .nav > a,
  .hdr.nav-open .nav__item > a{display:block;padding:12px 2px;font-size:1.02rem;
    font-weight:600;white-space:normal;opacity:1;color:#fff}
  .hdr.nav-open .nav a::after{display:none}
  /* Sections start COLLAPSED. Expanded, the panel rendered all 26 links at once and you
     had to scroll past every treatment to reach Contact. The caret is the tap target; the
     label itself still navigates to the hub page. */
  .hdr.nav-open .nav__menu{display:none}
  .hdr.nav-open .nav__item.is-open .nav__menu{display:block}
  .hdr.nav-open .nav__car{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin:-11px -12px -11px 6px;font-size:.9rem;
    opacity:.75;transition:transform .2s ease;
  }
  .hdr.nav-open .nav__item.is-open .nav__car{transform:rotate(180deg);opacity:1}
  .hdr.nav-open .nav__item > a{display:flex;align-items:center;justify-content:space-between}
  .hdr.nav-open .nav__item::after{display:none}
  .hdr.nav-open .nav__menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:transparent;border:0;min-width:0;padding:0;margin:0 0 8px;border-radius:0
  }
  .hdr.nav-open .nav__menu a{display:block;padding:9px 2px 9px 18px;font-size:.94rem;
    font-weight:400;color:#C3D8EB;background:none}
  .hdr.nav-open .nav__menu a:hover{background:none;color:#fff}
  /* !important is load-bearing: the desktop .nav__all rule sets color:var(--ink)
     !important for the white dropdown, which on this navy panel rendered the
     "All hormones →" links as navy-on-navy — invisible. */
  .hdr.nav-open .nav__all{border-bottom:0!important;font-weight:600;color:#EAF3FA!important}
}

/* ============ BLOG POST BODY ============
   Post content comes out of WordPress as raw markup, so everything it can contain has to
   be styled here — nothing else on the site uses these elements.

   The table rule is load-bearing. WP posts carry comparison tables authored at desktop
   widths; measured on a 375px viewport they ran to 998px and pushed the whole PAGE into
   horizontal scroll on 8 posts, one of which is the site's second-highest-impression URL.
   display:block + overflow-x:auto makes the table scroll inside itself instead. */
.post{font-size:1.03rem;line-height:1.75;color:var(--body)}
.post > *:first-child{margin-top:0}
.post p{margin:0 0 18px}
.post h2{font-size:1.6rem;line-height:1.25;margin:38px 0 14px;color:var(--ink)}
.post h3{font-size:1.28rem;line-height:1.3;margin:30px 0 12px;color:var(--ink)}
.post h4,.post h5{font-size:1.08rem;margin:24px 0 10px;color:var(--ink)}
.post ul,.post ol{margin:0 0 20px;padding-left:22px}
.post li{margin-bottom:9px}
.post a{color:var(--brass);text-underline-offset:3px}
.post a:hover{color:var(--ink)}
.post img{max-width:100%;height:auto;border-radius:var(--r);margin:8px 0 22px}
.post figure{margin:0 0 22px}
.post figcaption{font-size:.86rem;color:var(--muted);margin-top:8px}
.post blockquote{margin:0 0 22px;padding:16px 22px;border-left:3px solid var(--brass);
  background:var(--surface);border-radius:0 8px 8px 0;color:var(--ink)}
.post table{display:block;width:100%;max-width:100%;overflow-x:auto;
  -webkit-overflow-scrolling:touch;border-collapse:collapse;margin:0 0 24px;font-size:.94rem}
.post th,.post td{border:1px solid var(--line);padding:10px 13px;text-align:left;vertical-align:top}
.post th{background:var(--surface);color:var(--ink);font-weight:600}
.post hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.post iframe,.post video{max-width:100%}

/* Some blog posts were authored in Elementor and carry its container markup inline
   (.elementor, .e-con-inner, .elementor-element...). Elementor's own stylesheet is not
   loaded here, so those containers sized to their content instead of their parent and
   pushed the whole page into horizontal scroll on a phone — 690px on a 375px viewport.
   Constrain them rather than strip the markup, which would risk mangling post content. */
.post [class*="elementor"]{max-width:100%!important;width:auto!important;
  flex-basis:auto!important;min-width:0!important}
.post [class*="elementor"] img{max-width:100%!important;height:auto!important}
/* belt and braces: even after nbsp normalisation, a pasted URL or long compound in post
   copy should wrap rather than scroll the page */
.post{overflow-wrap:break-word}

/* ============ BLOG CARDS ============
   The first version reused the generic .card and showed text only, even though every one of
   the 64 posts has a featured image — the grid read as a wall of grey boxes. */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 32px}
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.sec--paper .pcard{background:var(--surface)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--brass)}
.pcard__ph{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface)}
.pcard__ph img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.pcard:hover .pcard__ph img{transform:scale(1.04)}
.pcard__b{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.pcard__b .eyebrow{font-size:.66rem;margin-bottom:10px}
.pcard__b h2{font-size:1.16rem;line-height:1.3;margin:0 0 10px}
.pcard__b h2 a{text-decoration:none;color:var(--ink)}
.pcard:hover .pcard__b h2 a{color:var(--brass)}
.pcard__b p{font-size:.93rem;line-height:1.6;color:var(--body);margin:0 0 18px}
.pcard__b .path__link{margin-top:auto}
@media (max-width:1020px){ .pgrid{grid-template-columns:1fr 1fr} }
@media (max-width:760px){ .pgrid{grid-template-columns:1fr;gap:24px} }

/* ============ PROVIDER HERO ============
   The two headshots have different aspect ratios (538x632 and 420x620), so with a plain
   <img> the two pages did not match: the photo overhung the text by 22px on one and 93px
   on the other, and the narrower source was upscaled. A fixed 4:5 frame with object-fit
   makes both pages identical regardless of the source, and centring removes the overhang
   whatever length the intro copy runs to. Scoped with a modifier so the service-page heroes,
   whose right column is a form, keep their top alignment. */
.hero__grid--provider{align-items:center}
.prov-hero__ph{
  aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);background:var(--surface);
}
.prov-hero__ph img{width:100%;height:100%;object-fit:cover;object-position:center 12%}
@media (max-width:1020px){
  .hero__grid--provider{align-items:start}
  .prov-hero__ph{max-width:460px}
}

/* ============ PROSE COLUMN ============
   Long-form body sections (provider bios, privacy/terms/disclaimer) previously used
   <div class="wrap" style="max-width:820px">, which CENTRES the narrow column inside the
   1200px wrap. Measured at 1280px that put the body copy at x=230 while the h1 above and
   the CTA below both sat at x=40 — the text block appeared to float 190px inward.
   .prose keeps a readable measure but anchors it to the same left edge as everything else.
   It also inherits .post typography so headings get real spacing above their paragraphs;
   raw h2 has margin:0, which is why the headings sat directly on top of their text. */
.prose{max-width:72ch}
.prose h2{font-size:1.72rem;line-height:1.22;margin:40px 0 12px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.22rem;margin:28px 0 10px}
.prose p{margin:0 0 18px}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--brass);text-underline-offset:3px}
.prose a:hover{color:var(--ink)}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px}
.prose li{margin-bottom:8px}
@media (max-width:760px){ .prose h2{font-size:1.46rem;margin:32px 0 10px} }