/* ==========================================================================
   CHAR MEDIA — style.css
   Dark, oversized-type, video-forward design system.

   EMBER USAGE RULES — keep the accent rare so it stays loud:
     1. One word or line per heading, never whole headings.
     2. Interactive states: hovers, focus rings, play affordances.
     3. Chips, labels, rules, counters.
     4. The .cta-band fill — max one ember-filled section per page.
     Never body text. Never two large ember fills on one screen.

   VIDEO SWAP CONTRACT (JS + HANDOFF.md depend on these attributes):
     - data-video="URL" on a card/button  → lightbox source (mp4, YouTube, Vimeo)
     - <source data-src="URL"> inside a [data-lazy] video → hover/bg preview loop
     - JS adds .has-video to the card when a preview loads; the poster
       crossfades underneath. Markup never restructures.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Brand */
  --forge: #111110;
  --ash: #3A3A37;
  --smoke: #6B6966;
  --ember: #E8511A;
  --ember-dark: #C43E10;
  --bone: #F2EDE6;
  --bone-dim: #D9D2C8;

  /* Surfaces */
  --surface-0: #0D0D0C;
  --surface-1: var(--forge);
  --surface-2: #161615;
  --surface-3: #1C1C1B;

  /* Borders */
  --border-1: rgba(242, 237, 230, 0.06);
  --border-2: rgba(242, 237, 230, 0.12);
  --border-ember: rgba(232, 81, 26, 0.4);

  /* Ember tints */
  --ember-04: rgba(232, 81, 26, 0.04);
  --ember-08: rgba(232, 81, 26, 0.08);
  --ember-15: rgba(232, 81, 26, 0.15);
  --ember-25: rgba(232, 81, 26, 0.25);
  --ember-90: rgba(232, 81, 26, 0.9);

  /* Type */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --text-mega: clamp(4.25rem, 11.5vw, 12.5rem);
  --text-display: clamp(3rem, 8.5vw, 8rem);
  --text-h2: clamp(2.4rem, 5.5vw, 4.5rem);
  --text-h3: clamp(1.5rem, 3vw, 2.1rem);
  --text-marquee: clamp(3rem, 8.5vw, 8.5rem);

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px;  --sp-10: 128px;
  --section-pad: clamp(56px, 6.5vw, 96px); /* was clamp(72px,10vw,140px) — too much air between compressed sections */
  --max-w: 1280px;
  --max-w-wide: 1440px;
  --nav-h: 72px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 0.2s;
  --dur-2: 0.45s;
  --dur-3: 0.8s;
  --hero-delay: 1.7s; /* shortened by html.intro-seen */

  /* Stacking */
  --z-nav: 100;
  --z-lightbox: 200;
  --z-intro: 300;

  --radius: 4px;

  /* Film grain — inline SVG, zero requests */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

html.intro-seen { --hero-delay: 0.15s; }

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--surface-1);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

/* Brand brief: refined grit — charcoal grain over all dark surfaces */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.03;
  pointer-events: none;
  z-index: 90; /* under nav/lightbox, over content */
}

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

ul[role='list'] { list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

::selection { background: var(--ember); color: var(--bone); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--surface-0); }
::-webkit-scrollbar-thumb { background: var(--ash); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--smoke); }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.02em; /* brand brief: tight, compressed, motorsport */
  text-wrap: balance;
}

h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); line-height: 1; }
h4 { font-size: 1.25rem; letter-spacing: 0.02em; }

p {
  color: var(--bone-dim);
  max-width: 65ch;
}

.ember { color: var(--ember); }

.text-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--bone);
}

@supports not (-webkit-text-stroke: 1px black) {
  .text-outline { color: var(--bone); }
}

/* ==========================================================================
   4. UTILITIES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.container--wide { max-width: var(--max-w-wide); }

.section { padding: var(--section-pad) 0; }
.section--flush-top { padding-top: 0; }
.section--tint { background: var(--surface-2); border-top: 1px solid var(--border-1); }

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

.skip-link {
  position: fixed;
  top: -100px;
  left: var(--sp-4);
  z-index: calc(var(--z-intro) + 1);
  padding: var(--sp-3) var(--sp-5);
  background: var(--ember);
  color: var(--bone);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top var(--dur-1) ease;
}
.skip-link:focus-visible { top: 0; }

/* Label — small ember kicker */
.label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ember);
}

/* Tag — bordered chip (athlete disciplines, service tags) */
.tag {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--border-2);
  border-radius: 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bone-dim);
}

/* Chip — solid pill overlaid on posters/media */
.chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(13, 13, 12, 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-1);
  border-radius: 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bone);
  pointer-events: none;
}

.chip--cat { top: var(--sp-4); left: var(--sp-4); }
.chip--dur { bottom: var(--sp-4); right: var(--sp-4); }

.chip--rec { top: var(--sp-4); right: var(--sp-4); color: var(--bone-dim); }
.chip--rec::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ember);
  animation: recBlink 1.6s steps(2, jump-none) infinite;
}

@keyframes recBlink { 50% { opacity: 0.25; } }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-1) ease, background var(--dur-1) ease,
              border-color var(--dur-1) ease, box-shadow var(--dur-1) ease,
              color var(--dur-1) ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--ember);
  color: var(--bone);
}
.btn--primary:hover {
  background: var(--ember-dark);
  box-shadow: 0 8px 28px var(--ember-25);
}

.btn--outline {
  border-color: var(--bone);
  color: var(--bone);
}
.btn--outline:hover {
  background: var(--bone);
  color: var(--forge);
}

.btn--ghost {
  border-color: var(--border-2);
  color: var(--bone-dim);
}
.btn--ghost:hover {
  border-color: var(--ember);
  color: var(--bone);
  background: var(--ember-08);
}

.btn--inverse {
  background: var(--forge);
  color: var(--bone);
}
.btn--inverse:hover {
  background: var(--surface-0);
  box-shadow: 0 8px 28px rgba(13, 13, 12, 0.4);
}

.btn--lg { padding: 18px 36px; font-size: 1.1rem; }

