/* ============================================================
   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; }
}


/* --- Trust block relocated into the hero's left column -------
   The lead card grew a lot when the GoHighLevel form and the SMS consent
   disclosure went in: measured 1286px against 851px of hero copy, a 435px
   gap that left an obvious hole beside the text on a laptop. Moving the
   trust signals into that column fills it, and lifts the rating and press
   logos above the fold where they do more work.

   It is a third grid item rather than a child of .hero-copy so the mobile
   stacking order can still put the form first: DOM order is copy, card,
   trust, and the desktop grid pulls it back under the copy. */
/* Two explicit rows: row 1 hugs the hero copy, row 2 takes the slack. The
   lead card spans both, so its extra height lands in row 2 instead of
   inflating row 1 and shoving the trust block down past the card. */
@media (min-width: 861px) {
  .hero-grid { grid-template-rows: min-content 1fr; row-gap: 0; }
  /* Both columns are placed explicitly. Giving the card a grid-row but no
     grid-column made it place before the auto-placed copy, so on a hero with
     no trust block (the REMS page) the card grabbed column 1 and the two
     columns rendered swapped. */
  .hero-grid > .hero-copy { grid-column: 1; grid-row: 1; }
  .hero-grid > .lead-card { grid-column: 2; grid-row: 1 / span 2; }
}
.hero-grid > .trust-bar.in-hero {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  background: none;
  color: var(--ink-soft);
  padding: 24px 0 0;
  margin-top: 30px;
  border-top: 1px solid var(--line);
}
.trust-bar.in-hero .trust-inner {
  justify-content: flex-start;
  gap: 12px 22px;
  max-width: none;
  padding: 0;
}
.trust-bar.in-hero .trust-rating .num { color: var(--green); }
.trust-bar.in-hero .trust-rating .cnt { color: var(--ink-faint); }
.trust-bar.in-hero .trust-seen { gap: 8px 12px; }
.trust-bar.in-hero .trust-seen .lbl { color: var(--clay-600); font-weight: 800; }
.trust-bar.in-hero .trust-reassure {
  text-align: left;
  color: var(--ink-soft);
  margin-top: 10px;
}
.trust-bar.in-hero .trust-reassure b { color: var(--green); }

/* The chips were warm grey because they sat on the near-black bar. On the
   hero's light ground that grey nearly disappears, so they become white
   with a hairline instead. Slightly smaller too — the column is ~537px and
   these need to wrap tidily rather than sprawl. */
.trust-bar.in-hero .trust-logo {
  height: 22px;
  max-width: 96px;
  background: #fff;
  border: 1px solid var(--line-soft);
  padding: 6px 9px;
}

@media (max-width: 860px) {
  /* single column: copy, then the form, then the trust signals. The form
     must not be pushed further down the page than it already is. */
  .hero-grid > .hero-copy { order: 1; }
  .hero-grid > .lead-card { order: 2; grid-row: auto; }
  .hero-grid > .trust-bar.in-hero {
    order: 3;
    grid-column: 1;
    grid-row: auto;
    margin-top: 26px;
  }
  .trust-bar.in-hero .trust-inner { justify-content: center; text-align: center; }
  .trust-bar.in-hero .trust-seen { justify-content: center; }
  .trust-bar.in-hero .trust-reassure { text-align: center; }
}


/* --- Trust block, second pass ---------------------------------
   Client feedback: show Google as its logo rather than grey text, make the
   press logos bigger, fill the space still left under the left column, and
   scale up the reassurance line. The left column measured 1166px against
   the lead card's 1286px, so there was ~170px to absorb. */

/* Google mark replaces the "Google rating" text label. Inline SVG so it stays
   sharp at any size and needs no extra request. */
/* Google wordmark (official asset, self-hosted) + the word "Review". Sized by
   height so the 272x92 artwork keeps its ratio. */
.trust-rating .g-review {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
}
.trust-rating .g-logo {
  height: 21px; width: auto; display: block;
}
.trust-rating .g-word {
  font-weight: 700; font-size: 1.02rem; color: var(--ink); line-height: 1;
}
.trust-bar.in-hero .trust-rating {
  gap: 10px;
  flex-wrap: wrap;
}
.trust-bar.in-hero .trust-rating .num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}
.trust-bar.in-hero .trust-rating .stars { font-size: 1.16rem; }
.trust-bar.in-hero .trust-rating .cnt {
  font-size: 1rem;
  color: var(--ink-soft);
}

/* Bigger press logos. At 30px tall in a ~537px column these wrap to three
   comfortable rows and carry most of the extra height the column needed. */
