/* ==========================================================================
   SPORTS LODGE — Brand 2026 Design System
   Iron Black / Bone White / Ember Red / Steel Grey / Unity Gold
   Ratio target across a page: 50 / 30 / 12 / 6 / 2 — do not deviate.
   ========================================================================== */

:root {
  --iron-black: #14171A;
  --bone-white: #F4F1EA;
  --ember-red: #D9432E;
  --steel-grey: #3A4750;
  --unity-gold: #C9962C;

  --iron-black-90: rgba(20, 23, 26, .92);
  --iron-black-60: rgba(20, 23, 26, .6);
  --bone-white-70: rgba(244, 241, 234, .7);
  --bone-white-40: rgba(244, 241, 234, .4);
  --bone-white-12: rgba(244, 241, 234, .12);
  --steel-grey-40: rgba(58, 71, 80, .4);
  --ember-red-90: #c23a27;

  --font-founder: 'Archivo Black', 'Arial Black', sans-serif;
  --font-analyst: 'Inter', Arial, sans-serif;
  --font-philosopher: 'Fraunces', Georgia, serif;

  --container-w: 1180px;
  --gutter: clamp(20px, 5vw, 64px);

  --radius: 8px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--iron-black);
  color: var(--bone-white);
  font-family: var(--font-analyst);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* ---------- Type registers ---------- */

/* Founder — headlines, bold statements */
.h-founder, h1.founder, h2.founder, h3.founder {
  font-family: var(--font-founder);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.08;
  font-weight: 400;
}
h1.founder, .display-1 { font-size: clamp(26px, 4.2vw, 50px); }
h2.founder, .display-2 { font-size: clamp(26px, 3.6vw, 40px); }
h3.founder, .display-3 { font-size: clamp(20px, 2.4vw, 28px); }

/* Analyst — body, data, UI */
.body-l { font-size: 20px; line-height: 1.5; }
.body-m { font-size: 17px; line-height: 1.55; }
.body-s { font-size: 15px; line-height: 1.5; }
.text-muted { opacity: .7; }

/* Philosopher — quotes, origin stories. Use sparingly. */
.philosopher, blockquote {
  font-family: var(--font-philosopher);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.3;
  margin: 0;
}

/* Label / UI text */
.label {
  font-family: var(--font-analyst);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.section { padding: clamp(56px, 9vw, 120px) 0; }
.section-tight { padding: clamp(40px, 6vw, 72px) 0; }

.section--bone { background: var(--bone-white); color: var(--iron-black); }
.section--black { background: var(--iron-black); color: var(--bone-white); }
.section--steel { background: var(--steel-grey); color: var(--bone-white); }

.grid { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-xs { gap: 8px; } .gap-s { gap: 16px; } .gap-m { gap: 24px; } .gap-l { gap: 40px; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* max-width helper for readable copy blocks */
.measure { max-width: 640px; }
.measure-wide { max-width: 820px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-analyst);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ember-red); color: var(--bone-white); }
.btn-primary:hover { background: var(--ember-red-90); }
.btn-outline { background: transparent; color: var(--bone-white); border-color: var(--bone-white-40); }
.btn-outline:hover { border-color: var(--bone-white); }
.btn-outline--dark { color: var(--iron-black); border-color: var(--iron-black); }
.btn-outline--dark:hover { background: var(--iron-black); color: var(--bone-white); }
.btn-ghost { background: transparent; color: var(--ember-red); padding-left: 0; padding-right: 0; }
.btn-block { width: 100%; }

/* ---------- Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--iron-black-90);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bone-white-12);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 84px;
}
.nav-logo { font-family: var(--font-founder); text-transform: uppercase; font-size: 19px; letter-spacing: 0.02em; }
.nav-logo span { color: var(--ember-red); }
.nav-links { display: flex; align-items: center; gap: 34px; }
/* Tightest desktop band — just above the 980px drawer breakpoint the links
   plus logo and CTA overrun the container, so pull the gap in until the row
   sits inside it again. */
@media (min-width: 981px) and (max-width: 1060px) { .nav-links { gap: 26px; } }
.nav-links > li { position: relative; }
.nav-link {
  font-family: var(--font-analyst); font-weight: 600; font-size: 13px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--bone-white-70);
  padding: 8px 0;
}
.nav-link:hover, .nav-link.active { color: var(--bone-white); }
.nav-cta { display: flex; align-items: center; gap: 16px; }

.has-dropdown > .nav-link::after { content: '\2304'; margin-left: 6px; font-size: 11px; }
.dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  z-index: 5;
  background: var(--steel-grey); border-radius: var(--radius);
  min-width: 260px; padding: 10px; margin-top: 14px;
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.dropdown a {
  display: block; padding: 12px 14px; border-radius: var(--radius);
  font-size: 14px; font-weight: 500;
}
.dropdown a:hover { background: rgba(244,241,234,.08); }
.dropdown a small { display: block; opacity: .65; font-size: 12px; margin-top: 2px; font-weight: 400; }