/* ==========================================================================
   6. NAV
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  transition: background var(--dur-2) ease, border-color var(--dur-2) ease;
  border-bottom: 1px solid transparent;
}

.nav.scrolled, .nav--solid {
  background: rgba(17, 17, 16, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border-1);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: 100%;
}

.nav__logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Brand brief: CHAR carries the weight; MEDIA subordinate — smaller, tracked, lighter */
.nav__logo span {
  color: var(--ember);
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.18em;
  margin-left: 2px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin-left: auto;
}

.nav__links a:not(.btn) {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bone-dim);
  transition: color var(--dur-1) ease;
  padding: var(--sp-2) 0;
}

.nav__links a:not(.btn):hover,
.nav__links a:not(.btn)[aria-current='page'] { color: var(--bone); }

.nav__links a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--ember);
  transition: width var(--dur-2) var(--ease-out);
}

.nav__links a:not(.btn):hover::after,
.nav__links a:not(.btn)[aria-current='page']::after { width: 100%; }

.nav__links-cta { display: none; }

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  align-items: center;
}

.nav__toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--bone);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) ease;
}

.nav__toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.open span:nth-child(2) { opacity: 0; }
.nav__toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   7. POSTER — cinematic placeholder / video backdrop
   ========================================================================== */
.poster {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 70% 30%, rgba(242, 237, 230, 0.05), transparent 55%),
    linear-gradient(160deg, transparent 40%, rgba(13, 13, 12, 0.55) 100%),
    var(--surface-2);
  transition: opacity var(--dur-3) ease;
}

/* Layer: slow-drifting highlight — makes the frame feel alive */
.poster::before {
  content: '';
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 50% 50%, rgba(242, 237, 230, 0.055), transparent 58%);
  animation: posterDrift 14s var(--ease-out) infinite alternate;
}

/* Layer: film grain */
.poster::after {
  content: '';
  position: absolute;
  inset: -20px;
  background-image: var(--noise);
  opacity: 0.08;
  mix-blend-mode: overlay;
  animation: grainJitter 0.7s steps(6) infinite;
  pointer-events: none;
}

@keyframes posterDrift {
  from { transform: translate(-5%, -3%) scale(1); }
  to   { transform: translate(4%, 3%) scale(1.07); }
}

@keyframes grainJitter {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-7px, 4px); }
  50%  { transform: translate(5px, -6px); }
  75%  { transform: translate(-4px, -3px); }
  100% { transform: translate(6px, 5px); }
}

/* Category palettes — read as different footage, same brand */
.poster--fmx {
  background:
    radial-gradient(110% 85% at 72% 28%, var(--ember-15), transparent 52%),
    radial-gradient(90% 70% at 20% 85%, rgba(120, 85, 50, 0.14), transparent 55%),
    linear-gradient(160deg, transparent 40%, rgba(13, 13, 12, 0.6) 100%),
    #191412;
}

.poster--drift {
  background:
    radial-gradient(110% 85% at 30% 35%, rgba(96, 116, 148, 0.17), transparent 55%),
    radial-gradient(80% 60% at 80% 90%, rgba(70, 80, 100, 0.1), transparent 50%),
    linear-gradient(160deg, transparent 40%, rgba(13, 13, 12, 0.6) 100%),
    #131519;
}

.poster--film {
  background:
    radial-gradient(120% 90% at 50% 85%, var(--ember-15), transparent 50%),
    linear-gradient(180deg, rgba(13, 13, 12, 0.4) 0%, transparent 45%),
    #171210;
}

.poster--event {
  background:
    radial-gradient(110% 85% at 65% 25%, rgba(112, 130, 100, 0.15), transparent 52%),
    linear-gradient(160deg, transparent 40%, rgba(13, 13, 12, 0.6) 100%),
    #141613;
}

.poster--hero {
  background:
    radial-gradient(90% 55% at 50% 100%, var(--ember-25), transparent 62%),
    radial-gradient(120% 80% at 75% 20%, rgba(242, 237, 230, 0.045), transparent 55%),
    linear-gradient(180deg, rgba(13, 13, 12, 0.5) 0%, transparent 40%),
    #121110;
}

/* Real-photo variants — same fade/grain treatment as the placeholder posters,
   real background image instead of a solid color underneath. */
.poster--photo-kade-roster {
  background:
    linear-gradient(160deg, transparent 35%, rgba(13, 13, 12, 0.7) 100%),
    url('../assets/img/kade-mtb-whip.webp') center 35% / cover no-repeat;
}

.poster--photo-content-day {
  background:
    linear-gradient(160deg, transparent 35%, rgba(13, 13, 12, 0.65) 100%),
    url('../assets/img/kade-moto.webp') center / cover no-repeat;
}

.poster--photo-ugc {
  background:
    linear-gradient(160deg, transparent 35%, rgba(13, 13, 12, 0.65) 100%),
    url('../assets/img/kade-mx.webp') center / cover no-repeat;
}

.poster--photo-campaign {
  background:
    linear-gradient(160deg, transparent 35%, rgba(13, 13, 12, 0.65) 100%),
    url('../assets/img/james-deane-drift-2.webp') center / cover no-repeat;
}

.poster--photo-cam {
  background:
    linear-gradient(160deg, transparent 45%, rgba(13, 13, 12, 0.55) 100%),
    url('../assets/img/cam-headshot.webp') center 20% / cover no-repeat;
}

.poster--photo-cam-portrait {
  background:
    linear-gradient(160deg, transparent 45%, rgba(13, 13, 12, 0.55) 100%),
    url('../assets/img/cam-portrait.webp') center 25% / cover no-repeat;
}

/* Ghost display text inside posters */
.poster__ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 9vw, 8.5rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.9;
  text-align: center;
  color: rgba(242, 237, 230, 0.05);
  user-select: none;
}

.poster__ghost--sm { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.poster__ghost--xl { font-size: clamp(4.5rem, 12vw, 12rem); }

/* When a real preview video has loaded, the poster sits under it */
.has-video .poster::before,
.has-video .poster::after { animation-play-state: paused; }

/* ==========================================================================
   8. MARQUEE — CSS-only infinite strip
   ========================================================================== */
.marquee {
  overflow: hidden;
  padding: var(--sp-7) 0;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  user-select: none;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 36s linear infinite;
  will-change: transform;
}

.marquee__seq {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  padding-right: var(--sp-7);
}

.marquee__seq > span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-marquee);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.marquee__x {
  color: var(--ember);
  font-size: calc(var(--text-marquee) * 0.32) !important;
  font-weight: 700 !important;
}

