/* THE HORMONE CLINIC — hormone.injection.clinic
   Third practice in The Clinic family. Sibling of, not subordinate to, The
   Injection Clinic. Shares the family's typography (Cormorant + Archivo), the
   masthead/family-tab grammar, and the footer conventions — but has its own
   colour field AND its own design language, exactly as The Concierge Clinic does.

   How this line is deliberately DIFFERENT from the injection site (so it doesn't
   read as "the same pages, recoloured"):
     · geometry — soft radii and pill buttons vs. the injection site's 3px squares
     · surfaces — cards float on soft shadow with no hard border; injection uses
       1px hairline boxes
     · hero — editorial, centred, serif-led statement; no bordered stat card
     · rhythm — full-bleed alternating warm bands instead of uniform white sections
     · signature components — the phase rail and the symptom checklist exist
       nowhere else in the family
   Palette: plum/aubergine ink, rosewood, terracotta, on warm paper.

   Script-free by design: the CSP in site/_headers pins inline scripts by hash,
   so keeping these pages static means the hash never changes when this section
   is edited. Fonts are root-absolute so they resolve on the subdomain. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 800;font-display:swap;src:url('/fonts/cormorant-500.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/archivo-400.woff2') format('woff2')}
:root{
  --paper:#FBF7F4; --shell:#F3E9E4; --card:#FFFFFF;
  --ink:#2B1B29; --rose:#8A4257; --rose-deep:#6E3446; --terra:#B0764B; --terra-deep:#9A5A36;
  --muted:#6E5C63; --line:#E8DBD3; --wash:#F6EDE8;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Archivo', -apple-system, 'Segoe UI', sans-serif;
  --r:14px; --r-sm:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
section[id]{scroll-margin-top:100px}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--rose)}
.wrap{max-width:1060px;margin:0 auto;padding:0 28px}
.narrow{max-width:760px;margin:0 auto}
.eyebrow{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--terra-deep)}
h1,h2{font-family:var(--serif);font-weight:600;line-height:1.06;letter-spacing:.004em}
h2{font-size:clamp(31px,4.2vw,44px);margin:12px 0 16px}
h3{font-family:var(--serif);font-size:24px;font-weight:600;margin:0 0 8px}
.sec{padding:86px 0}
.sec.tight{padding:56px 0}
/* full-bleed alternating bands — the injection site has no equivalent */
.band{background:var(--shell)}
.band-wash{background:var(--wash)}

/* ── masthead ───────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:50;background:rgba(251,247,244,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;justify-content:space-between;min-height:84px;padding:10px 28px;gap:20px}
.mark{display:flex;align-items:center;gap:13px;color:var(--ink)}
.mark-logo{display:flex;text-decoration:none}
.mark-name{font-family:var(--serif);font-size:21px;font-weight:700;letter-spacing:.02em;line-height:1;text-decoration:none;color:var(--ink)}
.mark-rule{display:block;height:1px;background:var(--terra);margin:5px 0 6px;width:100%}
.mark-sub{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:1.6px;color:var(--muted);text-transform:uppercase}
.bar-right{display:flex;align-items:center;gap:20px}
.tel{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;letter-spacing:.02em;white-space:nowrap}

/* family cross-links — same grammar as the other two sites, stacked */
.family-tabs{display:flex;flex-direction:column;gap:7px;border-left:1px solid var(--line);padding-left:18px}
.family-tab{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;line-height:1.4;white-space:nowrap}
.family-tab b{display:block;font-size:11.5px;color:var(--ink);letter-spacing:.1em}
.family-tab:hover b{color:var(--rose)}
.family-strip{display:none;background:var(--shell);border-bottom:1px solid var(--line);text-align:center;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:8px 10px}
.family-strip a{color:var(--ink);text-decoration:none;display:inline-block;padding:2px 8px}