.trust-bar.in-hero .trust-logo {
  height: 34px;
  max-width: 118px;
  padding: 9px 11px;
  border-radius: 8px;
}
.trust-bar.in-hero .trust-seen { gap: 12px 10px; }
.trust-bar.in-hero .trust-seen .lbl {
  font-size: 0.86rem;
  letter-spacing: 0.12em;
}

/* The reassurance line is a real selling point, not fine print. */
.trust-bar.in-hero .trust-reassure {
  font-size: 1.12rem;
  line-height: 1.5;
  margin-top: 20px;
}

/* A little more air between the rating, the logo grid and the closing line,
   which uses up the remaining gap without looking padded out. */
.trust-bar.in-hero .trust-inner { gap: 18px 22px; }
.hero-grid > .trust-bar.in-hero { padding-top: 28px; margin-top: 34px; }

@media (max-width: 860px) {
  .trust-bar.in-hero .trust-logo { height: 26px; max-width: 110px; padding: 6px 10px; }
  .trust-bar.in-hero .trust-reassure { font-size: 1rem; }
  .trust-bar.in-hero .trust-rating { justify-content: center; }
}




/* ============================================================
   REMS SCAN PAGE
   Layout replicated from the client's biocellpartners.com and recoloured to
   the OsteoStrong palette: gold (--clay) where BioCell used red, near-black
   (--green) for the dark event band. The one place brand colour is NOT used
   is the fragility gauge -- a risk scale has to read green-to-red to mean
   anything, so that stays semantic.
   ============================================================ */

/* --- hero ------------------------------------------------------ */
.rems-hero .hero-kw { display: inline-flex; align-items: center; gap: 8px; }
.rems-hero .kw-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--clay-600); flex: none;
}
/* the report card replaces the lead card, so the grid needs it named too */
.hero-grid > .rems-report { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
@media (max-width: 860px) {
  .hero-grid > .rems-report { grid-column: 1; grid-row: auto; order: 2; }
}

/* --- sample report card ---------------------------------------- */
.rems-report {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 26px 26px 22px;
  margin-top: 52px;
}
.rr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.rr-label {
  font-family: var(--sans); font-weight: 800; font-size: 0.74rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 4px;
}
.rr-site { font-family: var(--serif); font-size: 1.24rem; color: var(--ink); margin: 0; }
.rr-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 26px; }
.rr-bars i { width: 6px; border-radius: 2px; background: var(--clay); display: block; }
.rr-bars i:nth-child(1) { height: 40%; opacity: 0.45; }
.rr-bars i:nth-child(2) { height: 70%; opacity: 0.75; }
.rr-bars i:nth-child(3) { height: 100%; }

.rr-score { text-align: center; margin-top: 22px; }
.rr-score-label {
  font-family: var(--sans); font-weight: 800; font-size: 0.74rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 0;
}
.rr-score-num {
  font-family: var(--serif); font-size: 3.1rem; line-height: 1.05;
  color: var(--ink); margin: 2px 0 4px; font-weight: 600;
}
.rr-score-num span { font-size: 1.3rem; color: var(--ink-faint); margin-left: 6px; }
.rr-score-note { font-size: 0.9rem; color: var(--clay-600); font-weight: 700; margin: 0; }

/* Risk gauge. Deliberately not brand-coloured -- see note at the top. */
.rr-gauge { margin: 18px 0 20px; }
.rr-gauge-bar {
  position: relative; height: 8px; border-radius: 100px;
  background: linear-gradient(90deg, #3f9c6d 0%, #d8b93f 50%, #c0472f 100%);
}
.rr-gauge-dot {
  position: absolute; top: 50%; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ink); transform: translate(-50%, -50%);
}
.rr-gauge-scale {
  display: flex; justify-content: space-between; margin-top: 7px;
  font-size: 0.74rem; color: var(--ink-faint);
}