.nav-toggle { display: none; background: none; border: none; color: var(--bone-white); }
.nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 980px) {
  .nav-links { position: fixed; inset: 84px 0 0 0; background: var(--iron-black); flex-direction: column;
    align-items: flex-start; padding: 28px var(--gutter); gap: 6px; overflow-y: auto;
    height: calc(100vh - 84px); height: calc(100dvh - 84px); z-index: 90;
    transform: translateX(100%); transition: transform .25s ease; }
  .nav-links.open { transform: translateX(0); }
  .nav-links > li { width: 100%; }
  .nav-link { display: block; padding: 14px 0; width: 100%; border-bottom: 1px solid var(--bone-white-12); }
  /* These selectors must out-specify `.has-dropdown:hover .dropdown` and
     `.has-dropdown:focus-within .dropdown` (0,3,0), which sit outside any
     media query. On a phone :hover sticks after a tap, which re-applied
     translateX(-50%) and pushed the panel half its width off-screen.
     left/min-width are reset too so a narrow screen cannot overflow. */
  .dropdown,
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown {
    position: static; transform: none; left: auto; right: auto;
    min-width: 0; max-width: 100%; z-index: auto;
    opacity: 1; visibility: visible; display: none;
    margin: 4px 0 8px; background: transparent; padding: 0 0 0 12px; box-shadow: none;
  }
  .has-dropdown.open .dropdown,
  .has-dropdown.open:hover .dropdown,
  .has-dropdown.open:focus-within .dropdown { display: block; }
  .has-dropdown > .nav-link::after { float: right; }
  .nav-toggle { display: block; }
  .nav-cta .btn-outline { display: none; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--iron-black); border-top: 1px solid var(--bone-white-12); padding: 64px 0 28px; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding-bottom: 48px; }
.footer-col h4 { font-family: var(--font-analyst); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--unity-gold); margin-bottom: 18px; }
.footer-col a, .footer-col p { display: block; color: var(--bone-white-70); font-size: 14px; padding: 6px 0; }
.footer-col a:hover { color: var(--bone-white); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 28px; border-top: 1px solid var(--bone-white-12); font-size: 13px; color: var(--bone-white-40); }
.footer-bottom a { color: var(--bone-white-40); }
.footer-bottom a:hover { color: var(--bone-white); }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }

/* ---------- Cards ---------- */
.card {
  background: var(--steel-grey); border-radius: var(--radius); padding: 32px;
  border: 1px solid rgba(244,241,234,.08);
}
.card--bone { background: var(--bone-white); color: var(--iron-black); border-color: rgba(20,23,26,.08); }
.card h3 { margin-bottom: 12px; }
.card p { opacity: .82; }

/* ---------- Badge / stat ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 14px; border: 1px solid var(--bone-white-40); border-radius: 999px;
}
.badge--gold { border-color: var(--unity-gold); color: var(--unity-gold); }
.stat-num { font-family: var(--font-founder); font-size: clamp(34px, 4vw, 56px); color: var(--unity-gold); line-height: 1; }
.stat-label { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; opacity: .7; margin-top: 8px; }

/* ---------- Hero ---------- */
.hero { padding: clamp(64px, 12vw, 140px) 0 clamp(56px, 8vw, 96px); position: relative; overflow: hidden; }
.hero-eyebrow { color: var(--ember-red); margin-bottom: 20px; }
.hero h1 { margin-bottom: 24px; }
.hero .lede { opacity: .82; margin-bottom: 36px; }
/* A hero paragraph following the lede gets the same breathing room, so it
   never sits flush against the CTA row below it. */
.hero .lede + p { margin-bottom: 36px; }

/* ---------- Placeholder media ---------- */
.media-ph {
  position: relative; width: 100%; aspect-ratio: var(--ar, 16/10);
  background: linear-gradient(135deg, var(--steel-grey), var(--iron-black));
  border: 1px solid rgba(244,241,234,.1);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: var(--radius);
}
.media-ph::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(244,241,234,.045) 0 2px, transparent 2px 14px);
}
.media-ph span {
  position: relative; font-family: var(--font-analyst); font-weight: 600; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bone-white-40);
  border: 1px dashed var(--bone-white-40); padding: 8px 14px; border-radius: 999px;
}

/* ---------- Forms ---------- */
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; opacity: .8; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--iron-black); color: var(--bone-white);
  border: 1px solid var(--bone-white-40); border-radius: var(--radius); padding: 14px 16px; font-size: 15px;
}
.section--bone .field input, .section--bone .field select, .section--bone .field textarea {
  background: var(--bone-white); color: var(--iron-black); border-color: rgba(20,23,26,.3);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ember-red); outline-offset: 2px; }
.field-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; opacity: .85; }
.field-check input { width: auto; margin-top: 4px; }

