/* ============================================================
   OsteoStrong Tysons — Bone Density Landing Page
   Warm "Longevity Clinic" design system
   ============================================================ */

:root {
  /* Palette — OsteoStrong corporate: black + gold on warm light neutrals */
  --bg:        #f5f3ee;
  --bg-deep:   #ebe7dd;
  --surface:   #ffffff;
  --surface-2: #f7f4ee;
  --ink:       #17161a;
  --ink-soft:  #4c4a47;
  --ink-faint: #7c7a74;

  /* --green* = near-black (primary dark) */
  --green:     #161519;
  --green-700: #232127;
  --green-600: #3c3a40;
  --green-100: #e8e4da;

  /* --clay* = OsteoStrong gold (accent) */
  --clay:      #c8a13a;   /* gold — fills, CTAs */
  --clay-600:  #8a6c12;   /* deep bronze — accessible accent text */
  --clay-100:  #f5ebcb;

  --gold:      #d9b24a;   /* review stars */
  --line:      rgba(22,21,25,0.14);
  --line-soft: rgba(22,21,25,0.07);

  --shadow-sm: 0 1px 3px rgba(31,33,28,0.06), 0 1px 2px rgba(31,33,28,0.04);
  --shadow-md: 0 8px 24px -8px rgba(31,33,28,0.18), 0 2px 8px rgba(31,33,28,0.06);
  --shadow-lg: 0 30px 60px -20px rgba(31,33,28,0.30), 0 8px 24px -12px rgba(31,33,28,0.18);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --maxw: 1180px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 28px;

  --header-h: 90px;
}

* { box-sizing: border-box; }

/* scroll-behavior:smooth is deliberately NOT set: on a page this tall, with
   this many lazy images and reveal animations, Chrome abandons the smooth
   scroll mid-flight and the visitor never reaches the section. site.js
   drives anchor jumps explicitly instead -- see IN-PAGE ANCHOR SCROLLING. */
html { scroll-padding-top: 96px; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (max-width: 640px) { body { font-size: 18px; } }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--green);
  margin: 0 0 0.4em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.85rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); }

p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--clay-600); }

img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
@media (max-width: 640px) { .wrap { padding: 0 20px; } }

section { padding: clamp(56px, 8vw, 104px) 0; }

.eyebrow {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--clay-600);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.eyebrow::before {
  content: "";
  width: 30px; height: 2px;
  background: var(--clay);
  display: inline-block;
}

.lede { font-size: 1.18rem; color: var(--ink-soft); max-width: 60ch; }

.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(2.15rem, 4.3vw, 3.15rem); }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.center .eyebrow { justify-content: center; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.05rem;
  border: none;
  border-radius: 100px;
  padding: 17px 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
  line-height: 1;
}
.btn:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
.btn-primary {
  background: var(--clay);
  color: var(--green);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { background: var(--green); color: var(--clay); transform: translateY(-2px); }
.btn-lg { padding: 21px 40px; font-size: 1.15rem; }
.btn-call {
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green);
}
.btn-call:hover { background: var(--green); color: #fdfaf3; }
.btn-block { width: 100%; }

.guarantee-line {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.96rem; color: var(--ink-soft); margin-top: 16px;
}
.guarantee-line svg { flex: none; color: var(--green-600); }

/* ---------- Placeholders ---------- */
.ph {
  position: relative;
  background-color: var(--green-100);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(31,58,52,0.07) 0 12px,
    rgba(31,58,52,0.02) 12px 24px
  );
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--green-600);
}
.ph::after {
  content: attr(data-label);
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green-600);
  background: rgba(255,253,249,0.78);
  border: 1px solid var(--line);
  padding: 6px 11px;
  border-radius: 100px;
  max-width: 80%;
  text-align: center;
  line-height: 1.3;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; min-width: 0; }
.brand-logo { height: 50px; width: auto; display: block; flex: none; }
.brand-loc {
  font-family: var(--sans); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--clay);
  padding-left: 13px; border-left: 1px solid rgba(255,255,255,0.22);
}