.rr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rr-stat {
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 13px 8px; text-align: center;
}
.rr-stat b { display: block; font-size: 1.32rem; color: var(--ink); font-weight: 800; }
.rr-stat span {
  display: block; margin-top: 2px; font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 700;
}
.rr-foot {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 0 0; padding-top: 15px; border-top: 1px solid var(--line-soft);
  font-size: 0.88rem; color: var(--ink-soft);
}
.rr-dot { width: 8px; height: 8px; border-radius: 50%; background: #3f9c6d; flex: none; }
.rr-example { margin: 8px 0 0; font-size: 0.76rem; color: var(--ink-faint); }

/* --- event band ------------------------------------------------ */
.rems-event { padding: clamp(52px, 7vw, 92px) 0; }
.rems-event-grid {
  display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 40px; align-items: start;
}
@media (max-width: 900px) { .rems-event-grid { grid-template-columns: 1fr; gap: 30px; } }
.event-pill {
  display: inline-block; background: var(--clay); color: var(--green);
  font-family: var(--sans); font-weight: 800; font-size: 0.76rem;
  letter-spacing: 0.11em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 100px; margin-bottom: 18px;
}
.rems-event h2 { color: #fff; margin-bottom: 14px; }
.event-lead { color: #cfccc4; max-width: 56ch; margin-bottom: 28px; }

.event-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 20px 30px; margin-bottom: 24px; }
@media (max-width: 620px) { .event-stats { grid-template-columns: 1fr 1fr; } }
.event-stat { padding-left: 15px; border-left: 2px solid var(--clay); }
.event-stat-wide { grid-column: 1 / -1; }
.es-k {
  display: block; font-family: var(--sans); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: #9b978d; margin-bottom: 5px;
}
.es-v { display: block; color: #fff; font-size: 1.06rem; line-height: 1.35; font-weight: 700; }
.event-last {
  color: #cfccc4; font-size: 0.96rem; max-width: 60ch;
  padding: 14px 16px; margin-bottom: 24px;
  background: rgba(255,255,255,0.05); border-radius: var(--radius-sm);
  border-left: 2px solid rgba(200,161,58,0.6);
}
.event-last b { color: #fff; }

/* outline button that works on the dark band */
.btn-ghost {
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.45);
}
.btn-ghost:hover { background: #fff; color: var(--green); border-color: #fff; }

.know-card {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius); padding: 26px 26px 22px;
}
.know-card h3 { color: #fff; margin-bottom: 6px; }
.know-list { list-style: none; margin: 0; padding: 0; }
.know-list li {
  position: relative; padding: 15px 0 15px 30px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: #d8d5cd; font-size: 0.98rem; line-height: 1.5;
}
.know-list li:last-child { border-bottom: 0; }
.know-list li::before {
  content: "✓"; position: absolute; left: 0; top: 14px;
  color: var(--clay); font-weight: 800;
}
.know-foot { margin: 16px 0 0; font-size: 0.88rem; color: #9b978d; }
.know-foot a { color: var(--clay); text-decoration: none; font-weight: 700; }
.know-foot a:hover { text-decoration: underline; }

/* --- About REMS 01-04 ------------------------------------------ */
.rems-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; }
@media (max-width: 760px) { .rems-numbers { grid-template-columns: 1fr; } }
.rn-card {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 26px 26px 24px;
}
.rn-num {
  display: block; font-family: var(--sans); font-weight: 800; font-size: 0.86rem;
  letter-spacing: 0.1em; color: var(--clay-600); margin-bottom: 10px;
}
.rn-card h3 { margin-bottom: 8px; }
.rn-card p { color: var(--ink-soft); margin: 0; }

/* --- REMS vs DEXA table ---------------------------------------- */
.rems-compare-card {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 30px clamp(18px, 3vw, 34px) 10px;
}
.rems-compare-card h2 { margin-bottom: 4px; }
.rc-sub { color: var(--ink-soft); margin-bottom: 20px; }
/* the table is the one thing here that must scroll rather than squash */
.rc-scroll { overflow-x: auto; }
.rems-compare { width: 100%; border-collapse: collapse; min-width: 560px; }
.rems-compare th, .rems-compare td {
  text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line-soft);
}
.rems-compare th {
  font-family: var(--sans); font-weight: 800; font-size: 0.74rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint);
}
.rems-compare th.rc-hi { color: var(--clay-600); }
.rems-compare td { color: var(--ink-soft); font-size: 0.98rem; }
.rems-compare td:first-child { color: var(--ink); font-weight: 600; }
/* highlight the REMS column the way the original does */
.rems-compare .rc-hi { background: var(--clay-100); }
.rems-compare td.rc-hi { color: var(--ink); font-weight: 600; }
.rems-compare tr:last-child td { border-bottom: 0; }

/* --- services -------------------------------------------------- */
.rems-services { background: var(--green-100); padding: clamp(52px, 7vw, 92px) 0; }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
@media (max-width: 980px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 24px 22px;
}
.svc-mark {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--green); color: var(--clay);
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin-bottom: 14px;
}
.svc-card h3 { font-size: 1.16rem; margin-bottom: 7px; }
.svc-card p { color: var(--ink-soft); font-size: 0.96rem; margin: 0; }
.svc-card a { color: var(--clay-600); font-weight: 700; text-decoration: none; }
.svc-card a:hover { text-decoration: underline; }

/* Footer service area — smaller than the address it sits under. */
.foot-area { margin-top: 10px; font-size: 0.86rem; color: #9b978d; line-height: 1.5; max-width: 30ch; }