/* ---------- Quiz ---------- */
.quiz { background: var(--steel-grey); border-radius: var(--radius); padding: clamp(24px, 4vw, 56px); border: 1px solid rgba(244,241,234,.1); }
.quiz-progress { height: 4px; background: rgba(244,241,234,.15); border-radius: 999px; margin-bottom: 32px; overflow: hidden; }
.quiz-progress-bar { height: 100%; background: var(--ember-red); width: 0%; transition: width .3s ease; }
.quiz-step { display: none; }
.quiz-step.active { display: block; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }
.quiz-step .label { color: var(--unity-gold); margin-bottom: 10px; }
.quiz-question { font-family: var(--font-founder); font-size: clamp(20px, 2.6vw, 30px); text-transform: uppercase; line-height: 1.2; margin-bottom: 28px; }
.quiz-options { display: grid; gap: 12px; }
.quiz-option {
  display: block; padding: 16px 20px; border: 1px solid var(--bone-white-40); border-radius: var(--radius);
  cursor: pointer; transition: border-color .15s, background-color .15s;
}
.quiz-option:hover { border-color: var(--bone-white); }
.quiz-option input { position: absolute; opacity: 0; pointer-events: none; }
.quiz-option.selected { border-color: var(--ember-red); background: rgba(217,67,46,.12); }
.quiz-nav { display: flex; justify-content: space-between; margin-top: 32px; gap: 16px; }
.quiz-fork { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .quiz-fork { grid-template-columns: 1fr; } }
.quiz-fork-option {
  border: 1px solid var(--bone-white-40); border-radius: var(--radius); padding: 28px; cursor: pointer; text-align: left;
  background: transparent; color: var(--bone-white);
}
.quiz-fork-option:hover { border-color: var(--ember-red); }
.quiz-result-tier { display: inline-block; margin-bottom: 16px; }
.tier-green { color: #4CA766; }
.tier-yellow { color: var(--unity-gold); }
.tier-red { color: var(--ember-red); }

/* ---------- Cookie banner ---------- */
#cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  background: var(--iron-black); border-top: 1px solid var(--bone-white-12);
  padding: 22px var(--gutter); display: none;
  box-shadow: 0 -10px 30px rgba(0,0,0,.4);
}
#cookie-banner.show { display: block; }
.cookie-inner { max-width: var(--container-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cookie-text { max-width: 640px; font-size: 14px; opacity: .85; }
.cookie-text a { text-decoration: underline; }
.cookie-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cookie-actions .btn { padding: 12px 20px; }

#cookie-modal {
  position: fixed; inset: 0; z-index: 1000; background: rgba(20,23,26,.8);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
#cookie-modal.show { display: flex; }

#booking-modal {
  position: fixed; inset: 0; z-index: 1000; background: rgba(20,23,26,.85);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
#booking-modal.show { display: flex; }
.booking-modal-panel {
  background: var(--steel-grey); border-radius: var(--radius); max-width: 480px;
  width: 100%; position: relative;
}
.booking-modal-close {
  position: absolute; top: -14px; right: -14px; width: 36px; height: 36px;
  border-radius: 50%; background: var(--ember-red); border: none; color: var(--bone-white);
  font-size: 20px; line-height: 1; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
/* Scrolling lives on this inner wrapper, not .booking-modal-panel — an
   overflow-y:auto on the panel itself would force overflow-x to auto too
   and clip the close button, which sits outside the box via negative offsets. */
.booking-modal-body { max-height: 90vh; overflow-y: auto; padding: 32px; border-radius: var(--radius); }
.booking-phase { display: none; }
.booking-phase.active { display: block; animation: fade .3s ease; }
.booking-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.booking-cal-month { font-family: var(--font-founder); text-transform: uppercase; font-size: 15px; letter-spacing: .04em; }
.booking-cal-nav {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--bone-white-12);
  background: transparent; color: var(--bone-white); cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center; transition: border-color .2s ease;
}
.booking-cal-nav:hover:not(:disabled) { border-color: var(--bone-white); }
.booking-cal-nav:disabled { opacity: .3; cursor: default; }
.booking-cal-weekdays, .booking-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.booking-cal-weekdays { margin-bottom: 8px; }
.booking-cal-weekdays span { text-align: center; font-size: 12px; color: var(--bone-white-60, rgba(244,241,234,.6)); text-transform: uppercase; }
.booking-cal-day {
  aspect-ratio: 1; border-radius: 50%; border: 1px solid transparent; background: transparent;
  color: var(--bone-white); font-size: 14px; cursor: pointer; transition: border-color .2s ease, background-color .2s ease;
}
.booking-cal-day:hover:not(:disabled) { border-color: var(--bone-white); }
.booking-cal-day:disabled { color: var(--bone-white-12); cursor: default; }
.booking-cal-day.selected { background: var(--ember-red); border-color: var(--ember-red); }
.booking-time-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 8px; }
.booking-time-slot {
  padding: 12px; border-radius: calc(var(--radius) - 2px); border: 1px solid var(--bone-white-12);
  background: transparent; color: var(--bone-white); cursor: pointer; font-size: 15px;
  transition: border-color .2s ease, background-color .2s ease;
}
.booking-time-slot:hover { border-color: var(--ember-red); background: rgba(217,67,46,.12); }
.cookie-modal-panel { background: var(--steel-grey); border-radius: var(--radius); max-width: 520px; width: 100%; padding: 36px; max-height: 90vh; overflow-y: auto; }
.cookie-toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(244,241,234,.12); gap: 16px; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: rgba(244,241,234,.25); border-radius: 999px; transition: .15s; }
.switch .slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: .15s; }
.switch input:checked + .slider { background: var(--ember-red); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch input:disabled + .slider { opacity: .5; }

/* ---------- Utility ---------- */
.divider { height: 1px; background: var(--bone-white-12); border: none; margin: 0; }
.section--bone .divider { background: rgba(20,23,26,.12); }
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.mt-s{margin-top:16px} .mt-m{margin-top:24px} .mt-l{margin-top:48px}
.mb-s{margin-bottom:16px} .mb-m{margin-bottom:24px} .mb-l{margin-bottom:48px}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Skip link */
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--ember-red); color: white;
  padding: 12px 20px; z-index: 2000;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ==========================================================================
   VISUAL SYSTEM v2 — photographic / icon-forward treatment
   Same tokens, same content everywhere; these components restyle how
   existing sections are presented (split hero, icon stat bar, photo
   cards with badge overlays, icon list, CTA bar, nav mark).
   ========================================================================== */

/* Nav logo mark */
.nav-logo { display: inline-flex; align-items: center; gap: 10px; }
.nav-logo img { display: block; height: 40px; width: auto; flex: none; }
.site-footer .nav-logo img { height: 48px; }
@media (max-width: 980px) { .nav-logo img { height: 32px; } }
.btn-sm { padding: 12px 22px; font-size: 12px; }

/* Icon badge — small circular accent used on cards, stat bars, icon lists */
.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: var(--ember-red); color: var(--bone-white);
}
.icon-badge svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.icon-badge--outline { background: transparent; border: 1.5px solid var(--ember-red); color: var(--ember-red); }
.icon-badge--sm { width: 38px; height: 38px; }
.icon-badge--sm svg { width: 18px; height: 18px; }
.icon-badge--gold { background: var(--unity-gold); color: var(--iron-black); }