.header-actions { display: flex; align-items: center; gap: 22px; }
.header-phones { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.header-phones a { color: #f3f1ea; text-decoration: none; font-weight: 700; font-size: 1.02rem; white-space: nowrap; }
.header-phones .ph-row { white-space: nowrap; }
.header-phones a:hover { color: var(--clay); }
.header-phones .label { font-size: 0.74rem; font-weight: 600; color: #9b988f; letter-spacing: 0.04em; }
.header-phones .ph-row { display: inline-flex; align-items: center; gap: 7px; }

/* content-site full nav — second row under the brand, always visible */
.content-header .header-inner { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 14px; row-gap: 10px; }
.content-header .main-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; flex-basis: 100%; order: 3; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); }
.lp-header.content-header .header-actions { order: 2; margin-left: auto; }
.lp-header.content-header .brand { order: 1; }
.content-header .main-nav a { color: #d8d6cf; text-decoration: none; font-weight: 600; font-size: 0.96rem; transition: color .15s; white-space: nowrap; }
.content-header .main-nav a:hover { color: #fff; }
.content-header .main-nav a.active { color: var(--clay); }
.content-header .nav-cta { color: var(--green); margin-left: 6px; }
.content-header .nav-cta:hover { color: var(--clay); }
.nav-toggle { display: none; }
@media (max-width: 900px) {
  .lp-header .header-phones { display: none; }
}
@media (max-width: 560px) {
  .header-actions .btn { padding: 13px 20px; font-size: 0.95rem; }
  .brand-logo { height: 34px; }
  .brand-loc { font-size: 0.64rem; padding-left: 8px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(200,161,58,0.18), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--line-soft);
}
.hero-grid {
  display: grid;
  grid-template-columns: var(--hero-left, 0.92fr) var(--hero-right, 0.94fr);
  gap: var(--hero-gap, 38px);
  align-items: start;
}
/* top-align the form card with the start of the H1 (skip the eyebrow pill) */
.hero-grid .lead-card { margin-top: 52px; }
/* one-line tagline */
.hero-oneliner { max-width: none; white-space: nowrap; font-size: clamp(0.82rem, 1.45vw, 1.04rem); }
body.tagline-wrap .hero-oneliner { white-space: normal; }
.hero-kw {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--clay-100); color: var(--clay-600);
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 100px; margin-bottom: 22px;
}
.hero h1 { margin-bottom: 0.35em; }
.hero-sub { font-size: 1.3rem; font-weight: 700; color: var(--green); margin-bottom: 22px; max-width: 50ch; }
.hero-support { font-size: 1.04rem; color: var(--ink-soft); max-width: 50ch; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* hero form card */
.lead-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(26px, 3vw, 38px);
  position: relative;
}
.lead-card .poster {
  height: 340px; border-radius: var(--radius); margin-bottom: 20px;
}
.ghl-form-wrap { width: 100%; min-height: 560px; }
.ghl-form-wrap iframe { display: block; width: 100%; height: 560px; min-height: 560px; }
.lead-card .poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 4%; display: block; }
/* compact fields inside the hero lead card so the taller image fits */
.lead-card .field { margin-bottom: 10px; }
.lead-card .field label { margin-bottom: 4px; font-size: 0.82rem; }
.lead-card .field input { padding: 10px 14px; font-size: 0.98rem; }
.lead-card .field-row { gap: 10px; }
.lead-card form .btn-lg { padding: 15px 32px; }
.lead-card h2 { font-size: 1.7rem; margin-bottom: 6px; }
.lead-card .sub { font-size: 0.98rem; color: var(--ink-soft); margin-bottom: 22px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 0.86rem; font-weight: 700; color: var(--green); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 1.02rem;
  padding: 14px 16px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(51,91,81,0.16); background: var(--surface);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field .err { color: var(--clay-600); font-size: 0.82rem; margin-top: 5px; display: none; font-weight: 600; }
.field.invalid input { border-color: var(--clay); }
.field.invalid .err { display: block; }
.privacy-note { display: flex; gap: 8px; align-items: center; font-size: 0.84rem; color: var(--ink-faint); margin-top: 14px; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-sub { max-width: none; }
  .lead-card { order: 2; }
  .hero-grid .lead-card { margin-top: 0; }
  .hero-oneliner { white-space: normal; }
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar {
  background: var(--green);
  color: #e9efe9;
  padding: 22px 0;
}
.trust-inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 14px 40px;
}
.trust-rating { display: flex; align-items: center; gap: 12px; }
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.trust-rating .num { font-weight: 800; font-size: 1.2rem; color: #fff; }
.trust-rating .cnt { font-size: 0.92rem; color: #b9c7bf; }
.trust-divider { width: 1px; height: 34px; background: rgba(255,255,255,0.18); }
.trust-seen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.trust-seen .lbl { flex: none; }
.trust-seen .logo-strip { flex: 0 1 auto; }
.trust-seen .lbl { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: #9fb1a8; }
.logo-strip { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.press-logo {
  font-family: var(--serif); font-weight: 600; font-size: 1.02rem;
  color: #dbe5df; opacity: 0.92; letter-spacing: 0.02em;
  padding: 4px 0;
}
.trust-reassure { width: 100%; text-align: center; font-size: 0.92rem; color: #b9c7bf; margin-top: 4px; }
.trust-reassure b { color: #fff; font-weight: 700; }

/* ============================================================
   GENERIC LAYOUT HELPERS
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.split.media-left .media { order: -1; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split .media { order: -1; } }

.alt { background: var(--surface-2); }
.deep { background: var(--green); color: #e9efe9; }
.deep h2, .deep h3 { color: #fff; }
.deep .eyebrow { color: var(--gold); }
.deep .eyebrow::before { background: var(--clay); }
.deep .lede { color: #c3d0c8; }

/* benefit list */
.benefits { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; }
.benefits li { display: flex; gap: 14px; align-items: flex-start; font-size: 1.06rem; }
.benefits .ic {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--clay-100); color: var(--clay-600);
  display: grid; place-items: center; margin-top: 2px;
}
.deep .benefits .ic { background: rgba(255,255,255,0.12); color: #e6a878; }

/* who-can-benefit chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chip {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 100px; padding: 9px 17px; font-size: 0.96rem; font-weight: 600; color: var(--green);
}
/* pronounced, visually catching benefit chips */
.chips-benefits { gap: 12px; }
.chips-benefits .chip {
  background: var(--clay); border-color: var(--clay); color: #1b1407;
  font-weight: 700; font-size: 1.02rem; padding: 12px 22px; box-shadow: var(--shadow-sm);
}
/* benefit list — clean card rows with gold check badges */
.benefit-list { display: grid; gap: 10px; margin-top: 20px; }
.benefit-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 18px; font-weight: 600; font-size: 1.04rem; color: var(--green);
  box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .2s;
}
.benefit-item:hover { transform: translateX(3px); box-shadow: var(--shadow-md); }
.benefit-item .bi-check {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--clay); color: #1b1407; display: grid; place-items: center;
}

/* bone decline graphic */
.decline-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm);
}
.decline-card h3 { font-size: 1.25rem; margin-bottom: 4px; }
.decline-card .cap { font-size: 0.9rem; color: var(--ink-faint); margin-bottom: 18px; }

/* ============================================================
   VIDEO FACADE
   ============================================================ */
.video-facade {
  position: relative; border-radius: var(--radius); overflow: hidden;
  cursor: pointer; aspect-ratio: 16/10; width: 100%;
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.video-facade .ph {
  position: absolute; inset: 0; border-radius: 0;
  background-color: #14130f;
  background-image:
    radial-gradient(120% 120% at 50% 18%, rgba(200,161,58,0.20), transparent 60%),
    linear-gradient(160deg, #1c1a14 0%, #0e0d0a 100%);
}
.video-facade .ph::after {
  content: attr(data-label);
  color: #e8dcc0; background: rgba(0,0,0,0.32);
  border: 1px solid rgba(200,161,58,0.35);
  font-family: var(--sans); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em;
  text-transform: none; padding: 8px 14px; border-radius: 100px; max-width: 84%;
}
.video-facade .play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(31,58,52,0.05), rgba(31,58,52,0.35));
  transition: background .2s;
}
.video-facade:hover .play { background: linear-gradient(180deg, rgba(31,58,52,0.1), rgba(31,58,52,0.45)); }
.play-btn {
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(255,253,249,0.95); color: var(--clay-600);
  display: grid; place-items: center; box-shadow: var(--shadow-md);
  transition: transform .2s;
}
.video-facade:hover .play-btn { transform: scale(1.08); }
.video-cap {
  position: absolute; left: 16px; bottom: 16px; right: 16px;
  color: #fff; font-weight: 700; font-size: 1rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  display: flex; align-items: center; gap: 8px;
}
.video-cap .cc { font-size: 0.68rem; background: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.4); padding: 2px 7px; border-radius: 4px; letter-spacing: 0.05em; }

/* ============================================================
   STEPS (session involves / 3-step)
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 12px; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; position: relative; box-shadow: var(--shadow-sm);
}
.step .n {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--green); color: #fdfaf3; display: grid; place-items: center; margin-bottom: 16px;
}
.step h3 { font-size: 1.18rem; margin-bottom: 6px; }
.step p { font-size: 0.98rem; color: var(--ink-soft); margin: 0; }

/* ============================================================
   MEMBERSHIP
   ============================================================ */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 14px; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .plans { grid-template-columns: 1fr; } }
.plan {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; display: flex; flex-direction: column;
}
.plan.featured { border-color: var(--clay); box-shadow: var(--shadow-md); position: relative; }
.plan .tag {
  position: absolute; top: -12px; left: 24px; background: var(--clay); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px;
}
.plan .pname { font-family: var(--serif); font-size: 1.5rem; color: var(--green); margin-bottom: 6px; }
.plan .pdesc { font-size: 0.97rem; color: var(--ink-soft); margin: 0; }
.plan .pincl { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 0.92rem; color: var(--ink-soft); }
.membership-note { text-align: center; margin-top: 26px; font-size: 0.95rem; color: var(--ink-faint); }

/* modality icons row */
.modalities { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; justify-content: center; }
.modality {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 100px;
  padding: 10px 18px 10px 12px; font-size: 0.96rem; font-weight: 600; color: var(--green);
}
.modality .mi { width: 32px; height: 32px; border-radius: 50%; background: var(--green-100); color: var(--green); display: grid; place-items: center; flex: none; }
.modality small { display: block; font-weight: 500; font-size: 0.78rem; color: var(--ink-faint); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 12px; }
@media (max-width: 820px) { .tcards { grid-template-columns: 1fr; } }
.tcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.tcard .qstars { color: var(--gold); display: flex; gap: 2px; margin-bottom: 14px; }
.tcard blockquote { font-family: var(--serif); font-size: 1.18rem; line-height: 1.42; color: var(--green); margin: 0 0 18px; }
.tcard .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.tcard .ava { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.tcard .who .nm { font-weight: 700; font-size: 0.98rem; color: var(--ink); }
.tcard .who .mt { font-size: 0.86rem; color: var(--ink-faint); }

/* doctor quotes */
.docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 12px; }
@media (max-width: 720px) { .docs { grid-template-columns: 1fr; } }
.doc {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius); padding: 26px;
}
.doc blockquote { font-family: var(--serif); font-size: 1.12rem; line-height: 1.45; color: #f3f0e8; margin: 0 0 16px; }
.doc .dn { font-weight: 700; color: #fff; font-size: 0.98rem; }
.doc .ds { font-size: 0.86rem; color: #a9bab1; }

/* ============================================================
   CLINICAL CHART
   ============================================================ */
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-sm); }
.bars { display: flex; align-items: flex-end; gap: 30px; height: 230px; padding: 0 10px; border-bottom: 2px solid var(--line); margin-top: 20px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.bar {
  width: 72%; max-width: 90px; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--green-600), var(--green));
  position: relative; transition: height 1s cubic-bezier(.16,1,.3,1);
}
.bar.accent { background: linear-gradient(180deg, var(--clay), var(--clay-600)); }
.bar .val { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-weight: 800; font-size: 1.05rem; color: var(--green); white-space: nowrap; }
.bar.accent .val { color: var(--clay-600); }
.bar-lbl { margin-top: 12px; font-size: 0.9rem; color: var(--ink-soft); text-align: center; font-weight: 600; }

/* ============================================================
   ACCORDION (FAQ + science)
   ============================================================ */
.acc { max-width: 820px; margin: 0 auto; }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 4px; text-align: left;
  font-family: var(--serif); font-size: 1.3rem; color: var(--green); font-weight: 500;
}
.acc-q:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; border-radius: 6px; }
.acc-q .ico { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; transition: transform .25s, background .2s, color .2s; color: var(--green-600); }
.acc-item.open .acc-q .ico { background: var(--green); color: #fff; transform: rotate(45deg); border-color: var(--green); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc-a-inner { padding: 0 4px 26px; color: var(--ink-soft); font-size: 1.04rem; max-width: 70ch; }

/* ============================================================
   LOCATION
   ============================================================ */
.loc-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: stretch; }
@media (max-width: 820px) { .loc-grid { grid-template-columns: 1fr; } }
.map-ph { min-height: 340px; border-radius: var(--radius); }
.loc-info dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 22px 0 0; }
.loc-info dt { font-weight: 700; color: var(--green); font-size: 0.95rem; }
.loc-info dd { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta { text-align: center; }
.final-cta h2 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); margin-bottom: 14px; }
.final-cta .lede { margin: 0 auto 30px; color: #c3d0c8; }
.final-cta .hero-cta-row { justify-content: center; }
.deep .btn-call { color: #fff; border-color: rgba(255,255,255,0.5); }
.deep .btn-call:hover { background: #fff; color: var(--green); border-color: #fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: #121116; color: #b6b4ae; padding: 56px 0 32px; font-size: 0.95rem; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.1); }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-top h4 { color: #fff; font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; }
.footer-top a { color: #c8c6bf; text-decoration: none; display: block; margin-bottom: 9px; }
.footer-top a:hover { color: var(--clay); }
.footer-logo { height: 40px; width: auto; margin-bottom: 4px; }
.footer-brand p { max-width: 40ch; margin-top: 14px; color: #94918a; }
.footer-contact { margin-top: 16px; }
.footer-contact a { color: #e8e6df; font-weight: 700; }
.foot-addr { color: #94918a; line-height: 1.6; }
.disclaimer { margin-top: 26px; font-size: 0.84rem; color: #837f78; line-height: 1.6; max-width: 95ch; }
.footer-legal { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-size: 0.86rem; }
.footer-legal a { color: #b6b4ae; }
.footer-legal a:hover { color: var(--clay); }

/* small disclaimer pill reused near claims */
.results-vary { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--ink-faint); font-style: italic; margin-top: 14px; }
.deep .results-vary { color: #9fb1a8; }

/* ============================================================
   STICKY MOBILE ACTION BAR
   ============================================================ */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; gap: 10px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,253,249,0.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 24px -10px rgba(0,0,0,0.2);
}
.sticky-bar .btn { flex: 1; padding: 15px 14px; font-size: 1rem; }
@media (max-width: 760px) { .sticky-bar { display: flex; } body { padding-bottom: 84px; } }

/* ============================================================
   CONTENT-SITE PAGE HERO (interior pages)
   ============================================================ */
.page-hero {
  background: var(--green); color: #ece9e1;
  padding: clamp(48px, 7vw, 92px) 0 clamp(44px, 6vw, 76px);
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; right: -8%; top: -30%; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(200,161,58,0.16), transparent 65%); pointer-events: none;
}
.page-hero h1 { color: #fff; }
.page-hero .eyebrow { color: var(--clay); }
.page-hero .eyebrow::before { background: var(--clay); }
.page-hero .lede { color: #c4c1b8; max-width: 60ch; }
.page-hero .crumbs { font-size: 0.85rem; color: #8f8c84; margin-bottom: 18px; letter-spacing: 0.02em; }
.page-hero .crumbs a { color: #b6b3aa; text-decoration: none; }
.page-hero .crumbs a:hover { color: var(--clay); }

/* ============================================================
   IMAGE HELPERS
   ============================================================ */
.imgbox { position: relative; overflow: hidden; background-color: var(--green-100);
  background-image: repeating-linear-gradient(-45deg, rgba(22,21,25,0.06) 0 12px, rgba(22,21,25,0.015) 12px 24px); }
.imgbox > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.media-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--line); }
.media-frame.tall { aspect-ratio: 4/5; }
.media-frame.wide { aspect-ratio: 16/10; }
.media-frame.square { aspect-ratio: 1/1; }

/* white card on light bg (bone cross-sections etc) */
.figure-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); text-align: center; }
.figure-card img { margin: 0 auto; max-height: 220px; width: auto; }
.figure-card .cap { margin-top: 14px; font-weight: 700; color: var(--green); }
.figure-card .sub { font-size: 0.9rem; color: var(--ink-faint); margin: 2px 0 0; }
.figure-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ============================================================
   COMPARISON TABLE (mobility page)
   ============================================================ */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.compare th, .compare td { padding: 16px 20px; text-align: left; font-size: 1.02rem; border-bottom: 1px solid var(--line-soft); }
.compare thead th { background: var(--green); color: #fff; font-family: var(--serif); font-weight: 500; font-size: 1.12rem; }
.compare thead th:first-child { background: var(--green-700); }
.compare tbody td:first-child { font-weight: 700; color: var(--green); background: var(--surface-2); }
.compare .os-col { color: var(--ink); font-weight: 600; }
.compare .os-col::before { content: "\2713  "; color: var(--clay-600); font-weight: 800; }
.compare tr:last-child td { border-bottom: none; }
@media (max-width: 640px) { .compare th, .compare td { padding: 12px 13px; font-size: 0.92rem; } }

/* ============================================================
   FEATURE / CONTENT CARD GRIDS
   ============================================================ */
.cardgrid { display: grid; gap: 22px; margin-top: 12px; }
.cardgrid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cardgrid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cardgrid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cardgrid.cols-3, .cardgrid.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cardgrid { grid-template-columns: 1fr !important; } }
.fcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.fcard .fic { width: 48px; height: 48px; border-radius: 13px; background: var(--green); color: var(--clay); display: grid; place-items: center; margin-bottom: 18px; flex: none; }
.fcard h3 { font-size: 1.25rem; margin-bottom: 8px; }
.fcard p { font-size: 0.99rem; color: var(--ink-soft); margin: 0; }
.fcard .more { margin-top: 16px; font-weight: 700; color: var(--clay-600); text-decoration: none; font-size: 0.95rem; }
.fcard.link-card { text-decoration: none; transition: transform .15s, box-shadow .2s; }
a.fcard.link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* program nav cards (home) */
.program-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 320px; display: flex; align-items: flex-end; text-decoration: none; box-shadow: var(--shadow-md); }
.program-card .pc-img { position: absolute; inset: 0; }
.program-card .pc-img img { width: 100%; height: 100%; object-fit: cover; }
.program-card .pc-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,14,0.15) 0%, rgba(13,13,14,0.82) 100%); }
.program-card .pc-body { position: relative; padding: 30px; color: #fff; }
.program-card .pc-body h3 { color: #fff; font-size: 1.5rem; margin-bottom: 6px; }
.program-card .pc-body p { color: #d8d6cf; font-size: 0.98rem; margin: 0 0 14px; }
.program-card .pc-go { font-weight: 700; color: var(--clay); display: inline-flex; align-items: center; gap: 7px; font-size: 0.96rem; }
.program-card:hover .pc-go { gap: 11px; }

/* ============================================================
   RESPONSIVE POLISH — phone / tablet / laptop
   ============================================================ */
@media (max-width: 1300px) and (min-width: 961px) {
  /* tablet landscape / small laptop: tighten header row spacing */
  .content-header .main-nav { gap: 14px; }
}
@media (max-width: 780px) {
  .cardgrid.cols-3, .cardgrid.cols-4, .plans, .docs, .featured-vids, .gym-compare, .safety-grid { grid-template-columns: 1fr 1fr !important; }
  .press-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
  .cardgrid.cols-3, .cardgrid.cols-4, .plans, .docs, .featured-vids, .gym-compare, .safety-grid, .press-grid, .tcards { grid-template-columns: 1fr !important; }
  .trust-inner { gap: 10px 20px; justify-content: center; text-align: center; }
  .trust-rating, .trust-seen { justify-content: center; }
  .hero-cta-row, .final-cta .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn, .final-cta .hero-cta-row .btn { width: 100%; }
  .modal { max-width: 100%; border-radius: 20px; }
  h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
  h2 { font-size: clamp(1.6rem, 6vw, 2.1rem); }
  section { padding: 44px 0; }
}
@media (max-width: 400px) {
  .wrap { padding: 0 16px; }
  .brand-logo { height: 30px; }
}

/* stat band */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 720px) { .stats-row { grid-template-columns: 1fr 1fr; gap: 28px 20px; } }
.stat { text-align: center; }
.stat .big { font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.2rem); color: var(--clay); line-height: 1; }
.deep .stat .big { color: var(--clay); }
.stat .lbl { margin-top: 8px; font-size: 0.96rem; color: var(--ink-soft); }
.deep .stat .lbl { color: #c4c1b8; }

/* ============================================================
   BOOKING MODAL
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(24,33,29,0.55); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .2s;
}
.modal-overlay.show { display: flex; opacity: 1; }
.modal {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
  transform: translateY(16px) scale(0.98); transition: transform .25s ease; position: relative;
}
.modal-overlay.show .modal { transform: translateY(0) scale(1); }
.modal-close {
  position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; color: var(--ink-soft);
  display: grid; place-items: center;
}
.modal-close:hover { background: var(--green-100); }

.confirm-detail .row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 0.96rem; }
.confirm-detail .row .k { color: var(--ink-faint); }
.confirm-detail .row .v { font-weight: 700; color: var(--green); text-align: right; }

.modal-back { background: none; border: none; color: var(--ink-soft); font-weight: 600; cursor: pointer; font-family: var(--sans); font-size: 0.95rem; padding: 8px 0; display: inline-flex; align-items: center; gap: 6px; }
.modal-back:hover { color: var(--green); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   REAL IMAGERY + VIDEO EMBEDS
   ============================================================ */
.imgbox {
  position: relative; overflow: hidden;
  background-color: var(--green-100);
  background-image: repeating-linear-gradient(-45deg, rgba(22,21,25,0.06) 0 12px, rgba(22,21,25,0.015) 12px 24px);
}
.imgbox > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* video facade real thumbnail + iframe */
.video-facade .vf-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.video-facade .play { z-index: 2; }
.video-facade .video-cap { z-index: 2; }
.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }

/* testimonial cards with real photos */
.tcard { padding: 0; overflow: hidden; }
.tcard .tphoto { height: 188px; width: 100%; }
.tcard .tphoto img { object-position: 50% 28%; }
.tcard .tbody { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.tcard .who { margin-top: 16px; }
.tcard .who .nm { font-weight: 700; font-size: 0.98rem; color: var(--ink); display: block; }
.tcard .who .mt { font-size: 0.86rem; color: var(--ink-faint); }

/* featured-in news facades + logo links */
.featured-vids { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8px; }
@media (max-width: 720px) { .featured-vids { grid-template-columns: 1fr; } }
.logo-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin-top: 34px; align-items: center; }
.logo-links a { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; color: var(--ink-soft); text-decoration: none; opacity: 0.85; transition: opacity .15s, color .15s; }
.logo-links a:hover { opacity: 1; color: var(--clay-600); }
.trust-seen .logo-strip a { color: inherit; text-decoration: none; }
.trust-seen .logo-strip a:hover .press-logo { color: #fff; }

/* gold-accented endorsement quote block */
.endorse { background: var(--green); color: #ece9e1; border-radius: var(--radius); padding: clamp(28px,4vw,44px); }
.endorse .eyebrow { color: var(--gold); }
.endorse .eyebrow::before { background: var(--clay); }
.endorse blockquote { font-family: var(--serif); font-size: clamp(1.4rem,2.4vw,1.95rem); line-height: 1.32; color: #fff; margin: 0 0 18px; }
.endorse cite { font-style: normal; font-weight: 700; color: var(--gold); }
.endorse cite span { display: block; font-weight: 500; font-size: 0.9rem; color: #b6b2a6; }

/* ============================================================
   REVIEW SET 1 — added components
   ============================================================ */
/* trust-bar real logos (on dark bar) — light-grey chips so the predominantly dark logos all read */
.trust-seen .logo-strip { gap: 10px; }
.trust-logo { height: 28px; width: auto; max-width: 120px; object-fit: contain; background: #e8e5dd; border-radius: 6px; padding: 7px 11px; box-sizing: content-box; }
@media (max-width: 640px){ .trust-logo { height: 20px; max-width: 84px; padding: 5px 8px; } }

/* info cards (What is OsteoStrong — replaces accordion) */
.infocard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.infocard .ic-badge { width: 54px; height: 54px; border-radius: 14px; background: var(--green); color: var(--clay); display: grid; place-items: center; margin-bottom: 18px; }
.infocard h3 { font-size: 1.3rem; margin-bottom: 10px; }
.infocard p { font-size: 1rem; color: var(--ink-soft); margin: 0; }
.ic-list { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; }
.ic-list li { position: relative; padding-left: 28px; font-size: 1rem; color: var(--ink-soft); }
.ic-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; background: var(--clay); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }

/* recovery modality cards */
.modality-grid { margin-top: 12px; }
.mod-card { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.mod-card .mod-ic { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--clay-100); color: var(--clay-600); display: grid; place-items: center; }
.mod-card h3 { font-size: 1.14rem; margin: 0 0 7px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mod-card p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
.mod-tag { font-family: var(--sans); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; }
.mod-tag.silver { background: var(--green-100); color: var(--green-600); }
.mod-tag.gold { background: var(--clay-100); color: var(--clay-600); }

/* photo-led modality cards */
.mod-card-photo { display: block; padding: 0; overflow: hidden; }
.mod-card-photo .mod-photo { height: 190px; }
.mod-card-photo .mod-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mod-card-photo .mod-body { padding: 22px 22px 24px; }

/* membership v2 */
.plans-v2 .plan { display: flex; flex-direction: column; }
.plans-v2 .pname { font-family: var(--serif); font-size: 1.6rem; color: var(--green); }
.plans-v2 .ptier { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay-600); margin: 4px 0 14px; }
.plan-list { list-style: none; padding: 16px 0 0; margin: auto 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: 11px; }
.plan-list li { position: relative; padding-left: 26px; font-size: 0.95rem; color: var(--ink-soft); }
.plan-list li.yes::before { content: ""; position: absolute; left: 0; top: 5px; width: 15px; height: 15px; background: var(--clay-600); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }
.plan-list li b { color: var(--green); }

.modality-callout { margin-top: 26px; background: var(--green); border-radius: var(--radius); padding: 24px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; justify-content: center; text-align: center; }
.modality-callout .mc-label { font-family: var(--sans); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay); }
.modality-callout .mc-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.modality-callout .mc-pills span { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; border-radius: 100px; padding: 8px 16px; font-weight: 600; font-size: 0.92rem; }

/* clinical graph cards */
.graph-card { padding: 16px; }
.graph-card img { max-height: none; width: 100%; border-radius: 8px; }
.graph-card .cap { margin-top: 12px; }

/* press grid (trusted by & featured in) */
.press-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
@media (max-width: 820px){ .press-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px){ .press-grid { grid-template-columns: repeat(2, 1fr); } }
.press-cell { display: grid; place-items: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 18px 16px; min-height: 96px; transition: transform .15s, opacity .2s; }
.press-cell:hover { transform: translateY(-2px); opacity: 0.7; }
.press-cell img { max-height: 46px; max-width: 100%; width: auto; object-fit: contain; }
.press-cell img.logo-square { max-height: 72px; }
.press-note { text-align: center; margin-top: 22px; color: var(--ink-soft); font-size: 0.98rem; }
.press-note a { font-weight: 700; }

/* embedded google map */
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); min-height: 340px; }
.map-embed iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* ============================================================
   REVIEW SET 2 — added components
   ============================================================ */
/* full-width main testimonial video */
.main-video { max-width: 900px; margin: 0 auto; aspect-ratio: 16/9; }
.testi-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; max-width: 900px; margin-left: auto; margin-right: auto; }
.testi-thumbs .video-facade { aspect-ratio: 16/9; }
@media (max-width: 640px){ .testi-thumbs { grid-template-columns: 1fr; } }

/* featured member card (Carolyn) */
.feature-testi { display: grid; grid-template-columns: 300px 1fr; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
@media (max-width: 680px){ .feature-testi { grid-template-columns: 1fr; } }
.feature-testi .ft-photo { min-height: 320px; }
.feature-testi .ft-photo-framed { background: #fff; display: grid; place-items: center; padding: 18px; }
.feature-testi .ft-photo-framed img { width: 100%; height: auto; max-width: 260px; object-fit: contain; }
@media (max-width: 680px){ .feature-testi .ft-photo { min-height: 280px; } }
.feature-testi .ft-body { padding: clamp(28px,4vw,44px); display: flex; flex-direction: column; justify-content: center; }
.feature-testi .ft-badge { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; background: var(--clay-100); color: var(--clay-600); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.04em; padding: 8px 16px; border-radius: 100px; margin-bottom: 18px; }
.feature-testi .ft-badge svg { flex: none; }
.feature-testi blockquote { font-family: var(--serif); font-size: clamp(1.02rem,1.45vw,1.18rem); line-height: 1.5; color: var(--ink-soft); margin: 0 0 18px; }
.feature-testi .ft-headline { font-family: var(--serif); font-weight: 600; line-height: 1.04; font-size: clamp(2rem,3.4vw,2.9rem); color: var(--green); margin: 6px 0 16px; letter-spacing: -0.01em; }
.feature-testi .ft-headline em { font-style: normal; color: var(--clay-600); }
.feature-testi .ft-headline .ft-arrow { color: var(--clay); font-weight: 700; }
.feature-testi .ft-name { font-weight: 700; color: var(--ink); }
.feature-testi .ft-name span { display: block; font-weight: 500; font-size: 0.9rem; color: var(--ink-faint); }
.feature-testi .qstars { color: var(--gold); display: flex; gap: 2px; margin-bottom: 14px; }

/* science flow */
.science-flow { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 14px; margin: 8px auto 0; }
.science-flow .sf-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; text-align: center; font-family: var(--serif); font-size: 1.2rem; color: var(--green); box-shadow: var(--shadow-sm); display: flex; align-items: center; }
.science-flow .sf-arrow { display: flex; align-items: center; color: var(--clay); font-size: 1.6rem; font-weight: 700; }
@media (max-width: 600px){ .science-flow { flex-direction: column; } .science-flow .sf-arrow { transform: rotate(90deg); justify-content: center; } }

/* axial loading callout (deep) */
.deep .science-flow .sf-step { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: #fff; }

/* 2-col benefits checklist */
.benefits-2col { columns: 2; column-gap: 40px; list-style: none; padding: 0; margin: 20px 0 0; }
@media (max-width: 600px){ .benefits-2col { columns: 1; } }
.benefits-2col li { break-inside: avoid; position: relative; padding-left: 30px; margin-bottom: 14px; font-size: 1.04rem; color: var(--ink-soft); }
.benefits-2col li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; background: var(--clay-600); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }

/* nutrient chips reuse .chips; gym comparison mini-list */
.gym-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
@media (max-width: 680px){ .gym-compare { grid-template-columns: 1fr; } }
.gym-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.gym-col.os { border-color: var(--clay); box-shadow: var(--shadow-md); }
.gym-col h4 { font-family: var(--serif); font-size: 1.3rem; color: var(--green); margin: 0 0 12px; }
.gym-col .tagline { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.gym-col.os .tagline { color: var(--clay-600); }
.gym-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.gym-col li { font-size: 0.98rem; color: var(--ink-soft); padding-left: 24px; position: relative; }
.gym-col li::before { content: "—"; position: absolute; left: 0; color: var(--ink-faint); }
.gym-col.os li::before { content: "✓"; color: var(--clay-600); font-weight: 800; }

/* safety factor chips */
.safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 12px; }
@media (max-width: 760px){ .safety-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .safety-grid { grid-template-columns: 1fr; } }
.safety-chip { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; font-weight: 600; color: var(--green); display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-sm); }
.safety-chip .sc-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--green-100); color: var(--green); display: grid; place-items: center; }

/* research references dialog */
.ref-link { background: none; border: none; cursor: pointer; font-family: var(--sans); font-weight: 700; color: var(--clay-600); text-decoration: underline; text-underline-offset: 3px; font-size: inherit; padding: 0; }
.ref-dialog { max-width: 820px; width: calc(100% - 36px); border: none; border-radius: var(--radius-lg); padding: 0; box-shadow: var(--shadow-lg); color: var(--ink); }
.ref-dialog::backdrop { background: rgba(24,21,16,0.6); backdrop-filter: blur(3px); }
.ref-dialog .ref-head { position: sticky; top: 0; background: var(--green); color: #fff; padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ref-dialog .ref-head h3 { color: #fff; margin: 0; font-size: 1.35rem; }
.ref-dialog .ref-close { background: rgba(255,255,255,0.14); border: none; color: #fff; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: grid; place-items: center; flex: none; }
.ref-dialog .ref-close:hover { background: rgba(255,255,255,0.28); }
.ref-body { padding: 28px; max-height: 70vh; overflow-y: auto; }
.ref-body h4 { font-family: var(--sans); font-size: 0.96rem; font-weight: 800; color: var(--clay-600); margin: 22px 0 4px; }
.ref-body h4:first-child { margin-top: 0; }
.ref-body p { font-size: 0.98rem; color: var(--ink-soft); margin: 0 0 6px; }
.ref-body ol { font-size: 0.88rem; color: var(--ink-faint); line-height: 1.55; padding-left: 20px; margin-top: 14px; }
.ref-body ol li { margin-bottom: 8px; }
.ref-body .ref-disc { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-style: italic; }

/* full-width CTA band, repeated after sections */
.cta-band { padding: 34px 24px; text-align: center; background: var(--surface-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.cta-band-btn {
  display: block; width: 100%; max-width: 1180px; margin: 0 auto;
  padding: 30px 24px; font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 800;
  border-radius: var(--radius);
}
.cta-band .guarantee-line { justify-content: center; margin-top: 14px; }


/* ============================================================
   PRODUCTION ADDITIONS
   Added when the design bundle was built into the deployed site.
   ============================================================ */

/* --- In-page anchor landings ---------------------------------
   The header is sticky, so a link to #science must stop below it or the
   section heading hides behind the bar. The Home header is taller than the
   landing-page header because it carries a second nav row. */
section[id] { scroll-margin-top: calc(var(--header-h) + 18px); }
body[data-page-type="home"] section[id] { scroll-margin-top: 172px; }
@media (max-width: 900px) {
  body[data-page-type="home"] section[id] { scroll-margin-top: 132px; }
}

/* --- Booking modal (GoHighLevel form) -------------------------
   Replaces the mock 3-step flow. The embedded form is ~700px tall, so the
   modal is a little wider than the old one and scrolls within the viewport. */
.modal-book { max-width: 560px; }
.modal-book .modal-body { padding: 34px 32px 30px; }
.modal-book .ghl-form-wrap { min-height: 620px; margin-top: 4px; }
.modal-book .ghl-form-wrap iframe { height: 620px; min-height: 620px; }
.modal-callout {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 0.92rem; color: var(--ink-soft);
}
.modal-callout a { color: var(--clay-600); font-weight: 700; text-decoration: none; }
.modal-callout a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .modal-book .modal-body { padding: 30px 20px 24px; }
  .modal-book .ghl-form-wrap,
  .modal-book .ghl-form-wrap iframe { min-height: 660px; height: 660px; }
}

/* --- Hero lead card with an embedded form ---------------------
   Both heroes now host the GoHighLevel iframe. Reserving its height up front
   stops the card from growing once the third-party form paints, which would
   otherwise shift the whole hero (a Cumulative Layout Shift penalty). */
/* Measured on the built pages: GoHighLevel resizes its iframe to 645-666px
   depending on the form. Reserving 660px up front means the card is already
   the right size when the third-party script finishes, instead of the hero
   jumping once it loads. */
.lead-card .ghl-form-wrap { min-height: 660px; }
.lead-card .ghl-form-wrap iframe { height: 660px; min-height: 660px; }

/* --- Simple content pages (privacy, 404) ---------------------- */
.doc-page { padding: clamp(48px, 7vw, 88px) 0; }
.doc-page .wrap { max-width: 820px; }
.doc-page h1 { margin-bottom: 10px; }
.doc-page .doc-meta { color: var(--ink-faint); font-size: 0.92rem; margin-bottom: 34px; }
.doc-page h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  margin: 38px 0 12px; padding-top: 8px;
}
.doc-page h3 { font-size: 1.1rem; margin: 24px 0 8px; }
.doc-page p, .doc-page li { color: var(--ink-soft); }
.doc-page ul, .doc-page ol { margin: 0 0 16px 22px; }
.doc-page li { margin-bottom: 8px; }
.doc-page a { color: var(--clay-600); }
.doc-note {
  background: var(--clay-100); border-left: 3px solid var(--clay);
  border-radius: var(--radius-sm); padding: 16px 20px; margin: 24px 0;
  font-size: 0.95rem;
}
.err-page { text-align: center; padding: clamp(70px, 12vw, 150px) 0; }
.err-page .err-code {
  font-family: var(--sans); font-weight: 800; font-size: 0.98rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--clay-600);
  margin-bottom: 12px;
}
.err-page p { color: var(--ink-soft); max-width: 520px; margin: 0 auto 28px; }
.err-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* --- SMS consent disclosure ----------------------------------
   Sits directly under every lead form. Deliberately small but not faint:
   A2P 10DLC vetting expects this to be legible at the point of collection,
   so it stays above the contrast floor rather than fading into the card. */
.sms-consent {
  margin-top: 10px;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ink-faint);
}
.sms-consent a { color: var(--clay-600); text-decoration: underline; }
.modal-book .sms-consent { margin-top: 12px; }


/* --- Mobile header ------------------------------------------
   Found by measuring the built pages at real iPhone widths: the brand
   block alone rendered 406px wide inside a 375px viewport, so every
   iPhone could be scrolled sideways. Google reports that as "content
   wider than screen" under Mobile Usability, and it makes the page
   feel broken under the thumb. Three separate causes:

     1. the logo is an 8.7:1 lockup, so its HEIGHT drives its width --
        even at the existing 30px mobile height it is 261px across
     2. "Tysons Corner, VA" is written with non-breaking spaces, so it
        could never wrap or shrink; it just pushed the row wider
     3. on the landing page the header CTA then overflowed by a further
        159px on top of that

   Home had a second problem: its nine section links wrapped onto three
   rows, making a *sticky* header 249px tall -- over a third of an
   iPhone SE screen, permanently. */
@media (max-width: 760px) {
  .header-inner { flex-wrap: wrap; gap: 8px 14px; }
  .brand { flex: 1 1 auto; min-width: 0; gap: 9px; }
  .brand-logo { height: 30px; }
  .brand-loc { font-size: 0.6rem; letter-spacing: 0.1em; padding-left: 9px; }

  /* The sticky bottom bar carries Call + Get a Free Session at exactly
     these widths (see .sticky-bar), so the header's second copy of the
     CTA is redundant -- and it was what pushed the landing-page header
     off screen. */
  .lp-header .header-actions { display: none; }

  /* One scrollable row rather than three wrapped ones. Every link stays
     reachable by swiping the nav, and the header drops to ~100px. */
  .content-header .main-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 18px;
    padding-bottom: 2px;
  }
  .content-header .main-nav::-webkit-scrollbar { display: none; }
}

@media (max-width: 440px) {
  /* Below this the location tag cannot share a row with the logo without
     forcing the page sideways. The address is still in the hero, the map
     section and the footer, so nothing is actually lost here. */
  .brand-loc { display: none; }
}

/* Anchor offsets, restated for the shorter mobile header now that it is
   ~100px rather than 249px. */
@media (max-width: 760px) {
  body[data-page-type="home"] section[id] { scroll-margin-top: 116px; }
  section[id] { scroll-margin-top: 100px; }
}