/* ============================================================
   RENEW VITALITY: INNER PAGE COMPONENTS
   Additive stylesheet. Loaded AFTER styles.css on inner pages.
   Does not modify homepage. Reuses --tokens from styles.css.
   ============================================================ */

/* ---- serif accent for women's theme ---- */
:root { --serif: 'Cormorant Garamond', Georgia, serif; --blush: #c9a19a; --blush-bg: #f5ece8; }

/* ---- OVERRIDE homepage full-height sections ----
   The homepage forces every .section to min-height:100vh (Lucid slide-scroll).
   Inner pages are content-rich and must use normal document flow instead.
   This only affects pages that load pages.css. The homepage is untouched. */
@media (min-width: 1024px) {
  .section { min-height: 0; display: block; }
  .section > .container { padding-top: 0; padding-bottom: 0; }
}

/* ---------- SIGNS / SYMPTOMS GRID ---------- */
.signs { background: var(--black); color: var(--white); }
.signs .eyebrow { color: var(--gold); }
.signs h2 { color: var(--white); }
.signs .section-head p { color: rgba(255,255,255,0.72); }
.signs-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px;
}
.sign-card {
  border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg);
  padding: 28px 24px; background: rgba(255,255,255,0.02); transition: var(--transition);
}
.sign-card:hover { border-color: var(--gold); background: rgba(183,147,84,0.06); }
.sign-card .material-icons-round { color: var(--gold); font-size: 34px; }
.sign-card h3 {
  font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--white); margin: 16px 0 10px;
}
.sign-card p { color: rgba(255,255,255,0.66); font-size: 0.94rem; line-height: 1.6; }
.signs-extra {
  margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center;
}
.signs-extra span {
  font-size: 0.9rem; color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 8px 16px;
}

/* ---------- BIG STAT CALLOUT ---------- */
/* .stat-huge / .stat-src are standalone so they also work in the 3-up
   .stat-row grid, which has no .stat-callout ancestor. */
.stat-huge {
  font-family: var(--font-head); font-weight: 900; color: var(--gold-dark);  /* --gold is 2.87:1 on white */
  font-size: clamp(2.5rem, 5vw, 3.6rem); line-height: 1;
}
.stat-src { font-size: 0.82rem; color: var(--gray-500); }

.stat-callout { background: var(--cream); text-align: center; }
.stat-callout .stat-huge { font-size: clamp(3.5rem, 9vw, 6.5rem); }
.stat-callout .stat-desc {
  font-family: var(--font-head); font-weight: 600; font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  max-width: 720px; margin: 18px auto 12px; color: var(--ink);
}
.stat-callout .stat-lead { max-width: 720px; margin: 26px auto 0; color: var(--gray-700); }

/* 3-up stat row: sources bottom-align even when labels wrap to different heights */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; }
.stat-row > div { display: flex; flex-direction: column; }
/* own class, not the homepage's .stat-label (that one is white, for dark bands) */
.stat-row .stat-row-label {
  font-family: var(--font-head); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--gray-700); margin-top: 10px;
}
.stat-row .stat-src { margin-top: auto; padding-top: 10px; }
@media (max-width: 700px) {
  .stat-row { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- PROCESS STEPS (numbered, horizontal) ---------- */
.process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }
.process-step { position: relative; padding-top: 8px; }
.process-num {
  font-family: var(--font-head); font-weight: 900; font-size: 3rem; line-height: 1;
  color: #9a8866; margin-bottom: 12px;  /* was --beige, 1.27:1 on white; this is 3.45:1 */
}
.section-dark .process-num { color: rgba(183,147,84,0.35); }
.process-step h3 { font-size: 1.15rem; margin-bottom: 10px; }
.process-step p { color: var(--gray-700); font-size: 0.98rem; }
.section-dark .process-step h3 { color: var(--white); }
.section-dark .process-step p { color: rgba(255,255,255,0.7); }

/* ---------- INCLUDED / FEATURE LIST (2-col cards) ---------- */
.included-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.included-card {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: 30px 26px; transition: var(--transition);
}
.included-card:hover { border-color: var(--gold); box-shadow: 0 14px 34px rgba(0,0,0,0.06); transform: translateY(-3px); }
.included-card .material-icons-round {
  color: var(--gold); font-size: 30px; background: var(--cream);
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 18px;
}
.included-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.included-card p { color: var(--gray-700); font-size: 0.95rem; }

/* ---------- OUTCOMES GRID ---------- */
.outcomes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.outcome {
  border-top: 3px solid var(--gold); padding: 24px 20px 20px; background: var(--white);
  border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.outcome h3 {
  font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 12px;
}
.outcome p { color: var(--gray-700); font-size: 0.94rem; }
.outcome .vary { display: block; margin-top: 12px; font-size: 0.75rem; color: var(--gray-500); font-style: italic; }

/* small disclaimer */
.disclaimer { font-size: 0.78rem; color: var(--gray-500); max-width: 820px; margin: 30px auto 0; text-align: center; font-style: italic; }

/* ============================================================
   WOMEN'S THEME  (softer, editorial, serif + blush)
   Scope everything under .women so it never touches other pages.
   ============================================================ */
.women .page-hero { display: none; } /* women use a custom split hero */

.women-hero { background: var(--blush-bg); overflow: hidden; }
/* hero is now a text band; the photograph is a full-bleed section below it */
.women-hero-text { padding: 76px 0 68px; max-width: 860px; }
.women-hero .eyebrow {
  display: inline-block; background: rgba(201,161,154,0.25); color: #8a5c54;
  font-family: var(--font-head); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px; margin-bottom: 24px;
}
.women-hero h1 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1.05; letter-spacing: -0.01em; color: #2a2320; margin-bottom: 22px;
}
.women-hero p.lede { font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: #6b5c56; line-height: 1.5; max-width: 560px; }
.women-hero-cta { margin-top: 32px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
/* The women's hero is now a full-bleed .lifestyle-full section using the brand
   photograph, so the old split-hero image column is retired. Keeping the rule as
   a no-op would risk it being reused with a landscape image and reintroducing the
   60% crop problem, so it is removed outright. */

/* Same AA problem as .btn-gold: #b07d74 with white is 3.48:1. The old hover
   #96665e passes at 4.82:1, so it becomes the base, with a deeper hover. */
.btn-blush { background: #96665e; color: #fff; }
.btn-blush:hover { background: #7a4a42; color: #fff; }

.women .section-pale { background: var(--blush-bg); }
.women h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; font-size: clamp(2rem, 4vw, 3rem); }
/* 3.88:1 on white and 3.49:1 on blush, both under AA for small text */
.women .eyebrow { color: #7d4c43; }
.women .section-head h2 { color: #2a2320; }

/* women problem prose */
.women-prose { max-width: 780px; margin: 0 auto; }
.women-prose p { font-size: 1.12rem; color: var(--gray-700); line-height: 1.75; margin-bottom: 20px; }
.women-prose p.emphatic { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: #2a2320; text-align: center; margin: 34px 0; }

/* pillars */
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 44px; }
.pillar {
  background: #fff; border: 1px solid var(--blush); border-radius: var(--radius-lg); padding: 34px 32px;
}
.pillar h3 { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: #2a2320; margin-bottom: 12px; }
.pillar p { color: var(--gray-700); font-size: 0.98rem; line-height: 1.65; }
.pillar .pillar-tag { font-family: var(--font-head); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blush); display: block; margin-bottom: 8px; }

/* R-steps (Reveal/Restore/Refine) */
.rsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }
.rstep { text-align: left; }
.rstep .rstep-word { font-family: var(--serif); font-size: 2rem; color: var(--blush); font-weight: 600; }
.rstep .rstep-num { font-family: var(--font-head); font-size: 0.75rem; letter-spacing: 0.14em; color: #a5766d; text-transform: uppercase; }
.rstep h3 { font-size: 1.05rem; margin: 6px 0 10px; color: #2a2320; }
.rstep p { color: var(--gray-700); font-size: 0.95rem; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.founders-img { border-radius: var(--radius-lg); overflow: hidden; background: var(--beige); min-height: 360px; background-size: cover; background-position: center; }
.mission-band { background: var(--black); color: var(--white); text-align: center; }
.mission-band h2 { color: var(--white); font-size: clamp(1.8rem,4vw,2.8rem); max-width: 900px; margin: 0 auto 20px; }
.mission-band .eyebrow { color: var(--gold); }
.mission-band p { color: rgba(255,255,255,0.78); max-width: 720px; margin: 0 auto; }

.timeline { max-width: 760px; margin: 44px auto 0; border-left: 2px solid var(--beige); padding-left: 34px; }
.tl-item { position: relative; padding-bottom: 34px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ''; position: absolute; left: -43px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 3px solid var(--cream); }
.tl-year { font-family: var(--font-head); font-weight: 800; color: var(--gold-dark); font-size: 1.1rem; }
.tl-item h3 { font-size: 1.1rem; margin: 4px 0 6px; }
.tl-item p { color: var(--gray-700); font-size: 0.97rem; }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.team-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 28px; }
.team-card .team-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--black); color: var(--gold); display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; margin-bottom: 16px; }
.team-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.team-card .team-cred { font-size: 0.82rem; color: var(--gold-dark); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
.team-card p { color: var(--gray-700); font-size: 0.94rem; }

/* ============================================================
   LOCATION PAGE
   ============================================================ */
.loc-hero { background: var(--cream); color: var(--ink); border-bottom: 4px solid var(--gold); }
.loc-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; padding: 70px 0; }
.loc-hero .eyebrow { color: var(--gold-text, #8a6a2f); }
.loc-hero h1 { color: var(--ink); font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 18px; }
.loc-hero-meta { display: flex; flex-direction: column; gap: 14px; margin: 24px 0 28px; }
.loc-hero-meta div { display: flex; align-items: flex-start; gap: 12px; color: var(--gray-700); }
.loc-hero-meta .material-icons-round { color: var(--gold); font-size: 22px; }
.loc-hero-meta a { color: var(--ink); }
.loc-rating-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(183,147,84,0.15); border: 1px solid rgba(183,147,84,0.4); color: var(--gold); padding: 8px 16px; border-radius: 999px; font-size: 0.9rem; font-weight: 600; }

/* map */
.loc-map-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray-200); box-shadow: 0 20px 50px rgba(0,0,0,0.12); }
/* Location pages (Christian, 2026-10-19): the hero, the consultation form section
   and the closing call to action are tan, not black. The form card itself stays
   dark, so the HubSpot form keeps its dark theme. */
.loc-hero .btn-outline-white, .loc-cta .btn-outline-white,
main:has(> .loc-hero) > .section-dark .btn-outline-white { color: var(--ink); border-color: var(--ink); }
.loc-hero .btn-outline-white:hover,
main:has(> .loc-hero) > .section-dark .btn-outline-white:hover { background: var(--ink); color: var(--white); }
.fc-section.loc-form { background: var(--cream); color: var(--ink); }
.loc-form .fc-intro h2, .loc-form .fc-aside h2 { color: var(--ink); }
.loc-form .fc-chip { color: var(--gold-text, #8a6a2f); }
.loc-form .fc-detail { border-color: var(--gray-200); }
.loc-form .fc-detail-label { color: var(--gray-700); }
.loc-form .fc-detail-value, .loc-form .fc-detail-value a { color: var(--ink); }
.loc-form .fc-detail-value a[style] { color: var(--gold-text) !important; }
main:has(> .loc-hero) > .section-dark { background: var(--cream); color: var(--ink); }
main:has(> .loc-hero) > .section-dark h2 { color: var(--ink); }
main:has(> .loc-hero) > .section-dark .cta-block p { color: var(--gray-700); }
main:has(> .loc-hero) > .section-dark .cta-block .eyebrow { color: var(--gold-text, #8a6a2f) !important; }
/* the six programmes: three across, centred when fewer fill the last row */
.loc-svc-grid.is-programs { display: flex; flex-wrap: wrap; justify-content: center; }
.loc-svc-grid.is-programs .loc-svc { flex: 0 1 calc((100% - 36px) / 3); }
@media (max-width: 900px) { .loc-svc-grid.is-programs .loc-svc { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 560px) { .loc-svc-grid.is-programs .loc-svc { flex-basis: 100%; } }
.loc-map-card iframe { display: block; width: 100%; height: 380px; border: 0; filter: grayscale(0.2); }
.map-embed { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray-200); margin-top: 8px; }
.map-embed iframe { display: block; width: 100%; height: 420px; border: 0; }

/* hours table */
/* .hours-table removed: the clinic hours it displayed were not the client's */

.nap-block { background: var(--cream); border-radius: var(--radius-lg); padding: 30px; }
.nap-block h3 { margin-bottom: 16px; }
.nap-block address { font-style: normal; color: var(--gray-700); line-height: 1.7; }

/* location services mini-grid */
.loc-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
.loc-svc { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 22px; text-align: center; transition: var(--transition); }
.loc-svc:hover { border-color: var(--gold); transform: translateY(-3px); }
.loc-svc .material-icons-round { color: var(--gold); font-size: 30px; }
.loc-svc h3 { font-size: 0.98rem; margin: 12px 0 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .signs-grid, .included-grid, .outcomes, .team-grid, .loc-svc-grid { grid-template-columns: repeat(2, 1fr); }
  .process, .rsteps { grid-template-columns: 1fr; gap: 20px; }
  .pillars { grid-template-columns: 1fr; }
  .loc-hero-grid, .founders { grid-template-columns: 1fr; }
  .women-hero-text { padding: 52px 0 44px; }
  .loc-hero-grid { padding: 48px 0; }
  /* The clamp floor of 2.6rem is wider than a phone can hold: "Hormone" alone
     overflowed and got clipped by the section's overflow:hidden. Scale with the
     viewport instead, and allow a break inside long words as a backstop. */
  .women-hero h1 { font-size: clamp(1.85rem, 7.2vw, 2.6rem); overflow-wrap: break-word; }
}
@media (max-width: 560px) {
  .signs-grid, .included-grid, .outcomes, .team-grid, .loc-svc-grid { grid-template-columns: 1fr; }
}

/* ---------- TESTIMONIAL GRID (inner pages) ---------- */
/* styles.css locks .testimonials to 3 fixed columns for the homepage's 3 reviews.
   Inner pages may only have 2 real reviews, which left an empty third column.
   auto-fit collapses the unused track so 2 cards split the row evenly. */
.testimonials {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* ---------- MIGRATED LONG-FORM CONTENT ----------
   The live vitalityhrt.com pages are prose + Q&A heavy. These classes carry
   that content in the new brand without needing per-page inline styles. */
.prose { max-width: 820px; margin: 0 auto; }
.prose > p { font-size: 1.06rem; color: var(--gray-700); line-height: 1.75; margin-bottom: 20px; }
.prose h2 {
  font-family: var(--font-head); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--ink); margin: 46px 0 16px; line-height: 1.2;
}
.prose h3 {
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem;
  color: var(--ink); margin: 30px 0 10px;
}
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--ink); }

/* check/bullet list used for benefits + risks */
.prose-list { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 12px; }
.prose-list li {
  position: relative; padding-left: 34px; color: var(--gray-700);
  font-size: 1.04rem; line-height: 1.6;
}
.prose-list li:before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
}
.prose-list.is-caution li:before { background: #b0524a; }

/* source / reference note */
.prose-ref { font-size: 0.88rem; color: var(--gray-500); margin-top: 26px; }
.prose-ref a { color: var(--gray-700); }

/* method cards for the treatment-type grid */
.methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.method-card {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: 28px 26px; transition: var(--transition);
}
.method-card:hover { border-color: var(--gold); box-shadow: 0 14px 34px rgba(0,0,0,0.06); transform: translateY(-3px); }
.method-card h3 { font-size: 1.05rem; margin-bottom: 10px; color: var(--ink); }
.method-card p { color: var(--gray-700); font-size: 0.95rem; line-height: 1.65; }
@media (max-width: 900px) { .methods { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .methods { grid-template-columns: 1fr; } }

/* Screen-reader-only utility. Part of the ADA block that is still missing from
   styles.css; added here because the location finder's form labels depend on it.
   The full ADA pass (skip link, focus-visible, reduced-motion) is still pending. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- LOCATION FINDER (locations hub) ---------- */
.finder { background: var(--cream); border-radius: var(--radius-lg); padding: 26px; margin-top: 40px; }
.finder-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.finder-search {
  flex: 1 1 260px; position: relative;
}
.finder-search input {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  padding: 14px 16px 14px 46px; border: 1px solid var(--gray-300);
  border-radius: var(--radius); background: var(--white); color: var(--ink);
}
.finder-search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(183,147,84,0.18); }
.finder-search .material-icons-round {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--gray-500); font-size: 22px; pointer-events: none;
}
.finder select {
  font-family: var(--font-body); font-size: 0.98rem; padding: 14px 16px;
  border: 1px solid var(--gray-300); border-radius: var(--radius);
  background: var(--white); color: var(--ink); cursor: pointer;
}
.finder select:focus { outline: none; border-color: var(--gold); }
.finder-count { margin-top: 16px; font-size: 0.92rem; color: var(--gray-700); }
.finder-count strong { color: var(--ink); }

/* map panel */
.loc-map-panel {
  margin-top: 28px; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--gray-200); background: var(--gray-100); height: 420px;
}
.loc-map-panel iframe { width: 100%; height: 100%; border: 0; display: block; }

/* state groups + clinic cards */
.state-group { margin-top: 48px; }
.state-group > h3, .state-group > h2 {
  font-family: var(--font-head); font-size: 1.35rem; color: var(--ink);
  padding-bottom: 12px; border-bottom: 2px solid var(--gold); margin-bottom: 22px;
}
.state-group .state-count { font-size: 0.82rem; color: var(--gray-500); font-weight: 400; letter-spacing: 0.04em; }
.clinic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.clinic-card {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 22px; transition: var(--transition); display: flex; flex-direction: column;
}
.clinic-card:hover { border-color: var(--gold); box-shadow: 0 10px 26px rgba(0,0,0,0.05); }
.clinic-card h4, .clinic-card h3 { font-family: var(--font-head); font-size: 1.05rem; color: var(--ink); margin-bottom: 6px; }
.clinic-card .clinic-addr { font-size: 0.9rem; color: var(--gray-700); line-height: 1.55; margin-bottom: 12px; }
.clinic-card .clinic-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.clinic-tag {
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; background: var(--cream); color: var(--gold-text);
  font-family: var(--font-head); font-weight: 600;
}
.clinic-tag.is-telemed { background: #eef2f6; color: #4a5f73; }
.clinic-actions { margin-top: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.clinic-actions a, .clinic-actions button {
  font-family: var(--font-head); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--gold-dark);
  text-decoration: underline; text-underline-offset: 3px;
}
.clinic-actions a:hover, .clinic-actions button:hover { color: var(--ink); }

.finder-empty {
  display: none; text-align: center; padding: 60px 20px; color: var(--gray-700);
}
.finder-empty.is-visible { display: block; }
.finder-empty .material-icons-round { font-size: 44px; color: var(--gray-300); margin-bottom: 12px; }

@media (max-width: 900px) { .clinic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .clinic-grid { grid-template-columns: 1fr; }
  .loc-map-panel { height: 300px; }
  .finder select { width: 100%; }
}

/* ---------- FULL-BLEED IMAGE SECTIONS (inner pages) ----------
   Reuses the homepage .lifestyle-full component so inner pages get the same
   cinematic rhythm. .lifestyle-inner shortens it: the homepage runs 90vh as a
   slide-scroll beat, but inner pages are content-led and 90vh interrupts reading. */
.lifestyle-full.lifestyle-inner { height: 62vh; min-height: 420px; }
.lifestyle-full.lifestyle-inner .lifestyle-content { padding: 0 64px 56px; }
.lifestyle-full.lifestyle-inner .lifestyle-headline { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }

/* subject sits right of frame: darken the left so text stays legible.
   The third gradient darkens the top as well. Without it a full hero stack
   (eyebrow + headline + sub + buttons) is tall enough to reach into the bright
   part of a daylight photo, and the gold eyebrow washed out against the sky. */
.lifestyle-overlay-left {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.42) 42%, rgba(0,0,0,0.08) 72%, transparent 100%),
    linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.12) 50%, transparent 75%),
    linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.12) 34%, transparent 60%);
}