/* Split hero — text column + media column with mission overlay */
.hero-split {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; } }
.hero-split .hero-media { position: relative; }
.hero-split .media-ph { aspect-ratio: 4/5; }
@media (max-width: 900px) { .hero-split .media-ph { aspect-ratio: 16/10; } }
/* Tall portrait photos (e.g. a group shot of people) lose heads/faces when
   forced into the wide 16/10 mobile crop above — keep these at their
   original portrait ratio on mobile instead so nothing gets cut off. */
@media (max-width: 900px) { .hero-split .media-ph.media-ph--portrait { aspect-ratio: 4/5; } }
.hero-mission-overlay {
  position: absolute; right: 22px; top: 26px; text-align: right;
  font-family: var(--font-founder); text-transform: uppercase; line-height: 1.18;
  font-size: clamp(14px, 1.6vw, 20px); color: var(--bone-white-70);
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.hero-mission-overlay .accent { color: var(--ember-red); display: block; }
.hero-mission-overlay .rule { width: 34px; height: 2px; background: var(--ember-red); margin: 10px 0 0 auto; }
.headline-accent { color: var(--ember-red); }

/* Inline stat bar with icons + dividers */
.stat-bar {
  display: flex; flex-wrap: wrap; background: var(--iron-black-90);
  border: 1px solid rgba(244,241,234,.1); border-radius: var(--radius);
}
.section--bone .stat-bar { background: rgba(20,23,26,.04); border-color: rgba(20,23,26,.1); }
.stat-bar-item {
  flex: 1 1 200px; display: flex; align-items: center; gap: 16px;
  padding: 26px clamp(16px, 3vw, 32px); border-right: 1px solid rgba(244,241,234,.1);
}
.section--bone .stat-bar-item { border-right-color: rgba(20,23,26,.1); }
.stat-bar-item:last-child { border-right: none; }
.stat-bar-num { font-family: var(--font-founder); font-size: clamp(22px, 2.4vw, 30px); line-height: 1; }
.stat-bar-label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; opacity: .65; margin-top: 4px; }

/* Photo card — image-backed card with badge overlay, used for card grids */
.photo-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius); border: 1px solid rgba(244,241,234,.08);
  background: var(--steel-grey); color: var(--bone-white);
}
.photo-card .media-ph { aspect-ratio: 4/5; border-radius: 0; border: none; }
/* Anchored to the bottom of the photo, not the top: these are 4/5 portraits
   of people, and the top-left corner is exactly where faces sit. */
.photo-card .icon-badge { position: absolute; bottom: 20px; left: 20px; z-index: 2; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.photo-card-body { padding: 24px 26px 28px; }
.photo-card-kicker { color: var(--ember-red); margin-bottom: 10px; }
.photo-card h3 { margin-bottom: 10px; }
.photo-card p { opacity: .82; margin-bottom: 16px; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-analyst); font-weight: 600; font-size: 13px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ember-red);
  transition: gap .15s ease;
}
.link-arrow:hover { gap: 12px; }

/* Icon list — used for principles / codex value lists */
.icon-list { display: flex; flex-direction: column; gap: 4px; }
.icon-list-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 4px;
  border-bottom: 1px solid rgba(244,241,234,.1);
}
.section--bone .icon-list-item { border-bottom-color: rgba(20,23,26,.1); }
.icon-list-item:last-child { border-bottom: none; }
.icon-list-item .label { margin: 0; opacity: .9; }

/* CTA bar — full-bleed ember-red strip with icon + text + inline form */
.cta-bar { background: var(--ember-red); color: var(--bone-white); padding: clamp(24px,4vw,40px) 0; }
.cta-bar-inner { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); flex-wrap: wrap; }
.cta-bar .icon-badge { background: rgba(244,241,234,.15); }
.cta-bar-text { flex: 1 1 320px; }
.cta-bar-text .label { color: var(--bone-white); opacity: .8; }
.cta-bar form { flex: 1 1 360px; display: flex; gap: 12px; flex-wrap: wrap; }
.cta-bar form input { flex: 1 1 220px; background: rgba(20,23,26,.25); border-color: rgba(244,241,234,.4); color: var(--bone-white); }
.cta-bar form input::placeholder { color: var(--bone-white-70); }
.cta-bar .btn-primary { background: var(--iron-black); flex: none; }
.cta-bar .btn-primary:hover { background: #000; }

/* Social icon row (footer) */
.social-row { display: flex; gap: 12px; margin-top: 18px; }
.social-row a {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bone-white-40);
  display: flex; align-items: center; justify-content: center; color: var(--bone-white-70);
}
.social-row a svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.social-row a:hover { border-color: var(--ember-red); color: var(--bone-white); }

/* Section kicker (eyebrow + headline pairing used throughout v2 layout) */
.section-kicker { color: var(--ember-red); margin-bottom: 14px; }

/* ==========================================================================
   VISUAL SYSTEM v3 — Motion, Depth & Micro-interactions
   Same tokens, same content, same 8px industrial radius everywhere. This
   layer adds scroll reveals, hover/focus polish, header + mobile-nav
   behavior, hero parallax and a guarded page-fade — all opt-in via classes
   that JS applies at runtime, so the site is fully usable with JS off or
   with prefers-reduced-motion, and nothing here ever hides content
   permanently. See assets/js/main.js for the engine that drives this.
   ========================================================================== */