@keyframes marqueeScroll {
  to { transform: translateX(-50%); }
}

.marquee--clients { padding: var(--sp-6) 0; }
.marquee--clients .marquee__track { animation-duration: 48s; }
.marquee--clients .marquee__seq > span {
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  color: var(--smoke);
  letter-spacing: 0.06em;
}
.marquee--clients .marquee__x { color: var(--ember); opacity: 0.6; }

/* ==========================================================================
   9. SECTION HEAD — [ 01 — LABEL ————— ACTION → ]
   ========================================================================== */
.section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.section-head__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--bone-dim);
  white-space: nowrap;
}

.section-head__label .num { color: var(--ember); }
.section-head__label .bracket { color: var(--smoke); font-weight: 600; }

.section-head__rule {
  flex: 1;
  height: 1px;
  background: var(--border-1);
}

.section-head__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ember);
  white-space: nowrap;
}

.section-head__link .arrow { transition: transform var(--dur-1) var(--ease-out); }
.section-head__link:hover .arrow { transform: translateX(6px); }

.section-title { margin-bottom: var(--sp-7); }

.section-title p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  margin-top: var(--sp-4);
}

/* ==========================================================================
   10. CTA BAND
   ========================================================================== */
.cta-band {
  position: relative;
  background: var(--ember);
  padding: var(--sp-10) 0;
  overflow: hidden;
}

.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.cta-band__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-5);
}

.cta-band__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: rgba(17, 17, 16, 0.75);
}

.cta-band__title {
  font-size: var(--text-h2);
  color: var(--forge);
}

.cta-band__sub {
  color: rgba(17, 17, 16, 0.8);
  font-size: 1.05rem;
  max-width: 48ch;
}

.cta-band--dark { background: var(--surface-2); border-top: 1px solid var(--border-1); }
.cta-band--dark::after { opacity: 0.04; }
.cta-band--dark .cta-band__label { color: var(--ember); }
.cta-band--dark .cta-band__title { color: var(--bone); }
.cta-band--dark .cta-band__sub { color: var(--bone-dim); }

/* ==========================================================================
   11. HERO (home)
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: -12% 0;
  will-change: transform;
}

.hero__media .poster { position: absolute; inset: 0; }

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-3) ease;
}

.has-video .hero__video { opacity: 1; }

/* Two-axis scrim. The vertical pass keeps the nav and the lower type legible;
   the horizontal pass darkens the left column where ALL hero copy sits while
   leaving the right side of the frame clear so the footage still reads.
   Tuned against bright footage (snow/sky) — a single soft fade washed the
   sub-headline out completely. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(17, 17, 16, 0.78) 0%,
      rgba(17, 17, 16, 0.45) 38%,
      rgba(17, 17, 16, 0.08) 68%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(17, 17, 16, 0.6) 0%,
      rgba(17, 17, 16, 0.12) 24%,
      rgba(17, 17, 16, 0.34) 52%,
      rgba(17, 17, 16, 0.72) 78%,
      rgba(17, 17, 16, 0.92) 100%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(72px, 12vh, 140px);
  padding-top: calc(var(--nav-h) + 48px);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--bone-dim);
  margin-bottom: var(--sp-5);
  max-width: none;
}

.hero__eyebrow-rule {
  width: 48px; height: 2px;
  background: var(--ember);
}

.hero__title {
  font-size: var(--text-mega);
  letter-spacing: -0.025em;
  line-height: 0.86;
  margin-bottom: var(--sp-5);
}

.hero__title-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em; /* keep descenders inside the clip */
}

.hero__title-line > span {
  display: block;
  transform: translateY(112%);
  animation: heroLineIn 0.9s var(--ease-out) forwards;
  animation-delay: var(--hero-delay);
}

.hero__title-line:nth-child(2) > span {
  animation-delay: calc(var(--hero-delay) + 0.12s);
}

.hero__title-line--ember { color: var(--ember); }

@keyframes heroLineIn {
  to { transform: translateY(0); }
}

.hero__sub {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  max-width: 44ch;
  margin-bottom: var(--sp-6);
  opacity: 0;
  animation: heroFadeIn 0.8s ease forwards;
  animation-delay: calc(var(--hero-delay) + 0.45s);
}

.hero__actions {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  opacity: 0;
  animation: heroFadeIn 0.8s ease forwards;
  animation-delay: calc(var(--hero-delay) + 0.6s);
}

@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__scroll {
  position: absolute;
  right: var(--sp-6);
  bottom: var(--sp-6);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.hero__scroll-line {
  width: 2px; height: 56px;
  background: var(--border-2);
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 40%;
  background: var(--ember);
  animation: scrollPulse 1.8s var(--ease-out) infinite;
}

@keyframes scrollPulse {
  0%   { transform: translateY(-110%); }
  100% { transform: translateY(280%); }
}

.hero__scroll-text {
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--smoke);
}

/* ==========================================================================
   12. INTRO OVERLAY (home, once per session)
   ========================================================================== */
.intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  background: var(--surface-0);
  display: grid;
  place-items: center;
  animation: introOut 0.65s var(--ease-out) 1.45s forwards;
}

.intro__inner { text-align: center; }

.intro__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 5rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  opacity: 0;
  animation: heroFadeIn 0.7s var(--ease-out) 0.15s forwards;
}

.intro__mark span {
  color: var(--ember);
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.18em;
  margin-left: 3px;
}

.intro__rule {
  width: 0;
  height: 2px;
  margin: var(--sp-4) auto 0;
  background: var(--ember);
  animation: introRule 0.8s var(--ease-out) 0.4s forwards;
}

@keyframes introRule { to { width: 100%; } }

@keyframes introOut {
  to { transform: translateY(-100%); visibility: hidden; }
}

html.intro-seen .intro,
html:not(.js) .intro { display: none; }

/* ==========================================================================
   13. STATS
   ========================================================================== */
.stats {
  border-top: 2px solid var(--ember);
  background: var(--surface-2);
}

.stats__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-7) var(--sp-5);
  border-right: 1px solid var(--border-1);
}

.stat:last-child { border-right: none; }

.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--bone);
}

