/* Forge Athletics - forgeathletics.com
   Tokens and values copied verbatim from the design handoff
   (PROJECTS/Website-Redesign/design/design_handoff_forge_homepage/README.md).
   Headlines: Neusa Next Pro Compact Bold, ALL CAPS. Body/UI: HeyWow 400/600.
   4px spacing grid. One glow budget: every glow sits near a CTA. */

/* ---------- Fonts (licensed, ruled D11; self-hosted with spec fallbacks) ---------- */
@font-face {
  font-family: "Neusa Next Compact";
  src: url("/assets/fonts/NeusaNextPro-CompactBold.woff2") format("woff2"), url("/assets/fonts/NeusaNextPro-CompactBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HeyWow";
  src: url("/assets/fonts/HeyWow-Regular.woff2") format("woff2"), url("/assets/fonts/HeyWow-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HeyWow";
  src: url("/assets/fonts/HeyWow-SemiBold.woff2") format("woff2"), url("/assets/fonts/HeyWow-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HeyWow";
  src: url("/assets/fonts/HeyWow-Bold.woff2") format("woff2"), url("/assets/fonts/HeyWow-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --orange: #FF7A00;        /* THE orange: CTA / action */
  --orange-deep: #E66A00;   /* hover on light */
  --orange-tang: #FF8C1A;   /* hover on dark, warm labels on dark */
  --ramp-calm: #FFD1A3;     /* calm highlight bg */
  --ramp-cool: #FFB38A;     /* cooled accents, seam tint */
  --ramp-lo: #CC5500;       /* light-ground orange text, flagship eyebrows */
  --ramp-ember: #9A3B00;    /* ember gradient base */
  --ink: #231F20;
  --surface-dark: #0D0D10;
  --card-dark: #16161B;
  --card-dark-2: #1C1C22;
  --border-dark: #3A3633;
  --page: #F7F4F0;
  --card: #FFFFFF;
  --hairline: #E8E4DE;
  --muted-dark: #B7B1A9;    /* muted on dark */
  --muted-light: #6E6862;   /* muted on light */
  --text-dark: #F5F2EE;     /* text on dark */
  --body-light: #3A3633;    /* body text on light surfaces */

  --font-head: "Neusa Next Compact", "Arial Narrow", Impact, sans-serif;
  --font-body: "HeyWow", "Segoe UI", Arial, sans-serif;

  --r-btn: 8px;
  --r-card: 12px;
  --r-pill: 999px;

  --seam: linear-gradient(90deg, rgba(154,59,0,.35) 0%, #CC5500 30%, #FFD1A3 50%, #CC5500 70%, rgba(154,59,0,.35) 100%);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Anchor jumps clear the floating nav. */
[id] { scroll-margin-top: 78px; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--page);
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
address { font-style: normal; }

.wrap { max-width: 1280px; margin: 0 auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--orange);
  color: var(--surface-dark);
  padding: 10px 16px;
  font: 600 14px var(--font-body);
  border-radius: 0 0 8px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Headline treatment */
.head {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1.1;
}

/* Eyebrow labels */
.eyebrow {
  font: 600 13px var(--font-body);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted-light);
}

/* Inline links on light surfaces */
.link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 150ms ease-out;
}
.link:hover { color: var(--orange-deep); }

/* ---------- Stars trio ---------- */
.stars { display: flex; align-items: flex-end; gap: 8px; line-height: 1; }
.stars span { line-height: 1; color: var(--orange); }
/* Star wave (Wil 2026-08-22 v2): one shimmer pass travels left to right, comes
   back from the right toward the middle and stops there; the center star holds
   slightly bigger with its inner shine. The held state is also the static
   default, so no-JS and reduced-motion visitors see the finished pose. */
.stars span { opacity: .6; }
.stars span:nth-child(2) { opacity: 1; transform: scale(1.2); text-shadow: 0 0 5px rgba(255,220,150,.8), 0 0 14px rgba(255,140,26,.8); }
/* Looping cycle, 4.4s: shimmer sweeps left to center to right, returns to the
   middle by ~50%, then the center star HOLDS its bigger, lit pose for the back
   half (about 2 seconds) before the wave repeats. 0% and 100% frames match, so
   the loop is seamless. */
/* v5 (Wil): 8s cycle. The right star gets a long gentle falloff and the center
   begins swelling WHILE the right is still fading (36% to 62%, with a mid-glow
   step), so the return reads as light sliding back rather than jumping. */
@keyframes star-cycle-left {
  0%, 24%, 100% { opacity: .6; transform: scale(1); text-shadow: 0 0 2px rgba(255,140,26,0); }
  9% { opacity: 1; transform: scale(1.32); text-shadow: 0 0 6px rgba(255,220,150,.9), 0 0 18px rgba(255,140,26,.9); }
}
@keyframes star-cycle-right {
  0%, 16%, 100% { opacity: .6; transform: scale(1); text-shadow: 0 0 2px rgba(255,140,26,0); }
  27% { opacity: 1; transform: scale(1.32); text-shadow: 0 0 6px rgba(255,220,150,.9), 0 0 18px rgba(255,140,26,.9); }
  50% { opacity: .6; transform: scale(1); text-shadow: 0 0 2px rgba(255,140,26,0); }
}
@keyframes star-cycle-center {
  0% { opacity: 1; transform: scale(1.2); text-shadow: 0 0 5px rgba(255,220,150,.8), 0 0 14px rgba(255,140,26,.8); }
  9%, 30%, 36% { opacity: .6; transform: scale(1); text-shadow: 0 0 2px rgba(255,140,26,0); }
  18% { opacity: 1; transform: scale(1.32); text-shadow: 0 0 6px rgba(255,220,150,.9), 0 0 18px rgba(255,140,26,.9); }
  48% { opacity: .8; transform: scale(1.08); text-shadow: 0 0 4px rgba(255,220,150,.4), 0 0 8px rgba(255,140,26,.4); }
  62%, 100% { opacity: 1; transform: scale(1.2); text-shadow: 0 0 5px rgba(255,220,150,.8), 0 0 14px rgba(255,140,26,.8); }
}
.stars-run span:nth-child(1) { animation: star-cycle-left 8s ease-in-out infinite; }
.stars-run span:nth-child(2) { animation: star-cycle-center 8s ease-in-out infinite; }
.stars-run span:nth-child(3) { animation: star-cycle-right 8s ease-in-out infinite; }
.stars--hero span:nth-child(1), .stars--hero span:nth-child(3) { font-size: 21px; }
.stars--hero span:nth-child(2) { font-size: 31px; }
.stars--cell { gap: 4px; }
.stars--cell span:nth-child(1), .stars--cell span:nth-child(3) { font-size: 11px; }
.stars--cell span:nth-child(2) { font-size: 15px; }
.stars--h2 { gap: 6px; padding-bottom: 6px; }
.stars--h2 span:nth-child(1), .stars--h2 span:nth-child(3) { font-size: 15px; }
.stars--h2 span:nth-child(2) { font-size: 21px; }
.stars--ink span { color: var(--ink); }
.stars--badge { gap: 5px; justify-content: center; }
.stars--badge span:nth-child(1), .stars--badge span:nth-child(3) { font-size: 15px; }
.stars--badge span:nth-child(2) { font-size: 21px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font: 700 16px var(--font-body);
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: var(--r-btn);
  text-decoration: none;
  text-align: center;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.btn--primary {
  /* Canonical live-site CTA gradient (brand snippet 2083 / summer-camp .sc-hcal:
     135deg #ff3d00 to #ff6a00 to #ff8c00), modernized: mid stop anchored on the
     token orange, brighter shine tail, plus an inner glow (top bevel, ember
     depth, soft inner shine) that rides through the radiate keyframes. */
  background: linear-gradient(135deg, #FF3D00 0%, #FF7A00 40%, #FF9D33 72%, #FF7A00 100%);
  background-size: 200% 200%;
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(110, 25, 0, .5);
  --btn-inset: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -10px 22px rgba(170,40,0,.30), inset 0 0 16px rgba(255,220,180,.16);
  box-shadow: var(--btn-inset), 0 0 18px rgba(255,122,0,.22);
}
.btn--primary { transition: transform 160ms ease-out, filter 150ms ease-out; will-change: transform; }
.btn--primary.on-dark:hover, .btn--primary.on-light:hover {
  filter: brightness(1.09) saturate(1.05);
  transform: translateY(-2px) scale(1.04);
}
.btn--primary:active { transform: translateY(0) scale(.99); }
/* The inner gradient drifts slowly across the face of the button. */
@keyframes btn-sheen {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}
.btn--ghost {
  border: 2px solid var(--text-dark);
  color: var(--text-dark);
  padding: 14px 26px;
}
.btn--ghost:hover { border-color: var(--orange); color: var(--orange); }
.btn--bloom-sm { box-shadow: 0 0 30px rgba(255,122,0,.35); }
.btn--bloom { box-shadow: 0 0 34px rgba(255,122,0,.35); }
.btn--bloom-lg { box-shadow: 0 0 38px rgba(255,122,0,.4); }
/* Forge glow (Wil 2026-08-22): every primary CTA radiates. A soft ring expands
   and fades while the ambient bloom breathes; supersedes the static blooms. */
@keyframes cta-radiate {
  0%   { box-shadow: var(--btn-inset), 0 0 0 0 rgba(255,122,0,.26), 0 0 18px rgba(255,122,0,.20); }
  70%  { box-shadow: var(--btn-inset), 0 0 0 9px rgba(255,122,0,0), 0 0 26px rgba(255,122,0,.30); }
  100% { box-shadow: var(--btn-inset), 0 0 0 0 rgba(255,122,0,0), 0 0 18px rgba(255,122,0,.20); }
}
.btn--primary { animation: cta-radiate 3.2s ease-out infinite, btn-sheen 6s ease-in-out infinite; }

/* Orange tick squares */
.tick { width: 8px; height: 8px; background: var(--orange); border-radius: 2px; flex-shrink: 0; }
.tick--sm { width: 7px; height: 7px; }

/* ---------- Hero (dark instrument) ---------- */
.hero { background: var(--surface-dark); color: var(--text-dark); }

.hero-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Soft scrim (Wil 2026-08-24): lifts the menu off the hero photo. */
  background: linear-gradient(180deg, rgba(13,13,16,.62) 0%, rgba(13,13,16,.28) 62%, rgba(13,13,16,0) 100%);
  z-index: 4;
}
.hero-nav__logo { height: 26px; width: auto; }
.hero-nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  font: 700 16px var(--font-body);
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(13,13,16,.95), 0 2px 14px rgba(13,13,16,.8);
}
.hero-nav__links a { color: #FFFFFF; text-decoration: none; transition: color 150ms ease-out; padding: 8px 0; margin: -8px 0; }
.hero-nav__links a:hover { color: var(--orange-tang); }
a.hero-nav__phone { font: 700 18px var(--font-body); color: #FFFFFF; text-decoration: none; }
a.hero-nav__phone:hover { color: var(--orange-tang); }

.nav-toggle { display: none; }

/* The 720px instrument panel; the nav overlays inside it, as in the artboard */
.hero-stage { position: relative; max-width: 1280px; margin: 0 auto; height: 720px; overflow: hidden; }

.hero-photo {
  position: absolute;
  right: -70px;
  top: -24px;
  bottom: -24px;
  width: min(620px, 48vw);
  transform: skewX(-9deg);
  overflow: hidden;
  border-left: 1px solid rgba(255,179,138,.35);
}
.hero-photo img {
  width: 120%;
  height: 110%;
  object-fit: cover;
  object-position: 60% 25%;
  transform: skewX(9deg) translateX(-60px);
}
.hero-photo video {
  position: absolute;
  top: 0; left: 0;
  width: 120%;
  height: 110%;
  object-fit: cover;
  object-position: 60% 25%;
  transform: skewX(9deg) translateX(-60px);
  opacity: 0;
  transition: opacity 900ms ease;
}
.hero-photo video.hv-on { opacity: 1; }
.hero-photo__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13,13,16,.55) 0%, rgba(13,13,16,.15) 32%, rgba(13,13,16,0) 58%);
}

.hero-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(154,59,0,.30) 0%, rgba(204,85,0,.15) 16%, rgba(255,122,0,.06) 32%, rgba(13,13,16,0) 54%);
  pointer-events: none;
}

/* Roll Call chip (ruled D9: ships disabled; markup renders only when enabled) */
.rollcall {
  position: absolute;
  left: 832px;
  bottom: 206px;
  transform: skewX(-9deg);
  background: rgba(22,22,27,.9);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 12px 18px;
}
.rollcall__inner { transform: skewX(9deg); display: flex; align-items: center; gap: 12px; }
.rollcall__name { font: 600 15px var(--font-body); color: var(--text-dark); }
.rollcall__fact { font: 400 13px var(--font-body); color: var(--muted-dark); }

.hero-content {
  position: relative;
  z-index: 3;
  padding: 102px 40px 0; /* 66px nav zone + the artboard's 36px */
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 760px;
}
.hero-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-dark);
  background: rgba(22,22,27,.75);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  align-self: flex-start;
}
.hero-pill__dot { width: 8px; height: 8px; background: var(--orange); border-radius: 50%; }
/* Light-surface variant: the enrolling pill lives inside the kids flagship
   card, inline beside the title. inline-flex keeps the bubble tight. */