:root {
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ui: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-move: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Anchor-jump breathing room under the sticky header */
[id] { scroll-margin-top: 104px; }

h1.founder, h2.founder, h3.founder, .quiz-question { text-wrap: balance; }

/* ---------- Scroll reveal (classes applied by JS; default = fully visible) ---------- */
.reveal-section, .reveal-item, .reveal-hero, .reveal-hero-media {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s var(--ease-reveal), transform .8s var(--ease-reveal);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-item { transform: translateY(20px); transition-duration: .7s; }
.reveal-hero { transform: translateY(22px); transition-duration: .8s; }
.reveal-hero-media { transform: scale(1.045); transition-duration: 1s; }
.reveal-section.is-in, .reveal-item.is-in, .reveal-hero.is-in, .reveal-hero-media.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Hero depth ---------- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; top: -25%; right: -8%; width: 55%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(217,67,46,.16), transparent 70%);
  pointer-events: none; z-index: 0;
}
.hero::after {
  content: ''; position: absolute; bottom: -30%; left: -10%; width: 45%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(201,150,44,.10), transparent 70%);
  pointer-events: none; z-index: 0;
}
.hero .container { position: relative; z-index: 1; }
.hero-mission-overlay { transition: transform .4s var(--ease-ui); }

/* ---------- Header scroll state ---------- */
.site-header { transition: background-color .35s var(--ease-ui), box-shadow .35s var(--ease-ui), border-color .35s var(--ease-ui); }
.nav { transition: height .35s var(--ease-ui); }
.site-header.is-scrolled { background: var(--iron-black); box-shadow: 0 10px 30px rgba(0,0,0,.35); border-bottom-color: rgba(244,241,234,.18); }
.site-header.is-scrolled .nav { height: 68px; }

/* ---------- Focus states ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .quiz-option:focus-within, .quiz-fork-option:focus-visible {
  outline: 2px solid var(--ember-red); outline-offset: 3px; border-radius: 1px;
}

/* ---------- Nav link underline + dropdown easing ---------- */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px;
  background: var(--ember-red); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-ui);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.dropdown { transition: opacity .2s var(--ease-ui), transform .25s var(--ease-ui), visibility .2s; }
.dropdown a { transition: background-color .2s var(--ease-ui); }

/* ---------- Mobile nav polish ---------- */
.nav-links { transition: transform .4s var(--ease-ui); }
body.nav-open { overflow: hidden; }
/* backdrop-filter makes the header a containing block for the fixed
   drawer inside it, collapsing the drawer to the header's height.
   While the menu is open the header is solid anyway. */
body.nav-open .site-header {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: var(--iron-black);
}
@media (max-width: 980px) {
  .nav-links.open > li {
    opacity: 0; transform: translateY(14px);
    animation: navItemIn .5s var(--ease-reveal) forwards;
  }
  .nav-links.open > li:nth-child(1) { animation-delay: .04s; }
  .nav-links.open > li:nth-child(2) { animation-delay: .09s; }
  .nav-links.open > li:nth-child(3) { animation-delay: .14s; }
  .nav-links.open > li:nth-child(4) { animation-delay: .19s; }
  .nav-links.open > li:nth-child(5) { animation-delay: .24s; }
  .nav-links.open > li:nth-child(6) { animation-delay: .29s; }
  .nav-links.open > li:nth-child(7) { animation-delay: .34s; }
}
@keyframes navItemIn { to { opacity: 1; transform: translateY(0); } }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  transition: background-color .25s var(--ease-ui), color .25s var(--ease-ui),
    border-color .25s var(--ease-ui), transform .25s var(--ease-move), box-shadow .3s var(--ease-ui);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary:hover { box-shadow: 0 12px 28px rgba(217,67,46,.32); }
.btn-outline:hover { box-shadow: 0 12px 24px rgba(0,0,0,.2); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
.link-arrow { transition: gap .25s var(--ease-ui), opacity .2s var(--ease-ui); }

/* ---------- Cards, photo-cards, images ---------- */
.card, .photo-card, a.card {
  transition: transform .4s var(--ease-move), box-shadow .4s var(--ease-move), border-color .3s var(--ease-ui);
}
.card:hover, .photo-card:hover, a.card:hover { transform: translateY(-6px); border-color: rgba(244,241,234,.2); box-shadow: 0 22px 44px rgba(0,0,0,.28); }
.section--bone .card:hover, .section--bone a.card:hover { box-shadow: 0 22px 44px rgba(20,23,26,.14); border-color: rgba(20,23,26,.18); }
.photo-card .media-ph { transition: transform .6s var(--ease-move); }
.photo-card:hover .media-ph { transform: scale(1.035); }
.icon-badge { transition: transform .35s var(--ease-move); }
.card:hover .icon-badge, .photo-card:hover .icon-badge { transform: scale(1.08); }
.media-ph { transition: transform .5s var(--ease-move); }
.grid .media-ph:hover, .container > .media-ph:hover { transform: scale(1.015); }

/* ---------- Stat bar ---------- */
.stat-bar-item { transition: background-color .3s var(--ease-ui); }
.stat-bar-item:hover { background: rgba(244,241,234,.045); }
.section--bone .stat-bar-item:hover { background: rgba(20,23,26,.035); }

/* ---------- Footer link underline ---------- */
.footer-col a, .social-row a { transition: color .2s var(--ease-ui), border-color .2s var(--ease-ui); }
.footer-col a { position: relative; }
.footer-col a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px;
  background: currentColor; opacity: .55; transition: right .3s var(--ease-ui);
}
.footer-col a:hover::after { right: 0; }
.social-row a { transition: border-color .25s var(--ease-ui), color .25s var(--ease-ui), transform .25s var(--ease-move); }
.social-row a:hover { transform: translateY(-2px); }