.stat__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--smoke);
}

/* Compact variant (athlete cards) */
.stats--inline { border: none; background: none; }
.stats--inline .stats__inner {
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: var(--sp-7);
}
.stats--inline .stat { padding: 0; border: none; }
.stats--inline .stat__num { color: var(--ember); }

/* ==========================================================================
   14. WORK CARDS
   ========================================================================== */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

.work-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  transition: border-color var(--dur-2) ease;
}

.work-card:hover { border-color: var(--border-2); }

.work-card--feature { grid-column: 1 / -1; }

.work-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.work-card--feature .work-card__media { aspect-ratio: 21 / 9; }

.work-card__media .poster,
.work-card__video {
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-3) ease;
}

.work-card:hover .work-card__media .poster,
.work-card:hover .work-card__video { transform: scale(1.045); }

.work-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

/* Once a real preview has loaded the card rests on the video's own poster frame
   rather than the placeholder gradient — the footage should do the talking. Hover
   then plays it. Cards with no footage yet keep the cinematic placeholder. */
.work-card.has-video .work-card__video { opacity: 1; }

/* Play affordance */
.work-card__play {
  position: absolute;
  z-index: 4;
  top: 50%; left: 50%;
  width: 76px; height: 76px;
  transform: translate(-50%, -50%) scale(0.85);
  display: grid;
  place-items: center;
  background: var(--ember-90);
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}

.work-card__play::before {
  content: '';
  width: 0; height: 0;
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent var(--bone);
  margin-left: 4px;
}

.work-card:hover .work-card__play,
.work-card:focus-visible .work-card__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Slots with no video yet advertise honestly */
.work-card[data-video=''] .work-card__play::before {
  content: 'SOON';
  width: auto; height: auto;
  border: none;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--bone);
}

/* Bottom meta over scrim */
.work-card__overlay {
  position: absolute;
  z-index: 3;
  inset: auto 0 0 0;
  padding: var(--sp-9) var(--sp-5) var(--sp-5);
  /* Weighted for real footage, which is often bright (sky, snow, dust). A single
     soft fade left the ember label unreadable over a blown-out sky. */
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(13, 13, 12, 0.5) 45%,
    rgba(13, 13, 12, 0.88) 78%,
    rgba(13, 13, 12, 0.95) 100%
  );
  pointer-events: none;
}

.work-card__cat {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ember);
  margin-bottom: var(--sp-1);
}

.work-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  text-transform: uppercase;
  line-height: 1;
  color: var(--bone);
  display: inline-block;
  position: relative;
}

.work-card__title::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: var(--ember);
  transition: width var(--dur-2) var(--ease-out);
}

.work-card:hover .work-card__title::after { width: 100%; }

/* ==========================================================================
   15. WORK PAGE — filter bar + projects grid
   ========================================================================== */
.filter-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: calc(var(--z-nav) - 10);
  background: rgba(17, 17, 16, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}

.filter-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}

.filter-bar__btns {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.filter-btn {
  padding: 9px 18px;
  border: 1px solid var(--border-2);
  border-radius: 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bone-dim);
  transition: all var(--dur-1) ease;
}

.filter-btn:hover { border-color: var(--ember); color: var(--bone); }

.filter-btn[aria-pressed='true'] {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--bone);
}

.filter-bar__count {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--smoke);
  white-space: nowrap;
}

.projects {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-5);
  align-items: start;
}

.projects .work-card { grid-column: span 4; }
.projects .work-card--w6 { grid-column: span 6; }
.projects .work-card--w8 { grid-column: span 8; }
.projects .work-card--w8 .work-card__media { aspect-ratio: 21 / 10; }
.projects .work-card--w6 .work-card__media { aspect-ratio: 16 / 9; }

.projects .work-card.is-filtering { animation: cardIn var(--dur-2) var(--ease-out); }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   16. PAGE HERO (inner pages)
   ========================================================================== */
.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(64px, 10vh, 120px)) 0 clamp(48px, 7vh, 88px);
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 85% 0%, var(--ember-08), transparent 55%);
  pointer-events: none;
}

.page-hero .container { position: relative; }

.page-hero .label { margin-bottom: var(--sp-4); display: block; }

.page-hero h1 { font-size: var(--text-display); }

.page-hero__sub {
  font-size: 1.1rem;
  margin-top: var(--sp-5);
  max-width: 52ch;
}

/* ==========================================================================
   17. SERVICES STRIP (home)
   ========================================================================== */
.services-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}

.services-strip__item {
  position: relative;
  padding: var(--sp-8) var(--sp-6);
  border-right: 1px solid var(--border-1);
  transition: background var(--dur-2) ease;
}

.services-strip__item:last-child { border-right: none; }

.services-strip__item:hover { background: var(--ember-04); }

.services-strip__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ash);
  margin-bottom: var(--sp-5);
  transition: -webkit-text-stroke-color var(--dur-2) ease;
}

@supports not (-webkit-text-stroke: 1px black) {
  .services-strip__num { color: var(--ash); }
}

.services-strip__item:hover .services-strip__num { -webkit-text-stroke-color: var(--ember); }

.services-strip__item h3 { margin-bottom: var(--sp-4); }

.services-strip__item p { font-size: 0.95rem; margin-bottom: var(--sp-5); }

.services-strip__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ember);
}

.services-strip__link .arrow { transition: transform var(--dur-1) var(--ease-out); }
.services-strip__link:hover .arrow { transform: translateX(6px); }

/* ==========================================================================
   18. ROSTER TILES (home teaser)
   ========================================================================== */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

/* Single-athlete roster: one wide feature tile instead of a 2-up grid
   with an empty second slot. */
.roster-grid--single { grid-template-columns: 1fr; }
.roster-grid--single .roster-tile { aspect-ratio: 21 / 9; }

.roster-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--border-1);
  transition: border-color var(--dur-2) ease;
}

.roster-tile:hover { border-color: var(--border-2); }

.roster-tile .poster { transition: transform var(--dur-2) var(--ease-out); }
.roster-tile:hover .poster { transform: scale(1.045); }

/* Sits above the placeholder poster but under the scrim (z-index 2) so the name
   and CTA stay readable over footage. */
.roster-tile__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-3) ease, transform var(--dur-2) var(--ease-out);
}

