/* ============================================================
   VITA Rx — Playfair Display + DM Sans
   v21 EARTHY: warm parchment + earthy neutrals + champagne gold
   NOHO-inspired: photo backgrounds, editorial angled layouts
   ============================================================ */

:root {
  --bg: #efe8d6;              /* warm parchment page bg */
  --bg-alt: #e7dec6;          /* deeper parchment */
  --parchment: #efe8d6;
  --parchment-warm: #e5dcc7;
  --parchment-deep: #d9cdb3;
  --taupe: #c7b8a8;           /* soft mauve-taupe */
  --taupe-deep: #a89684;      /* deeper taupe */
  --mocha: #8a6d5c;           /* warm brown-mocha */
  --mocha-deep: #6b5241;      /* deeper mocha */
  --espresso: #2b1f18;        /* deep espresso — text */
  --sepia: #7a5d4a;           /* warm sepia */
  --sand: #d4c4a8;            /* warm sand */
  --dusty-sage: #a89a7f;      /* warm dusty sage */
  --dusty-rose: #b89a8a;      /* warm dusty rose */
  --white: #ffffff;
  --charcoal: #2b1f18;        /* aliased to espresso */
  --dark: #2b1f18;            /* espresso replaces navy for dark surfaces */
  --dark-card: #1f1610;       /* deeper espresso */
  --gold: #c9a86b;            /* champagne gold, softer */
  --gold-deep: #a68851;       /* antique gold */
  --cream: #f7f0da;
  --muted: #7a6f5f;
  --muted-on-dark: #c7b8a8;
  --border: #d9cdb3;
  /* legacy aliases — remap old strong colors to earthy palette */
  --maroon: var(--mocha);
  --maroon-deep: var(--mocha-deep);
  --maroon-tint: var(--parchment-warm);
  --navy: var(--espresso);
  --navy-deep: var(--dark-card);
  --navy-tint: var(--parchment-warm);
  --terracotta: var(--mocha);
  --terracotta-deep: var(--mocha-deep);
  --terracotta-tint: var(--parchment-warm);
  --sage: var(--dusty-sage);
  --sage-deep: var(--mocha);
  --sage-tint: var(--parchment-warm);

  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;

  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 18px 40px -18px rgba(44, 44, 44, 0.22);
  --shadow-soft: 0 10px 30px -14px rgba(44, 44, 44, 0.16);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.12; }
p { margin: 0; }
a { color: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--charcoal); color: #fff; padding: 10px 18px; z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