/* ---------- Quiz + forms ---------- */
.quiz-step.active { animation: fade .4s var(--ease-reveal); }
.quiz-option, .quiz-fork-option { transition: border-color .25s var(--ease-ui), background-color .25s var(--ease-ui), transform .25s var(--ease-move); }
.quiz-option:hover, .quiz-fork-option:hover { transform: translateY(-2px); }
.quiz-progress-bar { transition: width .5s var(--ease-ui); }
.field input, .field select, .field textarea { transition: border-color .2s var(--ease-ui), background-color .2s var(--ease-ui); }

/* ---------- Cookie banner + modal entrance ---------- */
#cookie-banner.show { animation: cookieUp .5s var(--ease-reveal) both; }
@keyframes cookieUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
#cookie-modal.show { animation: fade .25s var(--ease-ui) both; }
#cookie-modal.show .cookie-modal-panel { animation: modalIn .35s var(--ease-reveal) both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ---------- Page-level fade (guarded; see main.js) ---------- */
/* fill-mode is 'backwards', not 'both': 'both' would keep the final
   keyframe's transform on <body> permanently, and a transformed body
   becomes the containing block for every position:fixed element. */
body.page-entered { animation: pageIn .55s var(--ease-reveal) backwards; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
body.page-leaving { transition: opacity .22s var(--ease-ui); opacity: 0; }

/* ==========================================================================
   VISUAL SYSTEM v4 — Bold Graphic Accents
   Same colors (Iron Black / Bone White / Ember Red / Steel Grey / Unity
   Gold), same fonts, same 2px sharp-edge brand signature, same content —
   this layer borrows the bold, graphic, accent-driven composition language
   (color tabs, corner ribbons, thick rules, oversized quote marks) from a
   photo-heavy sports-club reference and applies it purely through color
   blocking and border/shape treatments already native to this palette.
   ========================================================================== */

/* Bold accent bar under every header — impossible to miss at the top of any page */
.site-header { position: sticky; }
.site-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px;
  background: linear-gradient(90deg, var(--ember-red) 0%, var(--ember-red) 70%, var(--unity-gold) 100%);
  z-index: 0;
}

/* Eyebrow / kicker labels get a small rotated tab in their own color */
.label { position: relative; }
.label::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 9px;
  background: currentColor; transform: rotate(45deg); vertical-align: 2px;
}

/* Corner ribbon on stand-alone media blocks — the single accent where there's
   no icon-badge already doing that job (photo-cards opt out below: their
   badge already marks the category, a second marker on the same image
   would just be two devices competing for one job). */
.media-ph { position: relative; }
.media-ph::after {
  content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-style: solid; border-width: 0 34px 34px 0;
  border-color: transparent var(--ember-red) transparent transparent;
}
.photo-card > .media-ph::after { content: none; }

/* Cards pick up a bold top rule — red on dark cards, gold on photo cards */
.card { border-top: 4px solid var(--ember-red); }
.card--bone { border-top-color: var(--ember-red); }
.photo-card { border-top: 4px solid var(--unity-gold); }

/* Oversized quotation mark behind every blockquote */
blockquote { position: relative; z-index: 1; }
blockquote::before {
  content: '\201C'; position: absolute; top: -.5em; left: -.14em; z-index: -1;
  font-family: var(--font-founder); font-style: normal; font-size: 5em; line-height: 1;
  color: var(--ember-red); opacity: .16;
}

/* Stat numbers get a short colored underline rule for extra graphic weight */
.stat-num, .stat-bar-num { position: relative; padding-bottom: 10px; display: inline-block; }
.stat-num::after, .stat-bar-num::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 30px; height: 3px; background: var(--ember-red);
}

/* Icon badges — bigger and slightly lifted for more graphic presence */
.icon-badge { width: 58px; height: 58px; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.icon-badge svg { width: 26px; height: 26px; }
.icon-badge--sm { width: 40px; height: 40px; }
.icon-badge--sm svg { width: 19px; height: 19px; }

/* Primary buttons get a directional arrow cue */
.btn-primary:not(.btn-block)::after { content: '\2192'; margin-left: 2px; transition: transform .25s var(--ease-ui); }
.btn-primary:not(.btn-block):hover::after { transform: translateX(3px); }

/* Footer runs without an accent bar — the header keeps it, the footer doesn't. */
.site-footer { position: relative; border-top: none; }

/* Section kickers sit inside a hairline-bordered inline strip for a tag-like feel */
.section-kicker { display: inline-flex; align-items: center; }

/* ==========================================================================
   VISUAL SYSTEM v5 — Hierarchy & Composition
   Same colors, same fonts, same content. This pass corrects v4's mistake
   (a solid-fill eyebrow tag was competing with the headline for primary
   attention) and does the actual hierarchy/pacing work: one dominant
   focal point per section via scale and whitespace, not more accent marks.
   ========================================================================== */

/* Hero eyebrow: a thin rule + label, not a filled block — orients the
   reader instead of competing with the headline for primary attention. */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px;
}
.hero-eyebrow::before {
  content: ''; width: 32px; height: 2px; background: currentColor;
  transform: none; margin-right: 0; vertical-align: 1px;
}

/* Headline pushes further so it's unambiguously the one focal point,
   set tighter so scale reads as confidence rather than just "big." */
.hero h1.founder { line-height: 1.02; margin-bottom: 28px; }

/* Lede is deliberately narrower than the headline above it — an oversized
   headline next to a tucked-in paragraph reads as intentional asymmetry
   instead of two same-width blocks stacked with equal visual weight. */
.hero .lede { max-width: 560px; }

/* Hero grid goes asymmetric: text leads, image supports and sits offset
   rather than occupying a near-equal, perfectly aligned column. */