.roster-tile.has-video .roster-tile__video { opacity: 1; }
.roster-tile:hover .roster-tile__video { transform: scale(1.045); }

.roster-tile__scrim {
  position: absolute;
  z-index: 2;
  inset: 0;
  /* Weighted for bright footage (sky, snow) — the athlete name sits at the bottom
     and was washing out over a blown-out sky with a single soft fade. */
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(13, 13, 12, 0.4) 45%,
    rgba(13, 13, 12, 0.88) 78%,
    rgba(13, 13, 12, 0.96) 100%
  );
  pointer-events: none;
}

.roster-tile__info {
  position: absolute;
  z-index: 3;
  inset: auto 0 0 0;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.roster-tile__disc {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ember);
}

.roster-tile__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  text-transform: uppercase;
  line-height: 0.92;
  color: var(--bone);
}

.roster-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bone-dim);
  transition: color var(--dur-1) ease;
}

.roster-tile:hover .roster-tile__cta { color: var(--ember); }

.roster-cta-row {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-7);
}

/* ==========================================================================
   19. SERVICES PAGE
   ========================================================================== */
.service-block {
  border-top: 1px solid var(--border-1);
  padding: var(--section-pad) 0;
}

.service-block__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: center;
}

.service-block--flip .service-block__content { order: 2; }
.service-block--flip .service-block__visual { order: 1; }

.service-block__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 7vw, 6.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ash);
  margin-bottom: var(--sp-4);
}

@supports not (-webkit-text-stroke: 1px black) {
  .service-block__num { color: var(--ash); }
}

.service-block__content .tag { margin-bottom: var(--sp-4); }

.service-block__content h3 {
  font-size: var(--text-h2);
  margin-bottom: var(--sp-5);
}

.service-block__content > p { margin-bottom: var(--sp-5); }

.service-block__features {
  list-style: none;
  margin-bottom: var(--sp-6);
}

.service-block__feature {
  position: relative;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
  color: var(--bone-dim);
  font-size: 0.95rem;
  border-bottom: 1px solid var(--border-1);
}

.service-block__feature::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--ember);
}

/* Outcome subtitle — sits between the H3 and the mechanics paragraph.
   Sells the result, not the deliverable (Hormozi framing). */
.offer-outcome {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ember);
  margin-bottom: var(--sp-4) !important;
  max-width: none;
}

/* Value-stack bonus lines — visually distinct from the spec list so they
   read as "extra," not as more of the same bullets. */
.service-block__bonus {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--ember-04);
  border: 1px dashed var(--border-ember);
}

.service-block__bonus li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  color: var(--bone);
  font-size: 0.92rem;
  font-weight: 600;
  padding: var(--sp-1) 0;
}

.bonus-plus {
  color: var(--ember);
  font-weight: 800;
  font-family: var(--font-display);
}

.btn-row {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.service-block__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--border-1);
}

/* ==========================================================================
   20. ROSTER PAGE — athlete cards
   ========================================================================== */
.athlete {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: center;
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--border-1);
}

.athlete:first-of-type { border-top: none; padding-top: 0; }

.athlete--flip .athlete__media { order: 2; }
.athlete--flip .athlete__body { order: 1; }

.athlete__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--border-1);
}

/* Portrait source (9:16 social cut). The frame adopts the footage's own ratio so
   nothing is cropped; width is capped so a full-height vertical clip doesn't tower
   over the bio beside it. `contain` guarantees no crop even if a future clip's
   ratio is slightly off 9:16. */
.athlete__media--portrait {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}

.athlete__media--portrait .athlete__video { object-fit: contain; }

/* Landscape source — real photography, full-width column instead of a
   capped vertical strip. */
.athlete__media--landscape {
  aspect-ratio: 4 / 3;
}

.athlete__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-3) ease;
}

.has-video .athlete__video { opacity: 1; }

.athlete__handle {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ember);
  margin-bottom: var(--sp-3);
}

.athlete__name {
  font-size: clamp(2.8rem, 5.5vw, 4.8rem);
  margin-bottom: var(--sp-4);
}

.athlete__tags {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

.athlete__bio { margin-bottom: var(--sp-6); }

.athlete .stats--inline { margin-bottom: var(--sp-6); }

.athlete__results {
  background: var(--ember-04);
  border: 1px solid var(--border-1);
  border-left: 2px solid var(--ember);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6);
}

.athlete__results-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ember);
  margin-bottom: var(--sp-3);
}

.athlete__result {
  position: relative;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-5);
  color: var(--bone-dim);
  font-size: 0.95rem;
}

.athlete__result::before {
  content: '·';
  position: absolute;
  left: var(--sp-2);
  color: var(--ember);
  font-weight: 800;
}

/* ==========================================================================
   21. ABOUT PAGE
   ========================================================================== */
.about-intro {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--sp-9);
  align-items: start;
}

.about-intro__text h2 { margin-bottom: var(--sp-5); }
.about-intro__text p { margin-bottom: var(--sp-4); }

.about-quote {
  margin-top: var(--sp-6);
  padding-left: var(--sp-6);
  border-left: 2px solid var(--ember);
}

.about-quote__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--bone);
}

.about-visual {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--border-1);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

/* Single-person team: one centered card instead of a 3-up grid with two
   empty slots. */
.team-grid--single {
  grid-template-columns: 1fr;
  max-width: 380px;
  margin-inline: auto;
}

.team-card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  transition: border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}

.team-card:hover { border-color: var(--border-2); transform: translateY(-4px); }

.team-card__photo {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.team-card__body { padding: var(--sp-5); }

.team-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  text-transform: uppercase;
  line-height: 1;
}

.team-card__role {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ember);
  margin: var(--sp-1) 0 var(--sp-3);
}

.team-card__bio { font-size: 0.9rem; }

.clients-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--smoke);
  padding: var(--sp-4) var(--sp-5) 0;
  max-width: none;
  margin: 0 auto;
}