/* A lifestyle section acting as the page hero carries the full text stack, so it
   needs more width than the mid-page variants or the button pair wraps. The two
   btn-lg buttons need 628px side by side, so 780 (652 inside the padding) is the
   smallest width that keeps them on one row. */
.lifestyle-lead .lifestyle-content { max-width: 780px; }

/* Button pair inside a full-bleed hero. Wraps rather than shrinks, because these
   sit over a photograph where a squeezed button reads as a mistake. */
.lifestyle-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
@media (max-width: 600px) {
  .lifestyle-ctas { flex-direction: column; align-items: stretch; }
  .lifestyle-ctas .btn { width: 100%; text-align: center; }
}

/* Founders full-bleed opener.
   founders-wide.webp is 2400x1024 (2.34:1) and both men stand in the right
   half, from 52% to 94% of the width. On desktop the section is wide enough to
   show the whole frame, so the text sits on the darkened left and nobody is
   touched. On a phone the same slot renders 375x380 (near square), which crops
   1000px of source: at the default centre position that keeps 695-1705 and so
   loses Matthew completely while cutting Kenneth in half. Rather than fight the
   crop, mobile stops overlaying: the photo becomes its own band positioned to
   hold both men, and the text moves below it onto the black. */
.lifestyle-founders .lifestyle-headline { text-wrap: balance; }

@media (max-width: 860px) {
  .lifestyle-full.lifestyle-founders {
    display: block; height: auto; min-height: 0;
    background: var(--black);
  }
  .lifestyle-founders .lifestyle-bg {
    position: static; height: 330px;
    /* 90% keeps source 1248-2258 in frame, which is exactly both founders */
    object-position: 90% center;
  }
  .lifestyle-founders .lifestyle-overlay-left { display: none; }
  .lifestyle-full.lifestyle-founders .lifestyle-content {
    max-width: none; padding: 32px 24px 40px;
  }
}

/* inline figure: image beside prose, used mid-article */
.figure-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; margin-top: 52px;
}
.figure-split.is-reversed > figure { order: 2; }
.figure-split figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.figure-split figure img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 3 / 2; }
.figure-split .figure-body h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-bottom: 14px; }
.figure-split .figure-body p { color: var(--gray-700); line-height: 1.75; margin-bottom: 14px; }
.section-dark .figure-split .figure-body p { color: rgba(255,255,255,0.72); }
.section-dark .figure-split .figure-body h3 { color: var(--white); }

/* full-width banded image, no text over it */
.figure-wide { margin: 56px 0 0; border-radius: var(--radius-lg); overflow: hidden; }
.figure-wide img { width: 100%; display: block; aspect-ratio: 3 / 1; object-fit: cover; }
.figure-caption { font-size: 0.82rem; color: var(--gray-500); margin-top: 12px; text-align: center; }