.hero-pill--light { display: inline-flex; border-color: var(--hairline); background: #FFFFFF; }
.hero-pill--light .hero-pill__label { color: var(--ink); }
/* Enrolling tag v3 (Wil 2026-08-24): compact ember chip in the kids card,
   replacing the white pill on both breakpoints. */
.enroll-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin: 2px 0 4px;
  padding: 6px 11px;
  border-radius: 7px;
  background: linear-gradient(135deg, #FF3D00 0%, #FF7A00 55%, #FF9D33 100%);
  color: #FFFFFF;
  font: 700 11px var(--font-body);
  letter-spacing: .9px;
  text-transform: uppercase;
  box-shadow: 0 2px 12px rgba(255,122,0,.32), inset 0 1px 0 rgba(255,255,255,.28);
}
.enroll-tag__dot { width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF; animation: enroll-dot 2.4s ease-in-out infinite; }
@keyframes enroll-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 859px) { .enroll-tag { font-size: 10px; letter-spacing: .7px; white-space: nowrap; } }
.pcard__title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hero-pill--inline { padding: 5px 12px; gap: 7px; justify-content: center; }
.hero-pill--inline .hero-pill__dot { width: 6px; height: 6px; }
.hero-pill--inline .hero-pill__label { font-size: 11px; line-height: 1; text-align: center; }
/* Full Forge symbol in the hero (replaces the three stars). The mark is a CSS
   mask over a slowly flowing vertical ember gradient, darker at the top. */
.hero-symbol {
  width: 128px;
  aspect-ratio: 425.4444 / 349.9327;
  background: linear-gradient(180deg, #B52F00 0%, #FF7A00 55%, #FF9D33 100%);
  -webkit-mask: url("/assets/logo/forge-mark-orange.svg") no-repeat center / contain;
  mask: url("/assets/logo/forge-mark-orange.svg") no-repeat center / contain;
  filter: drop-shadow(0 0 20px rgba(255,122,0,.4));
}
/* The Symbol section phoenix (Wil 2026-08-31 final): no glow, no filters,
   just the forge ember gradient waving smoothly inside the mask. Filters on
   masked elements (drop-shadow AND blur) render broken on iOS; never re-add. */
.mark-stack { position: relative; width: min(340px, 100%); aspect-ratio: 425.4444 / 349.9327; margin: 0 auto; }
.mark-stack .ember-mark {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #B52F00 0%, #FF7A00 55%, #FF9D33 100%);
  background-size: 100% 220%;
  background-position: 50% 0%;
  -webkit-mask: url("/assets/logo/forge-mark-orange.svg") no-repeat center / contain;
  mask: url("/assets/logo/forge-mark-orange.svg") no-repeat center / contain;
  animation: ember-wave 9s ease-in-out infinite;
}
@keyframes ember-wave {
  0%, 100% { background-position: 50% 0%; }
  50% { background-position: 50% 100%; }
}
/* About: the full 3-Star Phoenix lockup, static ember gradient (motion removed 2026-08-31). */
.ember-lockup {
  width: min(420px, 100%);
  aspect-ratio: 425.4444 / 467.5876;
  margin: 0 auto;
  background: linear-gradient(180deg, #B52F00 0%, #FF7A00 55%, #FF9D33 100%);
  -webkit-mask: url("/assets/logo/forge-lockup-full-black.svg") no-repeat center / contain;
  mask: url("/assets/logo/forge-lockup-full-black.svg") no-repeat center / contain;
  filter: drop-shadow(0 0 24px rgba(255,122,0,.35));
}
@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .hero-symbol { background: url("/assets/logo/forge-mark-orange.svg") no-repeat center / contain; animation: none; }
  .hub-hero__content::before { background: url("/assets/logo/forge-mark-orange.svg") no-repeat center / contain; animation: none; }
  .ember-lockup { background: url("/assets/logo/forge-lockup-full-orange-black.svg") no-repeat center / contain; animation: none; }
  .mark-stack .ember-mark { background: url("/assets/logo/forge-mark-orange.svg") no-repeat center / contain; animation: none; }
}
/* Ember Flow crest on every hub/service hero (Wil 2026-08-22: integrate the
   homepage effects sitewide). Pure CSS injection, no per-page markup. */
.hub-hero__content::before {
  content: "";
  display: block;
  width: 84px;
  aspect-ratio: 425.4444 / 349.9327;
  margin-bottom: 14px;
  background: linear-gradient(180deg, #B52F00 0%, #FF7A00 55%, #FF9D33 100%);
  -webkit-mask: url("/assets/logo/forge-mark-orange.svg") no-repeat center / contain;
  mask: url("/assets/logo/forge-mark-orange.svg") no-repeat center / contain;
  filter: drop-shadow(0 0 14px rgba(255,122,0,.38));
}
.hero-pill__label {
  font: 600 13px var(--font-body);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dark);
}
.hero-h1 {
  font: 700 64px/1.04 var(--font-head);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-dark);
  text-shadow: 0 2px 22px rgba(13,13,16,.85);
}
.hero-sub {
  font: 400 20px/1.5 var(--font-body);
  color: var(--muted-dark);
  max-width: 460px;
  text-shadow: 0 1px 12px rgba(13,13,16,.8);
}
.hero-ctas { display: flex; align-items: center; gap: 20px; }

/* Hero base panel: proof register + seam + router register */
.hero-base { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; }

.proof-desktop {
  height: 56px;
  display: flex;
  align-items: stretch;
  background: rgba(13,13,16,.84);
  backdrop-filter: blur(5px);
  border-top: 1px solid var(--border-dark);
}
.proof-desktop__cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 0 40px;
  border-right: 1px solid var(--border-dark);
}
.proof-desktop__cell:last-child { border-right: 0; flex-direction: row; align-items: center; gap: 10px; }
.proof-desktop__value { font: 700 17px var(--font-body); color: var(--text-dark); }
.proof-desktop__value--orange { color: var(--orange); }
.proof-desktop__label { font: 600 13px var(--font-body); color: var(--text-dark); }

/* Quick-lead banner (v2, always open): a slim dark ember band directly under
   the hero, no toggle barrier. */