@media (min-width: 901px) {
  .hero-split { grid-template-columns: 1.3fr .7fr; align-items: start; }
  .hero-split .hero-media { margin-top: 64px; }
  /* Homepage opts out of the asymmetric offset — its photo reads too small
     next to the (now longer) two-line headline otherwise. */
  .hero-split.hero-split--balanced { grid-template-columns: 0.8fr 1.2fr; }
  .hero-split.hero-split--balanced .hero-media { margin-top: 0; }
  /* Pages with no hero photo: text spans the full width. */
  .hero-split.hero-split--solo { grid-template-columns: 1fr; }
  /* The narrower text column here leaves the two CTAs too tight for their
     default size — trim gap and padding so they stay side by side instead
     of wrapping to a stacked pair. */
  .hero-split--balanced .row.gap-m { gap: 10px; }
  .hero-split--balanced .row.gap-m .btn { padding: 14px 14px; font-size: 11px; letter-spacing: 0.03em; }
}

/* The homepage's standalone centered quote is a pacing beat, not body
   copy — it should be sized like one. Quotes nested in two-column
   sections elsewhere stay at the smaller, supporting-copy size. */
.section .container.center > blockquote {
  font-size: clamp(28px, 4.4vw, 54px);
  max-width: 920px;
}

/* ==========================================================================
   VISUAL SYSTEM v6 — Cinematic Layer
   Interaction language only (custom cursor, per-letter blur-up headline
   reveal, drifting hero grid dots, scroll-progress bar) borrowed from a
   WebGL reference and rebuilt in plain CSS/JS. Same colors (reuses
   --ember-red, --bone-white-70/40/12, --steel-grey only), same fonts, same
   content. Every element here is injected at runtime by main.js, never
   written into the HTML files — if JS doesn't run, none of this exists and
   the native cursor / static layout is exactly what's there today.
   ========================================================================== */

/* ---------- Custom cursor (trailing ring, driven by --ox/--oy) ----------
   The native cursor stays visible and does the pointing — the ring is a
   decorative follower only, so the pointer is never lost on the page. */
body.has-custom-cursor::after {
  content: ''; position: fixed; top: 0; left: 0; width: 40px; height: 40px;
  border: 1.5px solid var(--bone-white-70); border-radius: 50%;
  transform: translate(var(--ox, -100px), var(--oy, -100px)) translate(-50%, -50%);
  pointer-events: none; z-index: 9998;
  transition: width .3s var(--ease-ui), height .3s var(--ease-ui),
    border-color .3s var(--ease-ui), background-color .3s var(--ease-ui);
}
body.has-custom-cursor.is-hovering::after {
  width: 56px; height: 56px; border-color: var(--ember-red); background: rgba(217,67,46,.08);
}

/* ---------- Per-letter blur-up headline reveal ---------- */
/* Chars must be inline-block to animate, which lets a line break between any
   two letters. Grouping each word in a nowrap box keeps breaks at spaces. */
.reveal-hero-title .word { display: inline-block; white-space: nowrap; }
.reveal-hero-title .char {
  display: inline-block;
  opacity: 0; transform: translateY(40px); filter: blur(10px);
  transition: opacity .8s var(--ease-reveal), transform .8s var(--ease-reveal), filter .8s var(--ease-reveal);
  transition-delay: var(--char-delay, 0ms);
}
.reveal-hero-title.is-in .char { opacity: 1; transform: translateY(0); filter: blur(0); }
@media (max-width: 640px) {
  .reveal-hero-title .char { filter: blur(4px); transform: translateY(22px); }
}

/* Hero reveals run a touch slower — a more deliberate, cinematic entrance
   for the page's one first-impression moment (rest of the site keeps its
   original pacing, so this stays a restrained, targeted change). */
.reveal-hero { transition-duration: .9s; }
.reveal-hero-media { transition-duration: 1.1s; }

/* ---------- Drifting grid-line dots (hero sections only, so it never has
   to read against both the light and dark section backgrounds at once) ---------- */
.hero-grid-lines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: flex; justify-content: space-between; padding: 0 14%;
  opacity: .6;
}
.hero-grid-lines > span { position: relative; width: 1px; height: 100%; background: var(--bone-white-12); }
.hero-grid-dot {
  position: absolute; left: 50%; top: 10%; transform: translate(-50%, -50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--bone-white-40);
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--ember-red); z-index: 101; transition: width .1s linear;
}

/* ---------- Reduced motion: everything above becomes instant / static ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal-section, .reveal-item, .reveal-hero, .reveal-hero-media, .reveal-hero-title .char {
    transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .nav-links.open > li { animation: none !important; opacity: 1 !important; transform: none !important; }
  body.page-entered, #cookie-banner.show, #cookie-modal.show, #cookie-modal.show .cookie-modal-panel {
    animation: none !important;
  }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   HERO STARFIELD
   WebGL point cloud mounted behind the first section of every page. The
   canvas is opaque and paints its own background, so it replaces the flat
   section fill rather than layering over it. Content keeps z-index 1.
   ========================================================================== */
.hero-starfield {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .6s var(--ease-ui);
}
.hero.starfield-ready .hero-starfield { opacity: 1; }
/* The scene carries its own depth — drop the flat radial glows beneath it. */
.hero.starfield-ready::before,
.hero.starfield-ready::after { display: none; }
/* Keep the headline legible over the brightest part of the field. */
.hero.starfield-ready .container::before {
  content: ''; position: absolute; inset: -10% -6%;
  background: linear-gradient(100deg, rgba(20,23,26,.82) 0%, rgba(20,23,26,.55) 45%, transparent 78%);
  pointer-events: none; z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
  .hero-starfield { transition: none; }
}