@media (max-width: 860px) {
  .figure-split { grid-template-columns: 1fr; gap: 26px; }
  .figure-split.is-reversed > figure { order: 0; }
  .lifestyle-full.lifestyle-inner { height: auto; min-height: 380px; }
  /* .lifestyle-content is a flex item, so a max-width wider than the viewport
     lets it size to its own content and the parent's overflow:hidden clips the
     right edge instead of scrolling. That silently cut off headlines, the
     eyebrow and the buttons on a phone. Pin it to the container here. */
  /* On mobile the hero collapses to height:auto, so content sits at the TOP
     instead of flex-end; combined with the -86px transparent-header pull-up the
     eyebrow/headline slid under the logo. Pad the top to clear the sticky header. */
  .lifestyle-full.lifestyle-inner .lifestyle-content {
    padding: 104px 24px 40px;
    max-width: 100%; width: 100%; min-width: 0;
  }
  .figure-wide img { aspect-ratio: 16 / 9; }
}

/* ---------- FOUNDERS / OWNER IMAGERY ----------
   The client's real founder photographs were shot on a charcoal backdrop that
   matches --black, so the image can sit on a dark section and read as one piece
   rather than a pasted-in rectangle. No vignette or border needed. */
.founders-band { background: var(--black); color: var(--white); overflow: hidden; }
.founders-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
}
.founders-grid figure { margin: 0; }
.founders-grid figure img {
  width: 100%; display: block; border-radius: var(--radius-lg);
  /* lift the shadow detail slightly so the jackets do not crush to pure black */
  filter: brightness(1.06) contrast(1.04);
}
.founders-grid .founders-copy .eyebrow { color: var(--gold); }
.founders-grid .founders-copy h2 { color: var(--white); margin-bottom: 18px; }
.founders-grid .founders-copy p { color: rgba(255,255,255,0.74); line-height: 1.75; margin-bottom: 16px; }
.founders-names {
  margin-top: 22px; font-family: var(--font-head); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold);
}

/* CEO quote with a real portrait beside it */
.ceo-grid { display: grid; grid-template-columns: 0.62fr 1fr; gap: 52px; align-items: center; }
.ceo-grid figure { margin: 0; }
.ceo-grid figure img {
  width: 100%; display: block; border-radius: var(--radius-lg);
  filter: brightness(1.05) contrast(1.03);
}
.ceo-quote .eyebrow {
  font-family: var(--font-head); font-size: 0.75rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 18px;
}
.ceo-quote h2 { color: var(--white); margin-bottom: 20px; }
.ceo-quote p { color: rgba(255,255,255,0.74); line-height: 1.75; }
.ceo-quote .ceo-attrib {
  margin-top: 22px; color: var(--gold); font-family: var(--font-head);
  font-weight: 700; letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  .founders-grid, .ceo-grid { grid-template-columns: 1fr; gap: 32px; }
  .ceo-grid figure { max-width: 320px; }
}

/* ============================================================
   LUCID-STYLE EDITORIAL LAYOUT (about page)
   Reference: lucidmotors.com/lucid-ownership-hub. The defining quality is
   restraint: black ground, image-led cards with NO card chrome at all, a 4px
   hairline radius, light type weights, and a lot of air. Lucid uses a light
   serif; Renew's brand is Montserrat, so we keep the typeface and borrow the
   weight, spacing and absence of decoration instead.
   ============================================================ */

.editorial { background: var(--black); color: var(--white); }
.editorial-head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.editorial-head .eyebrow {
  display: block; font-family: var(--font-head); font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px;
}
.editorial-head h2 {
  font-family: var(--font-head); font-weight: 600;      /* Lucid runs 400; 600 is the lightest that holds in Montserrat */
  font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.2;
  letter-spacing: -0.01em; color: var(--white); margin: 0;
}
.editorial-head p {
  margin-top: 20px; color: rgba(255,255,255,0.62); font-size: 1.02rem; line-height: 1.75;
}
.editorial-head.on-light h2 { color: var(--ink); }
.editorial-head.on-light p { color: var(--gray-700); }

/* image-led cards: no background, no border, no shadow, no hover lift */
.ed-cards { display: grid; gap: 44px 36px; }
.ed-cards.is-2 { grid-template-columns: repeat(2, 1fr); }
.ed-cards.is-3 { grid-template-columns: repeat(3, 1fr); }
.ed-card figure { margin: 0 0 22px; }
.ed-card figure img {
  width: 100%; display: block; border-radius: 4px;   /* Lucid's exact hairline radius */
  aspect-ratio: 4 / 3; object-fit: cover;
}
.ed-card h3 {
  font-family: var(--font-head); font-weight: 600; font-size: 1.12rem;
  letter-spacing: 0; color: var(--white); margin: 0 0 10px;
}
.ed-card p { color: rgba(255,255,255,0.62); font-size: 0.96rem; line-height: 1.7; margin: 0; }
.ed-card .ed-caption {
  font-size: 0.8rem; color: rgba(255,255,255,0.45); letter-spacing: 0.04em; margin-top: 8px;
}
/* Light editorial band. Putting on-light on the <section> is enough: the head
   and card rules below reach it by descent, so the class does not have to be
   repeated on every child. Used to break up a run of black sections. */
.editorial.on-light { background: var(--white); color: var(--ink); }
.editorial.on-light .editorial-head h2 { color: var(--ink); }
.editorial.on-light .editorial-head p { color: var(--gray-700); }
.on-light .ed-card h3 { color: var(--ink); }
.on-light .ed-card p { color: var(--gray-700); }
.on-light .ed-card .ed-caption { color: var(--gray-500); }

/* portrait cards for the medical team: taller crop, name under the image */
.ed-cards.is-people .ed-card figure img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
.ed-cards.is-people .ed-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.ed-cards.is-people .ed-card .ed-role {
  font-family: var(--font-head); font-size: 0.74rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-dark); margin-bottom: 12px;
}
.on-light .ed-cards.is-people .ed-card .ed-role { color: var(--gold-dark); }

/* text-only trio, chrome stripped: a hairline rule instead of a bordered card */
.ed-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.ed-trio > div { border-top: 1px solid rgba(255,255,255,0.16); padding-top: 24px; }
.ed-trio h3 {
  font-family: var(--font-head); font-weight: 600; font-size: 1.1rem;
  color: var(--white); margin: 0 0 12px;
}
.ed-trio p { color: rgba(255,255,255,0.62); font-size: 0.96rem; line-height: 1.7; margin: 0; }

/* generous vertical rhythm, the thing that most makes Lucid feel Lucid */
.section.is-airy { padding-top: 116px; padding-bottom: 116px; }