/* ==========================================================================
   22. CONTACT PAGE
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-9);
  align-items: start;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--bone-dim);
}

.contact-detail a { color: var(--bone); transition: color var(--dur-1) ease; }
.contact-detail a:hover { color: var(--ember); }

.contact-detail__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border-2);
  border-radius: 2px;
  color: var(--ember);
  font-weight: 600;
  flex-shrink: 0;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.form-group label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bone-dim);
}

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: 2px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--bone);
  transition: border-color var(--dur-1) ease;
  width: 100%;
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--smoke); }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--ember);
}

.form-group textarea { min-height: 140px; resize: vertical; }

.form-group select { appearance: none; cursor: pointer; }

.contact-form .btn { align-self: flex-start; }

.contact-form .btn[disabled] { opacity: 0.55; cursor: wait; transform: none; }

/* Honeypot — hidden from humans, present for bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-status {
  display: none;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border-ember);
  background: var(--ember-08);
  font-size: 0.95rem;
  color: var(--bone);
  max-width: none;
}

.form-status.is-visible { display: block; }

.cal-embed {
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  overflow: hidden;
}

.cal-embed__header {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-1);
}

.cal-embed__header p {
  font-size: 0.85rem;
  color: var(--smoke);
  margin-top: var(--sp-1);
}

.cal-embed iframe {
  width: 100%;
  height: 560px;
  border: none;
}

.cal-embed__inline {
  width: 100%;
  min-height: 650px;
}

.cal-embed__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-5);
  min-height: 420px;
  padding: var(--sp-7);
}

.cal-embed__placeholder p { max-width: none; }
.cal-embed__placeholder .btn { width: 100%; }

/* ==========================================================================
   23. FOOTER
   ========================================================================== */
/* No hard rule into the footer — the page background just deepens into it, and the
   mark is part of that fade rather than a block of its own. Keeping it out of flow
   is what stops the footer costing an extra screen of scrolling. */
.footer {
  position: relative;
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-0) 58%);
  overflow: hidden;
}

.footer__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, 96%);
  height: auto;
  opacity: 0.15;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

.footer > .container {
  position: relative;
  z-index: 1;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--sp-7);
  padding: var(--sp-9) 0 var(--sp-6);
}

.footer__brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: var(--sp-3);
}

.footer__brand-name span {
  color: var(--ember);
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.18em;
  margin-left: 2px;
}

.footer__brand-tag {
  font-size: 0.9rem;
  color: var(--smoke);
}

.footer__col h4 {
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  color: var(--smoke);
  margin-bottom: var(--sp-4);
}

.footer__col ul { list-style: none; }

.footer__col li { margin-bottom: var(--sp-2); }

.footer__col a {
  font-size: 0.95rem;
  color: var(--bone-dim);
  transition: color var(--dur-1) ease;
}

.footer__col a:hover { color: var(--ember); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: 0 0 var(--sp-6);
  font-size: 0.85rem;
  color: var(--smoke);
}

/* ==========================================================================
   24. LIGHTBOX (DOM built by JS)
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
}

.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 12, 0.96);
}

.lightbox__inner {
  position: relative;
  width: min(1200px, 100%);
  animation: lightboxIn var(--dur-2) var(--ease-out);
}

@keyframes lightboxIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.lightbox__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bone);
}

.lightbox__close {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border-2);
  border-radius: 2px;
  color: var(--bone);
  font-size: 1.1rem;
  line-height: 1;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease;
  flex-shrink: 0;
}

.lightbox__close:hover {
  background: var(--ember);
  border-color: var(--ember);
}

.lightbox__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--border-1);
}

.lightbox__frame iframe,
.lightbox__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   25. SCROLL REVEALS
   ========================================================================== */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   26. 404
   ========================================================================== */
.err-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--sp-6);
}

.err-page__code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(6rem, 20vw, 16rem);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 2px var(--ash);
}

@supports not (-webkit-text-stroke: 1px black) {
  .err-page__code { color: var(--ash); }
}

.err-page h1 { margin: var(--sp-4) 0 var(--sp-3); }

.err-page p { margin: 0 auto var(--sp-6); }

/* ==========================================================================
   27. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .projects .work-card,
  .projects .work-card--w6,
  .projects .work-card--w8 { grid-column: span 6; }
  .projects .work-card--w8 .work-card__media { aspect-ratio: 16 / 9; }

  .service-block__inner,
  .athlete { gap: var(--sp-7); }

  .about-intro,
  .contact-layout { gap: var(--sp-7); }

  .services-strip__item { padding: var(--sp-7) var(--sp-5); }
}

@media (max-width: 768px) {
  :root { --nav-h: 64px; }

  .nav__cta { display: none; }

  .nav__toggle { display: flex; }

  .nav__links {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: var(--sp-6) var(--sp-5);
    background: rgba(13, 13, 12, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--dur-2) var(--ease-out), visibility var(--dur-2);
    overflow-y: auto;
  }

  .nav__links.open {
    transform: translateX(0);
    visibility: visible;
  }

  .nav__links li { width: 100%; }

  .nav__links a:not(.btn) {
    display: block;
    font-size: clamp(2.2rem, 9vw, 3.2rem);
    font-weight: 800;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border-1);
  }

  .nav__links a:not(.btn)::after { display: none; }

  .nav__links-cta {
    display: block;
    margin-top: var(--sp-6);
  }

  .nav__links-cta .btn { width: 100%; }

  .hero__scroll { display: none; }

  .stats__inner { grid-template-columns: repeat(2, 1fr); }
  .stat { border-bottom: 1px solid var(--border-1); }
  .stat:nth-child(even) { border-right: none; }
  .stat:nth-last-child(-n+2) { border-bottom: none; }

  .services-strip__grid { grid-template-columns: 1fr; }
  .services-strip__item {
    border-right: none;
    border-bottom: 1px solid var(--border-1);
  }
  .services-strip__item:last-child { border-bottom: none; }

  .roster-grid { grid-template-columns: 1fr; }

  .service-block__inner { grid-template-columns: 1fr; }
  .service-block--flip .service-block__content { order: 1; }
  .service-block--flip .service-block__visual { order: 2; }
  .service-block__visual { aspect-ratio: 16 / 10; }

  .athlete { grid-template-columns: 1fr; }
  .athlete--flip .athlete__media { order: 1; }
  .athlete--flip .athlete__body { order: 2; }
  .athlete__media { aspect-ratio: 16 / 10; }
  /* portrait clips stay portrait on mobile — must re-declare, this block wins on order */
  .athlete__media--portrait { aspect-ratio: 9 / 16; max-width: 360px; }

  .about-intro { grid-template-columns: 1fr; }
  .about-visual { aspect-ratio: 16 / 10; }

  .team-grid { grid-template-columns: repeat(2, 1fr); }

  .contact-layout { grid-template-columns: 1fr; }

  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }

  .filter-bar__count { display: none; }
}