/* pill buttons — the family's other sites use 3px square corners */
.btn{display:inline-block;background:var(--rose);color:#fff;text-decoration:none;font-weight:600;font-size:14.5px;letter-spacing:.02em;padding:14px 30px;border-radius:999px;transition:background .2s,transform .2s}
.btn:hover{background:var(--rose-deep);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.gold{background:var(--terra);color:#fff}
.btn.gold:hover{background:var(--terra-deep)}
.btn.ghost-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.btn.ghost-light:hover{background:#fff;color:var(--ink)}


/* ── hero: centred editorial statement, no stat card ────────── */
.hero{padding:88px 0 72px;text-align:center;background:linear-gradient(180deg,var(--wash) 0%,var(--paper) 100%)}
.hero .wrap{max-width:900px}
.hero h1{font-size:clamp(40px,6vw,64px);margin:18px 0 20px}
.hero h1 em{font-style:italic;color:var(--rose)}
.hero .strap{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--terra-deep);margin:0 0 18px;font-style:italic}
.hero .lede{font-size:18.5px;color:var(--muted);max-width:64ch;margin:0 auto 30px}
.hero .cta-row{justify-content:center}
.hero-rule{width:54px;height:2px;background:var(--terra);margin:0 auto 4px;border:0}
.lede{font-size:18px;color:var(--muted);max-width:64ch;margin-bottom:28px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* ── phase rail: signature component, unique to this practice ── */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:38px;border-radius:var(--r);overflow:hidden;box-shadow:0 14px 40px rgba(43,27,41,.07)}
.phase{background:var(--card);padding:30px 28px;border-right:1px solid var(--line)}
.phase:last-child{border-right:0}
.phase .ph-k{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--terra-deep)}
.phase h3{font-size:22px;margin:8px 0 8px}
.phase p{font-size:14.5px;color:var(--muted)}

/* ── cards: floating, rounded, borderless ───────────────────── */
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:38px}
.card{background:var(--card);border-radius:var(--r);padding:32px 32px 28px;box-shadow:0 10px 30px rgba(43,27,41,.06);transition:transform .2s, box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(43,27,41,.11)}
.card .clin{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--terra-deep);font-weight:700}
.card h3{margin-top:6px}
.card p{font-size:15px;color:var(--muted);margin:12px 0 14px}
.card a.more{font-weight:600;font-size:14.5px;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.card a.more:hover{border-bottom-color:var(--rose)}


/* ── treatment explorer: signature two-pane browser ───────────
   Pure CSS (radio + :checked sibling selectors) — this site ships no
   JavaScript, so the pinned CSP hash never changes. Left rail selects,
   right pane reveals. Replaces a nine-item header nav. */
.explorer{margin-top:38px;background:var(--card);border-radius:var(--r);box-shadow:0 14px 44px rgba(43,27,41,.08);overflow:hidden}
.explorer > input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ex-grid{display:grid;grid-template-columns:286px 1fr}
.ex-nav{background:var(--wash);border-right:1px solid var(--line)}
.ex-nav label{display:block;padding:19px 26px;font-size:15.5px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:1px solid var(--line);transition:background .15s,color .15s}
.ex-nav label:last-of-type{border-bottom:0}
.ex-nav label:hover{color:var(--rose);background:rgba(255,255,255,.6)}
.ex-nav label small{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--terra-deep);margin-bottom:3px}
.ex-pane{display:none;padding:40px 44px}
.ex-pane h3{font-size:27px;margin-bottom:6px}
.ex-pane .ex-k{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--terra-deep);margin-bottom:10px}
.ex-pane p{font-size:15.5px;color:#3A2F37;margin:0 0 15px}
.ex-pane ul{margin:0 0 16px 20px}
.ex-pane li{font-size:15px;color:#3A2F37;margin-bottom:7px}
.ex-pane .ex-more{display:inline-block;margin-top:6px;font-weight:600;font-size:14.5px;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.ex-pane .ex-more:hover{border-bottom-color:var(--rose)}
.explorer > input:focus-visible + .ex-grid{outline:2px solid var(--rose);outline-offset:2px}
#tx1:checked ~ .ex-grid .ex-nav label:nth-of-type(1){background:var(--card);color:var(--rose);box-shadow:inset 3px 0 0 var(--rose)}
#tx1:checked ~ .ex-grid .ex-panes .ex-pane:nth-of-type(1){display:block}
#tx2:checked ~ .ex-grid .ex-nav label:nth-of-type(2){background:var(--card);color:var(--rose);box-shadow:inset 3px 0 0 var(--rose)}
#tx2:checked ~ .ex-grid .ex-panes .ex-pane:nth-of-type(2){display:block}
#tx3:checked ~ .ex-grid .ex-nav label:nth-of-type(3){background:var(--card);color:var(--rose);box-shadow:inset 3px 0 0 var(--rose)}
#tx3:checked ~ .ex-grid .ex-panes .ex-pane:nth-of-type(3){display:block}
#tx4:checked ~ .ex-grid .ex-nav label:nth-of-type(4){background:var(--card);color:var(--rose);box-shadow:inset 3px 0 0 var(--rose)}
#tx4:checked ~ .ex-grid .ex-panes .ex-pane:nth-of-type(4){display:block}
#tx5:checked ~ .ex-grid .ex-nav label:nth-of-type(5){background:var(--card);color:var(--rose);box-shadow:inset 3px 0 0 var(--rose)}
#tx5:checked ~ .ex-grid .ex-panes .ex-pane:nth-of-type(5){display:block}
#tx6:checked ~ .ex-grid .ex-nav label:nth-of-type(6){background:var(--card);color:var(--rose);box-shadow:inset 3px 0 0 var(--rose)}
#tx6:checked ~ .ex-grid .ex-panes .ex-pane:nth-of-type(6){display:block}
#tx7:checked ~ .ex-grid .ex-nav label:nth-of-type(7){background:var(--card);color:var(--rose);box-shadow:inset 3px 0 0 var(--rose)}
#tx7:checked ~ .ex-grid .ex-panes .ex-pane:nth-of-type(7){display:block}
@media(max-width:880px){
  .ex-grid{grid-template-columns:1fr}
  .ex-nav{border-right:0;border-bottom:1px solid var(--line)}
  .ex-nav label{padding:15px 22px}
  .ex-pane{padding:30px 24px}
}

/* ── prose ──────────────────────────────────────────────────── */
.prose{max-width:720px}
.prose p{margin:0 0 17px;color:#3A2F37}
.prose p.muted{color:var(--muted)}
.prose ul{margin:0 0 17px 22px}
.prose li{margin-bottom:9px;color:#3A2F37}
.prose h3{margin-top:36px}
.prose strong{font-weight:600}

/* ── symptom checklist: signature component ─────────────────── */
.checklist{background:var(--card);border-radius:var(--r);padding:38px 40px;margin:30px 0;box-shadow:0 14px 40px rgba(43,27,41,.07)}
.checklist ul{list-style:none;margin:16px 0 0;columns:2;column-gap:36px}
.checklist li{padding:9px 0 9px 28px;position:relative;font-size:15px;color:#3A2F37;break-inside:avoid}
.checklist li:before{content:'';position:absolute;left:0;top:15px;width:13px;height:13px;border:1.5px solid var(--terra);border-radius:4px}
.checklist .ck-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}

/* ── callout ────────────────────────────────────────────────── */
.callout{background:var(--wash);border-radius:var(--r-sm);border-left:3px solid var(--terra);padding:24px 28px;margin:26px 0;font-size:15px;color:#3A2F37}
.callout b{font-weight:600}

/* ── steps ──────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:38px}
.steps.three{grid-template-columns:repeat(3,1fr)}
.step .n{font-family:var(--serif);font-size:40px;font-weight:600;color:var(--terra);line-height:1}
.step h3{font-family:var(--sans);font-size:16px;font-weight:700;margin:10px 0 8px;letter-spacing:.01em}
.step p{font-size:14.5px;color:var(--muted)}

/* ── pricing ────────────────────────────────────────────────── */
.tariff{background:var(--card);border-radius:var(--r);padding:52px 56px;box-shadow:0 18px 50px rgba(43,27,41,.08)}
.tariff-head{text-align:center;margin-bottom:34px}
.tariff-head .eyebrow{color:var(--rose)}
.tariff h2{margin-bottom:6px}
.tariff-sub{font-size:14px;color:var(--muted)}
.t-sec{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--terra-deep);margin:32px 0 8px;text-align:center}
.t-row{display:flex;align-items:baseline;gap:10px;padding:11px 0;font-size:16px}
.t-row .svc{white-space:nowrap}
.t-row .svc small{display:block;font-size:12.5px;color:var(--muted);white-space:normal}
.t-row .dots{flex:1;border-bottom:1px dotted var(--terra);transform:translateY(-4px)}
.t-row .price{font-weight:700;letter-spacing:.02em;color:var(--rose)}
.t-note{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);text-align:center}

/* ── clinicians ─────────────────────────────────────────────── */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
.person{background:var(--card);border-radius:var(--r);padding:34px;display:flex;gap:24px;align-items:flex-start;box-shadow:0 10px 30px rgba(43,27,41,.06)}
.person img,.ph{width:118px;height:148px;object-fit:cover;flex-shrink:0;border-radius:var(--r-sm)}
.ph{background:var(--ink);color:var(--terra);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:38px}
.person h3{font-size:22px}
.person .role{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-deep);font-weight:700;margin:3px 0 10px}
.person p{font-size:14px;color:var(--muted);line-height:1.6}
.person p+p{margin-top:8px}

/* ── faq ────────────────────────────────────────────────────── */
.faq{max-width:780px;margin:30px auto 0}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;font-weight:600;font-size:16.5px;padding:21px 34px 21px 0;position:relative}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';position:absolute;right:4px;top:17px;font-family:var(--serif);font-size:25px;color:var(--terra)}
details[open] summary:after{content:'\2013'}
details p{padding:0 0 21px;font-size:15px;color:var(--muted);max-width:64ch}

/* ── cross-link block ───────────────────────────────────────── */
.xblock{background:var(--card);border-radius:var(--r);border-left:3px solid var(--terra);padding:28px 32px;margin:36px 0 0;box-shadow:0 10px 30px rgba(43,27,41,.06)}
.xblock .eyebrow{color:var(--terra-deep)}
.xblock p{font-size:15px;color:var(--muted);margin:8px 0 0}

/* ── final cta ──────────────────────────────────────────────── */
.final{background:var(--ink);color:#F3E9E4;text-align:center}
.final h2{color:#fff}
.final .eyebrow{color:var(--terra)}
.final .lede{color:#CDB9C1;margin:0 auto 28px}
.consult-note{margin-top:22px;font-size:13px;color:#A78F98;max-width:62ch;margin-left:auto;margin-right:auto}

/* ── footer ─────────────────────────────────────────────────── */
footer{background:#1D1119;color:#A78F98;font-size:13px;padding:48px 0 62px}
footer a{color:#CDB9C1}
footer .fine{margin-top:16px;line-height:1.65}
footer .notice{border:1px solid #3B2833;border-radius:var(--r-sm);padding:18px 20px;line-height:1.55}
footer .notice b{color:#D8C6CD}
.famband{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:26px;padding-top:22px;border-top:1px solid #3B2833}
.famband .fam-label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#CDB9C1}
.famband .fam-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.famband .fam-links a{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#A78F98;text-decoration:none}
.famband .fam-links a:hover{color:#fff}
.famband .fam-links a[aria-current=page]{color:var(--terra)}

/* ── articles (SEO landing pages; not linked from the site) ─── */
.article{max-width:720px;margin:0 auto;padding:66px 28px}
.article h1{font-size:clamp(33px,4.8vw,48px);margin:14px 0 16px}
.article .byline{font-size:14px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:32px}
.article .byline b{color:var(--ink);font-weight:600}
.article h2{font-size:clamp(25px,3vw,31px);margin:40px 0 12px}
.article p{margin:0 0 17px;color:#3A2F37}
.article ul,.article ol{margin:0 0 17px 22px}
.article li{margin-bottom:9px;color:#3A2F37}
.article .callout{margin:26px 0}
.article .refs{margin-top:46px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.article .refs ol{margin:10px 0 0 20px}
.article .refs li{margin-bottom:8px}

@media(max-width:880px){
  .card-grid,.team-grid{grid-template-columns:1fr}
  .steps,.steps.three{grid-template-columns:1fr}
  .phases{grid-template-columns:1fr}
  .phase{border-right:0;border-bottom:1px solid var(--line)}
  .phase:last-child{border-bottom:0}
  .checklist ul{columns:1}
  .checklist,.tariff{padding:32px 24px}
  .t-row .svc{white-space:normal;max-width:70%}
  .sec{padding:62px 0}
  .hero{padding:60px 0 54px}
  .bar .tel{display:none}
  .bar-in{flex-wrap:wrap;min-height:0;padding:12px 28px;row-gap:12px}
  .mark{flex:1 1 100%;align-items:flex-start}
  .bar-right{flex:1 1 100%;justify-content:flex-start;gap:14px}
  .family-tabs{display:none}
  .family-strip{display:block}
  .btn{padding:13px 24px}
}