@media (max-width: 900px) {
  .ed-cards.is-2, .ed-cards.is-3, .ed-trio { grid-template-columns: 1fr; gap: 40px; }
  .ed-cards.is-people { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .editorial-head { margin-bottom: 44px; }
  .section.is-airy { padding-top: 72px; padding-bottom: 72px; }
}
@media (max-width: 560px) {
  .ed-cards.is-people { grid-template-columns: 1fr; }
}

/* ============================================================
   FORM CARD (fc-*)
   One component, two users: the contact page renders a single card and the
   Low-T quiz renders the same card with four swappable steps inside it. Built
   to match the client's own assessment landing page (dark card, hairline
   border, gold progress rail, pill options, gold gradient submit) but in the
   Renew palette and Montserrat rather than that page's Oswald and blue black.

   Options are real radios and checkboxes with the input visually hidden and the
   label styled as the pill. The client's page used <button> elements, which
   gives up arrow key navigation and leaves a screen reader with no idea what is
   selected. Same look, keyboard and assistive tech included.
   ============================================================ */

.fc-section { background: var(--black); color: var(--white); }
.fc-wrap { max-width: 620px; margin: 0 auto; }
.fc-wrap.is-wide { max-width: 1060px; }

.fc-intro { text-align: center; margin-bottom: 40px; }
.fc-chip {
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(183,147,84,0.45);
  border-radius: 999px; padding: 8px 18px; margin-bottom: 24px;
}
.fc-intro h1, .fc-intro h2 {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.1;
  color: var(--white); margin: 0;
}
.fc-intro p { margin: 18px auto 0; max-width: 520px; color: rgba(255,255,255,0.68); line-height: 1.7; }

/* the card */
.fc-card {
  background: #151515;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
}

/* progress rail: a track with a fill whose width the script sets */
.fc-rail { height: 3px; background: rgba(255,255,255,0.14); border-radius: 999px; overflow: hidden; margin-bottom: 26px; }
.fc-rail-fill {
  display: block; height: 100%; width: 25%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  transition: width 0.35s ease;
}

.fc-step-label {
  display: block; text-align: center; font-family: var(--font-head); font-weight: 700;
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.fc-q {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.25;
  color: var(--white); text-align: center; margin: 0 0 10px;
}
.fc-help { text-align: center; font-size: 0.92rem; color: rgba(255,255,255,0.55); margin: 0 0 26px; line-height: 1.6; }

/* option pills. The input is hidden from sight but still focusable, so the
   focus ring has to be drawn on the label instead. */
.fc-opts { display: grid; gap: 10px; margin: 0 0 26px; border: 0; padding: 0; }
.fc-opts legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fc-opt { position: relative; display: block; }
.fc-opt input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.fc-opt span {
  display: flex; align-items: center; gap: 13px;
  background: #1c1c1c; border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px; padding: 15px 18px;
  font-family: var(--font-body); font-weight: 500; font-size: 1rem;
  color: rgba(255,255,255,0.9); cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
/* the dot / tick drawn before the text */
.fc-opt span::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px;
  border: 1px solid rgba(255,255,255,0.34); border-radius: 50%;
  transition: border-color var(--transition), background var(--transition);
}
.fc-opt input[type="checkbox"] + span::before { border-radius: 5px; }
.fc-opt span:hover { border-color: rgba(183,147,84,0.6); background: #212121; }
.fc-opt input:checked + span { border-color: var(--gold); background: rgba(183,147,84,0.12); }
.fc-opt input:checked + span::before { border-color: var(--gold); background: var(--gold); box-shadow: inset 0 0 0 3px #151515; }
.fc-opt input[type="checkbox"]:checked + span::before { box-shadow: inset 0 0 0 2px #151515; }
.fc-opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

/* nothing chosen yet: tint the whole group rather than a single pill, since it
   is the group that is incomplete and no one pill is at fault */
.fc-opts.has-error .fc-opt span { border-color: rgba(255,157,157,0.55); }

/* fields */
.fc-fields { display: grid; gap: 16px; margin-bottom: 22px; }
.fc-fields.is-2 { grid-template-columns: 1fr 1fr; }
.fc-field { display: flex; flex-direction: column; gap: 7px; }
.fc-field label {
  font-family: var(--font-head); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.62);
}
.fc-field input, .fc-field select, .fc-field textarea {
  background: #1c1c1c; border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px; padding: 14px 15px;
  font-family: var(--font-body); font-size: 1rem; color: var(--white);
  width: 100%;
}
.fc-field textarea { min-height: 104px; resize: vertical; }
.fc-field input::placeholder, .fc-field textarea::placeholder { color: rgba(255,255,255,0.34); }
.fc-field input:focus, .fc-field select:focus, .fc-field textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold);
}
.fc-field .fc-err { font-size: 0.82rem; color: #ff9d9d; display: none; }
.fc-field.has-error input, .fc-field.has-error textarea { border-color: #ff9d9d; }
.fc-field.has-error .fc-err { display: block; }

/* consent */
.fc-consent { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 22px; }
.fc-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--gold); }
.fc-consent label { font-size: 0.8rem; line-height: 1.6; color: rgba(255,255,255,0.55); }
.fc-consent a { color: var(--gold); text-decoration: underline; }

/* buttons */
.btn-gradient {
  display: block; width: 100%; text-align: center; cursor: pointer;
  background: linear-gradient(135deg, var(--gold) 0%, var(--beige) 100%);
  color: #1a1300; border: 0; border-radius: 10px; padding: 17px 20px;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.03em; transition: filter var(--transition);
}
.btn-gradient:hover { filter: brightness(1.06); }
.btn-gradient:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.btn-gradient[disabled] { opacity: 0.55; cursor: not-allowed; }

.fc-back {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  background: none; border: 0; cursor: pointer; padding: 6px 0;
  font-family: var(--font-head); font-weight: 600; font-size: 0.84rem;
  letter-spacing: 0.04em; color: rgba(255,255,255,0.55);
}
.fc-back:hover { color: var(--white); }
.fc-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.fc-callout { text-align: center; margin-top: 24px; font-size: 0.9rem; color: rgba(255,255,255,0.5); }
.fc-callout a { color: var(--gold); font-weight: 600; }

/* ------------------------------------------------------------
   HubSpot quiz form (hsfc embed) inside the fc card.
   The embed ships a light theme (navy text, pale inputs) and the rich text
   module keeps inline styles pasted into the HubSpot editor, e.g. a white
   highlight behind the intro copy. Same two mechanisms as the homepage form:
   (1) set HubSpot's --hsf-* theme variables, (2) back them with !important
   rules, since the embed's own stylesheet out-specifies plain selectors.
   Every rule is scoped to hsfc classes, so the contact page's own fc form
   is untouched.
   ------------------------------------------------------------ */
.fc-wrap.is-quiz { max-width: 680px; }
/* Reserve the quiz's first step before HubSpot renders it, so the content below
   does not jump down (it scored CLS 0.14). Measured: 238px at 1280, 279px at 412 (step 1 with its progress bar). The placeholder (.qz-ph) now also carries the rail and step label, so it is sized to the rendered rail + form: 260px desktop, 301px phones.
   Later steps are taller, but those changes follow a click, which CLS ignores. */
.fc-card .hs-form-html { min-height: 240px; }
@media (max-width: 600px) { .fc-card .hs-form-html { min-height: 280px; } }
/* Placeholder for step 1 (see the note in low-testosterone-quiz/index.html).
   It takes the reserved height itself; the form area collapses to 0 until
   HubSpot renders, then the placeholder hides and the form takes the same height. */
.qz-ph { min-height: 260px; display: flex; flex-direction: column; align-items: stretch; }
.fc-card:has(.qz-ph):not(:has(.hsfc-Renderer)) .hs-form-html { min-height: 0; }
/* Contact form: reserve its rendered height so the sidebar below does not jump
   (CLS was 0.41). Measured: 948px at 360-412, 729 at 480, 669 at 560 and 1024,
   651 at 600-768. Once HubSpot renders, the real form sets the height. */
.fc-card.is-contact .hs-form-html { min-height: 670px; }
@media (max-width: 520px) { .fc-card.is-contact .hs-form-html { min-height: 730px; } }
@media (max-width: 440px) { .fc-card.is-contact .hs-form-html { min-height: 950px; } }
/* once HubSpot renders: the placeholder's heading, copy and button give way to
   the real ones, but its rail and step label stay as the quiz's progress display */
.fc-card:has(.hsfc-Renderer) .qz-ph { min-height: 0; }
.fc-card:has(.hsfc-Renderer) .hs-form-html { min-height: 0; }
.fc-card:has(.hsfc-Renderer) .qz-ph-h,
.fc-card:has(.hsfc-Renderer) .qz-ph-p,
.fc-card:has(.hsfc-Renderer) .qz-ph-btn { display: none; }
.fc-card .hs-form-html .hsfc-ProgressBar { display: none !important; }
.qz-ph-rail span { transition: width 0.35s ease; }
.qz-ph-rail { height: 3px; background: rgba(255,255,255,0.14); border-radius: 999px; overflow: hidden; }
.qz-ph-rail span { display: block; height: 100%; width: 14%; background: linear-gradient(90deg, var(--gold-dark), var(--gold)); }
.qz-ph-step { margin: 12px 0 22px; text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.qz-ph-h { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.2; color: #fff; text-align: center; margin: 0 0 6px; }
.qz-ph-p { font-size: 0.95rem; line-height: 1.65; color: rgba(255,255,255,0.68); text-align: center; max-width: 520px; margin: 0 auto; }
.qz-ph-btn { margin-top: 26px; display: block; text-align: center; font-family: var(--font-head); font-weight: 600; font-size: 1rem; background: var(--gold); color: #1a1408; border-radius: 6px; padding: 14px 26px; }
@media (max-width: 600px) { .qz-ph { min-height: 301px; } }
/* "Start The Quiz Now" lower on the page jumps back here; clear the sticky header */
#qz-form { scroll-margin-top: 84px; }
.fc-card {
  --hsf-global__font-family: var(--font-body);
  --hsf-background__background-color: transparent;
  --hsf-background__background-image: none;
  --hsf-background__border-width: 0;
  --hsf-background__padding: 0;
  --hsf-heading__font-family: var(--font-head);
  --hsf-heading__color: #fff;
  --hsf-richtext__color: rgba(255,255,255,0.68);
  --hsf-field-label__color: #fff;
  --hsf-field-label-requiredindicator__color: var(--gold);
  --hsf-field-input__background-color: #1c1c1c;
  --hsf-field-input__border-color: rgba(255,255,255,0.18);
  --hsf-field-input__color: #fff;
  --hsf-field-input__placeholder-color: rgba(255,255,255,0.4);
  --hsf-field-input__border-radius: 8px;
  --hsf-field-textarea__background-color: #1c1c1c;
  --hsf-field-textarea__border-color: rgba(255,255,255,0.18);
  --hsf-field-textarea__color: #fff;
  --hsf-field-textarea__placeholder-color: rgba(255,255,255,0.4);
  --hsf-field-textarea__border-radius: 8px;
  --hsf-field-description__color: rgba(255,255,255,0.55);
  --hsf-field-footer__color: rgba(255,255,255,0.55);
  --hsf-erroralert__color: #ff9d9d;
  --hsf-infoalert__color: rgba(255,255,255,0.68);
  --hsf-progressbar-text__color: rgba(255,255,255,0.55);
  --hsf-progressbar-progressLine__background-color: var(--gold);
  --hsf-progressbar-trackLine__background-color: rgba(255,255,255,0.14);
  --hsf-button__font-family: var(--font-head);
  --hsf-button__background-color: var(--gold);
  --hsf-button__background-image: none;
  --hsf-button__color: #1a1408;
  --hsf-button__border-width: 0;
  --hsf-button__border-radius: 6px;
  --hsf-button__font-weight: 600;
  --hsf-button--hover__background-color: #c8a565;
  --hsf-button--hover__color: #1a1408;
}

/* headings and intro copy */
.fc-card .hsfc-Heading {
  font-family: var(--font-head) !important; font-weight: 700 !important;
  font-size: clamp(1.4rem, 3vw, 1.9rem) !important; line-height: 1.2 !important;
  color: #fff !important; text-align: center; margin: 0 0 6px !important;
}
.fc-card .hsfc-RichText, .fc-card .hsfc-RichText p {
  font-family: var(--font-body) !important; font-size: 0.95rem !important;
  line-height: 1.65 !important; color: rgba(255,255,255,0.68) !important;
}
/* the intro step's copy sits centred under its heading, like the page intro */
.fc-card .hsfc-Step:first-child .hsfc-RichText { text-align: center; max-width: 520px; margin: 0 auto; }
/* strip pasted highlight and colour from anything inside the rich text */
.fc-card .hsfc-RichText * { background: none !important; color: inherit !important; }
.fc-card .hsfc-RichText a { color: var(--gold) !important; text-decoration: underline; }

/* the question on each choice step is the group's label */
.fc-card .hsfc-CheckboxFieldGroup > .hsfc-FieldLabel,
.fc-card .hsfc-RadioFieldGroup > .hsfc-FieldLabel,
.fc-card .hsfc-DropdownField > .hsfc-FieldLabel {
  display: block; font-family: var(--font-head) !important; font-weight: 700 !important;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem) !important; line-height: 1.3 !important;
  color: #fff !important; margin-bottom: 18px !important;
}

/* answer options: full-width rows with a visible control on the left,
   a readable resting border, a hover state and a clear selected state */
.fc-card .hsfc-CheckboxFieldGroup__Options,
.fc-card .hsfc-RadioFieldGroup__Options { display: grid !important; gap: 10px !important; }
.fc-card .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel,
.fc-card .hsfc-RadioFieldGroup__Options .hsfc-FieldLabel {
  display: flex !important; align-items: center; justify-content: flex-start !important;
  gap: 14px; width: 100%; margin: 0 !important; text-align: left !important;
  background: #1c1c1c !important; border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 10px; padding: 15px 18px !important; cursor: pointer;
  font-family: var(--font-body) !important; font-size: 1rem !important;
  font-weight: 500 !important; line-height: 1.45 !important; color: rgba(255,255,255,0.92) !important;
  transition: border-color var(--transition), background var(--transition);
}
.fc-card .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel:hover,
.fc-card .hsfc-RadioFieldGroup__Options .hsfc-FieldLabel:hover {
  border-color: rgba(183,147,84,0.7) !important; background: #232323 !important;
}
.fc-card .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel:has(input:checked),
.fc-card .hsfc-RadioFieldGroup__Options .hsfc-FieldLabel:has(input:checked) {
  border-color: var(--gold) !important; background: rgba(183,147,84,0.14) !important; color: #fff !important;
}
.fc-card .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel:has(input:focus-visible),
.fc-card .hsfc-RadioFieldGroup__Options .hsfc-FieldLabel:has(input:focus-visible) {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.fc-card .hsfc-FieldLabel span { background: none !important; color: inherit !important; }

/* native checkboxes and radios, kept visible and tinted gold */
.fc-card input.hsfc-CheckboxInput, .fc-card input.hsfc-RadioInput,
.fc-card .hsfc-Form input[type="checkbox"], .fc-card .hsfc-Form input[type="radio"] {
  appearance: auto !important; -webkit-appearance: auto !important;
  flex: 0 0 auto; width: 18px !important; height: 18px !important; margin: 0 !important;
  accent-color: var(--gold); cursor: pointer;
}

/* text inputs, the phone input, dropdown trigger and textarea */
.fc-card .hsfc-Form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.fc-card .hsfc-Form textarea {
  background: #1c1c1c !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,0.22) !important; border-radius: 8px !important;
  font-family: var(--font-body) !important; font-size: 1rem !important; padding: 13px 14px !important;
}
.fc-card .hsfc-Form ::placeholder { color: rgba(255,255,255,0.4) !important; }
.fc-card .hsfc-Form input:focus, .fc-card .hsfc-Form textarea:focus {
  outline: 2px solid var(--gold) !important; outline-offset: 1px; border-color: var(--gold) !important;
}
/* optional notes field: about three lines, still resizable */
.fc-card .hsfc-Form textarea { height: auto !important; min-height: 0 !important; resize: vertical !important; }
.fc-card .hsfc-Form textarea:not([rows]) { height: 96px !important; }

/* field labels on the contact step */
.fc-card .hsfc-TextField > .hsfc-FieldLabel, .fc-card .hsfc-EmailField > .hsfc-FieldLabel,
.fc-card .hsfc-PhoneField > .hsfc-FieldLabel, .fc-card .hsfc-TextareaField > .hsfc-FieldLabel {
  font-family: var(--font-head) !important; font-weight: 600 !important; font-size: 0.78rem !important;
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.62) !important;
}

/* consent and legal copy */
.fc-card .hsfc-DataPrivacyField, .fc-card .hsfc-DataPrivacyField *,
.fc-card .hsfc-CheckboxField .hsfc-FieldLabel {
  font-size: 0.85rem !important; line-height: 1.55 !important; color: rgba(255,255,255,0.62) !important;
}
.fc-card .hsfc-CheckboxField .hsfc-FieldLabel { display: flex !important; gap: 12px; align-items: flex-start; }
.fc-card .hsfc-CheckboxField input { margin-top: 2px !important; }
.fc-card .hsfc-DataPrivacyField a { color: var(--gold) !important; }

/* opaque dropdown panel (otherwise the fields behind show through) */
.fc-card [class*="DropdownOptions"] { background: #1f1e1b !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.5) !important; }
.fc-card [class*="DropdownOptions"] [class*="Option"] { background: transparent !important; color: #f1efe9 !important; }
.fc-card [class*="DropdownOptions"] [class*="Option"]:hover { background: rgba(255,255,255,0.08) !important; }

/* navigation: gold primary, quiet Previous */
.fc-card .hsfc-NavigationRow { margin-top: 26px !important; }
.fc-card .hsfc-NavigationRow__Buttons {
  display: flex !important; flex-wrap: nowrap; align-items: stretch; gap: 12px; width: 100%;
}
.fc-card .hsfc-Button {
  width: auto !important; min-width: 0; margin: 0 !important; white-space: nowrap;
  font-family: var(--font-head) !important; font-weight: 600 !important; font-size: 1rem !important;
  background: var(--gold) !important; color: #1a1408 !important; border: 0 !important;
  border-radius: 6px !important; padding: 14px 26px !important; flex: 1 1 auto;
}
.fc-card .hsfc-Button:hover { background: #c8a565 !important; }
/* a lone button (Start, Submit) spans the column, as the placeholder does */
.fc-card .hsfc-NavigationRow__Buttons .hsfc-Button:only-child { flex: 1 1 100%; width: 100% !important; }
.fc-card .hsfc-Button:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }
.fc-card .hsfc-NavigationRow__Buttons .hsfc-Button:first-child:not(:only-child) {
  flex: 0 0 auto; background: transparent !important; color: rgba(255,255,255,0.7) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
}
.fc-card .hsfc-NavigationRow__Buttons .hsfc-Button:first-child:not(:only-child):hover {
  color: #fff !important; border-color: rgba(255,255,255,0.5) !important; background: transparent !important;
}
.fc-card .hsfc-ErrorAlert { color: #ff9d9d !important; }

/* progress: HubSpot renders it under the answers as a teal bar with a "42%"
   label. Lift it to the top of the step and draw it like the site's own fc
   rail: a gold "Step X of 7" label over a thin gold line. The label text is
   rewritten from the bar's aria-valuetext by the script on the quiz page. */
.fc-card .hsfc-Step__Content { display: flex !important; flex-direction: column; }
.fc-card .hsfc-Step__Content > .hsfc-Row:has(.hsfc-ProgressBar) { order: -1; margin-bottom: 22px !important; }
.fc-card .hsfc-ProgressBar { display: flex !important; flex-direction: column-reverse; gap: 12px; }
.fc-card .hsfc-ProgressBar__Text {
  text-align: center !important; font-family: var(--font-head) !important; font-weight: 700 !important;
  font-size: 0.68rem !important; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold) !important; margin: 0 !important;
}
.fc-card .hsfc-ProgressBar__Progress {
  height: 3px !important; background: rgba(255,255,255,0.14) !important;
  border: 0 !important; border-radius: 999px !important; overflow: hidden;
}
.fc-card .hsfc-ProgressBar__Progress > div {
  height: 100% !important; border-radius: 999px !important;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold)) !important;
  transition: width 0.35s ease;
}

/* steps: only the active one is in the document flow */
.fc-step { display: none; }
.fc-step.is-active { display: block; }

/* result panels */
.fc-panel { display: none; text-align: center; }
.fc-panel.is-active { display: block; }
.fc-panel .material-icons-round { font-size: 52px; color: var(--gold); }
.fc-panel h2 { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--white); margin: 14px 0 12px; }
/* thank-you pages put their h1 in the panel; without this it took the dark default heading colour on the dark card */
.fc-panel h1 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2rem); line-height: 1.2; color: var(--white); margin: 14px 0 12px; }
.fc-panel p { color: rgba(255,255,255,0.68); line-height: 1.7; margin: 0 auto 10px; max-width: 420px; }
.fc-panel .btn { margin-top: 20px; }

/* contact page: card beside the reach-us details */
.fc-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: start; }
.fc-aside h2 {
  font-family: var(--font-head); font-weight: 700; font-size: 1.4rem;
  color: var(--white); margin: 0 0 22px;
}
.fc-detail { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.12); }
.fc-detail:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.fc-detail .material-icons-round { color: var(--gold); font-size: 22px; flex: 0 0 auto; }
.fc-detail-label {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 5px;
}
.fc-detail-value { color: var(--white); font-size: 1.02rem; line-height: 1.55; }
.fc-detail-value a { color: var(--white); }
.fc-detail-value a:hover { color: var(--gold); }