.section-inner {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 28px;
}
.section-inner--narrow { max-width: 840px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 600;
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 15px 28px; border-radius: 4px;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.btn--lg { padding: 17px 32px; }
.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: var(--gold-deep); }
.btn--outline { background: transparent; color: var(--charcoal); border-color: #c9c7c2; }
.btn--outline:hover { border-color: var(--charcoal); }
.btn--dark { background: var(--charcoal); color: #fff; }
.btn--dark:hover { background: var(--navy-deep); }
.btn--cream { background: var(--cream); color: var(--charcoal); box-shadow: var(--shadow-soft); }
.btn--cream:hover { background: #fff; }

/* ---------- Badges & eyebrows ---------- */
.badge {
  display: inline-block;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 8px 18px; border-radius: 999px;
}
.badge--soft { background: #f2ead9; color: var(--gold-deep); }
.badge--cream { background: var(--cream); color: var(--charcoal); }

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 18px;
}
.eyebrow--gold { color: var(--gold); }

/* ---------- Header ---------- */
/* ---------- Promo banner (sticky, above header) ---------- */
.promo-banner {
  display: block;
  position: sticky; top: 0; z-index: 60;
  background: var(--navy);
  color: #f4ecd8;
  border-bottom: 1px solid rgba(217, 185, 130, 0.25);
}
.promo-banner__inner {
  max-width: 1180px;
  margin-inline: auto;
  padding: 10px 24px;
  text-align: center;
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  line-height: 1.35;
}
.promo-banner__text { color: #f4ecd8; }
.promo-banner__dash { color: var(--gold); margin: 0 4px; }
.promo-banner__accent {
  color: var(--gold);
  font-weight: 500;
  font-style: italic;
}
.promo-banner__cta {
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.03em;
}
@media (max-width: 640px) {
  .promo-banner__inner { font-size: 12px; padding: 8px 14px; }
  .promo-banner__accent { font-size: 11px; }
}

/* ---------- Founding Members section ---------- */
.founding {
  background: linear-gradient(180deg, #faf7f0 0%, #f4ecd8 100%);
  padding: 96px 0;
  border-top: 1px solid rgba(217, 185, 130, 0.4);
  border-bottom: 1px solid rgba(217, 185, 130, 0.4);
  scroll-margin-top: 100px;
}
.founding__inner { text-align: center; }
.founding__header { margin-bottom: 48px; }
.founding__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  color: var(--navy);
  margin: 12px 0 20px;
  letter-spacing: -0.01em;
}
.founding__title em {
  font-style: italic;
  color: var(--gold-deep, #a8823a);
}
.founding__lede {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink, #2a2a2a);
  max-width: 620px;
  margin: 0 auto;
}
.founding__lede strong {
  color: var(--navy);
  font-weight: 600;
}

.founding-form {
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
  background: #ffffff;
  border: 1px solid rgba(217, 185, 130, 0.5);
  border-radius: 4px;
  padding: 40px 36px;
  box-shadow: 0 20px 60px -20px rgba(20, 45, 68, 0.15);
}
.founding-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.founding-form__row--single { grid-template-columns: 1fr; }
.founding-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.founding-form__label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}
.founding-form input,
.founding-form select {
  font-family: var(--sans);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid rgba(20, 45, 68, 0.2);
  border-radius: 3px;
  background: #fdfbf6;
  color: var(--ink, #2a2a2a);
  transition: border-color 200ms ease, background 200ms ease;
  appearance: none;
  -webkit-appearance: none;
}
.founding-form select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23142d44' stroke-width='1.5' stroke-linecap='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
.founding-form input:focus,
.founding-form select:focus {
  outline: none;
  border-color: var(--gold);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(217, 185, 130, 0.15);
}
.founding-form input::placeholder {
  color: #a89f8f;
  font-style: italic;
}

/* Multi-select goals fieldset */
.founding-form__goals {
  border: none;
  padding: 0;
  margin: 0 0 8px;
}
.founding-form__goals .founding-form__label {
  display: block;
  padding: 0;
  margin-bottom: 14px;
}
.founding-form__hint {
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #8a7d5f;
  font-size: 12px;
  margin-left: 6px;
}
.founding-form__goals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.goal-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid rgba(168, 130, 58, 0.25);
  border-radius: 4px;
  cursor: pointer;
  transition: all 200ms ease;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--charcoal);
  user-select: none;
}
.goal-chip:hover {
  border-color: rgba(168, 130, 58, 0.55);
  background: #fdfaf3;
}
.goal-chip input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1.5px solid rgba(168, 130, 58, 0.45);
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  position: relative;
  transition: all 200ms ease;
  margin: 0;
  padding: 0;
}
.goal-chip input[type="checkbox"]:checked {
  background: var(--gold-deep, #a8823a);
  border-color: var(--gold-deep, #a8823a);
}
.goal-chip input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.goal-chip:has(input:checked) {
  border-color: var(--gold-deep, #a8823a);
  background: rgba(168, 130, 58, 0.06);
}
.goal-chip span {
  line-height: 1.35;
}
@media (max-width: 560px) {
  .founding-form__goals-grid { grid-template-columns: 1fr; }
}

.founding-form__submit {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 16px 24px;
  background: var(--navy);
  color: #f4ecd8;
  border: none;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease, transform 100ms ease;
}
.founding-form__submit:hover {
  background: #0f2a3d;
}
.founding-form__submit:active { transform: translateY(1px); }
.founding-form__note {
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: #786c58;
  text-align: center;
  font-style: italic;
}
.founding-form__success {
  text-align: center;
  padding: 40px 20px;
}
.founding-form__success h3 {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--navy);
  margin-bottom: 12px;
  font-weight: 500;
}
.founding-form__success p {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink, #2a2a2a);
  line-height: 1.6;
}
@media (max-width: 640px) {
  .founding { padding: 64px 0; }
  .founding-form { padding: 28px 22px; }
  .founding-form__row { grid-template-columns: 1fr; gap: 16px; }
}

.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(249, 249, 249, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

/* Header metrics, consumed by the hero so it fills the rest of the viewport.
   --header-h is re-measured by main.js; the value here is the load-time default.
   --header-gap is the sticky float offset above the header (0 on mobile). */
:root { --header-h: 81px; --header-gap: 0px; --stats-gap: 72px; }

/* The header is flush at every width now, so no per-breakpoint override is
   needed. --header-gap stays defined (at 0) because the hero still subtracts
   it when sizing itself to the remaining viewport. */
.header__inner {
  max-width: 1320px; margin-inline: auto;
  padding: 16px 28px;
  display: flex; align-items: center; gap: 36px;
}
.logo { text-decoration: none; display: inline-flex; }
.logo__mark { color: var(--charcoal); display: block; }
.nav { display: flex; gap: 24px; margin-inline: auto; align-items: center; }
.nav a { white-space: nowrap; }
.nav a {
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; color: var(--charcoal);
  transition: color 0.2s ease;
}
.nav a:hover { color: var(--gold); }
.nav__vw {
  color: var(--sage) !important;
  border: 1.5px solid var(--sage); border-radius: 8px;
  padding: 8px 14px;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav__vw:hover { background: var(--sage); color: var(--cream) !important; }
.header__actions { display: flex; }
.nav-toggle {
  display: none; background: none; border: none; color: var(--charcoal); padding: 6px; cursor: pointer;
}
.mobile-menu {
  display: none; flex-direction: column; gap: 20px;
  padding: 22px 28px 30px; border-top: 1px solid var(--border);
}
.mobile-menu a {
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--charcoal);
}
.mobile-menu__vw {
  color: var(--sage) !important;
  border: 1.5px solid var(--sage); border-radius: 8px;
  padding: 12px 16px; text-align: center;
}
.header.is-menu-open .mobile-menu { display: flex; }

/* ---------- GLP-1 Weight Management ---------- */
.glp { background: var(--dark); padding: 100px 0; }
.glp__intro { max-width: 660px; margin-bottom: 56px; }
.glp__intro .badge { margin-bottom: 22px; }
.glp__title { color: var(--cream); font-size: clamp(30px, 3vw, 40px); margin-bottom: 18px; }
.glp__lede { color: var(--muted-on-dark); font-size: 17px; }
.glp__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.glp-card {
  background: var(--dark-card); border-radius: var(--radius);
  padding: 38px 32px; border-top: 3px solid var(--gold);
}
.glp-card__tag {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
}
.glp-card h3 { color: var(--cream); font-size: 26px; margin-bottom: 12px; }
.glp-card p { color: var(--muted-on-dark); font-size: 15.5px; }
.glp-card__disclaimer {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12.5px !important; line-height: 1.55;
  color: #8f8d88 !important;
}
.glp__footer {
  margin-top: 52px; display: flex; align-items: center;
  justify-content: space-between; gap: 36px;
}
.glp__note { color: var(--muted-on-dark); font-size: 14px; max-width: 600px; }
.glp__footer .btn { flex-shrink: 0; }
@media (max-width: 900px) {
  .glp__grid { grid-template-columns: 1fr; }
  .glp__footer { flex-direction: column; align-items: flex-start; }
}

/* ---------- Hero ---------- */
.hero { background: var(--bg); padding: 72px 0 96px; }
.hero--backdrop {
  position: relative;
  background: #ede4d0;
  padding: 140px 0 120px;
  overflow: hidden;
}
.hero__bg-float {
  position: absolute; inset: 0;
}
.hero__bg {
  position: absolute; inset: 0;
  background: url('assets/hero-tree.png?v=1') center center / cover no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg-float { animation: none; }
  .hero__bg { transition: none; }
}
.hero--backdrop::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(237, 228, 208, 0.18) 0%, rgba(237, 228, 208, 0.08) 40%, rgba(237, 228, 208, 0.25) 100%);
  z-index: 1;
}
.hero--backdrop .hero__inner--centered { z-index: 2; }
.hero__inner {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center;
}
.hero__inner--centered {
  position: relative; z-index: 1;
  display: block; text-align: center;
}
.hero__copy--centered { max-width: 780px; margin: 0 auto; }
.hero__copy--centered .hero__accent {
  max-width: none; margin: 0 auto 20px;
  color: #2a1f14;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.02;
}
.hero__copy--centered .hero__accent .hero__accent-italic {
  font-style: italic; font-weight: 400;
}
.hero__copy--centered .hero__subhead {
  max-width: 44ch; margin: 0 auto 34px;
  color: #4a3b28;
  font-size: 17px;
  letter-spacing: 0.005em;
}
.hero__copy--centered .hero__cta-row { justify-content: center; }
.hero__ornament {
  display: block;
  width: 180px; height: auto;
  margin: 18px auto 40px;
  opacity: 0.95;
}

/* ---------- Framed Hero (NoHo-style card) ---------- */
.hero-frame {
  background: var(--bg);
  padding: var(--header-gap) 0 0;
}
.hero-frame__inner {
  max-width: none;
  margin: 0 auto;
  padding: 0;
}
.hero-card {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  /* Fill everything below the header. dvh keeps this correct while mobile
     browser chrome shows/hides; the vh line above is the fallback. */
  min-height: calc(100vh - var(--header-h) - var(--header-gap));
  min-height: calc(100dvh - var(--header-h) - var(--header-gap));
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-card__video {
  position: absolute; inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  z-index: 0;
  background: #2a1218;
}
.hero-card::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(30, 15, 20, 0.35) 0%, rgba(30, 15, 20, 0.55) 100%),
    linear-gradient(180deg, rgba(20, 15, 18, 0.15) 0%, rgba(20, 15, 18, 0.05) 40%, rgba(20, 15, 18, 0.35) 100%);
  border-radius: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-card__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 40px 24px;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-card__eyebrow {
  font-family: var(--sans);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #e6c98a;
  margin: 0 0 28px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  opacity: 0.95;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .hero-card__eyebrow {
    font-size: 10px;
    letter-spacing: 0.2em;
    margin: 0 0 22px;
  }
}
.hero-card__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(52px, 7vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: #f4ecd8;
  margin: 0 0 36px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}
.hero-card__title-italic {
  font-style: italic;
  font-weight: 400;
  color: #e6c98a;
}
.hero-card__tagline {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.5;
  color: #f4ecd8;
  max-width: 620px;
  margin: -12px auto 32px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
  opacity: 0.92;
}
.hero-card__cta {
  display: inline-block;
  background: var(--gold);
  color: #1a1917;
  padding: 16px 40px;
  border-radius: 999px;
  font-family: var(--sans, 'DM Sans', sans-serif);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.4);
}
.hero-card__cta:hover {
  background: #d9a94e;
  transform: translateY(-1px);
}
.hero-card__emblem {
  display: block;
  width: clamp(560px, 60vw, 800px);
  height: auto;
  margin: clamp(24px, 3vw, 40px) auto 0;
  filter: drop-shadow(0 18px 40px rgba(30, 45, 30, 0.55));
}
.hero-frame__stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  /* Equal breathing room above and below the stat bar, every width. */
  margin: var(--stats-gap) auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  /* The hero wrapper is full-bleed now, so the stat bar keeps its own gutters:
     shrink-to-fit when it fits, otherwise inset from the screen edges. */
  width: calc(100% - 2 * clamp(20px, 3vw, 48px));
  max-width: fit-content;
}
.hero-frame__stat {
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 200px;
}
.hero-frame__stat:nth-child(1) { background: var(--maroon); }
.hero-frame__stat:nth-child(2) { background: var(--dark); }
.hero-frame__stat:nth-child(3) { background: var(--gold-deep); }
.hero-frame__stat strong {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}
.hero-frame__stat span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .hero-frame__stats { flex-direction: column; max-width: 90%; }
  .hero-frame__stat { min-width: 0; text-align: center; align-items: center; }
  .hero-card__emblem { width: 110px; }
}
.btn--outline-light {
  border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; background: transparent;
}
.btn--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }
.hero__kicker {
  font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 20px;
}
.hero__kicker strong { color: var(--gold-deep); margin-right: 10px; }
.hero__title {
  font-size: clamp(44px, 5.4vw, 72px);
  font-weight: 500; line-height: 1;
}
.hero__title-box {
  display: inline-block;
  background: var(--sage);
  color: var(--gold-bright, #d9a94e);
  padding: 0.28em 0.5em 0.34em;
  border-radius: 8px;
  letter-spacing: 0.14em;
  box-shadow: var(--shadow-soft);
}
.hero__title-rx { font-size: 0.55em; letter-spacing: 0.02em; margin-left: 0.08em; }
.hero__title-x { font-size: 0.62em; }
.hero__accent {
  font-family: var(--serif); font-size: clamp(40px, 4.4vw, 62px);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.01em;
  max-width: 12ch;
  margin: 10px 0 24px;
}
.hero__subhead { max-width: 46ch; color: #4b4b4b; margin-bottom: 34px; }
.hero__amp { color: var(--gold); font-style: italic; }
.hero__cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
.hero__stats {
  display: inline-grid; grid-template-columns: repeat(3, auto);
  background: var(--sage); border-radius: 6px; overflow: hidden;
}
.hero__stat:nth-child(2) { background: var(--dark); }
.hero__stat:nth-child(3) { background: var(--gold-deep); }
.hero__stat {
  padding: 18px 26px;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  display: flex; flex-direction: column; gap: 3px;
}
.hero__stat:last-child { border-right: none; }
.hero__stat strong { color: #fff; font-size: 17px; font-weight: 700; }
.hero__stat span {
  color: rgba(255, 255, 255, 0.75); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}

.hero__media { position: relative; }
.hero__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 4.6; object-fit: cover; object-position: center top; width: 100%;
}
.hero__quote-card {
  position: absolute; right: -18px; bottom: 34px;
  margin: 0; max-width: 300px;
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 26px;
}
.hero__quote-card blockquote {
  margin: 0 0 14px; font-family: var(--serif); font-style: italic;
  font-size: 17px; line-height: 1.45;
}
.hero__quote-card figcaption {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.hero__quote-dash { width: 26px; height: 2px; background: var(--gold); flex: none; }
.hero__info-card { max-width: 320px; }
.hero__info-title {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px;
  font-family: var(--serif); font-size: 19px; font-weight: 600;
  color: var(--charcoal);
}
.hero__info-text {
  margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted);
}

/* ---------- Peptide explainer band ---------- */
.peptide-note { background: var(--cream); padding: 54px 0; }
.peptide-note__inner {
  display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start;
}
.peptide-note__title {
  display: flex; align-items: center; gap: 12px;
  margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 600;
  color: var(--charcoal);
}
.peptide-note__text {
  margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--muted);
  max-width: 760px;
}
@media (max-width: 760px) {
  .peptide-note { padding: 40px 0; }
  .peptide-note__inner { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- Process (dark) ---------- */
.process { background: var(--dark); color: #fff; padding: 110px 0 120px; }
.process__inner {
  display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 72px; align-items: start;
}
.process__intro { position: sticky; top: 110px; }
.process__title {
  color: #fff; font-size: clamp(38px, 4.4vw, 58px); font-weight: 600;
  margin-bottom: 22px;
}
.process__lede { color: var(--muted-on-dark); max-width: 34ch; }
.process__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 20px;
}
.process__card {
  background: var(--dark-card);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  padding: 34px 38px;
  display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: start;
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.process__card:nth-child(3n+2) { background: var(--maroon); }
.process__card:nth-child(3n) { background: var(--gold-deep); }
.process__card.reveal-ready { opacity: 0; transform: translateY(18px); }
.process__card.is-visible { opacity: 1; transform: none; }
.process__num {
  font-family: var(--serif); font-size: 30px; color: var(--gold); line-height: 1.2;
}
.process__body h3 {
  color: #fff; font-size: 26px; font-weight: 600; margin-bottom: 10px;
}
.process__body p { color: var(--muted-on-dark); font-size: 16px; }

/* ---------- Programs ---------- */
.programs { padding: 110px 0 0; }
.programs__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  margin-bottom: 26px;
}
.program-card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 40px 36px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.program-card--intro { box-shadow: var(--shadow-soft); }
.program-card--intro .badge { margin-bottom: 24px; }
.programs__title { font-size: clamp(30px, 3vw, 40px); margin-bottom: 20px; }
.program-card--intro p { color: var(--muted); }
.program-card:not(.program-card--intro) { border-top: 3px solid var(--gold); }
.program-card__num {
  font-family: var(--serif); font-size: 19px; color: var(--gold-deep);
  background: var(--cream); border-radius: 999px;
  width: 44px; height: 44px; display: grid; place-items: center;
  margin-bottom: 26px;
}
.program-card h3 { font-size: 27px; margin-bottom: 14px; }
.program-card p { color: var(--muted); font-size: 16px; }
.program-card__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.program-card__list li {
  font-size: 15px; color: var(--charcoal); padding-left: 22px; position: relative;
}
.program-card__list li::before {
  content: "+"; position: absolute; left: 0; color: var(--gold); font-weight: 700;
}

/* ---------- Concierge (gold panel) ---------- */
.concierge {
  background: var(--gold); border-radius: var(--radius-lg);
  padding: 64px 60px;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center;
  color: #fff;
  margin-top: 26px;
}
.concierge__copy .badge { margin-bottom: 26px; }
.concierge__title { color: #fff; font-size: clamp(34px, 3.6vw, 48px); margin-bottom: 20px; }
.concierge__copy > p { color: rgba(255, 255, 255, 0.92); margin-bottom: 30px; max-width: 42ch; }
.concierge__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.concierge__card:nth-child(even) { background: var(--maroon-tint); }
.concierge__card {
  background: var(--cream); color: var(--charcoal);
  border-radius: var(--radius);
  padding: 24px 24px 26px;
}
.concierge__num { font-family: var(--serif); font-size: 24px; display: block; margin-bottom: 6px; }
.concierge__label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px;
}
.concierge__card p { font-size: 14.5px; color: #4b4b4b; }

/* ---------- Medical Director (navy) ---------- */
.director { background: var(--navy); padding: 72px 0; margin-top: 110px; }
.director__inner {
  display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: center;
}
.director__photo {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow);
}
.director__photo img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.director__badge {
  position: absolute; left: 16px; bottom: 16px;
  background: var(--charcoal); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 4px;
}
.director__card {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 38px 40px;
}
.director__name { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 16px; }
.director__pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 18px; color: var(--charcoal); background: var(--bg);
}
.director__divider { height: 1px; background: var(--border); margin-bottom: 22px; }
.director__bio { color: #4b4b4b; font-size: 15px; line-height: 1.7; margin-bottom: 18px; }
.director__bio:last-child { margin-bottom: 0; }

/* ---------- Our Standard ---------- */
.standard { padding: 110px 0; }
.standard__inner { text-align: center; }
.standard__title { font-size: clamp(34px, 4vw, 52px); margin-bottom: 16px; }
.standard__lede { color: var(--muted); margin-bottom: 52px; }
.standard__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-bottom: 36px;
}
.standard__card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 30px 24px;
  text-align: center;
}
.standard__mark {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin: 0 auto 18px;
  background: var(--cream); color: var(--gold-deep);
  border-radius: 999px; font-size: 15px; font-weight: 700;
}
.standard__card p { font-size: 14.5px; color: #4b4b4b; text-align: left; }
.standard__caption {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}

/* ---------- FAQ ---------- */
.habits { background: var(--bg); padding: 110px 0; }
.habits__intro { max-width: 680px; margin-bottom: 56px; }
.habits__intro .badge { margin-bottom: 20px; }
.habits__title { font-size: clamp(30px, 3.2vw, 42px); margin-bottom: 16px; }
.habits__lede { color: var(--muted); font-size: 17px; line-height: 1.7; }
.habits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; }
.habit-card {
  background: var(--navy); border-radius: var(--radius); padding: 32px 30px;
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.habit-card:nth-child(3n+2) { background: var(--maroon); }
.habit-card:nth-child(3n) { background: var(--gold-deep); }
.habit-card.reveal-ready { opacity: 0; transform: translateY(18px); }
.habit-card.is-visible { opacity: 1; transform: none; }
.habit-card__num {
  display: inline-block; font-family: var(--serif); font-size: 28px; font-weight: 600;
  color: var(--gold); margin-bottom: 12px; line-height: 1.2;
}
.habit-card h3 { font-size: 20px; margin-bottom: 10px; color: #fff; font-weight: 600; }
.habit-card p { font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.78); margin: 0; }
.habits__doctor {
  margin-top: 24px; background: var(--gold);
  border-radius: var(--radius); padding: 42px 46px;
}
.habits__doctor h3 { font-family: var(--serif); font-size: 26px; margin-bottom: 12px; color: var(--charcoal); font-weight: 600; }
.habits__doctor p { font-size: 15px; line-height: 1.7; margin: 0; color: rgba(30, 29, 27, 0.82); }
.habits__note {
  margin-top: 44px; text-align: center; font-size: 15px; color: var(--muted);
}
.habits__note a { color: var(--sage); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.fullscript { background: var(--cream); padding: 92px 0; }
.fullscript + .director { margin-top: 0; }
.fullscript__inner {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center;
}
.fullscript__title { font-size: clamp(28px, 3vw, 38px); margin-bottom: 16px; }
.fullscript__lede { color: var(--muted); font-size: 16px; line-height: 1.7; margin-bottom: 28px; }
.fullscript__intro .badge { margin-bottom: 20px; }
.fullscript__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.fullscript__points li {
  background: var(--white); border-radius: var(--radius); padding: 20px 24px;
  font-size: 15px; line-height: 1.65; color: var(--muted);
  box-shadow: 0 2px 10px rgba(30, 29, 27, 0.05);
}
.fullscript__points li strong { color: var(--charcoal); font-weight: 600; }

.faq { padding: 0 0 110px; }
.faq__title { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 36px; text-align: center; }
.faq__list { display: flex; flex-direction: column; gap: 14px; }
.faq__item {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 6px 28px;
}
.faq__item summary {
  font-family: var(--serif); font-size: 20px; font-weight: 600;
  padding: 20px 0; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; font-family: var(--sans); font-size: 22px; color: var(--gold);
  transition: transform 0.2s ease; flex: none;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding: 0 0 22px; }
.faq__answer p { color: var(--muted); font-size: 16px; }

/* ---------- Final CTA (gold) ---------- */
.cta { background: var(--gold); color: #fff; padding: 110px 0; }
.cta__inner {
  display: grid; grid-template-columns: 1.2fr 1px 0.9fr; gap: 56px; align-items: center;
}
.cta__kicker { font-size: 16px; margin-bottom: 14px; color: rgba(255, 255, 255, 0.92); }
.cta__title {
  color: var(--charcoal); font-size: clamp(48px, 6vw, 84px); font-weight: 600; line-height: 1.04;
}
.cta__divider { background: rgba(255, 255, 255, 0.4); height: 100%; min-height: 160px; }
.cta__right p { color: rgba(255, 255, 255, 0.95); margin-bottom: 28px; }
.cta__right .btn { margin-bottom: 18px; }
.cta__caption {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- Footer ---------- */
.footer { background: var(--bg); padding: 72px 0 48px; }
.footer__inner { text-align: center; }
.footer__mark { color: var(--gold); display: block; margin: 0 auto 28px; }
.footer__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; margin-bottom: 36px; }
.footer__links a {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; color: var(--muted);
  transition: color 0.2s ease;
}
.footer__links a:hover { color: var(--gold); }
.footer__divider { height: 1px; background: var(--border); margin-bottom: 28px; }
.footer__disclaimer {
  max-width: 820px;
  margin: 0 auto 24px;
  padding: 22px 28px;
  background: rgba(28, 43, 72, 0.04);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer__disclaimer p {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  text-align: center;
}
.footer__disclaimer strong {
  color: var(--charcoal);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.footer__legal { font-size: 13px; color: var(--muted); max-width: 640px; margin-inline: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .hero__quote-card { right: 12px; }
  .process__inner { grid-template-columns: 1fr; gap: 48px; }
  .process__intro { position: static; }
  .programs__grid { grid-template-columns: 1fr 1fr; }
  .program-card--intro { grid-column: 1 / -1; }
  .concierge { grid-template-columns: 1fr; padding: 48px 36px; }
  .director__inner { grid-template-columns: 1fr; }
  .director__media { max-width: 280px; }
  .standard__grid { grid-template-columns: 1fr 1fr; }
  .habits__grid { grid-template-columns: 1fr 1fr; }
  .fullscript__inner { grid-template-columns: 1fr; gap: 40px; }
  .cta__inner { grid-template-columns: 1fr; gap: 36px; }
  .cta__divider { display: none; }
}

@media (max-width: 1180px) {
  .nav, .header__actions { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
}

@media (max-width: 720px) {
  .hero { padding: 48px 0 72px; }
  .hero__stats { grid-template-columns: 1fr; display: grid; width: 100%; }
  .hero__stat { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
  .hero__stat:last-child { border-bottom: none; }
  .hero__quote-card { position: relative; right: auto; bottom: auto; margin-top: -60px; margin-inline: 16px; max-width: none; z-index: 2; }
  .process { padding: 72px 0 80px; }
  .process__card { padding: 26px 24px; grid-template-columns: 46px 1fr; gap: 14px; }
  .process__body h3 { font-size: 21px; }
  .programs { padding-top: 72px; }
  .programs__grid { grid-template-columns: 1fr; }
  .concierge__grid { grid-template-columns: 1fr; }
  .director { padding: 72px 0; margin-top: 72px; }
  .director__card { padding: 36px 26px; }
  .standard { padding: 72px 0; }
  .standard__grid { grid-template-columns: 1fr; }
  .habits { padding: 72px 0; }
  .habits__grid { grid-template-columns: 1fr; }
  .habits__doctor { padding: 32px 26px; }
  .fullscript { padding: 64px 0; }
  .faq { padding-bottom: 72px; }
  .cta { padding: 72px 0; }
  .footer { padding: 56px 0 40px; }
}

/* ============================================================
   PILLARS — Concierge Standards band
   Light cream section between dark process and light programs
   ============================================================ */
.pillars {
  background: var(--cream);
  padding: 96px 0;
  border-top: 1px solid #ede5d0;
  border-bottom: 1px solid #ede5d0;
}
.pillars__inner {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 72px;
  align-items: start;
}
.pillars__intro { position: sticky; top: 110px; }
.pillars__title {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1.08;
  font-weight: 500;
  color: var(--charcoal);
  margin: 12px 0 14px;
}
.pillars__lede {
  color: var(--muted);
  max-width: 32ch;
  font-size: 17px;
}
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pillar {
  border-radius: 14px;
  padding: 34px 28px 30px;
  box-shadow: 0 1px 2px rgba(44, 44, 44, 0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.pillar:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(44, 44, 44, 0.14);
}
/* Sage / Black / Gold rotation */
.pillar:nth-child(1) { background: var(--maroon); color: #fff; }
.pillar:nth-child(2) { background: var(--dark); color: #fff; }
.pillar:nth-child(3) { background: var(--gold); color: #fff; }
.pillar__mark {
  display: inline-block;
  font-family: var(--serif);
  font-size: 22px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.pillar__title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  line-height: 1.22;
  margin-bottom: 10px;
}
.pillar__body {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15.5px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .pillars { padding: 72px 0; }
  .pillars__inner { grid-template-columns: 1fr; gap: 40px; }
  .pillars__intro { position: static; }
  .pillars__title { font-size: 34px; }
  .pillars__grid { grid-template-columns: 1fr; gap: 16px; }
  .pillar { padding: 26px 22px 24px; }
}

/* ============================================================
   NEW SECTIONS — VITA Rx concierge rebuild
   ============================================================ */

/* ---------- Mission (narrow brand statement) ---------- */
.mission { background: var(--maroon-tint); padding: 110px 0 100px; }
.mission__inner { text-align: left; }
.mission__inner .eyebrow { margin-bottom: 18px; }
.mission__title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: 1.08; letter-spacing: -0.01em;
  color: var(--charcoal); margin-bottom: 28px;
}
.mission__body {
  color: #4b4b4b; font-size: 18px; line-height: 1.75;
  margin-bottom: 22px;
}
.mission__body:last-of-type { margin-bottom: 32px; }
.mission__cta {
  display: inline-block;
  font-family: var(--sans); font-weight: 600;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-deep); text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.mission__cta:hover { color: var(--charcoal); border-color: var(--charcoal); }

/* ---------- Peptides (5 category cards) ---------- */
.peptides { background: var(--bg); padding: 110px 0; }
.peptides::before { content: none; }
.peptides__intro { max-width: 680px; margin-bottom: 56px; }
.peptides__intro .eyebrow { margin-bottom: 20px; }
.peptides__title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1.1; margin-bottom: 18px;
}
.peptides__lede { color: var(--muted); font-size: 17px; line-height: 1.7; }
.peptides__micronote { color: var(--gold-deep, var(--gold)); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; margin-top: 18px; }
.peptides__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.peptide-card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 34px 30px 32px;
  border-top: 3px solid var(--gold);
  display: flex; flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.peptide-card:nth-child(2) { border-top-color: var(--maroon); }
.peptide-card:nth-child(2) .peptide-card__tag { background: var(--maroon-tint); color: var(--maroon-deep); }
.peptide-card:nth-child(3) { border-top-color: var(--terracotta); }
.peptide-card:nth-child(3) .peptide-card__tag { background: #f2dccb; color: var(--terracotta-deep); }
.peptide-card:nth-child(4) { border-top-color: var(--navy); }
.peptide-card:nth-child(4) .peptide-card__tag { background: var(--navy-tint); color: var(--navy-deep); }
.peptide-card:nth-child(5) { border-top-color: var(--terracotta); }
.peptide-card:nth-child(5) .peptide-card__tag { background: #f2dccb; color: var(--terracotta-deep); }
.peptide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.peptide-card__tag {
  display: inline-block; align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-deep);
  background: var(--cream); border-radius: 999px;
  padding: 7px 14px; margin-bottom: 22px;
}
.peptide-card h3 {
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  line-height: 1.2; margin-bottom: 12px; color: var(--charcoal);
}
.peptide-card p { font-size: 15px; line-height: 1.65; color: #4b4b4b; margin: 0; }
.peptides__disclaimer {
  margin-top: 44px; max-width: 780px; margin-inline: auto;
  text-align: center; font-size: 13px; line-height: 1.7;
  color: var(--muted); font-style: italic;
}

/* ---------- Membership (dark section) ---------- */
.membership { background: var(--dark); padding: 110px 0; color: #fff; }
.membership__intro { max-width: 640px; margin-bottom: 56px; }
.membership__intro .eyebrow { margin-bottom: 20px; color: var(--gold); }
.membership__title {
  color: #fff; font-family: var(--serif); font-weight: 600;
  font-size: clamp(34px, 3.8vw, 50px);
  line-height: 1.1; margin-bottom: 18px;
}
.membership__lede { color: var(--muted-on-dark); font-size: 17px; line-height: 1.7; }
.membership__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.member-card {
  background: var(--dark-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 32px 28px 30px;
  display: flex; flex-direction: column;
}
.member-card__icon {
  display: inline-flex;
  color: var(--gold);
  margin-bottom: 16px;
}
.member-card__icon svg { width: 28px; height: 28px; display: block; }
.member-card h3 {
  color: #fff; font-family: var(--serif); font-size: 20px; font-weight: 600;
  line-height: 1.25; margin-bottom: 10px;
}
.member-card p {
  color: var(--muted-on-dark); font-size: 14.5px; line-height: 1.65; margin: 0;
}
.membership__footer {
  /* Stacked and centred: the note used to take the left ~2/3 with the button
     pushed to the far right edge. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; margin-top: 52px;
  padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.membership__note {
  color: var(--muted-on-dark); font-size: 14px; max-width: 640px; line-height: 1.7;
  margin-inline: auto;
}
.membership__footer .btn { flex-shrink: 0; }

/* ---------- Journey (3-step: Join / Meet / Transform) ---------- */
.journey { background: var(--bg-alt); padding: 110px 0; }
.journey__intro {
  max-width: 620px; margin: 0 auto 60px; text-align: center;
}
.journey__intro .eyebrow { margin-bottom: 20px; }
.journey__title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(34px, 3.8vw, 50px);
  line-height: 1.1;
}
.journey__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.journey__card {
  background: var(--cream); border-radius: var(--radius);
  padding: 40px 34px 36px;
  position: relative;
  border-top: 3px solid var(--gold);
}
.journey__card:nth-child(2) { border-top-color: var(--navy); }
.journey__card:nth-child(2) .journey__step { color: var(--navy-deep); }
.journey__card:nth-child(3) { border-top-color: var(--terracotta); }
.journey__card:nth-child(3) .journey__step { color: var(--terracotta-deep); }
.journey__step {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-deep);
  margin-bottom: 22px;
}
.journey__card h3 {
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  line-height: 1.2; margin-bottom: 12px; color: var(--charcoal);
}
.journey__card p { font-size: 15.5px; line-height: 1.7; color: #4b4b4b; margin: 0; }

/* ---------- People (Dr. Hill + Marti) ---------- */
.people { background: var(--navy-tint); padding: 110px 0; }
.people__intro { text-align: center; max-width: 620px; margin: 0 auto 60px; }
.people__intro .eyebrow { margin-bottom: 20px; }
.people__title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(34px, 3.6vw, 46px);
  line-height: 1.1;
}
.people__grid {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  max-width: 520px; margin: 0 auto;
}
.person-card {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.person-card__photo {
  width: 100%; aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--cream) 0%, #efe6cf 100%);
  background-image: url("assets/dr-hill-headshot-v3.png");
  background-size: cover; background-position: center 20%;
}
.person-card__photo--marti {
  background-image: url("assets/marti-headshot.png");
  background-position: center 15%;
}
.person-card__body { padding: 30px 32px 32px; }
.person-card--no-photo .person-card__body { padding: 40px 40px 40px; }
.person-card--compact { text-align: center; }
.person-card--compact .person-card__body { padding: 44px 40px 40px; display: flex; flex-direction: column; align-items: center; }
.person-card__avatar {
  width: 140px; height: 140px; border-radius: 50%;
  background-image: url("assets/dr-hill-headshot-ai.png");
  background-size: cover; background-position: center 25%;
  margin-bottom: 22px;
  box-shadow: 0 2px 12px rgba(30, 29, 27, 0.12);
}
.person-card--compact .person-card__title { text-align: center; }
.person-card--compact p:not(.person-card__title) { text-align: center; max-width: 420px; }
.person-card h3 {
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  color: var(--charcoal); margin-bottom: 6px;
}
.person-card__title {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-deep);
  margin-bottom: 16px;
}
.person-card p {
  font-size: 15px; line-height: 1.7; color: #4b4b4b; margin: 0;
}

/* ---------- Partnerships ---------- */
.partnerships { background: var(--terracotta-tint); padding: 100px 0; }
.partnerships__inner { text-align: left; }
.partnerships__inner .eyebrow { margin-bottom: 18px; }
.partnerships__title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.12; margin-bottom: 24px;
}
.partnerships__body {
  font-size: 17px; line-height: 1.75; color: #4b4b4b; margin-bottom: 18px;
}
.partnerships__body a {
  color: var(--sage); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.partnerships__note { font-size: 15px; color: var(--muted); font-style: italic; }

/* SIMPLE DISCLAIMER BLOCK */
.disclaimer { background: var(--cream); padding: 80px 0; border-top: 1px solid rgba(0,0,0,0.06); }
.disclaimer__inner { text-align: center; }
.disclaimer__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: clamp(26px, 2.4vw, 34px); color: var(--charcoal); margin-bottom: 22px; letter-spacing: -0.01em; }
.disclaimer__body { color: var(--muted); font-size: 15px; line-height: 1.75; max-width: 640px; margin: 0 auto 14px; }
.disclaimer__body:last-child { margin-bottom: 0; }

/* ---------- FAQ (grid layout, not accordion) ---------- */
.faq { background: var(--bg); padding: 110px 0; }
.faq__intro { text-align: center; max-width: 620px; margin: 0 auto 56px; }
.faq__intro .eyebrow { margin-bottom: 20px; }
.faq__title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1.1; margin-bottom: 0; text-align: center;
}
.faq__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  margin-bottom: 56px;
}
.faq-card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 32px 30px 30px;
  border-left: 3px solid var(--gold);
}
.faq-card h3 {
  font-family: var(--serif); font-size: 20px; font-weight: 600;
  line-height: 1.25; margin-bottom: 10px; color: var(--charcoal);
}
.faq-card p { font-size: 15px; line-height: 1.7; color: #4b4b4b; margin: 0; }
.faq__contact {
  text-align: center; padding-top: 40px;
  border-top: 1px solid var(--border);
}
.faq__contact h3 {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  margin-bottom: 8px; color: var(--charcoal);
}
.faq__contact p { color: var(--muted); font-size: 16px; margin-bottom: 22px; }

/* ---------- Footer address line ---------- */
.footer__address {
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--charcoal); text-align: center;
  margin: 0 0 14px;
}
.footer__address a {
  color: var(--charcoal);
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 45, 68, 0.15);
  padding-bottom: 1px;
  transition: color 200ms ease, border-color 200ms ease;
}
.footer__address a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .mission { padding: 80px 0 72px; }
  .peptides { padding: 80px 0; }
  .peptides__grid { grid-template-columns: repeat(2, 1fr); }
  .membership { padding: 80px 0; }
  .membership__grid { grid-template-columns: repeat(2, 1fr); }
  .membership__footer { flex-direction: column; align-items: center; }
  .journey { padding: 80px 0; }
  .journey__list { grid-template-columns: 1fr; }
  .people { padding: 80px 0; }
  .people__grid { grid-template-columns: 1fr; }
  .partnerships { padding: 72px 0; }
  .faq { padding: 80px 0; }
  .faq__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .peptides__grid { grid-template-columns: 1fr; }
  .membership__grid { grid-template-columns: 1fr; }
  .mission__title { font-size: 34px; }
  .peptides__title, .membership__title, .journey__title, .people__title, .faq__title { font-size: 30px; }
}

/* ============================================================
   v21 EARTHY OVERRIDES — NOHO-inspired photo backgrounds,
   editorial layouts, warm serif italics
   ============================================================ */

/* Promo banner — warm mocha instead of navy */
.promo-banner { background: var(--mocha-deep); }
.promo-banner__text { color: #f0e4d0; }
.promo-banner__accent { color: var(--gold); }

/* MISSION: full-bleed misty hills photo, editorial split */
.mission {
  background: linear-gradient(rgba(43, 31, 24, 0.35), rgba(43, 31, 24, 0.55)),
              url("assets/earthy-hills.jpg") center / cover no-repeat;
  padding: 140px 0 130px;
  color: #f5ecd7;
  position: relative;
}
.mission__inner {
  max-width: 780px;
  text-align: left;
  padding-left: clamp(20px, 6vw, 80px);
}
.mission .eyebrow--gold {
  color: #e6c988;
  font-size: 12px;
  letter-spacing: 0.28em;
}
.mission__title {
  color: #fbf3dd;
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}
.mission__title em, .mission__title .italic {
  font-style: italic;
  color: #f0d68f;
  font-weight: 500;
}
.mission__body {
  color: rgba(251, 243, 221, 0.88);
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 20px;
  max-width: 640px;
}
.mission__cta {
  color: #fbf3dd;
  border-bottom: 1px solid rgba(251, 243, 221, 0.4);
  padding-bottom: 4px;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  margin-top: 12px;
  transition: border-color 0.2s;
}
.mission__cta:hover { border-color: #f0d68f; color: #f0d68f; }

/* PILLARS: parchment section with warm cards */
.pillars { background: var(--parchment); padding: 130px 0; }
.pillars__title { color: var(--espresso); }
.pillars__title em, .pillars__title .italic {
  font-family: var(--serif); font-style: italic; color: var(--mocha);
}
.pillar {
  background: transparent;
  border: none;
  border-top: 1px solid var(--parchment-deep);
  padding: 32px 0 0 0;
}
.pillar__mark {
  color: var(--gold-deep);
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 500;
  font-style: italic;
  display: block;
  margin-bottom: 18px;
}
.pillar__title {
  color: var(--espresso);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 14px;
}
.pillar__body { color: var(--muted); font-size: 15.5px; line-height: 1.7; }

/* PEPTIDES: warm taupe background with photo-embedded cards */
.peptides {
  background: var(--taupe);
  color: var(--espresso);
  padding: 130px 0;
  position: relative;
}
.peptides::before {
  content: "";
  position: absolute; inset: 0;
  background: url("assets/earthy-linen.jpg") center / cover no-repeat;
  opacity: 0.25;
  pointer-events: none;
}
.peptides__intro { position: relative; z-index: 2; max-width: 760px; }
.peptides__title {
  color: var(--espresso);
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.15;
}
.peptides__title em, .peptides__title .italic {
  font-style: italic; color: var(--mocha-deep);
}
.peptides__lede { color: rgba(43, 31, 24, 0.7); }
.peptides__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.peptide-card {
  background: rgba(247, 240, 218, 0.94);
  border: none;
  border-top: none !important;
  border-radius: 14px;
  padding: 32px 26px;
  box-shadow: 0 20px 50px -22px rgba(43, 31, 24, 0.35);
  backdrop-filter: blur(4px);
}
.peptide-card:nth-child(n) { border-top-color: transparent; }
.peptide-card__tag {
  background: transparent !important;
  color: var(--gold-deep) !important;
  padding: 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 14px;
}
.peptide-card h3 {
  color: var(--espresso);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 12px;
}
.peptide-card p { color: rgba(43, 31, 24, 0.75); }

/* MEMBERSHIP: espresso dark section with warm gold */
.membership { background: var(--espresso); }
.membership__title { color: #fbf3dd; }
.membership__title em, .membership__title .italic {
  font-family: var(--serif); font-style: italic; color: var(--gold);
}
.membership__lede { color: rgba(251, 243, 221, 0.78); }
.membership__intro .eyebrow { color: var(--gold); }
.member-card {
  background: rgba(247, 240, 218, 0.06);
  border: 1px solid rgba(201, 168, 107, 0.2);
  border-radius: 14px;
  padding: 32px 26px;
}
.member-card__icon { color: var(--gold); }
.member-card h3 { color: #fbf3dd; font-family: var(--serif); font-weight: 500; }
.member-card p { color: rgba(251, 243, 221, 0.72); }
.membership__note { color: rgba(251, 243, 221, 0.65); }

/* JOURNEY: warm apothecary photo background, editorial */
.journey {
  background: linear-gradient(rgba(239, 232, 214, 0.72), rgba(239, 232, 214, 0.85)),
              url("assets/earthy-apothecary.jpg") right center / cover no-repeat;
  padding: 130px 0;
}
.journey__title { color: var(--espresso); }
.journey__title em, .journey__title .italic {
  font-family: var(--serif); font-style: italic; color: var(--mocha);
}
.journey__card {
  background: rgba(247, 240, 218, 0.85);
  border-top: 1px solid var(--parchment-deep) !important;
  border-radius: 14px;
  backdrop-filter: blur(4px);
}
.journey__card:nth-child(n) { border-top-color: var(--parchment-deep) !important; }
.journey__step {
  color: var(--gold-deep) !important;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
}
.journey__card h3 {
  color: var(--espresso);
  font-family: var(--serif);
  font-weight: 500;
}
.journey__card p { color: var(--muted); }

/* PEOPLE: warm mocha panel with vial photo accent */
.people {
  background: var(--parchment-warm);
  padding: 130px 0;
  position: relative;
}
.people__title { color: var(--espresso); }
.people__title em, .people__title .italic {
  font-family: var(--serif); font-style: italic; color: var(--mocha);
}
.people__grid { display: grid; grid-template-columns: 1fr; place-items: center; }
.person-card--compact {
  background: rgba(247, 240, 218, 0.6);
  border: 1px solid var(--parchment-deep);
  border-radius: 18px;
  padding: 42px 38px;
  max-width: 620px;
  text-align: center;
}
.person-card__avatar {
  background: url("assets/dr-hill-headshot-ai.png") center 22% / cover no-repeat, var(--taupe);
  width: 128px;
  height: 128px;
  border-radius: 50%;
  margin: 0 auto 20px;
  border: 2px solid var(--gold);
}
.person-card--compact h3 {
  color: var(--espresso);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 6px;
}
.person-card__title {
  color: var(--gold-deep);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 20px;
}
.person-card--compact p { color: var(--muted); font-size: 15.5px; line-height: 1.7; }

/* HABITS: espresso panel — rhythm break with cream text */
.habits {
  background: #2b1f18;
  padding: 100px 0;
  position: relative;
}

/* HABITS COMPACT: single-paragraph variant */
.habits--compact {
  padding: 84px 0;
}
.habits__compact {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.habits--compact .eyebrow--gold {
  color: #d6b985;
  font-size: 12px;
  letter-spacing: 0.28em;
  margin-bottom: 20px;
}
.habits--compact .habits__title {
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 28px;
  color: #efe8d6;
}
.habits--compact .habits__title em,
.habits--compact .habits__title .italic {
  color: #d6b985;
}
.habits__paragraph {
  color: rgba(239, 232, 214, 0.92);
  font-family: var(--sans);
  font-style: normal;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.7;
  margin: 0 auto 24px;
  max-width: 620px;
}
.habits__disclaimer {
  color: rgba(239, 232, 214, 0.65);
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  line-height: 1.65;
  margin: 0 auto;
  max-width: 560px;
  padding-top: 22px;
  border-top: 1px solid rgba(214, 185, 133, 0.35);
}
@media (max-width: 640px) {
  .habits--compact { padding: 64px 0; }
  .habits__paragraph { font-size: 17px; }
  .habits__disclaimer { font-size: 13px; }
}
.habits__title em, .habits__title .italic {
  font-family: var(--serif); font-style: italic;
}
.habit-card {
  background: transparent !important;
  border: none;
  border-top: 1px solid rgba(168, 130, 58, 0.28);
  border-radius: 0;
  padding: 20px 4px 8px;
  backdrop-filter: none;
}
.habit-card:nth-child(n) { background: transparent !important; }
.habit-card__num {
  color: var(--gold-deep) !important;
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}
.habit-card h3 {
  color: var(--espresso) !important;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 6px;
}
.habit-card p {
  color: rgba(43, 31, 24, 0.72) !important;
  font-size: 14px;
  line-height: 1.55;
}
.habits__doctor {
  background: var(--espresso);
  color: #fbf3dd;
  border-radius: 18px;
  padding: 44px 40px;
  margin-top: 40px;
  border-left: 3px solid var(--gold);
}
.habits__doctor h3 { color: var(--gold) !important; font-family: var(--serif); font-style: italic; }
.habits__doctor p { color: rgba(251, 243, 221, 0.82) !important; }

/* PARTNERSHIPS: warm parchment, editorial left-align */
.partnerships { background: var(--parchment-warm); padding: 120px 0; }
.partnerships__title {
  color: var(--espresso);
  font-family: var(--serif);
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 500;
  line-height: 1.2;
}
.partnerships__title em, .partnerships__title .italic {
  font-style: italic; color: var(--mocha);
}
.partnerships__body { color: var(--muted); font-size: 17px; line-height: 1.75; }

/* CTA: espresso, warm gold headline */
.cta {
  background: linear-gradient(rgba(43, 31, 24, 0.72), rgba(43, 31, 24, 0.85)),
              url("assets/earthy-woman-walking.jpg") center 30% / cover no-repeat;
  color: #fbf3dd;
  padding: 130px 0;
}
.cta__kicker { color: var(--gold); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; }
.cta__title {
  color: #fbf3dd;
  font-family: var(--serif);
  font-size: clamp(38px, 4.5vw, 60px);
  font-weight: 500;
  line-height: 1.1;
}
.cta__title em, .cta__title .italic {
  font-style: italic; color: var(--gold);
}
.cta__divider { background: rgba(251, 243, 221, 0.25) !important; }
.cta__right p { color: rgba(251, 243, 221, 0.85) !important; }
.cta__caption { color: rgba(251, 243, 221, 0.6) !important; }

/* Buttons — warmer */
.btn--gold { background: var(--gold); color: var(--espresso); }
.btn--gold:hover { background: var(--gold-deep); color: #fbf3dd; }
.btn--cream { background: #fbf3dd; color: var(--espresso); }
.btn--cream:hover { background: #fff; }

/* Hero stats — earthy */
.hero-frame__stat:nth-child(1) { background: var(--mocha) !important; }
.hero-frame__stat:nth-child(2) { background: var(--espresso) !important; }
.hero-frame__stat:nth-child(3) { background: var(--gold-deep) !important; }

/* Footer */
.footer { background: var(--parchment); color: var(--muted); }
.footer__mark { color: var(--gold-deep); }
.footer__links a { color: var(--espresso); }
.footer__links a:hover { color: var(--mocha); }

/* Eyebrows — softer gold */
.eyebrow--gold { color: var(--gold-deep); font-size: 12px; letter-spacing: 0.22em; font-weight: 700; }

/* Responsive tweaks */
@media (max-width: 900px) {
  .peptides__grid { grid-template-columns: 1fr; }
  .mission { padding: 100px 0; }
  .mission__inner { padding-left: 20px; }
}

/* v21: Force out legacy nth-child colored backgrounds */
.pillar:nth-child(n) {
  background: transparent !important;
  color: var(--espresso) !important;
  border: none !important;
  border-top: 1px solid var(--parchment-deep) !important;
  padding: 32px 0 0 0 !important;
}
.pillar:nth-child(n) .pillar__title { color: var(--espresso) !important; }
.pillar:nth-child(n) .pillar__body { color: var(--muted) !important; }
.pillar:nth-child(n) .pillar__mark { color: var(--gold-deep) !important; }

.habit-card:nth-child(n) {
  background: transparent !important;
  color: var(--espresso) !important;
}
.habit-card:nth-child(n) h3 { color: var(--espresso) !important; }
.habit-card:nth-child(n) p { color: rgba(43, 31, 24, 0.75) !important; }
.habit-card:nth-child(n) .habit-card__num { color: var(--gold-deep) !important; }

.peptide-card:nth-child(n) {
  background: rgba(247, 240, 218, 0.94) !important;
  border-top: none !important;
}
.peptide-card:nth-child(n) .peptide-card__tag {
  background: transparent !important;
  color: var(--gold-deep) !important;
}

/* Kill sticky pillars intro so headings scroll properly */
.pillars__inner {
  display: grid !important;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
}
.pillars__intro { position: static !important; }
.pillars__grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0 !important;
}
@media (max-width: 900px) {
  .pillars__inner { grid-template-columns: 1fr; gap: 30px; }
}

/* v23: NOHO-style horizontal photo-textured pillar cards */
.pillars {
  background: var(--parchment);
  padding: 130px 0 !important;
}
.pillars__inner {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 48px !important;
  max-width: 1080px;
  margin: 0 auto;
}
.pillars__intro {
  position: static !important;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.pillars__title {
  color: var(--espresso) !important;
  font-family: var(--serif);
  font-size: 52px;
  line-height: 1.05;
  font-weight: 500;
  margin: 0 0 16px;
}
.pillars__title em, .pillars__title .italic {
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 500;
}
.pillars__lede {
  color: var(--muted);
  font-size: 17px;
  margin: 0;
}

.pillars__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  margin-top: 8px;
}

.pillar:nth-child(n) {
  background: var(--espresso) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
  min-height: 220px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}

.pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  z-index: 0;
}
.pillar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(43, 31, 24, 0.62), rgba(107, 82, 65, 0.55));
  z-index: 1;
}

.pillar:nth-child(1)::before { background-image: url("assets/earthy-hills.jpg"); }
.pillar:nth-child(2)::before { background-image: url("assets/earthy-vial-stone.jpg"); }
.pillar:nth-child(3)::before { background-image: url("assets/earthy-linen.jpg"); }

.pillar > * {
  position: relative;
  z-index: 2;
}
.pillar__mark {
  display: none !important;
}
.pillar__title {
  color: #fbf3dd !important;
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
  margin: 0 0 14px !important;
  padding: 0 32px;
}
.pillar__body {
  color: rgba(251, 243, 221, 0.88) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  padding: 0 32px 8px;
  max-width: 460px;
}

/* Third pillar spans full width on desktop for NOHO alternating rhythm */
.pillar:nth-child(3) {
  grid-column: 1 / -1;
  min-height: 200px;
}

@media (max-width: 800px) {
  .pillars { padding: 80px 0 !important; }
  .pillars__title { font-size: 36px; }
  .pillars__grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .pillar:nth-child(n) { min-height: 180px; }
  .pillar:nth-child(3) { grid-column: auto; }
  .pillar__title { font-size: 22px !important; padding: 0 22px; }
  .pillar__body { font-size: 14px !important; padding: 0 22px 6px; }
}

/* "not commodity." drops to its own line under "Concierge," */
.pillars__title em, .pillars__title .italic { display: block; }

/* ============================================
   v25 — PEPTIDE BOTTLE IMAGERY (NOHO-style)
   ============================================ */

/* Full-width bottle band above the peptides section (like NOHO peptides hero) */
.peptides { position: relative; }
.peptides__bottleband {
  width: 100%;
  height: 340px;
  background: url("assets/peptide_vial_wide.jpg") center / cover no-repeat;
  margin-bottom: 60px;
  position: relative;
  border-radius: 0;
}
.peptides__bottleband::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(247, 240, 218, 0.2) 60%,
    var(--parchment) 100%
  );
  pointer-events: none;
}

/* Small bottle trio image beside mission copy (like NOHO trust trio) */
.mission__inner { position: relative; }
.mission__bottles {
  width: 200px;
  height: 260px;
  background: url("assets/peptide_vial_trio.jpg") center / cover no-repeat;
  border-radius: 14px;
  margin: 0 auto 32px;
  box-shadow: 0 20px 40px rgba(63, 46, 30, 0.15);
}

/* Mobile */
@media (max-width: 780px) {
  .peptides__bottleband {
    height: 220px;
    margin-bottom: 40px;
  }
  .mission__bottles {
    width: 160px;
    height: 200px;
    margin-bottom: 24px;
  }
}

/* ============================================
   v27 — LIGHTEN PILLAR CARDS, DARKEN TEXT
   ============================================ */

/* Brighten the photo texture, replace dark overlay with soft cream wash */
.pillar::before {
  opacity: 0.35 !important;
}
.pillar::after {
  background: linear-gradient(135deg,
    rgba(247, 240, 218, 0.72),
    rgba(240, 228, 200, 0.68)
  ) !important;
}

/* Dark, readable text on the lightened background */
.pillar__title {
  color: #1a0f08 !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(255, 250, 235, 0.6);
}
.pillar__body {
  color: #1a0f08 !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(255, 250, 235, 0.5);
}

/* ---- Mobile pillar cards ----
   Must sit after v27, and the colour rules must match the specificity of the
   v21 `.pillar:nth-child(n) .pillar__body` rule (0,3,0) or they lose the
   cascade -- that rule was pinning the description to var(--muted) (#7a6f5f),
   which measured 3.22:1 against the card background (AA needs 4.5:1).
   The cards were also flex ROWS, so the title and description sat side by side
   in half a card each; they stack now, title first. */
@media (max-width: 800px) {
  .pillars__grid { gap: 18px !important; }

  .pillar:nth-child(n) {
    min-height: 0 !important;
    padding: 30px 24px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* Photo at full strength, lifted by a lighter cream wash.
     Counter-intuitive but measured: at LOW opacity the photo composites against
     the near-black espresso card under it, which drags the whole card dark and
     costs contrast. At full opacity the photo's own warm mid-tones carry, and a
     ~0.56 wash lifts the darkest 2% of pixels enough to clear AA with margin. */
  .pillar::before { opacity: 1 !important; }
  .pillar::after {
    background: linear-gradient(135deg,
      rgba(247, 240, 218, 0.56),
      rgba(240, 228, 200, 0.58)
    ) !important;
  }

  .pillar:nth-child(n) .pillar__title {
    color: #1a0f08 !important;
    font-size: 21px !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
  }
  .pillar:nth-child(n) .pillar__body {
    color: #1a0f08 !important;
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    font-weight: 500 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }
}

/* ============ v29: Founder card + two-column People grid ============ */
.people__grid--two {
  grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
  gap: 32px !important;
  place-items: stretch !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

.people__grid--two .person-card--compact {
  max-width: none !important;
  height: 100% !important;
  padding: 48px 40px !important;
  display: flex !important;
  align-items: stretch !important;
}

.people__grid--two .person-card--compact .person-card__body {
  width: 100% !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.person-card--founder .person-card__title,
.people__grid--two .person-card--compact .person-card__title {
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
}

.people__grid--two .person-card--compact p:not(.person-card__title):not(.person-card__quote) {
  margin-bottom: 14px !important;
  max-width: 440px !important;
}

.person-card__creds {
  display: block !important;
  margin-top: 6px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  color: var(--gold-deep) !important;
  font-weight: 600 !important;
}

.person-card--founder p:not(.person-card__title):not(.person-card__quote) {
  margin-bottom: 14px !important;
  max-width: 440px !important;
}

.person-card__quote {
  margin-top: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(154, 122, 76, 0.28) !important;
  max-width: 440px !important;
}

.person-card__quote em {
  font-family: var(--serif) !important;
  font-style: italic !important;
  color: var(--mocha) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

@media (max-width: 780px) {
  .people__grid--two {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .people__grid--two .person-card--compact {
    padding: 40px 28px !important;
  }
}

/* Marti founder avatar override — modest size to match Dr. Hill */
.person-card__avatar--marti {
  background: url("assets/marti-headshot-v2.png") center 20% / cover no-repeat, var(--taupe);
}

/* ---------- Clinical Team block (below Marti + Dr. Hill) ---------- */
.clinical-team {
  max-width: 820px;
  margin: 56px auto 0;
  padding: 32px 40px;
  background: rgba(20, 45, 68, 0.03);
  border: 1px solid rgba(168, 130, 58, 0.18);
  border-radius: 4px;
  text-align: center;
}
.clinical-team__label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep, #a8823a);
  margin: 0 0 14px;
}
.clinical-team__body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: #4b4b4b;
  margin: 0;
}
.clinical-team__body strong {
  font-weight: 600;
  color: var(--navy);
}
@media (max-width: 720px) {
  .clinical-team {
    margin-top: 40px;
    padding: 24px 22px;
  }
  .clinical-team__body { font-size: 14px; }
}

/* ============ v49: About restructure — founder primary + physician oversight secondary ============ */
/* v51: side-by-side on wide screens */
.people__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 32px;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
}

.people__founder-wrap {
  max-width: none;
  margin: 0;
}

.person-card--primary {
  padding: 56px 48px !important;
  background: linear-gradient(180deg, rgba(212, 175, 100, 0.16) 0%, rgba(247, 240, 218, 0.4) 100%), #FFFBF2 !important;
  border: 1px solid rgba(168, 130, 58, 0.32) !important;
  border-top: 3px solid var(--gold-deep) !important;
  border-radius: 6px;
  box-shadow: 0 10px 36px rgba(43, 31, 24, 0.08);
}

.person-card--primary .person-card__avatar--marti {
  width: 128px !important;
  height: 128px !important;
  margin-bottom: 24px !important;
}

.person-card--primary h3 {
  font-size: 30px !important;
  margin-bottom: 4px !important;
}

.physician-oversight {
  max-width: none;
  margin: 0;
  text-align: center;
}

.physician-oversight__label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 20px;
}

.person-card--secondary {
  padding: 40px 36px !important;
  background: rgba(247, 240, 218, 0.55);
  border: 1px solid rgba(168, 130, 58, 0.18);
  border-radius: 4px;
}

.person-card--secondary .person-card__avatar {
  width: 84px !important;
  height: 84px !important;
  margin-bottom: 18px !important;
}

.person-card--secondary h3 {
  font-size: 22px !important;
  margin-bottom: 4px !important;
}

.person-card--secondary .person-card__title {
  font-size: 13px !important;
  margin-bottom: 20px !important;
}

.person-card--secondary p:not(.person-card__title):not(.person-card__disclosure) {
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: var(--muted) !important;
  max-width: 480px !important;
  margin-bottom: 12px !important;
}

.person-card__disclosure {
  margin-top: 20px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(154, 122, 76, 0.22) !important;
  max-width: 480px !important;
}

.person-card__disclosure em {
  font-family: var(--sans) !important;
  font-style: italic !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  color: var(--muted) !important;
  letter-spacing: 0.01em !important;
}

@media (max-width: 780px) {
  .people__grid { grid-template-columns: 1fr; gap: 48px; max-width: 620px; }
  .person-card--primary { padding: 40px 24px !important; }
  .person-card--primary h3 { font-size: 26px !important; }
  .person-card--secondary { padding: 32px 22px !important; }
}

/* v52: Clinical Team stacked under Dr. Hill in right column, matched to secondary card */
.clinical-team--stacked {
  background: rgba(247, 240, 218, 0.55) !important;
  border: 1px solid rgba(168, 130, 58, 0.18) !important;
  border-radius: 4px !important;
  max-width: none !important;
  margin: 24px 0 0 !important;
  padding: 32px 36px !important;
  text-align: center !important;
}
@media (max-width: 780px) {
  .clinical-team--stacked {
    margin-top: 20px !important;
    padding: 24px 22px !important;
  }
}

/* v53: About section travertine textured background */
.people {
  background: url('assets/about-travertine-v2.jpg') repeat !important;
  padding: 130px 0 !important;
}
.people__title { color: #3d2f22 !important; }
.people__title em, .people__title .italic { color: #f5ead1 !important; font-style: italic !important; }
.people__intro .eyebrow--gold { color: #f5ead1 !important; }

/* v54: Image disclaimer footer fine print */
.footer__legal--muted {
  font-size: 11px !important;
  opacity: 0.7 !important;
  line-height: 1.55 !important;
  max-width: 780px !important;
  margin: 8px auto 6px !important;
}
.footer__legal--muted em { font-style: italic; }

/* ============ v57: Common Questions / FAQ (travertine + olive branch) ============ */
.faq {
  position: relative;
  padding: 120px 0 130px;
  background:
    linear-gradient(180deg, rgba(239, 232, 214, 0.94) 0%, rgba(231, 222, 198, 0.94) 100%),
    url("assets/earthy-linen.jpg") center/cover no-repeat;
  overflow: hidden;
}
.faq::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(201, 168, 107, 0.06), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(122, 93, 74, 0.05), transparent 70%);
  pointer-events: none;
}
.faq__inner {
  position: relative;
  max-width: 1180px;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 80px;
  align-items: start;
}
.faq__masthead {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.faq__masthead-plate {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(43, 31, 24, 0.05), rgba(43, 31, 24, 0.15)),
    url("assets/about-travertine-v2.jpg") center/cover no-repeat;
  box-shadow:
    0 1px 0 rgba(201, 168, 107, 0.35) inset,
    0 40px 60px -30px rgba(43, 31, 24, 0.28);
}
.faq__masthead-plate::after {
  content: "";
  position: absolute; inset: 14px;
  border: 1px solid rgba(201, 168, 107, 0.35);
  border-radius: 2px;
  pointer-events: none;
}
.faq__olive {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42%; height: auto;
  color: var(--gold);
  opacity: 0.85;
  filter: drop-shadow(0 2px 6px rgba(43, 31, 24, 0.25));
}
.faq__masthead-copy .eyebrow { margin-bottom: 18px; }
.faq__title {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--espresso);
  margin: 0 0 20px;
}
.faq__title em {
  font-style: italic;
  color: var(--mocha-deep);
  font-weight: 500;
}
.faq__lede {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--sepia);
  margin: 0;
  max-width: 340px;
}

.faq__list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  position: relative;
  border-top: 1px solid rgba(201, 168, 107, 0.4);
  padding: 4px 0;
}
.faq-item:last-of-type {
  border-bottom: 1px solid rgba(201, 168, 107, 0.4);
}
.faq-item__summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 60px 28px 0;
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 20px;
  position: relative;
  transition: color 0.3s ease;
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary:hover .faq-item__q { color: var(--mocha-deep); }
.faq-item__summary:hover .faq-item__num { color: var(--gold-deep); }
.faq-item__num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--gold);
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
}
.faq-item__q {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--espresso);
  letter-spacing: -0.005em;
  transition: color 0.3s ease;
}
.faq-item__toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 107, 0.5);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, background 0.3s ease;
}
.faq-item__toggle::before,
.faq-item__toggle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--gold-deep);
  transition: opacity 0.3s ease;
}
.faq-item__toggle::before {
  width: 10px; height: 1px;
  transform: translate(-50%, -50%);
}
.faq-item__toggle::after {
  width: 1px; height: 10px;
  transform: translate(-50%, -50%);
}
.faq-item[open] .faq-item__toggle {
  transform: translateY(-50%) rotate(135deg);
  border-color: rgba(122, 93, 74, 0.5);
  background: rgba(201, 168, 107, 0.08);
}
.faq-item[open] .faq-item__num { color: var(--mocha-deep); }
.faq-item[open] .faq-item__q { color: var(--mocha-deep); }