/* ==========================================================================
   REAL MEDIA
   .media-ph keeps its frame (aspect ratio, border, radius); adding .has-media
   swaps the hatched placeholder fill for an actual image or video.
   ========================================================================== */
.media-ph.has-media { background: var(--iron-black); }
.media-ph.has-media::before { display: none; }
.media-ph.has-media > img,
.media-ph.has-media > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* The impact collage is an A4-portrait layout whose white "paper" has been
   keyed out to transparency, so the frame itself carries no fill, border or
   radius — the hero starfield shows through the gaps between photos. */
.media-ph.media-a4,
.hero-split .media-ph.media-a4 { aspect-ratio: 792/1122; }
@media (max-width: 900px) { .hero-split .media-ph.media-a4 { aspect-ratio: 792/1122; } }
.media-ph.media-a4 { background: transparent; border: none; border-radius: 0; }
.media-ph.media-a4 > video { object-fit: contain; }

/* ==========================================================================
   BRAND CONTENT — 3D parallax unfurling gallery
   Section-scoped: a sticky stage inside a tall section. Scroll progress first
   unfurls the frame edge-to-edge, then rotates a 4-column photo matrix from a
   steep 3D angle back toward flat while the columns parallax against it.
   Driven by --p (0..1), set from JS.
   ========================================================================== */
/* Height sets the scroll budget: the matrix finishes at 78% of it, leaving
   the rest as a settle-and-hold tail before the sticky pin releases. */
.unfurl { position: relative; height: 400vh; background: #050505; }
.unfurl-stage {
  position: sticky; top: 0; height: 100vh; width: 100%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.unfurl-frame {
  position: relative; overflow: hidden; background: #000;
  max-width: 1920px;
  /* --u (unfurl 0..1) and --m (matrix 0..1) are both set from JS, so no CSS
     math has to clamp them: 90vw/80vh rounded card grows to a full-bleed pane */
  width: calc(90vw + 10vw * var(--u, 0));
  height: calc(80vh + 20vh * var(--u, 0));
  border-radius: calc(48px * (1 - var(--u, 0)));
  border: solid #2c2738;
  border-width: calc(4px * (1 - var(--u, 0)));
}
.unfurl-space { position: absolute; inset: 0; perspective: 1000px; display: flex; align-items: center; justify-content: center; }
/* Vignette that keeps the matrix edges from ending abruptly */
.unfurl-mask { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.unfurl-mask.v { box-shadow: inset 0 100px 150px -50px #000, inset 0 -100px 150px -50px #000; }
.unfurl-mask.h { box-shadow: inset 150px 0 150px -50px #000, inset -150px 0 150px -50px #000; }
.unfurl-matrix {
  display: flex; gap: 24px; align-items: center; justify-content: center;
  width: 120vw; height: 150vh; transform-style: preserve-3d; will-change: transform;
  transform:
    translateZ(calc(-800px + 800px * var(--m, 0)))
    rotateX(calc(25deg - 21deg * var(--m, 0)))
    rotateY(calc(-45deg + 37deg * var(--m, 0)))
    rotateZ(calc(15deg - 13deg * var(--m, 0)));
}
.unfurl-col {
  display: flex; flex-direction: column; gap: 24px;
  width: 22vw; min-width: 200px; will-change: transform;
  transform: translate3d(0, var(--y, 0%), 0);
}
.unfurl-col img {
  width: 100%; height: 400px; object-fit: cover; display: block; flex: none;
  background: #111; opacity: .8; border-radius: 2px;
  transition: opacity .3s var(--ease-ui), transform .3s var(--ease-ui);
}
.unfurl-col img:hover { opacity: 1; transform: scale(1.02); }
.unfurl-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 0 var(--gutter) clamp(32px, 6vh, 64px);
  text-align: center; pointer-events: none;
}
@media (max-width: 900px) {
  .unfurl { height: 320vh; }
  .unfurl-col img { height: 200px; }
  .unfurl-col { gap: 16px; }
  .unfurl-matrix { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  /* No scroll hijack: collapse to a plain scrolling strip of the same photos. */
  .unfurl { height: auto; }
  .unfurl-stage { position: static; height: auto; padding: 48px 0; }
  .unfurl-frame { width: 100%; height: auto; border-radius: var(--radius); border-width: 1px; }
  .unfurl-space { position: static; perspective: none; }
  .unfurl-mask { display: none; }
  .unfurl-matrix { transform: none; width: 100%; height: auto; flex-wrap: wrap; gap: 12px; }
  .unfurl-col { transform: none !important; width: calc(50% - 6px); min-width: 0; }
  .unfurl-col img { height: 220px; }
}


/* Mission overlay sits on real photography, not a flat placeholder — give
   it a scrim so the type stays legible over a busy collage. Scoped to the
   .hero-media--scrim modifier (only the homepage's hero-mission-overlay
   needs this) rather than every .hero-split photo — a hero-split photo with
   no overlaid text (about/partnership/gym-quiz/dfy-athletes/chapter-license)
   has nothing for a scrim to protect and was just getting darkened at the
   top — faces included — for no reason. */
.hero-split .hero-media { position: relative; }
.hero-media--scrim::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 46%;
  background: linear-gradient(to bottom, rgba(10,6,6,.85) 0%, rgba(10,6,6,.45) 55%, transparent 100%);
  border-radius: var(--radius) var(--radius) 0 0;
  pointer-events: none; z-index: 1;
}
.hero-mission-overlay { z-index: 2; color: var(--bone-white); text-shadow: 0 2px 14px rgba(0,0,0,.75); }