@media (max-width: 900px) {
  .fc-split { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 560px) {
  .fc-card { padding: 26px 20px; }
  .fc-fields.is-2 { grid-template-columns: 1fr; }
}

/* the verified texting numbers on the privacy policy: a plain list, but 33 of
   them in one column is a scroll, so let it flow into columns */
.number-list {
  list-style: none; padding: 0; margin: 22px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 18px;
}
.number-list li {
  font-variant-numeric: tabular-nums; color: var(--gray-700);
  padding: 9px 0; border-bottom: 1px solid var(--gray-200);
}

/* ============================================================
   REVIEWS PAGE (rv-*)
   Every quote is a real Google review, generated into the page from the Apify
   pull by tools/gen-reviews-page.py so nothing is retyped and nothing drifts.
   ============================================================ */

/* the numbers band: real aggregate, sourced */
.rv-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; text-align: center; }
.rv-stat-num {
  font-family: var(--font-head); font-weight: 900; color: var(--gold);
  font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1;
}
.rv-stat-label {
  font-family: var(--font-head); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 12px;
}
.rv-source { text-align: center; font-size: 0.8rem; color: rgba(255,255,255,0.4); margin-top: 34px; font-style: italic; }

/* stars, drawn as text so they need no icon font or image */
.rv-stars { color: var(--gold-text); letter-spacing: 0.14em; font-size: 0.95rem; }

/* featured: three long reviews, given room to be read */
.rv-featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; }
.rv-feature {
  background: #151515; border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--radius-lg); padding: 34px 30px; display: flex; flex-direction: column;
}
.rv-feature blockquote {
  margin: 20px 0 0; color: rgba(255,255,255,0.86); font-size: 1.02rem; line-height: 1.72;
}
.rv-feature footer { margin-top: auto; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.1); }
.rv-name { font-family: var(--font-head); font-weight: 700; color: var(--white); font-size: 0.98rem; }
.rv-meta { font-size: 0.82rem; color: rgba(255,255,255,0.45); margin-top: 5px; }

/* the grid of the rest. Columns so cards of very different lengths do not leave
   holes the way a row-based grid does. */
.rv-grid { columns: 3; column-gap: 26px; margin-top: 44px; }
.rv-card {
  break-inside: avoid; margin: 0 0 26px;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 26px 24px;
}
.rv-card blockquote { margin: 14px 0 0; color: var(--gray-700); font-size: 0.96rem; line-height: 1.7; }
.rv-card .rv-name { color: var(--ink); }
.rv-card .rv-meta { color: var(--gray-500); }
.rv-feature .rv-meta { color: #8c8c8c; }  /* 5.4:1 on the dark featured card */
.rv-card footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gray-200); }
.rv-card.is-hidden { display: none; }

/* filter by clinic */
.rv-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 38px; }
.rv-filter button {
  cursor: pointer; background: var(--white); border: 1px solid var(--gray-300);
  border-radius: 999px; padding: 10px 18px;
  font-family: var(--font-head); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.04em; color: var(--gray-700); transition: var(--transition);
}
.rv-filter button:hover { border-color: var(--gold); color: var(--gold-dark); }
.rv-filter button[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: var(--white); }
.rv-filter button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rv-count { text-align: center; margin-top: 22px; font-size: 0.86rem; color: var(--gray-500); }

/* per clinic ratings table */
.rv-clinics { margin-top: 44px; border-top: 1px solid var(--gray-200); }
.rv-clinic {
  display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--gray-200);
}
.rv-clinic-name { font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.rv-clinic-score { font-family: var(--font-head); font-weight: 700; color: var(--gold-dark); }
.rv-clinic-count { font-size: 0.88rem; color: var(--gray-500); text-align: right; min-width: 96px; }

@media (max-width: 1000px) {
  .rv-featured { grid-template-columns: 1fr; }
  .rv-grid { columns: 2; }
}
@media (max-width: 640px) {
  .rv-stats { grid-template-columns: 1fr; gap: 34px; }
  .rv-grid { columns: 1; }
  .rv-clinic { grid-template-columns: 1fr auto; }
  .rv-clinic-count { grid-column: 1 / -1; text-align: left; min-width: 0; }
}

/* ---------- CLAMPED TESTIMONIAL WITH READ MORE ----------
   The client's patient stories run from two lines to three paragraphs, which
   left the cards wildly uneven. Clip every card to the same height so the row
   reads as a row, and let the reader open the full story in place. Nothing is
   cut from the page: the whole testimonial is in the HTML, just not all visible
   at once, so it still reads verbatim to a crawler and to a screen reader that
   ignores the height.

   max-height rather than line-clamp because these cards hold several <p>
   elements and -webkit-line-clamp only clamps one block.

   No transition on max-height either. Animating from a calc() to a length does
   not interpolate reliably, and the first attempt at `transition: max-height`
   left the panel reporting its old height well after the class had flipped, so
   the toggle looked broken. Expanding outright is instant and always correct. */
.tm-clip {
  position: relative; overflow: hidden;
  max-height: calc(var(--tm-lines, 9) * 1.7em);
}
.tm-clip.is-open { max-height: none; overflow: visible; }
/* fade the last visible line so it reads as continuing rather than ending */
.tm-clip:not(.is-open)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.2em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white) 78%);
  pointer-events: none;
}
.tm-clip.is-open::after { display: none; }
.tm-clip > p:last-child { margin-bottom: 0; }

.tm-more {
  align-self: flex-start; margin-top: 14px; cursor: pointer;
  background: none; border: 0; padding: 4px 0;
  font-family: var(--font-head); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-dark); border-bottom: 1px solid currentColor;
}
.tm-more:hover { color: var(--ink); }
.tm-more:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tm-more[hidden] { display: none; }
/* gallery cards: a link to the full story, shown only when the quote is short
   enough that the expand button hides itself (Christian, 2026-10-19) */
.ba-read { display: none; }
.tm-more[hidden] + .ba-read {
  display: inline-block; align-self: flex-start; margin-top: 14px; padding: 4px 0;
  font-family: var(--font-head); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  color: var(--gold-dark); border-bottom: 1px solid currentColor;
}
.tm-more[hidden] + .ba-read:hover { color: var(--ink); }

/* no reduced-motion rule needed for .tm-clip: there is no animation to disable */

/* ============================================================
   BLOG  (bl-* index, post-* article)
   Generated by tools/gen-blog.py from the archived scrape of the client's own
   articles. Reuses .rv-filter and .rv-count from the reviews page for the
   category buttons rather than growing a second set that looks almost the same.
   ============================================================ */

/* ---- index grid ---- */
.bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; margin-top: 44px; }
.bl-card { display: flex; flex-direction: column; }
.bl-card[hidden] { display: none; }

/* the newest post spans the row and puts its image beside the copy */
.bl-card.is-lead { grid-column: 1 / -1; flex-direction: row; gap: 40px; align-items: center; }
.bl-card.is-lead .bl-thumb { flex: 0 0 56%; }
.bl-card.is-lead h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.bl-card.is-lead p { font-size: 1.02rem; }

.bl-thumb { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--gray-100); }
.bl-thumb img {
  width: 100%; height: 100%; display: block;
  aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform 0.4s ease;
}
.bl-card:hover .bl-thumb img { transform: scale(1.03); }