.faq-item__answer {
  padding: 0 60px 32px 76px;
  animation: faqSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item__answer p {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--sepia);
  margin: 0;
  max-width: 640px;
  position: relative;
  padding-left: 20px;
}
.faq-item__answer p::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--gold) 0%, transparent 100%);
}
.faq-item__answer a {
  color: var(--gold-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-deep);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.faq-item__answer a:hover {
  color: var(--mocha-deep);
  border-color: var(--mocha-deep);
}

@keyframes faqSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.faq__footer {
  margin-top: 60px;
  text-align: center;
  padding-top: 40px;
  border-top: 1px solid rgba(201, 168, 107, 0.25);
}
.faq__footer p {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin: 0;
}
.faq__footer a {
  color: var(--gold-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-deep);
  padding-bottom: 1px;
  margin-left: 6px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.faq__footer a:hover {
  color: var(--mocha-deep);
  border-color: var(--mocha-deep);
}

@media (max-width: 900px) {
  .faq { padding: 80px 0 90px; }
  .faq__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .faq__masthead {
    position: static;
    flex-direction: column;
    gap: 24px;
    text-align: left;
  }
  .faq__masthead-copy { order: 1; }
  .faq__masthead-plate {
    order: 2;
    aspect-ratio: 16 / 9;
    max-width: 320px;
  }
  .faq__olive { width: 22%; }
  .faq-item__summary {
    grid-template-columns: 44px 1fr;
    padding: 22px 48px 22px 0;
    gap: 14px;
  }
  .faq-item__num { font-size: 18px; }
  .faq-item__q { font-size: 16px; }
  .faq-item__answer { padding: 0 8px 26px 58px; }
  .faq-item__answer p { font-size: 15px; padding-left: 16px; }
}

/* ============ v59: Path picker for discovery call ============ */
.paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 0 48px;
}
.paths--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.path-card {
  position: relative;
  cursor: pointer;
  display: block;
}
.path-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.path-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 26px 28px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(201, 168, 107, 0.35);
  border-radius: 4px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease,
              background 0.35s ease,
              border-color 0.35s ease;
}
.path-card__inner::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid transparent;
  border-radius: 2px;
  pointer-events: none;
  transition: border-color 0.35s ease;
}
.path-card:hover .path-card__inner {
  transform: translateY(-3px);
  border-color: rgba(201, 168, 107, 0.65);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 24px 40px -24px rgba(43, 31, 24, 0.22);
}
.path-card:hover .path-card__inner::before {
  border-color: rgba(201, 168, 107, 0.35);
}
.path-card input:focus-visible + .path-card__inner {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.path-card input:checked + .path-card__inner {
  background: linear-gradient(180deg, #F6EDD0, #EBE0BE);
  border-color: var(--gold);
  box-shadow:
    0 0 0 1.5px var(--gold) inset,
    0 30px 50px -28px rgba(43, 31, 24, 0.4);
  transform: translateY(-3px);
}
.path-card input:checked + .path-card__inner::before {
  border-color: rgba(168, 136, 81, 0.5);
}
.path-card__num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--gold);
  letter-spacing: 0.02em;
  margin-bottom: 18px;
  transition: color 0.3s ease;
}
.path-card input:checked + .path-card__inner .path-card__num {
  color: var(--gold-deep);
}
.path-card__title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--espresso);
  letter-spacing: -0.005em;
  margin: 0 0 6px;
}
.path-card__kicker {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--sepia);
  margin: 0 0 16px;
  letter-spacing: 0.01em;
}
.path-card__body {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 22px;
  flex: 1;
}
.path-card__cta {
  display: flex;
  align-items: flex-start;
  min-height: 38px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding-top: 16px;
  border-top: 1px solid rgba(201, 168, 107, 0.3);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.path-card:hover .path-card__cta {
  color: var(--mocha-deep);
  border-top-color: rgba(122, 93, 74, 0.4);
}
.path-card input:checked + .path-card__inner .path-card__cta {
  color: var(--mocha-deep);
  border-top-color: rgba(168, 136, 81, 0.5);
}

/* Direct-telehealth card gets a subtle emphasis distinction */
.path-card--direct .path-card__inner {
  background: rgba(43, 31, 24, 0.03);
}

/* Form gating — start collapsed & inactive; expand once a path is chosen */
.founding-form--gated {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s ease 0.1s,
    transform 0.5s ease 0.1s,
    margin-top 0.4s ease;
  margin-top: 0;
  pointer-events: none;
}
.founding-form--gated.is-active {
  max-height: 1800px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 8px;
  pointer-events: auto;
}

@media (max-width: 900px) {
  .paths {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 36px;
  }
  .path-card__inner { padding: 24px 22px; }
  .path-card__title { font-size: 20px; }
  .path-card__body { font-size: 14px; margin-bottom: 18px; }
}

/* ============ v60: FAQ category groupings ============ */
.faq-group {
  margin-bottom: 44px;
}
.faq-group:last-child {
  margin-bottom: 0;
}
.faq-group__label {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 22px;
  padding: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.faq-group__label-inner {
  flex-shrink: 0;
}
.faq-group__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(201, 168, 107, 0.55) 0%,
    rgba(201, 168, 107, 0.15) 60%,
    transparent 100%
  );
}
/* Space the first group's label a hair less because masthead lede already sits above */
.faq-group:first-child .faq-group__label {
  margin-top: 4px;
}