.lead-bar {
  background: var(--surface-dark);
}
.lead-bar__inner { max-width: 1280px; margin: 0 auto; padding: 14px 40px 10px; }
/* Grid keeps the banner deterministic: four fields + button on one row. */
.lead-form { display: grid; grid-template-columns: 1fr 1fr 1.1fr 1.4fr auto; gap: 12px; align-items: stretch; position: relative; }
.lead-form__field {
  min-width: 0; /* let fr tracks shrink below input min-content so the grid never overflows */
  height: 48px;
  background: var(--page); /* bone: empty fields stand off the dark band */
  border: 1px solid #D9D2C8;
  border-radius: 8px;
  color: var(--ink);
  padding: 0 14px;
  font: 400 15px var(--font-body);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.lead-form__field::placeholder { color: var(--muted-light); }
.lead-form__field:focus { outline: none; background: #FFFFFF; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,122,0,.4), 0 0 22px rgba(255,122,0,.5); }
.lead-form__field:not(:placeholder-shown) { background: #FFFFFF; }
select.lead-form__field:valid { background: #FFFFFF; }
.lead-form__select option { background: #FFFFFF; color: var(--ink); }
.lead-form__submit { padding: 13px 22px; white-space: nowrap; }
/* Start-now pops harder (Wil 2026-08-30): a standing ember ring, the same
   effect the fields wear on focus, riding a stronger, faster radiate. */
@keyframes cta-radiate-hot {
  0%   { box-shadow: var(--btn-inset), 0 0 0 3px rgba(255,122,0,.42), 0 0 0 0 rgba(255,122,0,.30), 0 0 24px rgba(255,122,0,.45); }
  70%  { box-shadow: var(--btn-inset), 0 0 0 3px rgba(255,122,0,.42), 0 0 0 12px rgba(255,122,0,0), 0 0 34px rgba(255,122,0,.60); }
  100% { box-shadow: var(--btn-inset), 0 0 0 3px rgba(255,122,0,.42), 0 0 0 0 rgba(255,122,0,0), 0 0 24px rgba(255,122,0,.45); }
}
.lead-form__submit { animation: cta-radiate-hot 2.8s ease-out infinite, btn-sheen 6s ease-in-out infinite; }
.lead-form__hp { position: absolute; left: -9999px; opacity: 0; height: 0; padding: 0; border: 0; overflow: hidden; }
/* Browser autofill paints its own background; keep the designed white fill (2026-09-03). */
.lead-form__field:-webkit-autofill, .lead-form__field:-webkit-autofill:hover, .lead-form__field:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
}
.lead-form__meta { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.lead-form__alt { font: 700 20px var(--font-body); color: #FFFFFF; margin: 0; }
.lead-form__note { font: 600 15px var(--font-body); color: #FFFFFF; margin: 4px 0 0; text-align: center; width: 100%; }
@media (max-width: 859px) {
  .lead-form__note .note-sep { display: none; }
  .lead-form__note .note-a, .lead-form__note .note-b { display: block; line-height: 1.5; }
}
.lead-form__field.field-error { border-color: #FF3D00; box-shadow: 0 0 0 1px #FF3D00; }
.lead-form__err { position: absolute; font: 600 12px var(--font-body); color: #FF9D33; pointer-events: none; }
.lead-form__alt a { color: #FFFFFF; font-weight: 700; text-decoration: none; }
.lead-form__alt a:hover { color: var(--orange-tang); }

.seam { height: 3px; background: var(--seam); }

.router-desktop {
  height: 104px;
  display: flex;
  align-items: stretch;
  background: var(--page);
  border-bottom: 1px solid #DDD8D0;
}
.router-desktop__cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 0 24px;
  border-right: 1px solid var(--hairline);
  text-decoration: none;
  position: relative;
  transition: background-color 150ms ease-out, transform 180ms ease-out, box-shadow 180ms ease-out;
}
.router-desktop__cell:last-child { border-right: 0; }
.router-desktop__cell:hover { background: #FFFFFF; }
.router-desktop__cell--flag { flex: 1.4; padding: 0 26px; background: var(--ramp-calm); }
.router-desktop__cell--flag:hover { background: var(--ramp-calm); }
/* Each router cell lifts toward the cursor and its title steps forward,
   signalling the whole cell is clickable. */
@media (hover: hover) {
  .router-desktop__cell:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 14px 30px rgba(13,13,16,.16);
    z-index: 2;
  }
  .router-desktop__cell:hover .router-desktop__title { transform: scale(1.06); }
}
.router-desktop__eyebrow {
  font: 600 11px var(--font-body);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ramp-lo);
}
.router-desktop__title {
  font: 700 19px var(--font-head);
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--ink);
  transition: transform 180ms ease-out;
  transform-origin: left center;
}
.router-desktop__cell--flag .router-desktop__title { font-size: 21px; }
.router-desktop__desc { font: 400 13px var(--font-body); color: var(--muted-light); }
.router-desktop__cell--flag .router-desktop__desc { color: var(--body-light); }

/* Mobile-only hero pieces hidden on desktop */
.proof-strip, .hero-photo-mobile, .hero-seam-mobile { display: none; }

/* ---------- Mobile router band ---------- */
.router-band { display: none; }

/* ---------- Section shells ---------- */
.section { padding: 56px 40px; }
.section--white { background: #FFFFFF; border-top: 1px solid var(--hairline); }
.section--light { background: var(--page); border-top: 1px solid var(--hairline); }
.section--dark { background: var(--surface-dark); color: var(--text-dark); }
.section__inner { max-width: 1280px; margin: 0 auto; }

.h2-light { font: 700 40px/1.1 var(--font-head); letter-spacing: .5px; text-transform: uppercase; color: var(--ink); }
.h2-dark { font: 700 40px/1.1 var(--font-head); letter-spacing: .5px; text-transform: uppercase; color: var(--text-dark); }

/* Ember floors (light sections) */
.ember-floor { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
.ember-floor--why {
  height: 150px;
  background: linear-gradient(0deg, rgba(255,122,0,.20) 0%, rgba(255,179,138,.09) 42%, rgba(255,122,0,0) 78%),
    radial-gradient(520px 140px at 38% 106%, rgba(255,140,26,.14), rgba(255,140,26,0) 75%);
}
.ember-floor--wall {
  height: 170px;
  background: linear-gradient(0deg, rgba(255,122,0,.16) 0%, rgba(255,179,138,.07) 45%, rgba(255,122,0,0) 80%),
    radial-gradient(560px 150px at 62% 108%, rgba(255,140,26,.12), rgba(255,140,26,0) 75%);
}
.hairline-cut { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; }
.hairline-cut--why {
  background: linear-gradient(90deg, rgba(230,106,0,.08) 0%, rgba(255,122,0,.55) 28%, rgba(255,209,163,.95) 50%, rgba(255,122,0,.55) 72%, rgba(230,106,0,.08) 100%);
}
.hairline-cut--wall {
  background: linear-gradient(90deg, rgba(230,106,0,.06) 0%, rgba(255,122,0,.45) 30%, rgba(255,209,163,.85) 50%, rgba(255,122,0,.45) 70%, rgba(230,106,0,.06) 100%);
}

/* ---------- Why Forge ---------- */
.why { position: relative; overflow: hidden; }
.why__grid { display: grid; grid-template-columns: 1fr 420px; gap: 48px; max-width: 1280px; margin: 0 auto; }
.why__col { display: flex; flex-direction: column; gap: 18px; }
.why__lede { font: 400 16px/1.6 var(--font-body); color: var(--body-light); max-width: 620px; }
.why__bullets { display: flex; flex-direction: column; gap: 8px; font: 400 15px/1.5 var(--font-body); color: var(--body-light); }
.why__bullet { display: flex; gap: 10px; align-items: center; }
.cred-strip { display: flex; border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; max-width: 640px; background: #FFFFFF; }
.cred-strip__cell { flex: 1; padding: 18px 24px; border-right: 1px solid var(--hairline); }
.cred-strip__cell:last-child { border-right: 0; }
.cred-strip__value { font: 700 20px var(--font-head); color: var(--ink); }
.cred-strip__label { font: 400 13px var(--font-body); color: var(--muted-light); }
.why__photo { display: flex; flex-direction: column; gap: 10px; }
.why__photo-slot { width: 420px; height: 360px; border-radius: var(--r-card); overflow: hidden; }
.why__photo-cap { font: 400 13px/1.4 var(--font-body); color: var(--muted-light); }

/* Photo drop-zone awaiting the refill shoot: quiet branded panel, no placeholder text */
.drop-zone {
  width: 100%;
  height: 100%;
  min-height: 170px;
  background:
    radial-gradient(320px 180px at 50% 100%, rgba(255,122,0,.10), rgba(255,122,0,0) 75%),
    repeating-linear-gradient(45deg, #F1EDE7 0px, #F1EDE7 10px, #EAE5DE 10px, #EAE5DE 20px);
}

/* ---------- Programs ---------- */
.programs__head { display: flex; align-items: flex-end; justify-content: space-between; margin: 6px 0 28px; }
.programs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--hairline);
  background: #FFFFFF;
  border-radius: var(--r-card);
  overflow: hidden;
}
.pcard { padding: 28px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.pcard__title { font: 700 22px var(--font-head); letter-spacing: .5px; text-transform: uppercase; color: var(--ink); transition: transform 180ms ease-out; transform-origin: left center; }
/* Stretched link: the card's one text link covers the whole box, so the entire
   card is clickable (and tappable) without nesting links. */
.pcard__link::after { content: ""; position: absolute; inset: 0; }
/* Universal variant (2026-08-22): any card link marked .cell-link stretches
   over its whole cell. Only ever applied to cards with a SINGLE link, so no
   other link gets swallowed. */
.band-card, .time-card { position: relative; }
.cell-link::after { content: ""; position: absolute; inset: 0; }
/* Router-band treatment on the program cards: the card lifts toward the cursor
   and its title steps forward. */
@media (hover: hover) {
  .pcard:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 14px 30px rgba(13,13,16,.14); z-index: 2; }
  .pcard:hover .pcard__title { transform: scale(1.05); }
}
.pcard__desc { font: 400 15px/1.55 var(--font-body); color: var(--body-light); }
.pcard__link { font: 600 14px var(--font-body); }
.pcard--flag {
  grid-column: span 2;
  display: flex;
  flex-direction: row;
  padding: 0;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--ramp-calm);
  gap: 0;
}
.pcard--flag .pcard__body { flex: 1; padding: 28px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.pcard--flag .pcard__title { font-size: 26px; }
.pcard__eyebrow { font: 600 12px var(--font-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ramp-lo); }
.pcard__photo { width: 220px; min-height: 200px; }
.pcard__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.pcard__fact { font: 600 12px var(--font-body); letter-spacing: .4px; color: var(--body-light); border: 1px solid var(--hairline); background: #FFFFFF; border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.pcard__desc--sub { font-size: 13.5px; color: var(--muted-light); }
.pcard--b1 { border-bottom: 1px solid var(--hairline); }
.pcard--flag2 { border-bottom: 1px solid var(--hairline); flex-direction: row-reverse; }
.pcard--r1 { border-right: 1px solid var(--hairline); }
.routeme {
  grid-column: span 2;
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-top: 1px solid var(--hairline);
  background: radial-gradient(440px 170px at 50% 132%, rgba(255,122,0,.34), rgba(204,85,0,.12) 58%, rgba(13,13,16,0) 84%), var(--surface-dark);
}
.routeme__title { font: 700 24px var(--font-head); letter-spacing: .5px; text-transform: uppercase; color: var(--text-dark); }
.routeme__body { font: 400 15px/1.5 var(--font-body); color: var(--muted-dark); }
.routeme .btn { font-size: 15px; padding: 14px 24px; white-space: nowrap; }

/* ---------- Wall of love ---------- */
.wall { position: relative; overflow: hidden; }
.wall__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.wall__meta { font: 400 14px var(--font-body); color: var(--muted-light); padding-bottom: 8px; }
.wall__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.quote {
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--page);
}
.quote__text { font: 400 15px/1.55 var(--font-body); color: var(--ink); }
.quote__who { font: 400 13px var(--font-body); color: var(--muted-light); }
.wall__photo { border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; min-height: 170px; }
.why__photo-slot img, .pcard__photo img, .wall__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-band { width: 100%; max-height: 440px; object-fit: cover; display: block; border-radius: var(--r-card); border: 1px solid var(--hairline); }
.ph-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Scene: contextual photo band with a floating caption chip (replaces bare ph-band) */
.scene { position: relative; margin: 0; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--hairline); }
.scene img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; display: block; }
.scene__cap { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 2px; max-width: min(540px, calc(100% - 28px)); padding: 10px 16px 12px; background: rgba(13, 13, 16, .78); backdrop-filter: blur(4px); border-radius: 10px; border: 1px solid rgba(255, 122, 0, .35); }
.scene__cap-eyebrow { font: 600 11px var(--font-body); letter-spacing: 1.6px; text-transform: uppercase; color: var(--orange); }
.scene__cap-text { font: 400 13.5px/1.45 var(--font-body); color: #EDEAE5; }
.scene--portrait { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: #0D0D10; }
.scene--portrait img { aspect-ratio: 4 / 5; height: 100%; }
.scene--portrait .scene__cap { position: static; max-width: none; background: none; backdrop-filter: none; border: 0; border-radius: 0; align-self: center; justify-self: start; gap: 10px; padding: 38px 44px; border-left: 2px solid rgba(255, 122, 0, .55); margin-left: 34px; }
.scene--portrait .scene__cap-text { font-size: 18px; line-height: 1.65; }
@media (max-width: 700px) {
  .scene img { aspect-ratio: 4 / 3; }
  .scene__cap { position: static; max-width: none; border-radius: 0; border: 0; border-top: 1px solid rgba(255, 122, 0, .35); padding: 12px 16px 14px; }
  .scene--portrait { grid-template-columns: 1fr; }
  .scene--portrait img { aspect-ratio: 4 / 5; height: auto; }
  .scene--portrait .scene__cap { border-left: 0; border-top: 1px solid rgba(255, 122, 0, .35); margin-left: 0; padding: 16px 18px 20px; }
  .scene--portrait .scene__cap-text { font-size: 15px; }
}

/* Card photo: image strip across the top of a band/time card */
.card-photo { margin: -24px -24px 16px; height: 200px; border-bottom: 1px solid var(--hairline); border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wall__badge {
  border: 1px solid var(--border-dark);
  border-radius: var(--r-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  background: var(--surface-dark);
  text-align: center;
  text-decoration: none;
}
.wall__badge-title { font: 700 20px var(--font-head); letter-spacing: .5px; text-transform: uppercase; color: var(--text-dark); }
.wall__badge-sub { font: 400 13px var(--font-body); color: var(--muted-dark); }
.wall__stat {
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: var(--page);
  text-align: center;
}
.wall__stat-value { font: 700 26px var(--font-head); color: var(--ink); }
.wall__stat-label { font: 400 13px var(--font-body); color: var(--muted-light); }

/* ---------- Steps (dark ember block) ---------- */
.steps { position: relative; background: var(--surface-dark); overflow: hidden; }
.steps__reflection {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(154,59,0,.34) 0%, rgba(204,85,0,.15) 22%, rgba(13,13,16,0) 48%);
  pointer-events: none;
}
.steps__inner { position: relative; max-width: 1280px; margin: 0 auto; }
.steps__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.steps__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--border-dark);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--card-dark);
}
.step { padding: 26px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--border-dark); }
.step:last-child { border-right: 0; }
.step--hot { background: radial-gradient(200px 110px at 50% 118%, rgba(255,122,0,.3), rgba(13,13,16,0) 78%), var(--card-dark-2); }
/* Eye-pull (Wil 2026-08-22 v3): the ember light sweeps the OUTER perimeter
   only (top/bottom everywhere, left cap on box 1, right cap on box 3; inner
   walls stay dark), each segment STAYS LIT after its pass, and once all three
   are lit the completed frame keeps radiating with a slow synchronized
   breathe. The lit frame is the static default; motion.js adds .steps-lit on
   scroll-into-view to play the sweep, so no-JS and reduced-motion visitors
   see the finished glowing frame. */
.step { position: relative; }
.step::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-top: 2px solid rgba(255,122,0,.85);
  border-bottom: 2px solid rgba(255,122,0,.85);
  filter: drop-shadow(0 0 6px rgba(255,122,0,.55));
  opacity: 1;
}
.step:first-child::after { border-left: 2px solid rgba(255,122,0,.85); }
.step:last-child::after { border-right: 2px solid rgba(255,122,0,.85); }
/* v4 (Wil): the sequence LOOPS. Segments accumulate 1-2-3, the completed frame
   holds fully lit for about 4.5 seconds, then the whole frame resets together
   and the sweep restarts. One shared 8s timeline per cell, phases encoded in
   the keyframes so the reset is simultaneous. */
/* v5 (Wil): after ~3s locked on, the fade-OUT also travels left to right
   (1 releases, then 2, then 3), then the sweep restarts. 8.4s cycle. */
@keyframes step-cycle-1 {
  0% { opacity: 0; }
  17%, 79% { opacity: 1; }
  88%, 100% { opacity: 0; }
}
@keyframes step-cycle-2 {
  0%, 13% { opacity: 0; }
  30%, 83% { opacity: 1; }
  93%, 100% { opacity: 0; }
}
@keyframes step-cycle-3 {
  0%, 26% { opacity: 0; }
  43%, 88% { opacity: 1; }
  98%, 100% { opacity: 0; }
}
.steps-lit .step:nth-child(1)::after { animation: step-cycle-1 8.4s ease-in-out infinite; }
.steps-lit .step:nth-child(2)::after { animation: step-cycle-2 8.4s ease-in-out infinite; }
.steps-lit .step:nth-child(3)::after { animation: step-cycle-3 8.4s ease-in-out infinite; }
.step__num {
  width: 38px;
  height: 38px;
  border: 2px solid #FFFFFF;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 19px var(--font-head);
  color: #FFFFFF;
}
.step__num--filled { background: var(--orange); border-color: var(--orange); color: var(--surface-dark); }
.step__title { font: 700 21px var(--font-body); color: #FFFFFF; }
.step__body { font: 400 17px/1.6 var(--font-body); color: #FFFFFF; }
.step__text { display: none; }
.steps__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; gap: 24px; }
.steps__bullets { display: flex; gap: 20px; flex-wrap: wrap; font: 400 15px var(--font-body); color: #FFFFFF; }
.steps__bullets--light { color: var(--body-light); }
.steps__bullet { display: flex; gap: 8px; align-items: center; }
/* Homepage booking stage (redesigned 2026-08-22, Wil): a centered dark ember
   section in the site's conversion language; the white Gymdesk card floats as
   the focal point with a brand-gradient top edge and warm bloom. */
.book { overflow: hidden; }
.book.section { padding-bottom: 30px; }
.book__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(154,59,0,.38) 0%, rgba(204,85,0,.18) 24%, rgba(13,13,16,0) 56%),
    radial-gradient(560px 220px at 50% 112%, rgba(255,122,0,.26), rgba(13,13,16,0) 74%);
}
.book { position: relative; }
.book__inner { position: relative; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.book__inner .stars { margin-bottom: 10px; }
.book__sub { font: 400 16px var(--font-body); color: var(--muted-dark); margin-top: 10px; }
.book__bullets { justify-content: center; margin: 10px 0 0; flex-wrap: nowrap; white-space: nowrap; }
.book-embed {
  width: 100%;
  max-width: 620px;
  background: #FFFFFF;
  border-radius: var(--r-card);
  padding: 14px 16px 16px;
  min-height: 220px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 48px rgba(255,122,0,.18), 0 18px 44px rgba(0,0,0,.35);
}
.book-embed::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #FF3D00 0%, #FF7A00 52%, #FF9D33 100%); }
/* Booking-stage form (Wil 2026-08-24 v2): same horizontal banner grid as the
   hero form; the optional comment spans the full row beneath. */
.lead-form--book { width: 100%; max-width: 1100px; margin: 14px auto 0; }
.lead-form__comment { grid-column: 1 / -1; min-height: 60px; resize: vertical; padding-top: 12px; font: 400 15px var(--font-body); }
.lead-form__submit--book { grid-column: 5; grid-row: 1; }
.lead-form--book .cf-turnstile { grid-column: 1 / -1; justify-self: center; }
@media (max-width: 859px) {
  .lead-form__submit--book { grid-column: auto; grid-row: auto; }
  .book__bullets { flex-wrap: wrap; white-space: normal; }
}
.final__call-btn { font-size: 15px; padding: 13px 24px; }
.book__call { font: 400 15px var(--font-body); color: var(--muted-dark); margin-top: 20px; }
.book__call a { color: #FFFFFF; font-weight: 700; text-decoration: none; }
.book__call a:hover { color: var(--orange-tang); }
.steps .btn { white-space: nowrap; }

/* ---------- Location ---------- */
.location__grid { display: grid; grid-template-columns: 1fr 480px; gap: 48px; max-width: 1280px; margin: 0 auto; }
.location__col { display: flex; flex-direction: column; gap: 16px; }
.location__lede { font: 400 16px/1.6 var(--font-body); color: var(--body-light); max-width: 560px; }
.nap-strip { display: flex; border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; max-width: 600px; background: #FFFFFF; }
.nap-strip__cell { flex: 1; padding: 18px 24px; border-right: 1px solid var(--hairline); }
.nap-strip__cell:first-child { flex: 1.2; }
.nap-strip__cell:last-child { border-right: 0; }
.nap-strip__head { font: 600 14px var(--font-body); color: var(--ink); }
.nap-strip__sub { font: 400 13px/1.5 var(--font-body); color: var(--muted-light); }
.nap-strip__sub a { color: inherit; }
.location__map { border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; min-height: 280px; }
.location__map iframe { width: 100%; height: 100%; min-height: 280px; border: 0; display: block; }
.location__directions { font: 600 15px var(--font-body); align-self: flex-start; }

/* ---------- FAQ ---------- */
.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
  background: #FFFFFF;
  margin-top: 28px;
}
.faq__cell { padding: 26px; display: flex; flex-direction: column; gap: 8px; }
.faq__cell--r { border-right: 1px solid var(--hairline); }
.faq__cell--b { border-bottom: 1px solid var(--hairline); }
.faq__cell--full { grid-column: 1 / -1; }
.faq__q { font: 600 16px var(--font-body); color: var(--ink); }
.faq__a { font: 400 14px/1.55 var(--font-body); color: var(--body-light); }
/* Big program cards on the About community section (Wil 2026-08-30). */
.explore-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.explore-cards a {
  font: 700 15px var(--font-head); letter-spacing: .8px; text-transform: uppercase;
  color: var(--ink); background: #FFFFFF; border: 1px solid var(--hairline);
  border-bottom: 3px solid var(--orange); border-radius: 12px;
  padding: 16px 26px; text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, color 160ms ease;
}
.explore-cards a:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(13,13,16,.14); border-color: var(--orange); color: var(--orange); }

/* Meet the Coaches (About, 2026-08-30) */
.coach-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 480px)); justify-content: center; gap: 26px; margin-top: 22px; }
.coach-card { background: #FFFFFF; border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 24px; }
/* Coach cards (Wil 2026-08-30 final-final): square photo above the bio,
   pulled back to head and torso, never a face close-up. */
.coach-card__photo { margin: -24px -24px 18px; aspect-ratio: 1 / 1; border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden; border-bottom: 3px solid var(--orange); background: #0D0D10; }
.coach-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.coach-card__name { font: 700 24px var(--font-head); letter-spacing: .5px; text-transform: uppercase; color: var(--ink); }
.coach-card__role { font: 600 13px var(--font-body); letter-spacing: 1px; text-transform: uppercase; color: var(--ramp-lo); margin-top: 4px; }
.coach-card__body { margin-top: 12px; }
.coach-card__body p { font-size: 15px; }

/* Story expander (About coach section, 2026-08-30): JS hides the body and
   reveals the button; no-JS visitors and crawlers see the full story. */
.collapse-body.js-collapsed { display: none; }
.collapse-btn {
  display: inline-block; margin-top: 6px; cursor: pointer;
  font: 700 14px var(--font-head); letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink); background: #FFFFFF; border: 1px solid var(--hairline);
  border-bottom: 3px solid var(--orange); border-radius: 10px; padding: 13px 22px;
  transition: color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.collapse-btn:hover { color: var(--orange); border-color: var(--orange); transform: translateY(-2px); }

/* FAQ hub topic chips (/faq/, 2026-08-30) */
.faq-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.faq-jump a { font: 600 13px var(--font-body); color: var(--body-light); border: 1px solid var(--hairline); background: #FFFFFF; border-radius: 999px; padding: 8px 14px; text-decoration: none; transition: border-color 150ms ease, color 150ms ease; }
.faq-jump a:hover { border-color: var(--orange); color: var(--orange); }
/* Tap-to-expand FAQ cells (Wil 2026-08-30): JS adds the --acc class and folds
   the answers, so the section scans as a short question list. Without JS every
   answer stays visible, and crawlers always see the full text in the DOM. */
.faq__cell--acc { cursor: pointer; position: relative; padding-right: 52px; }
/* The control injected inside the question heading carries the focus/tap target;
   pad it to about 44px without moving the cell (2026-09-03, findings 7 and 8). */
.faq__q-btn { display: block; padding: 12px 0; margin: -12px 0; cursor: pointer; }
.faq__q-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
.faq__cell--acc::after {
  content: "+";
  position: absolute; top: 20px; right: 20px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font: 400 20px/1 var(--font-body); color: var(--orange);
  border: 1px solid var(--hairline); border-radius: 999px; background: #FFFFFF;
  transition: transform 200ms ease, border-color 200ms ease;
}
.faq__cell--acc:hover::after { border-color: var(--orange); }
.faq__cell--open::after { transform: rotate(45deg); border-color: var(--orange); }
.faq__cell--acc .faq__a { display: none; }
.faq__cell--open .faq__a { display: block; animation: faq-reveal 220ms ease; }
@keyframes faq-reveal { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ---------- Final CTA (banked final glow) ---------- */
.final { position: relative; background: var(--surface-dark); border-top: 1px solid var(--border-dark); padding: 64px 40px; overflow: hidden; }
.final__glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(154,59,0,.48) 0%, rgba(204,85,0,.24) 22%, rgba(255,122,0,.08) 40%, rgba(13,13,16,0) 62%),
    radial-gradient(620px 240px at 32% 112%, rgba(255,122,0,.32), rgba(13,13,16,0) 74%);
  pointer-events: none;
}
.final__ember-line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--seam); }
.final__inner { position: relative; max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.final__copy { display: flex; flex-direction: column; gap: 14px; }
.final__h2 { font: 700 48px/1.05 var(--font-head); letter-spacing: .5px; text-transform: uppercase; color: var(--text-dark); }
.final__sub { font: 400 17px/1.5 var(--font-body); color: var(--muted-dark); }
.final__cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.final__call { font: 400 14px var(--font-body); color: var(--muted-dark); }
.final__call a { color: inherit; text-decoration: none; }
.final__call a:hover { color: var(--orange-tang); }

/* ---------- Footer ---------- */
.footer { background: var(--surface-dark); border-top: 1px solid var(--border-dark); color: var(--muted-dark); }
.footer__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
  gap: 28px;
}
.footer__brand { display: flex; flex-direction: column; gap: 12px; }
.footer__logo { height: 52px; width: auto; align-self: flex-start; }
.footer__nap { font: 400 13px/1.6 var(--font-body); color: var(--muted-dark); }
.footer__col { display: flex; flex-direction: column; gap: 8px; font: 400 14px/1.5 var(--font-body); }
.footer__head {
  font: 600 13px var(--font-body);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-bottom: 4px;
}
.footer__col a { color: var(--muted-dark); text-decoration: none; transition: color 150ms ease-out; }
.footer__col a:hover { color: var(--orange-tang); }
/* Free-tools pulldown (Wil approved 2026-08-30): the calculator links collapse
   behind a footer-styled disclosure. The links stay in the DOM either way, so
   crawlers read them exactly as before. */
.footer__tools { border: 0; }
.footer__tools summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  padding: 8px 0; margin: -8px 0; /* tap area */
}
.footer__tools summary::-webkit-details-marker { display: none; }
.footer__tools summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid var(--muted-dark); border-bottom: 2px solid var(--muted-dark);
  transform: rotate(45deg); transition: transform 180ms ease;
}
.footer__tools[open] summary::after { transform: rotate(225deg); margin-top: 3px; }
.footer__tools summary:hover::after { border-color: var(--orange-tang); }
.footer__tools .footer__head { margin-bottom: 0; }
.footer__tools__links { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.footer__mobile { display: none; }
.footer__legal { border-top: 1px solid var(--border-dark); }
.footer__legal-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font: 400 12px var(--font-body);
  color: var(--muted-dark);
}
.footer__legal-inner a { color: var(--muted-dark); text-decoration: none; }
.footer__legal-inner a:hover { color: var(--orange-tang); }

/* ---------- Interior page shell ---------- */
.page-head { position: relative; background: var(--surface-dark); height: 66px; }
.notfound-row { grid-template-columns: repeat(5, 1fr); }

/* ---------- Free session page ---------- */
.fs__intro { max-width: 760px; margin-bottom: 26px; }
.fs__hook-sub { font: 400 17px/1.5 var(--font-body); color: var(--body-light); margin-top: 10px; }
.fs__grid { display: grid; grid-template-columns: 1fr 480px; gap: 48px; }
.fs__copy { display: flex; flex-direction: column; gap: 18px; }
.fs__lede { font: 400 16px/1.6 var(--font-body); color: var(--body-light); max-width: 560px; }
.fs__next-head { font: 600 13px var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-light); margin-bottom: 8px; }
.fs__next-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font: 400 15px/1.5 var(--font-body); color: var(--body-light); }
.fs__next-list strong { color: var(--ink); font-weight: 600; }
.fs__phone { font: 400 15px/1.5 var(--font-body); color: var(--body-light); }
/* Big phone line (Wil 2026-08-30): the call/text alternative must be unmissable. */
.fs__phone--big { font: 700 20px/1.4 var(--font-body); color: var(--ink); }
.fs__phone--big a { color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
.fs__proof { font: 400 14px var(--font-body); color: var(--muted-light); display: flex; align-items: center; gap: 8px; }
.fs-card { border: 1px solid var(--hairline); border-radius: var(--r-card); background: #FFFFFF; padding: 28px; }
.fs-card__head { font: 700 22px var(--font-head); letter-spacing: .5px; text-transform: uppercase; color: var(--ink); margin-bottom: 16px; }
/* PPC form card (Wil 2026-08-30): the custom lead form stacked inside the
   free-session card, replacing the Gymdesk embed. v2 same day: the card comes
   forward on an ember ring and a slow breathing glow, so the form is the
   unmistakable focal point of the page. */
.fs-card--form {
  position: relative;
  border: 2px solid rgba(255, 122, 0, .65);
  border-top: 3px solid var(--orange);
  animation: card-ember 3.8s ease-in-out infinite;
}
@keyframes card-ember {
  0%, 100% { box-shadow: 0 18px 44px rgba(13,13,16,.12), 0 0 0 3px rgba(255,122,0,.12), 0 0 34px rgba(255,122,0,.26); }
  50%      { box-shadow: 0 18px 44px rgba(13,13,16,.12), 0 0 0 3px rgba(255,122,0,.20), 0 0 52px rgba(255,122,0,.44); }
}
.fs__hook-b { display: inline; }
.fs-card__sub { font: 400 14px/1.5 var(--font-body); color: var(--muted-light); margin: -10px 0 16px; }
.lead-form--card { display: flex; flex-direction: column; gap: 12px; }
.lead-form--card .lead-form__field { background: var(--page); }
.lead-form--card .lead-form__comment { height: 74px; padding: 12px 14px; resize: none; font: 400 15px var(--font-body); }
.lead-form--card .lead-form__submit { width: 100%; padding: 15px 0; font-size: 16px; }
.lead-form--card .lead-form__micro { font: 400 13px var(--font-body); color: var(--muted-light); text-align: center; margin: 0; }

/* ---------- Interior page hero band (light) ---------- */
.page-hero { background: var(--page); border-bottom: 1px solid var(--hairline); padding: 48px 40px; }
.page-hero__inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.page-hero__lede { font: 600 18px/1.5 var(--font-body); color: var(--ink); max-width: 640px; }
.page-hero__sub { font: 400 16px/1.6 var(--font-body); color: var(--body-light); max-width: 640px; }
.page-hero__reviewed { font-size: 14px; margin-top: 2px; }

/* ---------- Schedule page ---------- */
.sched-meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sched-effective { font: 600 13px var(--font-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ramp-lo); }
.sched-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-card); background: #FFFFFF; }
/* Keyboard-reachable scroller (2026-09-03): the grid is 980px wide, so under
   that width a keyboard user needs to focus the box to scroll it. */
.sched-wrap:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
/* Post tables (2026-09-03): the camp comparison table is wider than a phone, so it scrolls inside its own box. */
.table-wrap { overflow-x: auto; margin: 12px 0; }
.table-wrap:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.sched-table { width: 100%; border-collapse: collapse; min-width: 980px; }
.sched-table thead th {
  font: 700 16px var(--font-head);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink);
  padding: 14px 12px;
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  background: var(--page);
  text-align: left;
}
.sched-table th:last-child, .sched-table td:last-child { border-right: 0; }
.sched-table td, .sched-table tbody th {
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  padding: 12px;
  vertical-align: top;
  min-width: 140px;
}
.sched-table tbody tr:last-child td, .sched-table tbody tr:last-child th { border-bottom: 0; }
.sched-table .sched-timecol { min-width: 76px; font: 700 15px var(--font-head); color: var(--ramp-lo); white-space: nowrap; background: var(--page); }
.sched-class { font: 600 13px/1.35 var(--font-body); color: var(--ink); }
.sched-band { font: 400 12px var(--font-body); color: var(--muted-light); }
.sched-swipe { display: none; font: 600 11px var(--font-body); letter-spacing: 1px; text-transform: uppercase; color: var(--muted-light); text-align: center; padding: 8px 0 0; }
.sched-notes { display: flex; flex-direction: column; gap: 6px; font: 400 13px/1.5 var(--font-body); color: var(--muted-light); margin-top: 14px; }
.legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.legend-card { border: 1px solid var(--hairline); border-radius: var(--r-card); background: #FFFFFF; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.legend-card__abbr { font: 700 22px var(--font-head); letter-spacing: .5px; color: var(--ramp-lo); }
.legend-card__name { font: 600 13px var(--font-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink); }
.legend-card__desc { font: 400 14px/1.55 var(--font-body); color: var(--body-light); }

/* ---------- About page ---------- */
.about-lead { font: 600 20px/1.5 var(--font-body); color: var(--ink); max-width: 640px; }
.prose { display: flex; flex-direction: column; gap: 14px; font: 400 16px/1.65 var(--font-body); color: var(--body-light); max-width: 680px; }
.prose strong { color: var(--ink); }
.two-col { display: grid; grid-template-columns: 1fr 420px; gap: 48px; max-width: 1280px; margin: 0 auto; align-items: start; }
.two-col__media { display: flex; flex-direction: column; gap: 10px; }
.two-col__media-slot { width: 100%; height: 340px; border-radius: var(--r-card); overflow: hidden; }
.pullquote {
  border-left: 3px solid var(--orange);
  padding: 6px 0 6px 20px;
  font: 600 20px/1.5 var(--font-body);
  color: var(--ink);
  max-width: 560px;
  margin: 10px 0 0;
}
.isnot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; margin-top: 18px; }
.isnot-card { border: 1px solid var(--hairline); border-radius: var(--r-card); background: #FFFFFF; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.isnot-card__head { font: 700 18px var(--font-head); letter-spacing: .5px; text-transform: uppercase; color: var(--ink); }
.isnot-item { display: flex; gap: 10px; align-items: flex-start; font: 400 15px/1.5 var(--font-body); color: var(--body-light); }
.isnot-item .tick { margin-top: 6px; }
.isnot-item--not .tick { background: var(--muted-light); }
.about-mark { display: flex; align-items: center; justify-content: center; background: var(--surface-dark); border-radius: var(--r-card); height: 340px; }
.about-mark img { height: 200px; width: auto; }
.proof-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 20px; }
.explore-row { display: flex; flex-wrap: wrap; gap: 10px 24px; font: 600 14px var(--font-body); margin-top: 20px; }