.bl-body { padding-top: 18px; display: flex; flex-direction: column; flex: 1; }
.bl-cat {
  font-family: var(--font-head); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 12px;
}
.bl-card h3 {
  font-family: var(--font-head); font-weight: 700; font-size: 1.12rem;
  line-height: 1.32; letter-spacing: -0.01em; margin: 0 0 12px;
}
.bl-card h3 a { color: var(--ink); }
.bl-card h3 a:hover { color: var(--gold-dark); }
.bl-card p { color: var(--gray-700); font-size: 0.95rem; line-height: 1.65; margin: 0 0 16px; }
.bl-meta { margin-top: auto; font-size: 0.8rem; color: var(--gray-500); }

/* ---- article ---- */
.post-head { background: var(--black); color: var(--white); padding: 64px 0 40px; }
.post-head-inner { max-width: 800px; margin: 0 auto; text-align: center; }
.post-cats { display: flex; gap: 10px; justify-content: center; margin-bottom: 22px; }
.post-cat {
  font-family: var(--font-head); font-weight: 700; font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(183,147,84,0.45); border-radius: 999px; padding: 7px 15px;
}
.post-cat:hover { background: rgba(183,147,84,0.14); color: var(--gold); }
.post-head h1 {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.9rem); line-height: 1.14;
  color: var(--white); margin: 0 0 22px; text-wrap: balance;
}
.post-meta { font-size: 0.86rem; color: rgba(255,255,255,0.6); }
.post-meta-dot { margin: 0 9px; opacity: 0.5; }

/* hero sits half on the black header, half on the page, so the article starts
   under the image rather than after a hard colour break */
.post-hero { background: linear-gradient(to bottom, var(--black) 50%, var(--white) 50%); }
.post-hero img {
  display: block; width: 100%; max-width: 940px; margin: 0 auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-lg);
}

.post-body {
  max-width: 720px; margin: 0 auto; padding: 56px 0 72px;
  font-size: 1.06rem; line-height: 1.78; color: var(--gray-700);
}
.post-body > h2 {
  font-family: var(--font-head); font-weight: 700; color: var(--ink);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.25;
  margin: 52px 0 18px; letter-spacing: -0.01em;
}
.post-body > h3 { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: 1.22rem; margin: 38px 0 14px; }
.post-body > h4 { font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: 1.05rem; margin: 30px 0 12px; }
.post-body > *:first-child { margin-top: 0; }
.post-body p { margin: 0 0 22px; }
/* the opening paragraph carries the article, so give it a little more presence */
.post-body > p:first-of-type { font-size: 1.14rem; color: var(--ink); }
.post-body a { color: var(--gold-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.post-body a:hover { color: var(--ink); }
.post-body strong { color: var(--ink); }
.post-body ul, .post-body ol { margin: 0 0 24px; padding-left: 24px; }
.post-body li { margin-bottom: 10px; }
.post-body blockquote {
  margin: 34px 0; padding: 26px 30px;
  background: var(--cream); border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.05rem; color: var(--ink);
}
.post-body blockquote p:last-child { margin-bottom: 0; }

.post-figure { margin: 34px 0; }
.post-figure img { width: 100%; display: block; border-radius: var(--radius-lg); }

/* wide tables scroll inside their own box rather than pushing the page sideways */
.post-table { overflow-x: auto; margin: 30px 0; border: 1px solid var(--gray-200); border-radius: var(--radius); }
.post-table table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.post-table th, .post-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--gray-200); }
.post-table th { background: var(--cream); font-family: var(--font-head); font-weight: 700; color: var(--ink); white-space: nowrap; }
.post-table tr:last-child td { border-bottom: 0; }

/* a trailing list of bare source URLs: shrink it, it is a reference list */
.post-refs { font-size: 0.86rem; word-break: break-word; }
.post-refs li { margin-bottom: 7px; }

/* ---- prev / next ---- */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.post-nav-link {
  display: block; padding: 24px 26px; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  line-height: 1.4; color: var(--ink); transition: var(--transition);
}
.post-nav-link:hover { border-color: var(--gold); color: var(--gold-dark); }
.post-nav-link span {
  display: block; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gray-500); margin-bottom: 9px; font-weight: 700;
}
.post-nav-link.is-next { text-align: right; }
/* if there is only one neighbour, keep it on its own side */
.post-nav-link.is-next:only-child { grid-column: 2; }

@media (max-width: 1000px) {
  .bl-grid { grid-template-columns: repeat(2, 1fr); }
  .bl-card.is-lead { flex-direction: column; gap: 0; }
  .bl-card.is-lead .bl-thumb { flex: none; width: 100%; }
}
@media (max-width: 640px) {
  .bl-grid { grid-template-columns: 1fr; gap: 34px; }
  .post-head { padding: 44px 0 32px; }
  .post-body { padding: 40px 0 56px; font-size: 1.02rem; }
  .post-body > h2 { margin-top: 40px; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-link.is-next { text-align: left; }
  .post-nav-link.is-next:only-child { grid-column: 1; }
}

/* ---------- LOCATION PAGE EXTRAS ----------
   Referenced by tools/gen-location-pages.py. */

/* the services actually offered in this city, from the CSV */
.loc-services {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--gray-200);
  font-size: 0.94rem; color: var(--gray-700);
}
.loc-services a { color: var(--gold-dark); font-weight: 600; }
.loc-services a:hover { color: var(--ink); }

/* other Renew locations in the same state: real internal linking, and useful to
   a reader working out which clinic is nearest */
.loc-siblings {
  list-style: none; padding: 0; margin: 36px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 20px;
}
.loc-siblings li { border-bottom: 1px solid var(--gray-200); padding: 12px 0; }
.loc-siblings a { font-family: var(--font-head); font-weight: 600; font-size: 0.96rem; color: var(--ink); }
.loc-siblings a:hover { color: var(--gold-dark); }
.loc-siblings span {
  font-family: var(--font-body); font-weight: 400; font-size: 0.78rem;
  color: var(--gray-500); text-transform: none; letter-spacing: 0;
}
.loc-more { margin-top: 26px; font-size: 0.92rem; }
.loc-more a { color: var(--gold-dark); font-weight: 600; }

@media (max-width: 560px) {
  .loc-siblings { grid-template-columns: 1fr; }
}


/* ============================================================
   PERFORMANCE SUPPLEMENTS
   Collection grid (sup-*) and product page (pdp-*). Structure follows 10X
   Health's product pages: gallery beside a spec column, then facts, benefits,
   a sticky long read, quality, directions and FAQ. No buy button.
   ============================================================ */

/* ---- collection grid ---- */
.sup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }
.sup-grid.is-five { grid-template-columns: repeat(5, 1fr); gap: 20px; }

.sup-card {
  display: flex; flex-direction: column; text-align: center;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 26px 22px 24px;
  transition: var(--transition);
}
.sup-card:hover { border-color: var(--gold); box-shadow: 0 18px 40px rgba(0,0,0,0.08); transform: translateY(-4px); }
.sup-shot {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1;
  background: var(--cream); border-radius: var(--radius); margin-bottom: 20px; overflow: hidden;
}
.sup-shot img { width: 88%; height: auto; display: block; transition: transform 0.4s ease; }
.sup-card:hover .sup-shot img { transform: scale(1.04); }
.sup-name {
  font-family: var(--font-head); font-weight: 700; font-size: 1.06rem;
  color: var(--ink); margin-bottom: 7px;
}
.sup-card:hover .sup-name { color: var(--gold-dark); }
.sup-for { font-size: 0.89rem; color: var(--gray-500); line-height: 1.55; }
.sup-go {
  margin-top: 16px; font-family: var(--font-head); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark);
}
.sup-grid.is-five .sup-name { font-size: 0.94rem; }
.sup-grid.is-five .sup-for { font-size: 0.82rem; }

/* goal matcher */
.sup-goals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 44px; }
.sup-goal { padding: 26px 0 0; border-top: 2px solid var(--gold); }
.sup-goal h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink); margin-bottom: 10px; }
.sup-goal p { color: var(--gray-700); font-size: 0.95rem; line-height: 1.7; }

/* ---- product page hero ---- */
.pdp-hero { background: var(--black); color: var(--white); padding: 56px 0 64px; }
/* min-width:0 on both columns. Without it a grid item is sized by its own
   min-content width, and one product's intro carries a wide ingredients table
   that pushed the whole hero to 771px inside a 375px screen. */
.pdp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.pdp-gallery, .pdp-spec { min-width: 0; }

.pdp-gallery { position: sticky; top: 110px; }
.pdp-main {
  display: grid; place-items: center; background: var(--white);
  border-radius: var(--radius-lg); aspect-ratio: 1 / 1; overflow: hidden;
}
.pdp-main img { width: 92%; height: auto; display: block; }
.pdp-thumbs { display: flex; gap: 12px; margin-top: 14px; }
.pdp-thumb {
  flex: 0 0 auto; width: 76px; height: 76px; padding: 6px; cursor: pointer;
  background: var(--white); border: 2px solid transparent; border-radius: var(--radius);
  display: grid; place-items: center; transition: border-color var(--transition);
}
.pdp-thumb img { width: 100%; height: auto; display: block; }
.pdp-thumb[aria-current="true"] { border-color: var(--gold); }
.pdp-thumb:hover { border-color: rgba(183,147,84,0.55); }
.pdp-thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.pdp-spec h1 {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1;
  color: var(--white); margin: 18px 0 14px;
}
.pdp-tagline { font-size: 1.12rem; color: var(--gold); font-family: var(--font-head); font-weight: 600; margin: 0 0 18px; }
.pdp-meta { margin: 0 0 24px; font-size: 0.9rem; }
.pdp-meta a { color: rgba(255,255,255,0.7); text-decoration: underline; text-underline-offset: 3px; }
.pdp-meta a:hover { color: var(--gold); }
.pdp-intro { color: rgba(255,255,255,0.76); line-height: 1.75; }
.pdp-intro p { margin: 0 0 16px; }
.pdp-intro p:last-child { margin-bottom: 0; }
.pdp-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.pdp-note {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 0.82rem; color: rgba(255,255,255,0.5); line-height: 1.6;
}

/* ---- the label ----
   A supplement label is short and the ingredient breakdown that used to sit beside
   it is thousands of words. Putting both in one two-column box gave a stub on the
   left and a column running off the page on the right. The label is its own
   centred block now, at the width a label actually wants, and the breakdown is a
   card grid below it. */
.pdp-label {
  max-width: 760px; margin: 40px auto 0;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 34px 36px;
  color: var(--gray-700); line-height: 1.7;
}
.pdp-label > p:first-child { margin-top: 0; }
.pdp-label p { margin: 0 0 14px; }
.pdp-label p:last-child { margin-bottom: 0; }
.pdp-label .post-table { margin: 22px 0; border: 1px solid var(--gray-200); border-radius: var(--radius); overflow-x: auto; }
.pdp-label table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.pdp-label th, .pdp-label td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--gray-200); }
.pdp-label thead th { background: var(--cream); font-family: var(--font-head); font-weight: 700; color: var(--ink); white-space: nowrap; }
/* the ingredient column is the one that should absorb the wrapping */
.pdp-label td:first-child, .pdp-label th:first-child { width: 52%; }
.pdp-label tbody tr:last-child td { border-bottom: 0; }
.pdp-label ul { padding-left: 20px; margin: 0 0 14px; }
.pdp-label li { margin-bottom: 8px; }
.pdp-label h4 { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--ink); margin: 22px 0 10px; }

/* ---- benefits ---- */
.pdp-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.pdp-benefit { padding: 28px 26px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); }
.pdp-benefit .material-icons-round {
  color: var(--gold); font-size: 28px; background: var(--cream);
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 18px;
}
.pdp-benefit h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--ink); margin-bottom: 10px; }
.pdp-benefit p { color: var(--gray-700); font-size: 0.94rem; line-height: 1.7; }