@media (max-width: 900px) {
  .faq-group { margin-bottom: 36px; }
  .faq-group__label {
    font-size: 10.5px;
    letter-spacing: 0.2em;
    gap: 16px;
    margin-bottom: 18px;
  }
}

/* Single-step Start Your Journey */
.founding__single { max-width: 520px; margin: 0 auto; text-align: center; }
.founding-form__submit--link { display: inline-block; text-decoration: none; width: auto; min-width: 320px; }
@media (max-width: 600px) { .founding-form__submit--link { min-width: 0; width: 100%; } }

/* ============================================
   Mobile: first-step form + peptides band
   ============================================ */

/* "with VITA Rx." drops to its own line under "Schedule an appointment" */
.founding__title em { display: block; }

@media (max-width: 640px) {
  /* Form runs the full width of the viewport. .section-inner carries a flat
     28px inline gutter (no media overrides), so a matching negative margin
     cancels it exactly; side border and radius go so the edges meet cleanly.
     Inner padding stays so the fields themselves aren't against the glass. */
  .founding-form {
    max-width: none;
    margin-inline: -28px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 32px 20px;
  }
}

/* The bottle image sits flush to the top of the peptides section.
   .peptides resolves to 130px top padding on mobile (the later unscoped rule
   wins over the 960px one), which was the dead space above the photo. */