/* ---------- Prose content (ported long-form copy) ---------- */
.prose h2 { font: 700 32px/1.1 var(--font-head); letter-spacing: .5px; text-transform: uppercase; color: var(--ink); margin-top: 20px; }
.prose h3 { font: 700 22px/1.15 var(--font-head); letter-spacing: .5px; text-transform: uppercase; color: var(--ink); margin-top: 12px; }
.prose h4 { font: 600 17px/1.3 var(--font-body); color: var(--ink); margin-top: 10px; }
/* Calculator subheadings promoted from h4 to h3 for hierarchy (2026-09-03); keep the h4 look. */
.prose h3.calc-sub { font: 600 17px/1.3 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ink); margin-top: 10px; }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.prose li { font: 400 15px/1.55 var(--font-body); color: var(--body-light); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { color: var(--orange-deep); }

/* ---------- Calculators ---------- */
.calc-card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: #FFFFFF;
  padding: 28px;
  max-width: 640px;
}
.calc-card__title { font: 700 24px var(--font-head); letter-spacing: .5px; text-transform: uppercase; color: var(--ink); margin-bottom: 18px; }
.calc-field { margin-bottom: 16px; }
.calc-field label { display: block; margin-bottom: 6px; font: 600 14px var(--font-body); color: var(--ink); }
.calc-field input, .calc-field select {
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid var(--muted-dark);
  border-radius: var(--r-btn);
  font: 400 16px var(--font-body);
  color: var(--ink);
  background: #FFFFFF;
  appearance: none;
  -webkit-appearance: none;
}
.calc-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted-light) 50%), linear-gradient(135deg, var(--muted-light) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.calc-field input:focus, .calc-field select:focus {
  outline: none;
  border-color: var(--orange-deep);
  box-shadow: 0 0 0 3px rgba(230,106,0,.18);
}
.calc-field--row { display: flex; gap: 10px; }
.calc-field--row > input { flex: 1; }
/* Inline validation message (2026-09-03). Never display:none, so the
   role="alert" element is always in the accessibility tree. */
.calc-error { margin: 0; font: 600 14px/1.4 var(--font-body); color: #B42318; }
.calc-error:not(:empty) { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid #B42318; background: #FDF2F2; border-radius: 0 var(--r-btn) var(--r-btn) 0; }
.calc-field input[aria-invalid="true"], .calc-field select[aria-invalid="true"] { border-color: #B42318; }
.calc-note { margin: 12px 0 0; font: 400 12px/1.5 var(--font-body); color: var(--muted-light); }
.calc-card .btn { width: 100%; border: 0; cursor: pointer; font-family: var(--font-body); }
.calc-result {
  margin-top: 18px;
  border-left: 3px solid var(--orange);
  background: var(--page);
  border-radius: 0 var(--r-btn) var(--r-btn) 0;
  padding: 16px 18px;
  font: 400 16px/1.5 var(--font-body);
  color: var(--ink);
}
.calc-result:empty { display: none; }
.calc-result h3 { font: 600 16px var(--font-body); color: var(--ink); margin: 10px 0 6px; }
.calc-result ul { margin: 0; padding-left: 20px; }
.calc-result li { font: 400 14px/1.5 var(--font-body); color: var(--body-light); }
.calc-result table { width: 100%; border-collapse: collapse; margin-top: 8px; background: #FFFFFF; }
.calc-result th, .calc-result td { border: 1px solid var(--hairline); padding: 8px 10px; font: 400 13px var(--font-body); text-align: left; }
.calc-result th { font-weight: 600; background: var(--page); }
.calc-result .macro-breakdown { display: flex; gap: 16px; margin-top: 10px; }
.calc-result .macro-breakdown > div { flex: 1; background: #FFFFFF; border: 1px solid var(--hairline); border-radius: var(--r-btn); padding: 10px; text-align: center; font: 400 13px/1.4 var(--font-body); }
.calc-result .macro-breakdown strong { display: block; font: 700 20px var(--font-head); color: var(--ramp-lo); }
.calc-section { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1280px; margin: 0 auto; align-items: start; }
.calc-aside { display: flex; flex-direction: column; gap: 14px; }

/* Protein sources chart */
.chart-container { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.chart-bar { position: relative; height: 30px; background: var(--page); border: 1px solid var(--hairline); border-radius: 4px; overflow: hidden; }
.chart-bar .bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ramp-cool); transition: width 600ms ease-out; }
.chart-bar .bar-label { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font: 600 12px var(--font-body); color: var(--ink); z-index: 1; }
.chart-bar .bar-value { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 600 12px var(--font-body); color: var(--ramp-lo); z-index: 1; }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 480px; gap: 48px; max-width: 1280px; margin: 0 auto; }
.contact-ways { display: flex; flex-direction: column; gap: 18px; }
.contact-way { display: flex; gap: 12px; align-items: flex-start; font: 400 15px/1.5 var(--font-body); color: var(--body-light); }
.contact-way strong { color: var(--ink); font-weight: 600; }
.contact-form .calc-field textarea {
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid var(--muted-dark);
  border-radius: var(--r-btn);
  font: 400 16px var(--font-body);
  color: var(--ink);
  min-height: 120px;
  resize: vertical;
}
.contact-form .calc-field textarea:focus { outline: none; border-color: var(--orange-deep); box-shadow: 0 0 0 3px rgba(230,106,0,.18); }
.form-note { font: 400 13px/1.5 var(--font-body); color: var(--muted-light); margin-top: 10px; }
.form-status { margin-top: 12px; font: 600 15px var(--font-body); }
.form-status--ok { color: #1a7a3a; }
.form-status--err { color: #b3261e; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Program hubs ---------- */
.hub-hero { background: var(--surface-dark); color: var(--text-dark); }
.hub-hero__stage { position: relative; max-width: 1280px; margin: 0 auto; height: 520px; overflow: hidden; }
.hub-hero__stage--tall { height: 560px; }
.hub-hero__content {
  position: relative;
  z-index: 3;
  padding: 96px 40px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 660px; /* clears the skewed photo panel's worst-case edge */
}
.hub-hero__h1 {
  font: 700 48px/1.05 var(--font-head);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-dark);
  text-shadow: 0 2px 22px rgba(13,13,16,.85);
}
.hub-hero__sub { font: 400 18px/1.5 var(--font-body); color: var(--muted-dark); max-width: 520px; text-shadow: 0 1px 12px rgba(13,13,16,.8); }
.hub-hero__ctas { display: flex; align-items: center; gap: 20px; }
.hub-hero__note { font: 400 14px var(--font-body); color: var(--muted-dark); }
.hub-hero__note a { color: var(--text-dark); }
.hub-hero__note a:hover { color: var(--orange-tang); }
.hub-hero__seam { height: 3px; background: var(--seam); }
/* PT hero (desktop): purpose-cropped derivative, client's face upper-center. */
.hub-hero .hero-photo.hero-photo--pt img { object-position: 50% 40%; }

/* Class-times cards */
.times-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; }
.time-card { border: 1px solid var(--hairline); border-radius: var(--r-card); background: #FFFFFF; padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.time-card__name { font: 700 20px var(--font-head); letter-spacing: .5px; text-transform: uppercase; color: var(--ink); }
.time-card__when { font: 600 15px var(--font-body); color: var(--ramp-lo); }
.time-card__desc { font: 400 14px/1.55 var(--font-body); color: var(--body-light); }

/* Age-band cards */
.bands-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.band-card { border: 1px solid var(--hairline); border-radius: var(--r-card); background: #FFFFFF; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.band-card--flag { background: var(--ramp-calm); }
.band-card__ages { font: 600 12px var(--font-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ramp-lo); }
.band-card__name { font: 700 20px var(--font-head); letter-spacing: .5px; text-transform: uppercase; color: var(--ink); }
.band-card__desc { font: 400 14px/1.55 var(--font-body); color: var(--body-light); }

/* Doctrine / pull block on light ground */
.doctrine {
  border-left: 3px solid var(--orange);
  background: #FFFFFF;
  border-radius: 0 var(--r-card) var(--r-card) 0;
  padding: 22px 26px;
  font: 600 18px/1.55 var(--font-body);
  color: var(--ink);
  max-width: 720px;
}
.cred-line { font: 400 15px/1.6 var(--font-body); color: var(--body-light); max-width: 640px; }
.cred-line strong { color: var(--ink); }
/* Status band: the wound-down-camp pattern (a truthful "what's current" strip). */
.notice-band {
  border-left: 4px solid var(--orange);
  background: #FFFFFF;
  border-radius: 0 var(--r-card) var(--r-card) 0;
  padding: 18px 24px;
  max-width: 720px;
}
.notice-band p { font: 400 16px/1.6 var(--font-body); color: var(--body-light); margin: 0; }
.notice-band strong { color: var(--ink); }

/* ---------- Blog posts ---------- */
.post-prose img { border-radius: var(--r-card); margin: 12px 0; height: auto; }
.post-prose table { border-collapse: collapse; width: 100%; margin: 12px 0; background: #FFFFFF; }
.post-prose figure { margin: 12px 0; }
.post-prose blockquote { border-left: 3px solid var(--orange); margin: 12px 0; padding: 4px 0 4px 18px; color: var(--ink); }

/* ---------- Motion doctrine ---------- */
/* Glow floors may breathe 6-8% opacity over ~4s on DARK blocks only. */
@keyframes glow-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .93; }
}
.steps__reflection, .final__glow { animation: glow-breathe 4s ease-in-out infinite; }

/* Border glimmer (Wil 2026-08-24): a small light orbits the CALL NOW button's
   border. Conic gradient ring via mask; the angle animates through a registered
   custom property so the rounded shape itself never rotates. */
@property --glim { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.btn--glimmer { position: relative; }
.btn--glimmer::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--r-btn) + 3px);
  padding: 3px;
  background: conic-gradient(from var(--glim), transparent 0 76%, rgba(255,230,190,1) 87%, transparent 96%);
  filter: drop-shadow(0 0 6px rgba(255,170,80,.85));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: glimmer-orbit 4s linear infinite;
  pointer-events: none;
}
@keyframes glimmer-orbit { to { --glim: 360deg; } }

/* Motion pack (ruled 2026-08-22). Register: confidence, not spectacle.
   Reveals are short (420ms), small (14px), and only run when motion.js adds
   the classes; markup ships fully visible for no-JS visitors and crawlers. */
.rv { opacity: 0; transform: translateY(14px);
  transition: opacity 420ms ease-out var(--rv-delay, 0ms), transform 420ms ease-out var(--rv-delay, 0ms); }
.rv-in { opacity: 1; transform: none; }

/* Card hover lift, hover-capable devices only. */
@media (hover: hover) {
  .band-card, .time-card, .quote, .fs-card, .calc-card {
    transition: transform 180ms ease-out, box-shadow 180ms ease-out; }
  .band-card:hover, .time-card:hover, .quote:hover, .fs-card:hover, .calc-card:hover {
    transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 28px rgba(13, 13, 16, .14); }
  /* Card titles step forward with the card, matching the homepage treatment. */
  .band-card__name, .time-card__name { transition: transform 180ms ease-out; transform-origin: left center; }
  .band-card:hover .band-card__name, .time-card:hover .time-card__name { transform: scale(1.05); }
  /* Whole-cell click affordance: cells carrying a .cell-link glow softly on hover. */
  .band-card:has(.cell-link):hover, .time-card:has(.cell-link):hover { border-color: var(--orange); }
  /* .pcard carries its own router-style hover, defined with the card styles. */
  .pcard { transition: transform 180ms ease-out, box-shadow 180ms ease-out; }
}

/* Floating nav: slides in after the hero scrolls away (motion.js toggles
   body.nav-floating past 560px with hysteresis). */
.nav-float {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 40px; background: rgba(13, 13, 16, .96);
  border-bottom: 1px solid var(--border-dark);
  transform: translateY(-100%); transition: transform 260ms ease-out;
}
body.nav-floating .nav-float { transform: none; }
.nav-float__logo { height: 26px; display: block; }
.nav-float__links { display: flex; align-items: center; gap: 28px; }
.nav-float__links a { font: 700 15px var(--font-body); color: #FFFFFF; text-decoration: none; transition: color 150ms ease-out; }
.nav-float__links a:not(.btn) { padding: 8px 0; margin: -8px 0; }
/* The CTA button keeps its own white label on hover; orange-on-orange is unreadable. */
.nav-float__links a:not(.btn):hover { color: var(--orange-tang); }
.nav-float__links a[href^="tel"] { font: 700 17px var(--font-body); color: #FFFFFF; }
.nav-float__links a[href^="tel"]:hover { color: var(--orange-tang); }
@media (max-width: 859px) {
  .nav-float { padding: 10px 18px; }
  .nav-float__links a:not(.btn) { display: none; }
  .lead-bar__inner { padding: 12px 18px 8px; }
  .lead-form { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .steps__reflection, .final__glow { animation: none; }
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .nav-float { transition: none; }
  .band-card, .time-card, .pcard, .quote, .fs-card, .calc-card { transition: none; }
  .btn--primary { animation: none; box-shadow: var(--btn-inset), 0 0 18px rgba(255,122,0,.20); transition: none; }
  .btn--primary.on-dark:hover, .btn--primary.on-light:hover { transform: none; }
  /* The start-now ring stays, statically, without the radiate. */
  .lead-form__submit { animation: none; box-shadow: var(--btn-inset), 0 0 0 3px rgba(255,122,0,.42), 0 0 24px rgba(255,122,0,.45); }
  .faq__cell--acc::after { transition: none; }
  .faq__cell--open .faq__a { animation: none; }
  .fs-card--form { animation: none; box-shadow: 0 18px 44px rgba(13,13,16,.12), 0 0 0 3px rgba(255,122,0,.16), 0 0 42px rgba(255,122,0,.34); }
  .footer__tools summary::after { transition: none; }
  .road__img { transition: none; transform: none !important; }
  .road__track { scroll-behavior: auto; }
  .ember-mark { animation: none; }
  .explore-cards a:hover, .collapse-btn:hover, .road__arrow:hover { transform: none; }
  .router-desktop__cell, .router-desktop__title { transition: none; }
  .router-desktop__cell:hover { transform: none; }
  .router-desktop__cell:hover .router-desktop__title { transform: none; }
  .pcard__title { transition: none; }
  .pcard:hover { transform: none; }
  .pcard:hover .pcard__title { transform: none; }
  .step::after { animation: none; opacity: 1; }
  .stars-run span { animation: none; }
  .hero-symbol { animation: none; }
  .hub-hero__content::before { animation: none; }
  .ember-lockup { animation: none; }
  .btn--glimmer::after { animation: none; opacity: 0; }
  .enroll-tag__dot { animation: none; }
  .band-card__name, .time-card__name { transition: none; }
  .band-card:hover .band-card__name, .time-card:hover .time-card__name { transform: none; }
}

/* ---------- Mobile nav overlay (JS island) ---------- */
.mobile-menu {
  display: none;
  background: var(--surface-dark);
  border-bottom: 1px solid var(--border-dark);
  padding: 8px 18px 20px;
}
.mobile-menu.open { display: flex; flex-direction: column; gap: 2px; }
.mobile-menu a {
  color: #FFFFFF;
  text-decoration: none;
  font: 700 16px var(--font-body);
  padding: 12px 0; /* about 44px tall rows */
}
.mobile-menu a[href^="tel"] { font: 700 18px var(--font-body); color: #FFFFFF; }
.mobile-menu a:not(.btn):hover { color: var(--orange-tang); }
.mobile-menu .btn { margin-top: 4px; }

/* =========================================================
   Mobile (390 reference). One router per breakpoint:
   below 860px the hero router hides and the router band shows.
   ========================================================= */
@media (max-width: 859px) {
  .section { padding: 28px 18px; }
  .h2-light, .h2-dark { font-size: 28px; }

  /* Hero: stacked flow */
  .hero-nav { position: static; padding: 14px 18px; border-bottom: 1px solid var(--border-dark); }
  .page-head { height: auto; }
  .fs__grid { display: flex; flex-direction: column; gap: 24px; }
  /* Mobile: the form rides directly under the hook, above the fold. */
  .fs__form { order: -1; }
  .fs__intro { margin-bottom: 18px; }
  .fs__hook-b { display: block; }
  .fs-card { padding: 18px; }
  /* Mobile PT hero: the wide derivative is already face-centered. The extra
     class in the selector outranks the generic 60% 25% band rule below. */
  .hub-hero .hero-photo.hero-photo--pt img { object-position: 50% 50%; }
  .page-hero { padding: 28px 18px; }
  .hub-hero__stage, .hub-hero__stage--tall { height: auto; overflow: visible; padding-bottom: 26px; display: flex; flex-direction: column; }
  .hub-hero__content { padding: 22px 18px 0; max-width: none; }
  .hub-hero__h1 { font-size: 34px; }
  .hub-hero__sub { font-size: 15px; text-shadow: none; }
  .hub-hero__ctas { flex-direction: column; align-items: stretch; }
  .hub-hero__ctas .btn { width: 100%; padding: 15px 0; font-size: 15px; }
  .hub-hero .hero-photo {
    display: block;
    position: relative;
    order: 2;
    right: auto; top: auto; bottom: auto;
    width: auto;
    height: 230px;
    margin: 20px 0 -26px;
    transform: none;
    border-left: 0;
    overflow: hidden;
  }
  .hub-hero .hero-photo img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 60% 25%;
    transform: none;
  }
  .hub-hero .hero-photo__fade {
    background: linear-gradient(180deg, rgba(13,13,16,.55) 0%, rgba(13,13,16,0) 38%);
  }
  .times-grid, .bands-grid { display: flex; flex-direction: column; }
  .doctrine { font-size: 16px; padding: 16px 18px; }
  .calc-section, .contact-grid { display: flex; flex-direction: column; gap: 24px; }
  .calc-card { padding: 18px; }
  .calc-result .macro-breakdown { flex-direction: column; gap: 8px; }
  .prose h2 { font-size: 24px; }
  .prose h3 { font-size: 19px; }
  .sched-swipe { display: block; }
  .legend-grid { display: flex; flex-direction: column; }
  .two-col { display: flex; flex-direction: column; gap: 20px; align-items: stretch; }
  .two-col > div, .two-col__media { width: 100%; }
  .ember-lockup, .mark-stack { margin: 0 auto; }
  .isnot-grid { display: flex; flex-direction: column; }
  .proof-row { display: flex; flex-direction: column; }
  .about-mark { height: 220px; }
  .about-mark img { height: 130px; }
  .two-col__media-slot { height: 220px; }
  .pullquote { font-size: 17px; }
  .hero-nav__logo { height: 18px; }
  .hero-nav__links { display: none; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: 0;
    padding: 15px 12px;   /* 44x44 hit area around the 20x14 icon */
    margin: -15px -12px;  /* ...without moving the header */
    cursor: pointer;
  }
  .nav-toggle span { width: 20px; height: 2px; background: var(--text-dark); display: block; }
  .nav-toggle span:nth-child(3) { width: 12px; background: var(--orange); }

  .hero-stage { height: auto; overflow: visible; }
  .hero-glow { display: none; }
  .hero-content { padding: 22px 18px 0; gap: 14px; max-width: none; }
  .hero-content, .hero-photo-mobile, .hero-seam-mobile { position: relative; }
  .hero-pill { gap: 8px; padding: 6px 12px; }
  .hero-pill__dot { width: 6px; height: 6px; }
  .hero-pill__label { font-size: 11px; }
  .hero-symbol { width: 84px; }
  .stars--hero { gap: 5px; }
  .stars--hero span:nth-child(1), .stars--hero span:nth-child(3) { font-size: 17px; }
  .stars--hero span:nth-child(2) { font-size: 24px; }
  .hero-h1 { font-size: 40px; line-height: 1.05; }
  .hero-sub { font-size: 15px; text-shadow: none; }
  .hero-ctas .btn--ghost { width: 100%; padding: 13px 0; font-size: 15px; text-align: center; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn--primary { width: 100%; padding: 15px 0; font-size: 15px; box-shadow: 0 0 28px rgba(255,122,0,.35); }

  /* Mobile proof grid (2x2) inside hero content */
  .proof-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 12px;
    margin-top: 8px;
    padding: 6px 6px 2px;
    border-top: 1px solid var(--border-dark);
    text-align: center;
  }
  .proof-strip__item { font: 600 12px var(--font-body); color: var(--text-dark); }
  .proof-strip__item strong { font-weight: 700; color: #FFFFFF; }
  .proof-strip__item--offer { width: 100%; margin-top: 2px; }
  .proof-strip__free { color: var(--orange-tang) !important; }
  .proof-strip__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); }
  .proof-mobile-legacy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    overflow: hidden;
  }
  .proof-mobile__cell { padding: 10px 14px; }
  .proof-mobile__cell--r { border-right: 1px solid var(--border-dark); }
  .proof-mobile__cell--b { border-bottom: 1px solid var(--border-dark); }
  .proof-mobile__value { font: 700 15px var(--font-head); color: var(--text-dark); }
  .proof-mobile__value--orange { color: var(--orange); }
  .proof-mobile__label { font: 400 11px var(--font-body); color: var(--muted-dark); }

  /* Photo below content, rotated */
  .hero-photo-mobile { display: block; position: relative; height: 250px; overflow: hidden; margin-top: 4px; }
  .hero-photo-mobile__tilt {
    position: absolute;
    left: -24px;
    right: -24px;
    top: 14px;
    bottom: -30px;
    transform: rotate(-5deg);
    transform-origin: right top;
    overflow: hidden;
    border-top: 1px solid rgba(255,179,138,.4);
  }
  .hero-photo-mobile__tilt img {
    width: 115%;
    height: 130%;
    object-fit: cover;
    object-position: 60% 18%;
    transform: rotate(5deg) translateY(-24px);
  }
  .hero-photo-mobile__tilt video {
    position: absolute;
    top: 0; left: 0;
    width: 115%;
    height: 130%;
    object-fit: cover;
    object-position: 60% 18%;
    transform: rotate(5deg) translateY(-24px);
    opacity: 0;
    transition: opacity 900ms ease;
  }
  .hero-photo-mobile__tilt video.hv-on { opacity: 1; }
  .hero-photo-mobile__glow {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 120px;
    background: linear-gradient(0deg, rgba(154,59,0,.34) 0%, rgba(204,85,0,.15) 42%, rgba(255,122,0,0) 80%);
    pointer-events: none;
  }
  .rollcall--mobile {
    position: absolute;
    left: 14px;
    bottom: 14px;
    transform: none;
    background: rgba(22,22,27,.92);
    padding: 8px 12px;
  }
  .rollcall--mobile .rollcall__inner { transform: none; gap: 8px; }
  .hero-seam-mobile { display: block; height: 3px; background: var(--seam); }

  /* Desktop-only hero pieces off */
  .hero-photo, .hero-base, .rollcall--desktop { display: none; }

  /* Router band after the seam: reads as continuation, not a new section */
  .router-band { display: block; background: var(--page); padding: 22px 18px 28px; }
  .router-band__eyebrow { font: 600 12px var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-light); margin-bottom: 6px; }
  .router-band__h2 { font: 700 28px/1.1 var(--font-head); letter-spacing: .5px; text-transform: uppercase; color: var(--ink); }
  .router-band__list { border: 1px solid var(--hairline); background: #FFFFFF; border-radius: var(--r-card); overflow: hidden; margin-top: 16px; }
  .rcell { position: relative; padding: 18px; border-bottom: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 6px; }
  .rcell--flag { background: var(--ramp-calm); }
  .rcell__photo { height: 150px; border-radius: 10px; overflow: hidden; margin-bottom: 6px; }
  .rcell__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
  .rcell__eyebrow { font: 600 11px var(--font-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted-light); }
  .rcell--flag .rcell__eyebrow { color: var(--ramp-lo); }
  .rcell__title { font: 700 20px var(--font-head); letter-spacing: .5px; text-transform: uppercase; color: var(--ink); }
  .rcell__desc { font: 400 14px/1.5 var(--font-body); color: var(--body-light); }
  .rcell__rated { display: flex; align-items: center; gap: 8px; font: 400 12px var(--font-body); color: var(--muted-light); }
  .rcell__rated-stars { font-size: 11px; line-height: 1; color: var(--ramp-lo); letter-spacing: 1px; }
  .rcell__link { font: 600 13px var(--font-body); }
  .rcell--cta {
    border-bottom: 0;
    gap: 8px;
    background: radial-gradient(200px 110px at 50% 118%, rgba(255,122,0,.38), rgba(204,85,0,.13) 55%, rgba(13,13,16,0) 82%), var(--surface-dark);
  }
  .rcell--cta .rcell__title { color: var(--text-dark); }
  .rcell--cta .rcell__desc { font-size: 13px; color: var(--muted-dark); }
  .rcell--cta .btn { padding: 12px 0; font-size: 13px; margin-top: 4px; }

  /* Why Forge */
  .why__grid { display: flex; flex-direction: column; gap: 12px; }
  .why__col { gap: 12px; }
  .why__lede { font-size: 14px; }
  .why__bullets { font-size: 13px; gap: 6px; }
  .why__bullet .tick { width: 7px; height: 7px; }
  .cred-strip__cell { padding: 10px 12px; }
  .cred-strip__value { font-size: 14px; }
  .cred-strip__label { font-size: 10px; }
  .why__photo { display: flex; margin-top: 8px; }
  .why__photo-cap .cap-line { display: block; }
  .why__photo-cap .cap-link { display: inline-block; margin-top: 2px; }
  .why__photo-slot { width: 100%; height: 230px; }
  .ember-floor--why { height: 90px; }

  /* Programs */
  .programs__grid { display: flex; flex-direction: column; margin-top: 16px; }
  .pcard { padding: 18px; border-bottom: 1px solid var(--hairline); }
  .pcard:last-of-type { border-bottom: 0; }
  .pcard__title { font-size: 20px; }
  .pcard__desc { font-size: 14px; }
  .pcard__link { font-size: 13px; }
  .pcard--flag { flex-direction: column; border-right: 0; }
  .pcard--flag .pcard__body { padding: 18px; }
  .pcard--flag .pcard__title { font-size: 20px; }
  .pcard__photo { width: 100%; min-height: 0; height: 150px; border-radius: 10px; overflow: hidden; }
  .routeme { display: none; }
  .routeme--cell { display: flex; padding: 26px 22px; }
  .stars--h2.stars--ink span:nth-child(1), .stars--h2.stars--ink span:nth-child(3) { font-size: 12px; }
  .stars--h2.stars--ink span:nth-child(2) { font-size: 17px; }

  /* Wall of love: trims to 4 quotes + badge */
  .wall__head { flex-direction: column; align-items: flex-start; margin-bottom: 14px; }
  .wall__meta { padding: 8px 0 0; font-size: 13px; }
  .wall__grid { display: flex; flex-direction: column; gap: 12px; }
  .quote { padding: 16px 18px; }
  .quote__text { font-size: 14px; }
  .quote__who { font-size: 12px; }
  .quote--extra, .wall__stat { display: none; } /* trim-tier quotes now SHOW on mobile (Wil 2026-08-26) */
  .wall__photo { min-height: 0; height: 200px; margin-top: 4px; }
  .wall__badge { order: 2; align-items: center; }
  .quote--m1 { order: 0; }
  .quote--m2 { order: 1; }
  .quote--m3 { order: 3; }
  .quote--m4 { order: 4; }
  .wall__badge-title { font-size: 17px; }
  .ember-floor--wall { height: 100px; }

  /* Steps */
  .steps__row { display: flex; flex-direction: column; margin-top: 16px; }
  .step { border-right: 0; border-bottom: 1px solid var(--border-dark); flex-direction: row; gap: 14px; align-items: flex-start; padding: 18px; }
  .step:last-child { border-bottom: 0; }
  .step__num { width: 32px; height: 32px; font-size: 16px; flex-shrink: 0; }
  .step__text { display: block; font: 400 15px/1.55 var(--font-body); color: #FFFFFF; }
  .step__text strong { color: #FFFFFF; font-weight: 700; }
  .step__title, .step__body { display: none; }
  .steps__bullet--trim { display: none; }
  .steps__head { margin-bottom: 0; }
  .steps__head .stars { display: none; }
  .steps__foot { flex-direction: column; align-items: stretch; margin-top: 14px; gap: 14px; }
  .steps__bullets { flex-direction: column; gap: 6px; font-size: 13px; }
  .steps__foot .btn { width: 100%; padding: 15px 0; font-size: 15px; box-shadow: 0 0 30px rgba(255,122,0,.4); }

  /* Location */
  .location__grid { display: flex; flex-direction: column; gap: 14px; }
  .location__lede { font-size: 14px; }
  .nap-strip { flex-direction: column; }
  .nap-strip__cell { border-right: 0; border-bottom: 1px solid var(--hairline); padding: 12px 16px; }
  .nap-strip__cell:last-child { border-bottom: 0; }
  .location__map { min-height: 130px; }
  .location__map iframe { min-height: 130px; height: 130px; }

  /* FAQ */
  .faq__grid { display: flex; flex-direction: column; margin-top: 14px; }
  .faq__cell { padding: 16px 18px; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .faq__cell:last-child { border-bottom: 0; }
  .faq__q { font-size: 15px; }
  .faq__a { font-size: 13px; }
  .faq__cell--acc { padding-right: 48px; }
  .faq__cell--acc::after { top: 13px; right: 14px; width: 24px; height: 24px; font-size: 18px; }

  /* Final CTA */
  .final { padding: 36px 18px; }
  .final__inner { flex-direction: column; text-align: center; gap: 12px; }
  .final__copy { align-items: center; gap: 12px; }
  .final__h2 { font-size: 32px; }
  .final__sub { font-size: 14px; }
  .final__cta { align-items: center; }
  .final__cta .btn { padding: 15px 32px; font-size: 15px; }

  /* Footer: centered trimmed stack */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; padding: 26px 18px 8px; }
  .footer__grid .footer__brand { display: none; } /* the mobile brand block below carries logo + NAP */
  .footer__mobile {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    text-align: center;
    padding: 24px 18px;
  }
  .footer__mobile-logo { height: 40px; width: auto; }
  .footer__mobile-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; font: 600 12px var(--font-body); }
  .footer__mobile-links a { color: var(--muted-dark); text-decoration: none; }
  .footer__mobile-links a:hover { color: var(--orange-tang); }
  .footer__mobile-nap { font: 400 11px/1.5 var(--font-body); color: var(--muted-dark); }
  .footer__legal-inner { padding: 12px 18px; justify-content: center; }
}

/* Mid-width guard: keep the desktop hero composition usable 860-1100px */
@media (min-width: 860px) and (max-width: 1100px) {
  .hero-h1 { font-size: 52px; }
  .hero-content { max-width: 62%; }
  .proof-desktop__cell { padding: 0 24px; }
  .router-desktop__cell { padding: 0 16px; }
  .router-desktop__cell--flag { padding: 0 18px; }
}

/* Infographic embed block (image doctrine: Forge writes its own inbound anchor) */
.embed-share { margin: 10px 0 26px; }
.embed-share__label { font: 600 12px var(--font-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ramp-lo); margin-bottom: 6px; }
.embed-share textarea { width: 100%; height: 84px; font: 12px/1.5 ui-monospace, Consolas, monospace; color: var(--muted-light); background: var(--page); border: 1px solid var(--hairline); border-radius: 8px; padding: 10px 12px; resize: vertical; }

/* Hero video: reduced motion shows the poster image only */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none !important; }
}

/* The Road to Coastland: horizontal photo timeline on the About page */
.road { background: var(--surface-dark); color: var(--text-dark); padding: 64px 0 56px; border-top: 3px solid var(--seam); }
.road__inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.road__h2 { font: 700 40px/1.05 var(--font-head); letter-spacing: .5px; text-transform: uppercase; margin-top: 6px; }
.road__sub { font: 400 16px/1.5 var(--font-body); color: var(--muted-dark); max-width: 560px; margin-top: 10px; }
.road__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; padding: 26px 4px 18px; scrollbar-width: thin; scrollbar-color: var(--orange) rgba(255,255,255,.08); }
.road__frame { flex: 0 0 auto; width: 280px; margin: 0; scroll-snap-align: start; }
.road__chip { display: inline-block; font: 700 13px var(--font-head); letter-spacing: 1.2px; color: #0D0D10; background: linear-gradient(135deg, #FF3D00 0%, #FF7A00 45%, #FF9D33 100%); border-radius: 999px; padding: 4px 12px; margin-bottom: 10px; }
.road__img { width: 100%; height: 210px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(255,179,138,.28); filter: saturate(.94); display: block; }
.road__cap { font: 400 13px/1.45 var(--font-body); color: var(--muted-dark); margin-top: 9px; }
.road__hint { font: 600 12px var(--font-body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ramp-lo); margin-top: 6px; }
/* Road v3 (Wil 2026-08-30 evening): free natural scrolling, no wheel or drag
   hijacking. Navigation = swipe (touch), the arrows, and a big scrubber bar.
   The frame nearest center still comes forward (JS in motion.js). */
.road__track { padding: 64px 4px 20px; scroll-snap-type: none; scrollbar-width: none; }
.road__track::-webkit-scrollbar { display: none; }
.road__img { transform-origin: 50% 100%; transition: transform 160ms ease-out; will-change: transform; }
/* The big scrubber: a thick, easy-grab slider wired to the strip. */
.road__scrub {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; margin: 18px 0 4px;
  height: 14px; border-radius: 999px;
  background: rgba(255,255,255,.10);
  outline: none; cursor: pointer;
}
.road__scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 92px; height: 26px; border-radius: 999px;
  background: linear-gradient(135deg, #FF3D00 0%, #FF7A00 45%, #FF9D33 100%);
  border: 0; box-shadow: 0 0 16px rgba(255,122,0,.45);
}
.road__scrub::-moz-range-thumb {
  width: 92px; height: 26px; border-radius: 999px;
  background: linear-gradient(135deg, #FF3D00 0%, #FF7A00 45%, #FF9D33 100%);
  border: 0; box-shadow: 0 0 16px rgba(255,122,0,.45);
}
.road__scrub::-moz-range-track { height: 14px; border-radius: 999px; background: rgba(255,255,255,.10); }
.road__frame.is-front { position: relative; z-index: 3; }
.road__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.road__nav { display: flex; gap: 10px; }
.road__arrow {
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid rgba(255,179,138,.4); background: rgba(255,255,255,.06);
  color: var(--text-dark); font: 700 18px/1 var(--font-body); cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.road__arrow:hover { background: rgba(255,122,0,.22); border-color: var(--orange); transform: translateY(-2px); }
@media (max-width: 700px) {
  .road { padding: 44px 0 40px; }
  .road__inner { padding: 0 18px; }
  .road__h2 { font-size: 30px; }
  .road__frame { width: 240px; }
  .road__img { height: 185px; }
  .road__track { padding-top: 52px; }
  .coach-grid { display: flex; flex-direction: column; }

  .road__scrub::-webkit-slider-thumb { width: 72px; }
  .explore-cards a { flex: 1 1 44%; text-align: center; padding: 15px 12px; font-size: 14px; }
}

/* Coach Wil story V2: append once, after existing About and mobile styles.
   Every rule is scoped to this section. Shared prose/toggle rules stay intact. */
.coach-story__intro > div { min-width: 0; }
.coach-story__synopsis { margin-top: 16px; }
.coach-story .coach-story__toggle { margin-top: 20px; }
.coach-story .coach-story__quote { margin-top: 24px; }
.coach-story .coach-story__photo { height: 520px; position: static; }
.coach-story [hidden] { display: none !important; }
.coach-story__body { max-width: 720px; margin: 40px auto 0; }
.coach-story__chapter + .coach-story__chapter { margin-top: 40px; }
.coach-story__chapter h3 {
  margin: 0 0 16px;
  font: 700 28px/1.2 var(--font-head);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink);
}
.coach-story__chapter .prose {
  max-width: none;
  gap: 16px;
  font-size: 17px;
  line-height: 1.7;
}
.coach-story__back { margin-top: 24px; font: 600 15px/1.5 var(--font-body); }
.coach-story__back a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 3px;
}
.coach-story a:focus-visible,
.coach-story button:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
#coach-wil-heading { scroll-margin-top: 112px; }
@media (max-width: 768px) {
  .coach-story__intro > div { width: 100%; }
  .coach-story .coach-story__toggle { width: 100%; text-align: center; }
  .coach-story .coach-story__photo { height: 280px; }
  .coach-story__body { margin-top: 28px; }
  .coach-story__chapter + .coach-story__chapter { margin-top: 32px; }
  .coach-story__chapter h3 { font-size: 24px; }
  .coach-story__chapter .prose { font-size: 16px; }
}

/* Uniform programs grid (Wil 2026-08-31): six same-size photo cards, flagship
   rank carried by badges instead of card size. */
.pcard__pphoto { margin: -28px -28px 16px; height: 180px; overflow: hidden; border-bottom: 1px solid var(--hairline); }
.pcard__pphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.routeme--cell { grid-column: auto; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; }
@media (max-width: 859px) {
  .pcard__pphoto { margin: -18px -18px 12px; height: 150px; }
}
/* Server-side lead-submit failure banner (injected by nav.js on ?lead_error=1). */
.lead-form__fail { margin: 0 0 12px; padding: 10px 14px; border: 1px solid rgba(255, 122, 0, .55); border-radius: 10px; background: rgba(255, 122, 0, .1); font: 600 14px/1.45 var(--font-body); color: #B34700; }
/* Mobile sticky contact bar (Wil 2026-08-31, CRO item 2). Desktop never sees
   it; body bottom padding keeps it off the footer's last line. */
.mbar { display: none; }
@media (max-width: 859px) {
  .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; background: #0D0D10; border-top: 1px solid rgba(255, 122, 0, .4); padding-bottom: env(safe-area-inset-bottom); }
  .mbar__item { flex: 1; display: flex; align-items: center; justify-content: center; padding: 15px 6px; font: 700 14px var(--font-body); letter-spacing: .4px; color: #EDEAE5; text-decoration: none; border-left: 1px solid rgba(255, 255, 255, .08); }
  .mbar__item:first-child { border-left: 0; }
  .mbar__item--go { background: linear-gradient(135deg, #FF7A00, #E66A00); color: #FFFFFF; }
  body { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
}