/* ---- sticky long read ---- */
.pdp-read { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 60px; align-items: start; }
.pdp-read-aside { position: sticky; top: 120px; }
.pdp-read-aside h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--ink); margin: 0 0 14px; }
.pdp-read-aside p { color: var(--gray-700); line-height: 1.7; margin-bottom: 22px; }
.pdp-read-block { padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid var(--gray-200); }
.pdp-read-block:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.pdp-read-block h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.22rem; color: var(--ink); margin-bottom: 14px; }
.pdp-read-block p { color: var(--gray-700); line-height: 1.78; margin: 0 0 16px; }
.pdp-read-block p:last-child { margin-bottom: 0; }
.pdp-read-block ul { padding-left: 22px; margin: 0 0 16px; color: var(--gray-700); line-height: 1.7; }
.pdp-read-block h4 { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--ink); margin: 20px 0 10px; }

/* ---- directions ---- */
.pdp-dirs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.pdp-dir { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 32px 30px; }
.pdp-dir h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.14rem; color: var(--ink); margin-bottom: 14px; }
.pdp-dir p, .pdp-dir li { color: var(--gray-700); line-height: 1.75; }
.pdp-dir ul { padding-left: 20px; margin: 0; }
.pdp-dir p { margin: 0 0 14px; }
.pdp-dir p:last-child { margin-bottom: 0; }

/* ---- FAQ ---- */
.pdp-faq { max-width: 820px; margin: 44px auto 0; }
.pdp-faq details { border-bottom: 1px solid var(--gray-200); }
.pdp-faq summary {
  cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--font-head); font-weight: 600; font-size: 1.04rem; color: var(--ink);
}
.pdp-faq summary::-webkit-details-marker { display: none; }
.pdp-faq summary::after {
  content: "add"; font-family: 'Material Icons Round'; font-weight: 400;
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  color: var(--gold-dark); font-size: 24px;
}
.pdp-faq details[open] summary::after { content: "remove"; }
.pdp-faq summary:hover { color: var(--gold-dark); }
.pdp-faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.pdp-faq-body { padding: 0 44px 24px 0; color: var(--gray-700); line-height: 1.78; }
.pdp-faq-body p { margin: 0 0 14px; }
.pdp-faq-body p:last-child { margin-bottom: 0; }

@media (max-width: 1000px) {
  .sup-grid, .sup-grid.is-five { grid-template-columns: repeat(2, 1fr); }
  .pdp-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .pdp-gallery { position: static; max-width: 440px; }
  .pdp-benefits { grid-template-columns: repeat(2, 1fr); }
  .pdp-read { grid-template-columns: 1fr; gap: 34px; }
  .pdp-read-aside { position: static; }
  .pdp-dirs, .sup-goals { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sup-grid, .sup-grid.is-five { grid-template-columns: 1fr; }
  .pdp-benefits { grid-template-columns: 1fr; }
  .pdp-hero { padding: 36px 0 44px; }
  .pdp-ctas .btn { width: 100%; text-align: center; }
}

/* ---- clipped card bodies ----
   The benefit and ingredient cards carry the client's own notes, which run from two
   lines to a full paragraph. Unclipped, every card in a row stretched to whichever
   was longest. Clip them all to the same height and let the reader open one in
   place. Reuses .tm-clip from the patient stories; .is-card sets the card's line
   count and its fade sits on the card's white ground. */
.pdp-benefit { display: flex; flex-direction: column; }
/* A fixed height, not a max. max-height only caps the long ones, so the short cards
   stayed short and the row heights still ranged over 160px. Every closed body is
   exactly this many lines, and the heading is clamped to two, so every card in the
   grid is the same height whatever their notes happen to say. Opening one grows its
   row, which is the point. */
/* Set the font metrics on the clip itself. Its 1.7em was resolving against the
   inherited 17px while the paragraph inside runs 15.04px, so a 3-line clip came out
   13% too tall and every card carried a band of dead space. Matching them makes
   "3 lines" mean three actual lines. */
.tm-clip.is-card { flex: 0 0 auto; font-size: 0.94rem; line-height: 1.7; }
.tm-clip.is-card:not(.is-open) { height: calc(var(--tm-lines) * 1.7em); }
.tm-clip.is-card p { margin: 0; color: var(--gray-700); font-size: 0.94rem; line-height: 1.7; }
.tm-clip.is-card:not(.is-open)::after {
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white) 80%);
}
/* nothing is being hidden on this card, so no fade suggesting there is */
.tm-clip.is-card[data-fits="true"]::after { display: none; }
.pdp-benefit h3 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.5em;
}
.pdp-benefit .tm-more { margin-top: 14px; }
/* keeps the button row aligned when a card's button is hidden */
.pdp-benefit .tm-more[hidden] { display: block; visibility: hidden; }

/* ---------- SIGN GRID: 5-up variant ---------- */
/* Scoped to desktop on purpose. The 2-col and 1-col rules below are max-width
   queries on .signs-grid, and a bare .signs-grid.is-five would outrank them. */
@media (min-width: 1025px) {
  .signs-grid.is-five { grid-template-columns: repeat(5, 1fr); }
}
.signs-note {
  max-width: 760px; margin: 34px auto 0; text-align: center;
  color: rgba(255,255,255,0.72); font-size: 1rem; line-height: 1.7;
}
.prose-after-grid { margin-top: 48px; }
/* A head that is the whole section needs no bottom margin: it left 146px of
   dead space under the TRT intro before the next band. */
.section-head:only-child { margin-bottom: 0; }
.nav-dropdown .nav-sub::before {
  content: ""; display: inline-block; width: 12px; height: 1px;
  background: currentColor; vertical-align: middle; margin-right: 8px; opacity: 0.5;
}

/* ---------- CTA inside prose ---------- */
/* Their copy ends several sections with a bare "Schedule a Consultation" text
   link. Standing it up as a button gives the section somewhere to go. */
.prose-cta {
  margin: 34px 0 0;
  text-align: center;
}
/* `.prose a` sets a gold-dark link colour, which beat .btn-gold's white and left
   the label at 1.62:1 against its own gold background. A button keeps button
   colours wherever it sits. */
.prose a.btn,
.prose-cta a.btn { text-decoration: none; }
.prose a.btn-gold,
.prose-cta a.btn-gold { color: var(--white); }
.prose a.btn-gold:hover,
.prose-cta a.btn-gold:hover { color: var(--white); }
.prose a.btn-blush,
.prose-cta a.btn-blush { color: #fff; }
.prose a.btn-blush:hover,
.prose-cta a.btn-blush:hover { color: #fff; }

/* The sticky long-read aside carries a section heading, so its eyebrow needs the
   same treatment as one in .section-head. Without this it rendered as 17px black
   body copy and read as a stray sentence. */
.pdp-read-aside .eyebrow {
  display: block;
  font-family: var(--font-head);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 12px;
}
.women .pdp-read-aside .eyebrow { color: #7d4c43; }

/* ---------- BEFORE / AFTER GALLERY ---------- */
/* These are real patient photographs, most of them side-by-side composites, so
   they must never be cropped. .bl-thumb's 16/9 object-fit: cover would cut the
   "after" half off. Full image, natural ratio, masonry-ish rows. */
.ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 30px; margin-top: 44px; }
.ba-card { display: flex; flex-direction: column; }
.ba-shot {
  display: block; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--gray-100); border: 1px solid var(--gray-200);
}
/* 12 of the 20 photos are exactly square and the other 8 are 1.12, so a fixed
   1:1 box aligns every row in the grid while letterboxing at most 6%. contain,
   never cover: these are side-by-side composites and cover would crop the
   "after" half off the edge. */
.ba-shot img {
  width: 100%; height: 100%; display: block;
  aspect-ratio: 1 / 1; object-fit: contain;
  background: var(--cream); transition: var(--transition);
}
.ba-card:hover .ba-shot img { transform: scale(1.02); }
.ba-card h3 {
  font-family: var(--font-head); font-weight: 700; font-size: 1.1rem;
  margin: 18px 0 10px; letter-spacing: -0.01em;
}
.ba-card h3 a { color: var(--ink); text-decoration: none; }
.ba-card h3 a:hover { color: var(--gold-dark); }
.ba-stats { display: flex; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.ba-stats span {
  font-family: var(--font-head); font-weight: 700; font-size: 0.88rem; color: var(--ink);
  background: var(--cream); border: 1px solid var(--gray-200);
  border-radius: 999px; padding: 6px 14px;
}
.ba-stats em {
  font-style: normal; font-weight: 600; font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-text); display: block;
}
.ba-stats.is-lead { justify-content: center; margin: 26px 0 0; }

/* single patient story */
.ba-story { max-width: 780px; margin: 0 auto; text-align: center; }
.ba-hero-shot { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray-200); }
.ba-hero-shot img { width: 100%; height: auto; display: block; }
.ba-quote {
  font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.6;
  color: var(--ink); margin: 34px 0 18px; padding: 0; border: 0; font-style: italic;
}
.ba-attrib {
  font-family: var(--font-head); font-size: 0.8rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray-500);
}

@media (max-width: 980px) {
  .ba-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 22px; }
}
@media (max-width: 640px) {
  .ba-grid { grid-template-columns: 1fr; }
}

/* A patient story has no full-bleed hero, so its .section-head carries the h1.
   styles.css sizes .section-head h2 only, which left the h1 at browser default. */
.section-head h1 {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.12;
  letter-spacing: -0.02em; color: var(--ink); margin: 0;
}
.women .section-head h1 { font-family: var(--serif); font-weight: 600; }

/* ---------- PHYSICIAN BIO ---------- */
.bio { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: start; max-width: 980px; margin: 0 auto; }
.bio-shot { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray-200); background: var(--cream); }
.bio-shot img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.bio-body p { color: var(--gray-700); line-height: 1.78; margin: 0 0 18px; }
.bio-body p:last-child { margin-bottom: 0; }

/* ---------- SINGLE QUESTION PAGE ---------- */
.faq-answer { max-width: 760px; margin: 0 auto; }
.faq-more { max-width: 760px; margin: 46px auto 0; padding-top: 30px; border-top: 1px solid var(--gray-200); }
.faq-more h3, .faq-more h2 { font-family: var(--font-head); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 16px; }
.faq-more ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.faq-more a { color: var(--ink); }
.faq-more a:hover { color: var(--gold-dark); }

@media (max-width: 780px) {
  .bio { grid-template-columns: 1fr; gap: 28px; }
  .bio-shot { max-width: 260px; }
}
.faq-permalink { margin: 14px 0 0; font-size: 0.9rem; }

/* ---------- PODCAST ---------- */
.pod-art { margin: 0 auto 34px; max-width: 320px; }
.pod-art img { width: 100%; height: auto; display: block; }
.pod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
/* Each card carries the platform's published brand colour via --pod. The marks
   themselves are trademarked and distributed by each platform, so nothing here
   imitates one: colour, name and a neutral audio icon only. */
.pod-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 28px 20px; text-decoration: none;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); transition: var(--transition);
  border-top: 3px solid var(--pod, var(--gold));
}
.pod-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,0.08); border-color: var(--pod, var(--gold)); }
.pod-mark {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pod, var(--gold)); margin-bottom: 8px;
}
.pod-mark .material-icons-round { color: #fff; font-size: 26px; }
.pod-where {
  font-family: var(--font-head); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray-500);
}
.pod-name { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--ink); }

@media (max-width: 980px) { .pod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pod-grid { grid-template-columns: 1fr; } }