@media (max-width: 640px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-card--feature .work-card__media { aspect-ratio: 16 / 9; }

  .projects .work-card,
  .projects .work-card--w6,
  .projects .work-card--w8 { grid-column: span 12; }

  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
}

/* ==========================================================================
   27b. CONVERSION COMPONENTS
   Doors (segmentation), pricing, process, FAQ, athlete fork, lead magnet,
   callouts, and the contact qualifier.
   ========================================================================== */

/* --- Two-door segmentation band --- */
.doors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

.door {
  display: block;
  position: relative;
  padding: var(--sp-8) var(--sp-7);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  overflow: hidden;
  transition: border-color var(--dur-2) ease, background var(--dur-2) ease,
              transform var(--dur-2) var(--ease-out);
}

.door::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--noise);
  opacity: 0.03;
  pointer-events: none;
}

.door:hover {
  border-color: var(--border-ember);
  background: var(--surface-3);
  transform: translateY(-4px);
}

.door__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ash);
  margin-bottom: var(--sp-5);
  transition: -webkit-text-stroke-color var(--dur-2) ease;
}

@supports not (-webkit-text-stroke: 1px black) {
  .door__num { color: var(--ash); }
}

.door:hover .door__num { -webkit-text-stroke-color: var(--ember); }

.door__title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: var(--sp-4);
}

.door__body {
  font-size: 0.98rem;
  margin-bottom: var(--sp-5);
}

/* The self-qualifying line inside a door — reads as the "aha," not an aside,
   so it needs to break from body color rather than default browser italics. */
.door__qualify {
  display: block;
  margin-top: var(--sp-3);
  color: var(--bone);
  font-weight: 600;
}

.door__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ember);
}

.door:hover .door__cta .arrow { transform: translateX(6px); }
.door__cta .arrow { transition: transform var(--dur-1) var(--ease-out); }

/* --- Callout — pull-aside for objection handling / honest asides --- */
/* Guarantee — a distinct commitment, not another callout. Ember border on
   all sides (not just left) so it reads as a badge/seal rather than an
   aside; this is the single lever addressing "likelihood of achievement"
   that nothing else on the page covers. */
.guarantee {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface-2);
  border: 1px solid var(--border-ember);
}

.guarantee__badge {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--forge);
  background: var(--ember);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 2px;
}

.guarantee__text {
  margin: 0;
  max-width: none;
  color: var(--bone);
  font-size: 1rem;
}

@media (max-width: 640px) {
  .guarantee { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

.callout {
  margin-top: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  background: var(--ember-04);
  border: 1px solid var(--border-1);
  border-left: 2px solid var(--ember);
}

.callout p { max-width: 70ch; margin: 0; }
.callout p + p { margin-top: var(--sp-3); }

/* --- Price tag (inside service blocks) --- */
.price-tag {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-left: 2px solid var(--ember);
}

.price-tag__from {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--smoke);
}

.price-tag__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  line-height: 1;
  color: var(--ember);
}

.price-tag__note {
  flex: 1 1 100%;
  font-size: 0.88rem;
  color: var(--smoke);
  max-width: none;
}

/* --- Price table --- */
.price-table {
  border: 1px solid var(--border-1);
  margin-bottom: var(--sp-6);
}

.price-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-1);
  align-items: center;
  font-size: 0.95rem;
  color: var(--bone-dim);
}

.price-row:last-child { border-bottom: none; }

.price-row--head {
  background: var(--surface-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--smoke);
}

.price-row__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--bone);
}

.price-row__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--ember);
}

.price-row__num small { font-size: 0.7em; font-weight: 600; }

/* --- Services strip price line --- */
.services-strip__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ember);
  margin-bottom: var(--sp-4) !important;
}

/* --- Process steps --- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}

.process__step {
  padding: var(--sp-6) var(--sp-5);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-top: 2px solid var(--ember);
}

.process__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--ember);
  margin-bottom: var(--sp-3);
}

.process__step h3 {
  font-size: 1.15rem;
  margin-bottom: var(--sp-3);
}

.process__step p { font-size: 0.92rem; }

/* --- Process strip — compressed alternative to .process. Same four beats,
   one row instead of four boxed cards: column dividers, not per-item
   borders, so it reads light rather than as a fifth dense section. --- */
.process-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--ember);
  background: var(--surface-1);
}

.process-strip__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-5);
  border-right: 1px solid var(--border-1);
}

.process-strip__item:last-child { border-right: none; }

.process-strip__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--ember);
  line-height: 1;
}

.process-strip__body {
  font-size: 0.85rem;
  color: var(--bone-dim);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .process-strip { grid-template-columns: repeat(2, 1fr); }
  .process-strip__item:nth-child(2) { border-right: none; }
  .process-strip__item:nth-child(1),
  .process-strip__item:nth-child(2) { border-bottom: 1px solid var(--border-1); }
}

@media (max-width: 480px) {
  .process-strip { grid-template-columns: 1fr; }
  .process-strip__item { border-right: none; border-bottom: 1px solid var(--border-1); }
  .process-strip__item:last-child { border-bottom: none; }
}

/* --- FAQ / objections --- */
.faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}

.faq__item {
  padding: var(--sp-6);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
}

.faq__q {
  font-size: 1.15rem;
  color: var(--ember);
  margin-bottom: var(--sp-3);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}

.faq__a { font-size: 0.95rem; max-width: none; }

/* --- Athlete fork (roster vs paid) --- */
.fork {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}

.fork__card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-8) var(--sp-7);
  border: 1px solid var(--border-1);
  background: var(--surface-2);
}

.fork__card--roster {
  border-color: var(--border-ember);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--ember-08), transparent 60%),
    var(--surface-2);
}

.fork__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.fork__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ember);
}

.fork__price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--smoke);
}

.fork__title {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  margin-bottom: var(--sp-4);
}