@media (max-width: 780px) {
  .peptides { padding-top: 0 !important; }
  .peptides__bottleband { margin-top: 0 !important; }
}

/* ============================================
   "How your coach can help" (peptides) fixes
   ============================================ */

/* The card tags just restate the <h3> directly beneath them
   ("ENERGY & PERFORMANCE" over "Energy & Performance"), so drop them. */
.peptide-card__tag { display: none !important; }

/* The eyebrow measured 1.08:1 against the darkest part of the linen texture
   overlaying this section's taupe -- effectively invisible. Espresso puts it
   at 5.15:1 worst case, 9.43:1 typical. */
.peptides__intro .eyebrow--gold { color: var(--espresso) !important; }

@media (max-width: 780px) {
  /* The sliver of background above the photo is .founding's bottom padding,
     not the peptides section -- that already sits flush at 0. */
  .founding { padding-bottom: 0 !important; }

  /* 130px between the last card and the membership section was too much. */
  .peptides { padding-bottom: 56px !important; }
}

/* ============================================
   "How it works" (journey) — numbered step chips
   ============================================ */

/* Was Playfair italic gold on a light parchment/photo ground: hard to read.
   Now a circled numeral plus an uppercase sans label, both in espresso. */
.journey__step {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.journey__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-deep);
  font-family: var(--sans);
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--espresso);
}
.journey__step-label {
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--espresso);
}