/* ---------- EYEBROW CONTRAST ---------- */
/* --gold is 2.87:1 on white and 2.59:1 on cream, under the 4.5:1 AA needs for
   text this small. Light backgrounds get --gold-text; the dark bands keep --gold,
   where it sits at 6.86:1. .editorial-head .eyebrow appears on both, which is why
   this is keyed off the band rather than the component. */
/* .editorial is BLACK by default and .on-light flips it to white, so the light
   case is the exception here, not the rule. */
.editorial.on-light .editorial-head .eyebrow,
/* the pale variant is `section is-airy section-pale` with no .editorial class */
.section-pale .editorial-head .eyebrow,
.on-light .editorial-head .eyebrow,
.founders-grid .founders-copy .eyebrow,
.fc-step-label,
.post-cat,
.bl-cat { color: var(--gold-text); }

/* Gold-text is a deep bronze, so it is the RIGHT choice on white and the WRONG
   one on the dark cards, where it dropped to 2.68:1. Anything gold sitting on a
   dark band goes back to --gold, which is 6.86:1 there. */
.rv-feature .rv-stars,
.section-dark .rv-stars,
.section-dark .testimonial-stars,
.section-dark .loc-card .loc-rating { color: var(--gold); }

/* Both of these are small text on cream and both were just under AA:
   .ed-role at 4.21 in gold-dark, .disclaimer at 4.37 in gray-500. */
.ed-role { color: var(--gold-text); }
.disclaimer { color: #55606f; }


/* ============================================================
   HubSpot form (hsfc developer embed) dark theme.
   Used by the Contact and Low-T Quiz forms, which sit in dark
   .fc-card / .fc-section panels. Mirrors the homepage hero form:
   HubSpot's --hsf-* theme variables plus !important element
   rules (the embed injects its own stylesheet that would
   otherwise out-specify plain element selectors).
   The homepage does not load pages.css, so it is unaffected.
   ============================================================ */
.hs-form-html {
  --hsf-background__background-color: transparent;
  --hsf-background__background-image: none;
  --hsf-background__border-width: 0;
  --hsf-background__padding: 0;
  --hsf-row__vertical-spacing: 12px;
  --hsf-field-label__color: #a9a498;
  --hsf-field-label-requiredindicator__color: #b79354;
  --hsf-field-input__background-color: rgba(255,255,255,.05);
  --hsf-field-input__border-color: rgba(255,255,255,.18);
  --hsf-field-input__border-radius: 4px;
  --hsf-field-input__color: #ffffff;
  --hsf-field-input__placeholder-color: #8f8a7f;
  --hsf-field-textarea__placeholder-color: #8f8a7f;
  --hsf-field-description__color: #8f8a7f;
  --hsf-field-footer__color: #8f8a7f;
  --hsf-richtext__color: #8f8a7f;
  --hsf-erroralert__color: #f0a5a5;
  --hsf-button__background-color: #b79354;
  --hsf-button__background-image: none;
  --hsf-button__color: #1a1408;
  --hsf-button__border-color: #b79354;
  --hsf-button__border-width: 0;
  --hsf-button__border-radius: 3px;
  --hsf-button__width: 100%;
  --hsf-button__font-weight: 600;
  --hsf-button--hover__background-color: #c8a565;
  --hsf-button--hover__color: #1a1408;
  --hsf-button--hover__border-color: #c8a565;
}
.hs-form-html label,
.hs-form-html [class*="Label"] { color: #a9a498 !important; }
.hs-form-html input[type=text], .hs-form-html input[type=email],
.hs-form-html input[type=tel], .hs-form-html input[type=number],
.hs-form-html input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.hs-form-html select, .hs-form-html textarea {
  background: rgba(255,255,255,.05) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important; border-radius: 4px !important;
}
.hs-form-html ::placeholder { color: #8f8a7f !important; }
.hs-form-html select option { color: #111; }
.hs-form-html [class*="hsfc-Button"], .hs-form-html button[type=submit],
.hs-form-html input[type=submit] {
  background: #b79354 !important; color: #1a1408 !important; border-color: #b79354 !important;
}
.hs-form-html [class*="hsfc-Button"]:hover,
.hs-form-html button[type=submit]:hover { background: #c8a565 !important; }
.hs-form-html [class*="Description"], .hs-form-html [class*="RichText"],
.hs-form-html [class*="Consent"], .hs-form-html [class*="Footer"],
.hs-form-html [class*="Legal"] { color: #8f8a7f !important; }

/* Tighten HubSpot form sizing (Contact + Quiz): the embed inherits 17px body
   text everywhere, which made fields and legal small print look oversized. */
.hs-form-html {
  --hsf-field-input__font-size: 15px;
  --hsf-field-label__font-size: 12px;
  --hsf-field-description__font-size: 12px;
  --hsf-field-footer__font-size: 12px;
  --hsf-richtext__font-size: 12px;
  --hsf-erroralert__font-size: 12px;
  --hsf-button__font-size: 15px;
  --hsf-field-input__padding: 10px 12px;
  --hsf-row__vertical-spacing: 10px;
}
.hs-form-html input:not([type=checkbox]):not([type=radio]), .hs-form-html select, .hs-form-html textarea {
  font-size: 15px !important; padding: 10px 12px !important;
}
.hs-form-html label, .hs-form-html [class*="Label"] { font-size: 12px !important; line-height: 1.4 !important; }
.hs-form-html [class*="RichText"], .hs-form-html [class*="Description"],
.hs-form-html [class*="Footer"], .hs-form-html [class*="Legal"],
.hs-form-html [class*="Consent"] { font-size: 12px !important; line-height: 1.5 !important; }
.hs-form-html [class*="hsfc-Button"], .hs-form-html button[type=submit] { font-size: 15px !important; padding: 12px 18px !important; }

/* HubSpot dropdown options panel: it inherited the translucent input background
   (--hsf-field-input__background-color) and rendered 95% see-through, so the
   controls behind it bled through. Force an opaque dark panel. */
.hs-form-html [class*="DropdownOptions"] {
  background: #1f1e1b !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5) !important;
}
.hs-form-html [class*="DropdownOptions"] [class*="Option"] { background: transparent !important; color: #f1efe9 !important; }
.hs-form-html [class*="DropdownOptions"] [class*="Option"]:hover { background: rgba(255,255,255,0.08) !important; }

/* ============================================================
   The Renew Brief, inline newsletter opt-in inside blog posts.
   Dark card so the .hs-form-html embed (styled for dark above)
   stays readable against the white article body. Blog pages
   load pages.css; the homepage does not and never shows this.
   ============================================================ */
.post-brief {
  background: var(--ink, #1a1408);
  border-radius: 14px;
  padding: 34px 30px;
  margin: 40px 0;
}
.post-brief-inner { max-width: 520px; }
.post-brief-eyebrow {
  font-family: var(--font-head, inherit);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold, #b79354); font-weight: 600; margin: 0 0 10px;
}
.post-brief-title { color: #fff; font-size: 22px; line-height: 1.2; margin: 0 0 8px; }
.post-brief-sub { color: #a9a498; font-size: 14px; line-height: 1.5; margin: 0 0 18px; }
@media (max-width: 560px) { .post-brief { padding: 26px 20px; } }

/* Blog authorship (Ken's standard, 2026-09): linked author byline + optional
   medical-reviewer line. Reviewer line only renders on clinical posts. */
.post-author-link { color: inherit; border-bottom: 1px solid var(--gold, #b79354); }
.post-author-link:hover { color: var(--gold, #b79354); }
.post-review { margin-top: 12px; font-size: 13.5px; color: var(--muted, #6b6660); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.post-review .material-icons-round { font-size: 16px; color: var(--gold-dark, #8f6f3c); }

/* the blog post header is dark, so its category chip keeps --gold (6.9:1), not the light-background --gold-text */
.post-head .post-cat { color: var(--gold); }
/* newsletter box title is h2 (it followed the h1 as an h3); pin its look */
.post-brief-title { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; margin: 0 0 8px; }
/* the women's accent (#7d4c43) is for light backgrounds; on a dark band use a lighter tint (7:1) */
.women .section-dark .eyebrow, .women .cta-block .eyebrow { color: #c98b7e; }

/* ============================================================
   Location form card: light, matching the tan section (Matt,
   2026-10-19). Kept LAST in this file and prefixed .loc-form .fc-card
   so it beats both dark form themes above (.hs-form-html ... and the
   quiz card's .fc-card .hsfc-...). Contact and Quiz stay dark.
   ============================================================ */
.loc-form .fc-card { background: #fff; border-color: #e2ddd3; box-shadow: 0 18px 40px rgba(26,20,8,0.06); }
.loc-form .fc-card .hs-form-html {
  --hsf-field-label__color: #4d473d;
  --hsf-field-input__background-color: #fff;
  --hsf-field-input__border-color: #d6d0c4;
  --hsf-field-input__color: #1a1a1a;
  --hsf-field-input__placeholder-color: #6f6a60;
  --hsf-field-textarea__placeholder-color: #6f6a60;
  --hsf-field-description__color: #5c574d;
  --hsf-field-footer__color: #5c574d;
  --hsf-richtext__color: #5c574d;
  --hsf-erroralert__color: #b42318;
}
.loc-form .fc-card .hs-form-html label,
.loc-form .fc-card .hs-form-html [class*="Label"],
.loc-form .fc-card .hsfc-CheckboxField .hsfc-FieldLabel,
.loc-form .fc-card .hsfc-TextField > .hsfc-FieldLabel, .loc-form .fc-card .hsfc-EmailField > .hsfc-FieldLabel,
.loc-form .fc-card .hsfc-PhoneField > .hsfc-FieldLabel, .loc-form .fc-card .hsfc-TextareaField > .hsfc-FieldLabel,
.loc-form .fc-card .hsfc-CheckboxFieldGroup > .hsfc-FieldLabel, .loc-form .fc-card .hsfc-DropdownField > .hsfc-FieldLabel,
.loc-form .fc-card .hsfc-Heading { color: #4d473d !important; }
.loc-form .fc-card .hsfc-Form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.loc-form .fc-card .hsfc-Form textarea, .loc-form .fc-card .hsfc-Form select,
.loc-form .fc-card .hs-form-html input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.loc-form .fc-card [class*="PhoneInput"] button, .loc-form .fc-card [class*="CountrySelect"] {
  background: #fff !important; color: #1a1a1a !important; border: 1px solid #d6d0c4 !important;
}
.loc-form .fc-card .hsfc-Form ::placeholder, .loc-form .fc-card .hs-form-html ::placeholder { color: #6f6a60 !important; }
.loc-form .fc-card .hsfc-RichText, .loc-form .fc-card .hsfc-RichText p,
.loc-form .fc-card .hsfc-DataPrivacyField, .loc-form .fc-card .hsfc-DataPrivacyField *,
.loc-form .fc-card .hs-form-html [class*="Description"], .loc-form .fc-card .hs-form-html [class*="Consent"],
.loc-form .fc-card .hs-form-html [class*="Footer"], .loc-form .fc-card .hs-form-html [class*="Legal"] { color: #5c574d !important; }
.loc-form .fc-card .hsfc-RichText a, .loc-form .fc-card .hsfc-DataPrivacyField a { color: var(--gold-text) !important; }
.loc-form .fc-card [class*="DropdownOptions"] { background: #fff !important; border: 1px solid #d6d0c4 !important; box-shadow: 0 16px 40px rgba(26,20,8,0.12) !important; }
.loc-form .fc-card [class*="DropdownOptions"] [class*="Option"] { color: #1a1a1a !important; }
.loc-form .fc-card [class*="DropdownOptions"] [class*="Option"]:hover { background: #f6f3ee !important; }
.loc-form .fc-card .hsfc-ErrorAlert { color: #b42318 !important; }
.loc-form .fc-card .hsfc-Button:focus-visible { outline-color: var(--ink) !important; }