.fork__lede { margin-bottom: var(--sp-5); }

.fork__card .service-block__features { flex: 1; }

.fork__card .btn { align-self: flex-start; }

/* --- Two-column list block --- */
.two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-7);
}

.two-col__item h3 {
  font-size: 1.3rem;
  color: var(--ember);
  margin-bottom: var(--sp-4);
}

/* --- Lead magnet --- */
.magnet {
  padding: var(--sp-8) var(--sp-7);
  background: var(--surface-1);
  border: 1px solid var(--border-ember);
  position: relative;
  overflow: hidden;
}

.magnet::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--noise);
  opacity: 0.04;
  pointer-events: none;
}

.magnet__body {
  position: relative;
  z-index: 1;
  max-width: 62ch;
}

.magnet__body h2 { margin-bottom: var(--sp-4); }
.magnet__body > p { margin-bottom: var(--sp-6); }

.magnet__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}

.magnet__form .form-group { width: 100%; max-width: 420px; }

.magnet__micro {
  font-size: 0.82rem;
  color: var(--smoke);
  max-width: none;
}

/* --- Free consult block (pitch left, capture form right) --- */
.consult {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: start;
}

.consult__pitch h2 { margin-bottom: var(--sp-5); }

.consult__lede {
  font-size: 1.05rem;
  margin-bottom: var(--sp-5);
}

.consult__cap {
  margin-top: var(--sp-5);
  padding-left: var(--sp-5);
  border-left: 2px solid var(--ember);
  font-size: 0.92rem;
  color: var(--smoke);
}

.consult__form-wrap {
  padding: var(--sp-7) var(--sp-6);
  background: var(--surface-1);
  border: 1px solid var(--border-ember);
  position: relative;
  overflow: hidden;
}

.consult__form-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--noise);
  opacity: 0.04;
  pointer-events: none;
}

.consult__form {
  position: relative;
  z-index: 1;
  gap: var(--sp-4);
}

.consult__form .form-group { margin-bottom: 0; }

.consult__form textarea { min-height: 92px; }

/* --- Consent checkbox --- */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--bone-dim);
  line-height: 1.5;
}

.checkbox input[type='checkbox'] {
  appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid var(--border-2);
  border-radius: 2px;
  background: var(--surface-2);
  cursor: pointer;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease;
}

.checkbox input[type='checkbox']:checked {
  background: var(--ember);
  border-color: var(--ember);
}

.checkbox input[type='checkbox']:checked::after {
  content: '✓';
  display: block;
  text-align: center;
  line-height: 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bone);
}

.checkbox:hover input[type='checkbox'] { border-color: var(--ember); }

/* --- Contact qualifier toggle --- */
.qualifier {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border-1);
}

.qualifier__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--bone-dim);
}

.qualifier__btns { display: flex; gap: var(--sp-2); }

.seg { border: none; padding: 0; margin: 0; min-width: 0; }
.seg[hidden] { display: none; }

.seg .form-group,
.seg .form-row { margin-bottom: var(--sp-5); }

.form-help {
  font-size: 0.82rem;
  color: var(--smoke);
  margin-top: var(--sp-2);
  max-width: none;
}

/* --- Audience panel variant --- */
.athlete__results--audience { background: var(--surface-2); }

.athlete__note {
  font-size: 0.8rem;
  color: var(--smoke);
  margin-top: var(--sp-3);
  padding-left: var(--sp-5);
  max-width: none;
}

/* Standalone media-kit line — replaces the audience panel until real numbers
   exist, so visitors never see an empty template. */
.athlete__note--kit {
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-6);
  border-left: 2px solid var(--ember);
  background: var(--ember-04);
  color: var(--bone-dim);
  font-size: 0.92rem;
}

.athlete__note-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ember);
  white-space: nowrap;
}

.athlete__note-cta .arrow { transition: transform var(--dur-1) var(--ease-out); }
.athlete__note-cta:hover .arrow { transform: translateX(6px); }

/* --- Button row centering + on-ember outline --- */
.btn-row--center { justify-content: center; }

.btn--on-ember {
  border-color: rgba(17, 17, 16, 0.55);
  color: var(--forge);
}
.btn--on-ember:hover {
  background: var(--forge);
  border-color: var(--forge);
  color: var(--bone);
}

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

@media (max-width: 768px) {
  .doors,
  .fork,
  .faq,
  .two-col { grid-template-columns: 1fr; }

  /* Section heads: label + action link don't fit on one line at 390px.
     Let them stack instead of pushing the page sideways. */
  .section-head { flex-wrap: wrap; gap: var(--sp-3); }
  .section-head__rule { flex-basis: 100%; order: 3; }
  .section-head__link { order: 2; white-space: normal; }

  /* Centered button rows must wrap rather than overflow */
  .roster-cta-row,
  .btn-row--center { flex-wrap: wrap; }
  .roster-cta-row { gap: var(--sp-3); }
  .roster-cta-row .btn,
  .btn-row--center .btn { flex: 1 1 auto; max-width: 100%; }

  .door { padding: var(--sp-7) var(--sp-5); }
  .fork__card { padding: var(--sp-7) var(--sp-5); }

  .price-row {
    grid-template-columns: 1fr auto;
    row-gap: var(--sp-2);
  }
  .price-row--head { display: none; }
  .price-row span:nth-child(3),
  .price-row span:nth-child(4) {
    font-size: 0.85rem;
    color: var(--smoke);
  }
  .price-row span:nth-child(3) { grid-column: 1; }
  .price-row span:nth-child(4) { grid-column: 2; text-align: right; }

  .magnet { padding: var(--sp-7) var(--sp-5); }

  .consult { grid-template-columns: 1fr; gap: var(--sp-7); }
  .consult__form-wrap { padding: var(--sp-6) var(--sp-5); }
}

@media (max-width: 640px) {
  .process { grid-template-columns: 1fr; }
}

/* ==========================================================================
   28. NO-JS FALLBACK
   ========================================================================== */
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   29. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .intro { display: none; }

  .hero__title-line > span { transform: none; animation: none; }
  .hero__sub, .hero__actions { opacity: 1; animation: none; }

  .marquee__track { animation: none; transform: none; }

  .poster::before,
  .poster::after,
  .chip--rec::before { animation: none; }

  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}