/* Eyebrow sat in gold-deep over the parchment-washed apothecary photo. */
.journey__intro .eyebrow--gold { color: var(--espresso) !important; }

@media (max-width: 780px) {
  /* .journey resolves to 130px top padding at every width (the unscoped rule
     later in the file beats the 80px mobile one), leaving a deep empty band
     above the eyebrow. */
  .journey { padding-top: 56px !important; }
}

/* ============================================
   About VITA Rx (people) section
   ============================================ */

/* "lived experience." drops to its own line under "Founded on" */
.people__title em, .people__title .italic { display: block; }

@media (max-width: 780px) {
  /* Eyebrow sat 20px clear of the title, reading as a detached line. */
  .people__intro .eyebrow { margin-bottom: 8px !important; }

  /* Marti's card was double-padded: 24px on the card PLUS 40px on the inner
     body = 64px a side, leaving only 189px of text (~24 characters) at 375px.
     The card's own padding is enough, so the inner one goes. */
  .person-card--primary .person-card__body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Medical Oversight card: 32px on the card plus 44/40px on the inner body
   (and a 12px trailing margin) stacked up to 77px top / 85px bottom on
   mobile. Trimmed to an even 48px each end. */
@media (max-width: 780px) {
  .person-card--secondary .person-card__body {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  /* Outranks .person-card--secondary p:not(...):not(...) at (0,3,1), which
     was keeping a 12px margin under the final paragraph. */
  .people .person-card--secondary .person-card__body > p:last-child {
    margin-bottom: 0 !important;
  }
}

/* The travertine texture is 1024x1024 but the section runs ~2142px tall on a
   phone, so `repeat` tiled it and the top edge of the second tile showed as a
   lighter band above the dark section. Scale one copy to cover instead, with a
   matching colour underneath so nothing shows through at any height. */
.people {
  background-image: url('assets/about-travertine-v2.jpg') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-color: var(--parchment-warm) !important;
}

/* Final CTA: 130px top and bottom is a deep band on a phone. Both ends drop
   to 56px, matching the journey section and staying symmetrical. */
@media (max-width: 780px) {
  .cta {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

/* ============================================
   FAQ: question icons instead of 01-07
   ============================================ */

/* Sequential numerals read as ordered steps; these are just questions, so each
   item carries the same question mark. currentColor keeps the existing hover
   and [open] colour transitions working. */
.faq-item__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.faq-item__num svg {
  width: 24px;
  height: 24px;
  display: block;
}

@media (max-width: 900px) {
  .faq-item__num svg { width: 21px; height: 21px; }

  /* Travertine plate with the olive branch, which renders after the lede
     ("...before your discovery call.") on mobile. */
  .faq__masthead-plate { display: none !important; }
}

/* "half the picture." drops to its own line under "The plan is only" */
.habits__title em, .habits__title .italic { display: block; }

/* FAQ question icons sat at 1.85:1 against the parchment/linen ground -- barely
   visible. --gold-deep only reaches 2.75:1, still under the 3:1 floor for UI
   marks, so this deeper gold (4.11:1) holds the brand hue and actually reads.
   Hover moves darker than the base rather than lighter, as it did before. */
.faq-item__num { color: #8a6a2f; }
.faq-item__num svg { stroke-width: 1.8; }
.faq-item__summary:hover .faq-item__num { color: var(--mocha-deep); }

/* ============================================
   FAQ tail: close the list, promote the contact
   ============================================ */

/* The list already closes with .faq-item:last-of-type's bottom border, and the
   footer added a SECOND rule 108px below it -- two lines with a void between.
   Drop the footer's border and tighten the gap so the contact block reads as
   part of the FAQ rather than stranded after it. */
.faq__footer {
  /* .faq__inner is a grid with a 48px row-gap and the footer is a grid item,
     so any margin here STACKS on that gap. 32px read as 80px. */
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  text-align: center;
}

/* Was 14px muted text with a gold-deep link at ~2.75:1 -- easy to miss.
   Now a bordered card with espresso copy and a larger, darker address. */
.faq__footer p {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin: 0;
  padding: 18px 26px;
  background: rgba(247, 240, 218, 0.72);
  border: 1px solid rgba(168, 130, 58, 0.38);
  border-radius: 8px;
  font-size: 15.5px;
  color: var(--espresso);
}
.faq__footer a {
  margin-left: 0;
  font-size: 16.5px;
  font-weight: 600;
  color: #8a6a2f;
  border-bottom-color: #8a6a2f;
}

/* "gently answered." drops to its own line under "The details," */
.faq__title em, .faq__title .italic { display: block; }

/* +/- toggles matched to the question icons: same #8a6a2f (4.11:1, up from
   --gold-deep's 2.75:1), with the bars thickened from 1px to 1.5px so they
   read at a glance. Open state follows the icons to --mocha-deep. */
.faq-item__toggle {
  border-color: rgba(138, 106, 47, 0.55);
}
.faq-item__toggle::before {
  background: #8a6a2f;
  width: 11px;
  height: 1.5px;
}
.faq-item__toggle::after {
  background: #8a6a2f;
  width: 1.5px;
  height: 11px;
}
.faq-item[open] .faq-item__toggle {
  border-color: rgba(107, 82, 65, 0.6);
}
.faq-item[open] .faq-item__toggle::before,
.faq-item[open] .faq-item__toggle::after {
  background: var(--mocha-deep);
}

/* ============================================
   Consistent mobile section rhythm (80px, matching .membership)
   ============================================ */
@media (max-width: 780px) {
  .mission, .pillars, .founding, .peptides, .membership,
  .journey, .people, .habits, .cta, .faq {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }

  /* Exceptions: these two zeros are deliberate, not drift. They butt the
     peptides photo directly against the form above it -- restoring padding
     here would bring back the sliver of background you had me remove. */
  .founding { padding-bottom: 0 !important; }
  .peptides { padding-top: 0 !important; }
}

/* ============================================
   "Our Approach" (mission): legible over the hills photo
   ============================================ */

/* This is a dark section -- light text on a scrimmed photo -- but the scrim was
   only 0.35-0.55, so sunlit patches of the photo reached rgb(179,172,156). The
   eyebrow sat at 1.40:1 and the body copy at 2.04:1. Lightening the text alone
   tops out near 2.25:1 even in pure white, so the scrim has to carry it. */
.mission {
  background: linear-gradient(rgba(43, 31, 24, 0.68), rgba(43, 31, 24, 0.82)),
              url("assets/earthy-hills.jpg") center / cover no-repeat !important;
}
.mission .eyebrow--gold { color: #f7e7bd; }

/* ============================================
   Scroll reveal (paired with main.js)
   ============================================ */

/* The hidden state is applied by CSS at first paint (html.reveal-on is set by a
   tiny inline script in <head>), NOT by JS after the fact. If JS adds the
   hidden class late, the browser animates opacity 1 -> 0 and the content
   visibly fades OUT before fading back in.
   The transition therefore lives only on .is-visible: adding that class brings
   its own transition, so the way in animates while the initial hide is instant.
   Keep this selector list in sync with REVEAL in main.js. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .hero-frame__stat,
  .reveal-on .mission__inner > *,
  .reveal-on .pillars__intro,
  .reveal-on .pillar,
  .reveal-on .founding__header,
  .reveal-on .peptides__intro,
  .reveal-on .peptide-card,
  .reveal-on .membership__intro,
  .reveal-on .member-card,
  .reveal-on .membership__footer,
  .reveal-on .journey__intro,
  .reveal-on .journey__card,
  .reveal-on .people__intro,
  .reveal-on .person-card,
  .reveal-on .clinical-team,
  .reveal-on .habits__compact > *,
  .reveal-on .cta__left,
  .reveal-on .cta__right,
  .reveal-on .faq__masthead-copy,
  .reveal-on .faq-group {
    opacity: 0;
    transform: translateY(16px);
  }

  .reveal-on .is-visible {
    opacity: 1;
    transform: none;
    /* Gentle deceleration rather than an expo curve. cubic-bezier(0.16,1,0.3,1)
       covers most of the distance in the first third of its duration and then
       stops abruptly, which reads as a pop however long you make it. This curve
       spreads the movement out so the block drifts into place. */
    transition:
      opacity 1.05s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 1.05s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

/* ============================================
   Boulevard booking CTA (replaces the inline form)
   Reuses the .founding-form card so the section keeps the look Andrew liked.
   Remove this block if the original form is restored.
   ============================================ */
.founding-form--booking {
  text-align: center;
}
.founding-booking__lede {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink, #2a2a2a);
  margin: 0 0 20px;
}
.founding-booking__note {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin: 14px 0 0;
}

/* ============================================
   DESKTOP PASS (min-width: 781px)
   Mobile (<=780px) is signed off - keep changes out of it.
   ============================================ */

/* Hero stat bar: the three cells sized to their own content, so they came out
   visibly unequal. flex:1 1 0 makes them exact thirds. The bar itself was
   capped at fit-content (~780px); 1180px matches .section-inner so it lines up
   with every other section's content width. */
@media (min-width: 781px) {
  .hero-frame__stats {
    max-width: 1180px;
  }
  .hero-frame__stat {
    flex: 1 1 0;
    min-width: 0;
    /* Padding scales so the narrower desktop widths keep enough room for the
       longest label ("LICENSED COMPOUNDING PHARMACY"). */
    padding: clamp(24px, 2.2vw, 32px) clamp(20px, 2.6vw, 36px);
  }
  .hero-frame__stat strong {
    font-size: clamp(17px, 1.35vw, 19px);
  }
  /* The label stays at its original 10.5px: at 11.5px the longest one wrapped
     to three lines below ~1100px and blew the bar out to 179px tall. */
}

/* Our Standards cards, desktop. NOTE: the mobile pillar block uses
   max-width: 800px (not 780), so this starts at 801px to avoid both applying.

   Photos were at 0.35 opacity under a 0.72 cream wash, which left almost no
   image visible (luminance spread 0.165). Full-strength photo under a lighter
   0.52 wash gives 3.5x the image presence (0.582) and still holds text at
   5.45:1 worst case.

   The body copy also has to be re-declared at (0,3,0) specificity: the v21
   rule `.pillar:nth-child(n) .pillar__body` was pinning it to var(--muted),
   which measured 1.98:1 here -- that was the "hard to read". */
@media (min-width: 801px) {
  .pillar::before { opacity: 1 !important; }
  .pillar::after {
    background: linear-gradient(135deg,
      rgba(247, 240, 218, 0.52),
      rgba(240, 228, 200, 0.54)
    ) !important;
  }
  .pillar:nth-child(n) .pillar__title { color: #1a0f08 !important; }
  .pillar:nth-child(n) .pillar__body {
    color: #1a0f08 !important;
    font-weight: 500 !important;
  }
}

/* Standards cards sit title-beside-body on desktop, so the title's
   margin-bottom: 14px and the body's padding-bottom: 8px are dead space at the
   bottom of each box -- align-items: center then centres the BOX, leaving the
   visible text 7px and 4px high respectively. Both are needed for the stacked
   mobile layout, so this only clears them above 800px. */
@media (min-width: 801px) {
  .pillar:nth-child(n) .pillar__title { margin-bottom: 0 !important; }
  .pillar:nth-child(n) .pillar__body { padding-bottom: 0 !important; }
}

/* ============================================
   First Step / booking CTA - primary conversion point (desktop)
   It sat between .pillars (#efe8d6) and .peptides, on a #faf7f0->#f4ecd8
   ground almost identical to both, so it read as more of the same page. And
   its button was a dark rectangle while the hero's primary CTA is a gold pill,
   making the page's most important action look quieter than the hero's.
   ============================================ */
@media (min-width: 781px) {
  .founding {
    /* Warmer, deeper ground so the section separates from its neighbours,
       plus a gold rule across the top as a deliberate section marker. */
    background: linear-gradient(180deg, #fffdf7 0%, #f2e4c4 100%);
    border-top: 4px solid var(--gold-deep);
    padding: 112px 0 120px;
  }
  .founding__header { margin-bottom: 40px; }
  .founding__title { font-size: clamp(40px, 4vw, 58px); }

  /* The card lifts off the page: wider, deeper, gold-capped, stronger shadow. */
  .founding-form--booking {
    max-width: 680px;
    padding: 56px 56px 48px;
    border-top: 3px solid var(--gold-deep);
    box-shadow: 0 30px 70px -24px rgba(43, 31, 24, 0.3);
  }
  .founding-booking__lede {
    font-size: 18px;
    margin-bottom: 26px;
  }

  /* Matches the hero's gold pill so the primary action reads consistently. */
  .founding-form--booking .founding-form__submit {
    width: auto;
    min-width: 340px;
    margin: 0 auto;
    padding: 20px 44px;
    background: var(--gold);
    color: #1a1917;
    border-radius: 999px;
    font-size: 14.5px;
    letter-spacing: 0.14em;
    box-shadow: 0 10px 26px -10px rgba(43, 31, 24, 0.45);
  }
}

/* Booking CTA hover: full inversion -- the gold ground and dark type trade
   places, so it reads as a deliberate state change rather than the gold just
   getting slightly darker. The contrast ratio is identical either way (7.78:1)
   since it is the same colour pair swapped. `color` joins the transition so the
   type crossfades instead of snapping, and `hover: hover` keeps touch devices
   from latching the state after a tap. */
@media (min-width: 781px) and (hover: hover) {
  .founding-form--booking .founding-form__submit {
    transition: background 220ms ease, color 220ms ease, transform 160ms ease,
                box-shadow 220ms ease;
  }
  .founding-form--booking .founding-form__submit:hover,
  .founding-form--booking .founding-form__submit:focus-visible {
    background: #1a1917;
    color: var(--gold);
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -10px rgba(43, 31, 24, 0.55);
  }
}

/* "organized around you." drops to its own line under "Concierge care,".
   Global, like the other headings: mobile already broke at this point, so its
   rendering is unchanged, while 1024px was running it all on one line and
   1440px was breaking it mid-phrase. */
.peptides__title em, .peptides__title .italic { display: block; }

/* ============================================
   Common Questions layout (desktop >=901px)
   Left column order becomes: copy -> picture -> contact.
   Starts at 901px because the mobile block hides the plate up to 900px.
   ============================================ */
@media (min-width: 901px) {
  /* Eyebrow / title / lede above the picture (DOM order is plate first). */
  .faq__masthead-copy { order: 1; }
  .faq__masthead-plate { order: 2; }

  /* The contact block sat in column 1 but in grid row 2, so it only appeared
     after the whole FAQ list's height. Letting the list span both rows pulls
     the contact block up directly beneath the picture.
     The masthead also gives up `position: sticky` here - a sticky column would
     float away from the contact block that is now anchored under it. */
  .faq__masthead {
    position: static !important;
    grid-column: 1;
    grid-row: 1;
  }
  .faq__list {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .faq__footer {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    /* Sits close under the picture rather than floating on its own. */
    margin-top: 16px;
  }
  /* Fills the column instead of hugging its text, with larger type. */
  .faq__footer p {
    display: flex;
    width: 100%;
    padding: 24px 28px;
    font-size: 17px;
  }
  .faq__footer a {
    font-size: 18px;
  }
  /* The 80px gap is wanted between the columns but not between the picture and
     the contact block under it, which it pushed 112px apart. */
  .faq__inner {
    column-gap: 80px;
    row-gap: 0;
  }
}

/* ============================================
   FAQ accordion: smoother expand AND collapse
   The panel used `animation: faqSlideIn 0.5s cubic-bezier(0.16,1,0.3,1)` on
   open only -- an expo curve that covers most of its distance immediately, and
   nothing at all on close, since <details> just hides its content. main.js now
   animates height in both directions; this clears the old animation and lets
   the panel clip while it moves.
   ============================================ */
.faq-item__answer {
  animation: none !important;
  overflow: hidden;
}

/* The +/- rotation is retimed to match the panel so they move together. */
.faq-item__toggle {
  transition:
    transform 0.52s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.3s ease,
    background 0.3s ease;
}

/* Hero stat bar: more breathing room above and below on desktop. One token
   drives both sides (see --stats-gap), so they stay equal. Mobile keeps 72px. */
@media (min-width: 781px) {
  :root { --stats-gap: 100px; }
}

/* Common Questions masthead: left-aligned copy, and more air between the
   picture and the contact block. The centring comes from an earlier
   `.faq__title { text-align: center }`, so the override needs two classes
   to outrank it. */
@media (min-width: 901px) {
  .faq__masthead-copy { text-align: left; }
  .faq__masthead-copy .faq__title { text-align: left; }
  .faq__footer { margin-top: 40px; }
}

/* Journey cards: space between the numbered chip row and the title.
   `.journey__step { margin-bottom: 22px }` never applied -- .journey__step is
   a <p> inside .journey__card, and `.journey__card p { margin: 0 }` outranks it
   at (0,1,1) vs (0,1,0). So the real gap was 0. Two classes fixes that. */
@media (min-width: 781px) {
  .journey__card .journey__step { margin-bottom: 28px; }
}

/* ============================================
   Card hover states (desktop, pointer devices)
   Our Standards / coach cards / membership / journey.

   These four groups are all scroll-reveal targets, and the reveal animates
   `transform` with a 1.05s transition. A hover that also used `transform`
   would inherit that 1.05s timing (sluggish) or, if retimed, would break the
   reveal. So the lift uses the separate `translate` property: it composes with
   `transform` but transitions independently.

   The transition has to be declared twice. `.reveal-on .is-visible` sets its
   own `transition` at (0,2,0), and a shorthand replaces the whole list -- so
   the reveal-on variant below restates the reveal's timing alongside the hover
   timing, and the plain selector covers the case where reveal never ran
   (reduced motion, or the fail-safe having removed the class).
   ============================================ */
@media (min-width: 781px) and (hover: hover) {
  .pillar, .peptide-card, .member-card, .journey__card {
    transition:
      translate 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
      box-shadow 320ms ease,
      border-color 320ms ease,
      background-color 320ms ease;
  }
  .reveal-on .pillar, .reveal-on .peptide-card,
  .reveal-on .member-card, .reveal-on .journey__card {
    transition:
      opacity 1.05s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 1.05s cubic-bezier(0.22, 0.61, 0.36, 1),
      translate 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
      box-shadow 320ms ease,
      border-color 320ms ease,
      background-color 320ms ease;
  }

  /* Light cards: lift plus a deeper warm shadow. */
  .pillar:hover,
  .peptide-card:hover,
  .journey__card:hover {
    box-shadow: 0 20px 44px -18px rgba(43, 31, 24, 0.32);
  }
  /* Membership sits on the dark section, so it warms and brightens its edge
     instead of casting a shadow that would be invisible. */
  .member-card:hover {
    background-color: rgba(247, 240, 218, 0.11);
    border-color: rgba(201, 168, 107, 0.5);
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.5);
  }

  /* The movement itself is motion, so reduced-motion users get only the
     colour/shadow change above. */
  @media (prefers-reduced-motion: no-preference) {
    .pillar:hover,
    .peptide-card:hover,
    .member-card:hover,
    .journey__card:hover {
      translate: 0 -4px;
    }
  }
}

/* ============================================
   Boulevard booking overlay (mobile)
   ============================================ */
.blvd-modal {
  position: fixed;
  inset: 0;
  z-index: 200;            /* above the sticky header (z-index 50) */
  display: flex;
  flex-direction: column;
  background: #fff;
}
.blvd-modal[hidden] { display: none; }

.blvd-modal__bar {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  padding: 8px 8px 6px;
  background: var(--parchment);
  border-bottom: 1px solid rgba(168, 130, 58, 0.3);
}
.blvd-modal__close {
  width: 46px;             /* >=44px touch target */
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(168, 130, 58, 0.45);
  border-radius: 50%;
  background: #fff;
  color: var(--espresso);
  cursor: pointer;
}
.blvd-modal__close svg { width: 20px; height: 20px; display: block; }
.blvd-modal__close:active { background: var(--parchment); }

.blvd-modal__frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  display: block;
}

/* Logo -> #top should land exactly where the page loads, with the whole hero
   in view. #top is the hero section, which begins BELOW the sticky header, so
   aligning its top edge to the scrollport left the page scrolled down by the
   header's height and revealed that much of the next section. Offsetting the
   scroll target by --header-h lands it at 0. The token is re-measured by
   main.js, so this stays correct if the header's height ever changes. */
#top {
  scroll-margin-top: var(--header-h);
}

/* Standards cards, desktop: more room for the copy, and text that can never
   reach the card edges.
   Before: the card had padding 0 and BOTH children carried `padding: 0 32px`,
   so 128px of a 502px card went to padding, leaving the title just 88px of
   text width (5 wrapped lines) and the body 286px. Vertical breathing room
   existed only as leftover slack from min-height, which had shrunk to 23px by
   1024px and would have hit zero with any longer copy.
   Now: one 32px padding on the card itself (so top/bottom is guaranteed), a
   28px gap between columns, and the section widened to the 1180px page
   container. The body keeps a max-width so the full-width third card doesn't
   run to over-long measure. */
@media (min-width: 801px) {
  .pillars__inner { max-width: 1180px !important; }

  .pillar:nth-child(n) {
    padding: 32px !important;
    gap: 28px;
  }
  .pillar__title {
    padding: 0 !important;
    flex: 0 0 27%;
  }
  .pillar__body {
    padding: 0 !important;
    max-width: 620px !important;
    flex: 1 1 auto;
  }
}