/* ============================================================
   RaceLabs — landing v2
   One engine, two exposures: night (Motorsport) / day (Athletics)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

@property --gx1 { syntax: '<percentage>'; inherits: true; initial-value: 58%; }
@property --gx2 { syntax: '<percentage>'; inherits: true; initial-value: 42%; }

:root {
  --ink: #0a0a0e;
  --ink-2: #121218;
  --ink-3: #1b1b24;
  --paper: #f4f1ea;
  --paper-2: #eae6dc;
  --engine: #6e62ff;          /* motorsport indigo — the app's progress-bar color */
  --engine-bright: #8d83ff;
  --coral: #ff4d2e;           /* athletics accent */
  --coral-deep: #e03a1c;
  --volt: #ad2b2f;            /* RaceLabs brand accent — sampled from the track red */
  --volt-deep: #87201f;
  --line-dark: rgba(244, 241, 234, 0.14);
  --line-light: rgba(10, 10, 14, 0.14);
  --mut-dark: rgba(244, 241, 234, 0.6);
  --mut-light: rgba(10, 10, 14, 0.62);
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-text: 'Archivo', 'Helvetica Neue', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Menlo', monospace;
  --pad: clamp(20px, 4vw, 64px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-text);
  background: var(--ink);
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.theme-light { background: var(--paper); color: var(--ink); }

/* film grain over everything — photography brand, not flat SaaS */
body::after {
  content: '';
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 2000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  animation: grain 9s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 3%); }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

::selection { background: var(--engine); color: #fff; }
.theme-light ::selection { background: var(--coral); color: #fff; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- type utilities ---------- */
.kicker {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--engine-bright);
}
.theme-light .kicker { color: var(--coral-deep); }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.01em;
}

.h-xl { font-size: clamp(52px, 9vw, 150px); }
.h-lg { font-size: clamp(40px, 6.5vw, 104px); }
.h-md { font-size: clamp(30px, 4.2vw, 64px); }

.lede {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--mut-dark);
  max-width: 56ch;
}
.theme-light .lede { color: var(--mut-light); }

.mono-note {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mut-dark);
}
.theme-light .mono-note { color: var(--mut-light); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; line-height: 1;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 16px 28px;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
}
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: currentColor;
  /* -130%: the 12deg shear + 1.2 scale overhang past -101% and peeks into the button */
  transform: translateX(-130%) skewX(-12deg) scaleX(1.2);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.btn:hover::before { transform: translateX(0) skewX(0) scaleX(1.2); }
/* nowrap so the trailing → stays inline with the label instead of wrapping below it on narrow cards */
.btn span { position: relative; z-index: 1; transition: color 0.35s; white-space: nowrap; }
/* trailing letter-spacing pushes the visible label left in the pill; pull it back
   so the label + arrow read centred */
.btn > span:last-child { margin-right: -0.12em; }
/* a split-out trailing arrow hugs the label instead of a wide mono space gap */
.btn .b-arr { margin-left: -0.28em; }
.btn:hover span { color: var(--ink); }
.theme-light .btn:hover span { color: var(--paper); }

.btn--solid { background: var(--engine); border-color: var(--engine); color: #fff; }
.btn--solid::before { background: var(--paper); }
.btn--solid:hover span { color: var(--ink); }

.theme-light .btn--solid { background: var(--coral); border-color: var(--coral); color: #fff; }
.theme-light .btn--solid::before { background: var(--ink); }
.theme-light .btn--solid:hover span { color: var(--paper); }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad);
  transition: background 0.4s, backdrop-filter 0.4s, box-shadow 0.4s;
}
.nav.scrolled {
  background: rgba(10, 10, 14, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-dark);
}
.theme-light .nav.scrolled {
  background: rgba(244, 241, 234, 0.78);
  box-shadow: 0 1px 0 var(--line-light);
}
.nav-logo {
  font-family: var(--font-text); font-size: 19px; font-weight: 400;
  letter-spacing: -0.01em;
}
.nav-logo b { font-weight: 700; }
.nav-logo .flag {
  display: inline-block; width: 9px; height: 9px; margin-right: 9px;
  background:
    conic-gradient(at 50% 50%, currentColor 25%, transparent 0 50%, currentColor 0 75%, transparent 0);
  opacity: 0.9;
}
/* real RaceLabs helmet logo (teal source; rendered white on dark surfaces) */
.logo-img {
  /* height-based sizing keeps aspect ratio: square helmet stays 24x24,
     the tall athletics oval scales to ~18x24 instead of squishing */
  width: auto; height: 24px; margin-right: 10px;
  vertical-align: -7px; display: inline-block;
  filter: brightness(0) invert(1);
}
/* athletics page is light-themed → show the coral logo in its own color */
.theme-light .logo-img { filter: none; height: 34px; vertical-align: -11px; margin-right: 12px; }
.gate-moto-logo {
  width: 46px; height: 46px; margin-bottom: 14px;
  filter: brightness(0) invert(1) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
}
.nav-links { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); }
.nav-links a {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.75; transition: opacity 0.25s;
  position: relative;
}
.nav-links a:hover, .nav-links a.active { opacity: 1; }
.nav-links a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--engine);
}
.theme-light .nav-links a.active::after { background: var(--coral); }
/* phone: header is just logo left + contact right — page links hidden */
@media (max-width: 760px) {
  .nav-links a:not(.nav-cta) { display: none; }
}
/* solid filled contact button — keeps the nav's mono caps, fills with the
   page accent so it reads as the clear action */
.nav-links a.nav-cta {
  border: none; border-radius: 999px;
  padding: 9px 20px; opacity: 1;
  background: var(--engine); color: #fff;
  transition: transform 0.2s, filter 0.2s;
}
.nav-links a.nav-cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
.theme-light .nav-links a.nav-cta { background: var(--coral); color: #fff; }
.theme-home .nav-links a.nav-cta { background: var(--volt); color: #fff; }

/* ---------- sections ---------- */
.section { padding: clamp(80px, 12vh, 160px) var(--pad); position: relative; }
/* tight layouts: desktop-scale section air stacks into huge gaps */
@media (max-width: 900px) {
  .section { padding: 56px var(--pad); }
  .section-head { margin-bottom: 32px; }
  .contact { padding-top: 36px; }
}
.section-head { margin-bottom: clamp(36px, 6vh, 72px); max-width: 1100px; }
.section-head .kicker { display: block; margin-bottom: 18px; }
.section-head .lede { margin-top: 22px; }

/* reveal-on-scroll primitives (JS adds .in) */
.rv { opacity: 0; transform: translateY(36px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   INDEX — split gate
   ============================================================ */
.gate {
  position: relative; height: 100svh; min-height: 620px;
  overflow: hidden;
  --gx1: 58%; --gx2: 42%;
  transition: --gx1 0.7s cubic-bezier(0.65, 0, 0.35, 1), --gx2 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.gate:has(.gate-panel--ath:hover)  { --gx1: 63%; --gx2: 47%; }
.gate:has(.gate-panel--moto:hover) { --gx1: 53%; --gx2: 37%; }

.gate-panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(28px, 5vw, 72px);
  cursor: pointer;
}
.gate-panel--ath {
  clip-path: polygon(0 0, var(--gx1) 0, var(--gx2) 100%, 0 100%);
  background: var(--paper);
  color: var(--ink);
  z-index: 2;
}
.gate-panel--moto {
  clip-path: polygon(var(--gx1) 0, 100% 0, 100% 100%, var(--gx2) 100%);
  background: var(--ink);
  align-items: flex-end; text-align: right;
  z-index: 1;
}

.gate-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transform: scale(1.06);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s;
  filter: saturate(0.85);
}
.gate-panel:hover .gate-bg { transform: scale(1.01); filter: saturate(1.05); }
.gate-panel--moto .gate-bg {
  background-image:
    linear-gradient(180deg, rgba(10,10,14,0.55) 0%, rgba(10,10,14,0.15) 45%, rgba(10,10,14,0.82) 100%),
    url('../img/motorsport/gate_moto_v2.jpg');
  /* this crop puts the lead bike at ~2/3 right, inside the right panel */
  background-position: center 72%;
}
/* athletics bg falls back to a gradient field until generated photos land */
.gate-panel--ath .gate-bg {
  background-image:
    linear-gradient(180deg, rgba(244,241,234,0.4) 0%, rgba(244,241,234,0) 40%, rgba(244,241,234,0.75) 100%),
    radial-gradient(120% 90% at 80% 20%, #ffb09e 0%, #ff6a47 38%, #e03a1c 72%, #8e1f0b 100%);
}
.gate-panel--ath .gate-bg.has-photo { /* JS swaps in real photo when present */ }

/* the pack runs through the lower half of this photo */
.gate-panel--ath .gate-bg.has-photo { background-position: center 76%; filter: saturate(0.85) brightness(0.8); }
/* stacked layout (narrow windows): 76% shows only misty sky in a square-ish
   panel — pull the crop up so the runners are what you see first */
@media (max-width: 760px) {
  .gate-panel--ath .gate-bg.has-photo { background-position: center 72%; }
  /* dedicated stacked crop (gate_moto_m1) = just the band with both bikes,
     so the framing is identical in every browser; light top veil */
  .gate-panel--moto .gate-bg, .gate-panel--moto .gate-bg.has-photo {
    background-position: center;
    background-image:
      linear-gradient(180deg, rgba(10, 10, 14, 0.28) 0%, rgba(10, 10, 14, 0.12) 45%, rgba(10, 10, 14, 0.82) 100%),
      url('../img/motorsport/gate_moto_m3.jpg');
  }
}


.gate-content { position: relative; z-index: 3; max-width: 640px; }
.gate-content .kicker { display: block; margin-bottom: 14px; }
.gate-panel--ath .gate-content .kicker { color: var(--ink); opacity: 0.75; }
.gate-title { font-size: clamp(54px, 8.4vw, 138px); }
.gate-sub {
  margin-top: 14px; font-size: clamp(14px, 1.25vw, 17px); line-height: 1.5;
  max-width: 40ch; color: var(--mut-dark);
}
.gate-panel--ath .gate-sub { color: var(--mut-light); }
.gate-panel--moto .gate-sub { margin-left: auto; }
.gate-enter {
  margin-top: 26px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
}
.gate-enter .arr { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.gate-panel:hover .gate-enter .arr { transform: translateX(8px); }

/* ============================================================
   BRAND HERO (v1.2) — the motto gets the opening screen;
   the split gate moves to section two as the fork.
   ============================================================ */
.brand-hero {
  position: relative; height: 100svh; min-height: 620px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; overflow: hidden;
  padding: 0 var(--pad);
  background: var(--ink);
}

/* the wall — three rows of real shots drifting behind the motto */
.bh-wall {
  position: absolute; inset: -4% -2%; z-index: 0;
  /* rows hug the motto instead of spreading to the screen edges */
  display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 2.8vh, 26px);
  transform: rotate(-2.2deg);
}
.bh-row { display: flex; gap: 10px; width: max-content; will-change: transform; }
.bh-row[data-dir="l"] { animation: wall-l 70s linear infinite; }
.bh-row[data-dir="r"] { animation: wall-r 86s linear infinite; }
.bh-row:nth-child(3) { animation-duration: 100s; }
.bh-row span {
  width: clamp(120px, 13vw, 210px); height: clamp(120px, 13vw, 210px);
  flex: none; background-size: cover; background-position: center;
  border-radius: 6px;
  filter: saturate(0.9) brightness(0.85);
}
/* tall/narrow windows (phones included): tiles keep their fullscreen size —
   the hero itself shrinks to wrap the 3 rows instead of filling the screen */
@media (max-aspect-ratio: 1/1) {
  .brand-hero {
    min-height: 0;
    height: calc(3 * clamp(120px, 13vw, 210px) + 2 * 16px + 150px);
  }
  .bh-wall { gap: 16px; }
}
@keyframes wall-l { to { transform: translateX(-50%); } }
@keyframes wall-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .bh-row { animation: none !important; } }

.bh-shade {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(75% 60% at 50% 50%, rgba(10, 10, 14, 0.86) 0%, rgba(10, 10, 14, 0.62) 55%, rgba(10, 10, 14, 0.38) 100%),
    linear-gradient(180deg, rgba(10,10,14,0.75) 0%, transparent 25%, transparent 70%, rgba(10,10,14,0.85) 100%);
}

/* instant entrance — pure CSS, nothing blocks */
.bh-center { position: relative; z-index: 2; max-width: 1150px; }
.bh-center > *, .bh-foot {
  opacity: 0; transform: translateY(26px);
  animation: bh-in 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
.bh-center > :nth-child(1) { animation-delay: 0.05s; }
.bh-center > :nth-child(2) { animation-delay: 0.14s; }
.bh-center > :nth-child(3) { animation-delay: 0.24s; }
.bh-center > :nth-child(4) { animation-delay: 0.34s; }
.bh-foot { animation-delay: 0.5s; }
@keyframes bh-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .bh-center > *, .bh-foot { animation: none; opacity: 1; transform: none; }
}

.bh-kick { display: block; margin-bottom: 22px; }
.bh-ctas { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   homepage brand accent — volt. The disciplines keep their own
   colors (indigo / coral); the brand level is neither.
   ============================================================ */
.theme-home ::selection { background: var(--volt); color: var(--ink); }
.theme-home .kicker { color: var(--volt); }
.theme-home .gate-panel--moto .kicker { color: var(--paper); }
.theme-home .gate-panel--moto .gate-sub { color: var(--paper); opacity: 0.85; }
.theme-home .gate-panel--ath .kicker { color: var(--ink); opacity: 0.75; }
.theme-home .vcard--moto .kicker { color: var(--engine-bright); }
.theme-home .vcard--ath .kicker { color: var(--coral-deep); }
.theme-home .sort-counter b,
.theme-home .folder-count { color: var(--volt); }
.theme-home .btn--solid {
  background: var(--volt); border-color: var(--volt); color: #fff;
}
.theme-home .btn--solid::before { background: var(--paper); }
.theme-home .btn--solid:hover span { color: var(--ink); }
.theme-home .contact {
  background:
    radial-gradient(90% 110% at 50% 100%, rgba(193, 48, 52, 0.62) 0%, rgba(173, 43, 47, 0.26) 38%, transparent 74%),
    var(--ink);
}
.bh-title { font-size: clamp(52px, 9.5vw, 158px); }
.bh-title .bh-owner { color: var(--volt); }
.bh-sub {
  margin: 26px auto 0; max-width: 58ch;
  font-size: clamp(15px, 1.3vw, 19px); line-height: 1.55; color: var(--mut-dark);
}
.bh-foot {
  position: absolute; z-index: 2; bottom: 24px; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--pad); gap: 14px; flex-wrap: wrap;
}
.bh-cue { color: var(--paper); animation: cue-bob 2.2s ease-in-out infinite; }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .bh-cue { animation: none; } }
@media (max-width: 760px) {
  .bh-half--m { clip-path: none; }
  .bh-half--a { display: none; }
  .bh-foot { justify-content: center; text-align: center; }
}

/* the seam itself — checkered finish-line slash */
.gate-seam {
  position: absolute; z-index: 5; top: -5%; bottom: -5%;
  left: calc((var(--gx1) + var(--gx2)) / 2);
  width: 10px;
  background:
    repeating-linear-gradient(0deg, #fff 0 14px, #0a0a0e 14px 28px);
  opacity: 0.9;
  pointer-events: none;
  transform: translateX(-50%) skewX(-8.5deg);
  transition: left 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

@media (max-width: 760px) {
  .gate { height: auto; min-height: 0; }
  /* shorter stacked panels — the photo keeps its lower part (subject + text) */
  .gate-panel { position: relative; clip-path: none !important; min-height: 46svh; }
  .gate-panel--moto { text-align: left; align-items: flex-start; }
  .gate-panel--moto .gate-sub { margin-left: 0; }
  .gate-seam { display: none; }
  .gate-lockup { display: none; }
}

/* ============================================================
   INDEX — chaos → order
   ============================================================ */
/* the section is pinned for the scroll animation, so it must fit one viewport */
.sort-demo {
  background: var(--ink);
  height: 100svh; min-height: 660px;
  display: flex; flex-direction: column;
  padding-top: clamp(70px, 10vh, 110px);
  padding-bottom: 28px;
  overflow: hidden;
}
.sort-stage-wrap { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.sort-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.sort-counter {
  font-family: var(--font-mono); font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.1em; color: var(--mut-dark); text-align: right;
}
.sort-counter b { color: var(--engine-bright); font-weight: 600; }

.sort-stage {
  position: relative; margin-top: clamp(16px, 3vh, 40px);
  flex: 1; min-height: 240px;
}
.folder-row {
  position: absolute; inset: auto 0 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.6vw, 24px);
  align-items: end;
}
.folder {
  border: 1px solid var(--line-dark); border-radius: 14px;
  background: var(--ink-2);
  padding: clamp(10px, 1.4vw, 18px);
  position: relative;
}
.folder-tab {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.folder-name {
  font-family: var(--font-mono); font-size: clamp(10px, 1vw, 13px);
  font-weight: 600; letter-spacing: 0.1em;
}
.folder-count {
  font-family: var(--font-mono); font-size: clamp(10px, 0.95vw, 12px);
  color: var(--engine-bright);
}
.folder-stack {
  position: relative; height: clamp(84px, 10vw, 128px);
}
/* square rider crops, cut from the full-res sorted photos */
.folder-stack .tile {
  position: absolute; border-radius: 8px; overflow: hidden;
  width: clamp(64px, 8.4vw, 142px); height: clamp(64px, 8.4vw, 142px);
  background-size: cover; background-position: center;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(244, 241, 234, 0.1);
  will-change: transform;
}
/* fanned resting offsets inside each folder */
.folder-stack .tile:nth-child(1) { left: 12%; top: 8px; rotate: -3deg; z-index: 1; }
.folder-stack .tile:nth-child(2) { left: 23%; top: 2px; rotate: 2deg; z-index: 2; }
.folder-stack .tile:nth-child(3) { left: 34%; top: 9px; rotate: -2deg; z-index: 3; }
.folder-stack .tile:nth-child(4) { left: 45%; top: 1px; rotate: 4deg; z-index: 4; }
.folder-stack .tile:nth-child(5) { left: 41%; top: 6px; rotate: 0deg; z-index: 5; }
.folder-stack .tile:nth-child(n+6) { left: 50%; top: 11px; rotate: 5deg; z-index: 6; }

/* athletics placeholder tiles (until generated photos land) */
.tile.tile-ph {
  display: flex; align-items: flex-end; padding: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; color: #fff;
}
.tile-ph::before { content: attr(data-bib); position: relative; z-index: 1; }

.sort-footnote { margin-top: 16px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

@media (max-width: 760px) {
  .sort-demo { height: auto; min-height: 0; }
  .folder-row { grid-template-columns: repeat(2, 1fr); }
  .sort-stage { flex: none; min-height: 0; margin-bottom: 16px; }
  .folder { margin-bottom: 0; }
  .folder-row { position: relative; }
}

/* ============================================================
   stats band
   ============================================================ */
.stats-band {
  border-top: 1px solid var(--line-dark);
  padding-top: clamp(56px, 8vh, 100px); padding-bottom: clamp(34px, 5vh, 56px);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(110, 98, 255, 0.12) 0%, transparent 60%),
    var(--ink);
}
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 60px); }
.stat .display { font-size: clamp(44px, 6.5vw, 110px); color: var(--paper); }
.stat .display em { font-style: normal; color: var(--engine-bright); }
.stat .mono-note { margin-top: 10px; display: block; }
.stats-claim {
  margin-top: clamp(30px, 4.5vh, 52px);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
.stats-claim p { font-size: clamp(17px, 1.6vw, 24px); font-weight: 600; max-width: 44ch; }
/* balance the band: first stat hugs the left edge, last hugs the right */
.stats-grid .stat:nth-child(2) { justify-self: center; }
.stats-grid .stat:nth-child(3) { justify-self: end; }
/* keep the three stats on one row on phones, just smaller */
@media (max-width: 760px) {
  .stats-band { padding-left: 14px; padding-right: 14px; }
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .stat { min-width: 0; }
  .stat .display { font-size: clamp(22px, 7.4vw, 50px); white-space: nowrap; }
  .stat .display em { font-size: 0.36em; }
  .stat .mono-note { font-size: 9px; margin-top: 6px; letter-spacing: 0.02em; }
  .stats-claim p { max-width: none; font-size: 15px; }
}

/* ============================================================
   vertical cards (index)
   ============================================================ */
.verticals { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.5vw, 36px); }
.vcard {
  border-radius: 22px; overflow: hidden; position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: clamp(420px, 56vh, 600px);
  padding: clamp(24px, 3vw, 44px);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.vcard:hover { transform: translateY(-6px); }
.vcard--moto { background: var(--ink-3); border: 1px solid var(--line-dark); }
.vcard--ath { background: var(--paper); color: var(--ink); }
.vcard .kicker { margin-bottom: 14px; display: block; }
.vcard--ath .kicker { color: var(--coral-deep); }
.vcard h3 { font-size: clamp(34px, 3.6vw, 56px); line-height: 1.07; }
.vcard ul { list-style: none; margin-top: 36px; }
.vcard li {
  font-size: 15px; line-height: 1.4; padding: 10px 0 10px 26px; position: relative;
  border-top: 1px solid var(--line-dark);
  color: var(--mut-dark);
}
.vcard--ath li { border-top-color: var(--line-light); color: var(--mut-light); }
.vcard li::before {
  content: '▸'; position: absolute; left: 2px; top: 9px;
  color: var(--engine-bright); font-size: 13px;
}
.vcard--ath li::before { color: var(--coral); }
.vcard-foot { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.vcard-photo {
  margin-top: 26px; border-radius: 12px; overflow: hidden;
  aspect-ratio: 16 / 7;
  border: 1px solid var(--line-dark);
}
.vcard--ath .vcard-photo { border-color: var(--line-light); }
.vcard-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.vcard:hover .vcard-photo img { transform: scale(1.04); }
@media (max-width: 900px) {
  .verticals { grid-template-columns: 1fr; }
  /* stacked: drop the forced min-height so space-between can't open a big gap above the foot;
     the card sizes to its content and the foot sits right under the list (margin-top:30px) */
  .vcard { min-height: auto; }
}

/* ============================================================
   about + contact + footer
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.about-photo { border-radius: 18px; overflow: hidden; border: 1px solid var(--line-dark); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }

.contact {
  text-align: center;
  /* small top padding: the previous section's bottom padding already supplies the
     gap, so this keeps the space over CONTACT equal to the space under the note */
  padding-top: 36px;
  background:
    radial-gradient(85% 100% at 50% 100%, rgba(110, 98, 255, 0.36) 0%, rgba(110, 98, 255, 0.12) 40%, transparent 72%),
    var(--ink);
}
.theme-light .contact {
  background:
    radial-gradient(90% 110% at 50% 100%, rgba(255, 77, 46, 0.62) 0%, rgba(255, 77, 46, 0.28) 38%, transparent 74%),
    var(--paper);
}
.contact .display { margin: 18px auto 28px; max-width: 16ch; }
.contact .btn--solid { margin: 16px 0 20px; }
.contact .mono-note { display: block; margin-top: 18px; text-wrap: balance; }

.footer {
  border-top: 1px solid var(--line-dark);
  padding: 34px var(--pad);
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
.theme-light .footer { border-top-color: var(--line-light); }
.footer .mono-note { font-size: 11px; }
.footer-links { display: flex; gap: 22px; }
.footer-links a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.footer-links a:hover { opacity: 1; }

/* ============================================================
   MOTORSPORT page
   ============================================================ */
.ms-hero {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(90px, 14vh, 150px) var(--pad) clamp(40px, 7vh, 80px);
  position: relative; overflow: hidden;
}
.ms-hero-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,14,0.6) 0%, rgba(10,10,14,0.25) 45%, rgba(10,10,14,0.94) 100%),
    url('../img/motorsport/hero_duel.jpg') center 30% / cover no-repeat;
  transform: scale(1.05);
}
.ms-hero-content { position: relative; z-index: 2; }
.ms-hero .h-xl { max-width: 12ch; }
.ms-hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; margin-top: 28px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 14px; border: 1px solid var(--line-dark); border-radius: 999px;
  color: var(--mut-dark);
}
.theme-light .chip { border-color: var(--line-light); color: var(--mut-light); }

/* --- pinned app walkthrough --- */
.walk { background: var(--ink); }
.walk-pin { display: grid; grid-template-columns: minmax(260px, 0.9fr) 2fr; gap: clamp(24px, 4vw, 64px); align-items: center; min-height: 80vh; }
.walk-steps { list-style: none; }
.walk-step { padding: 18px 0 18px 26px; border-left: 2px solid var(--line-dark); position: relative; opacity: 0.35; transition: opacity 0.4s; }
.walk-step.active { opacity: 1; }
.walk-step.active::before {
  content: ''; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--engine);
}
.walk-step h4 { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
.walk-step p { font-size: 14px; line-height: 1.5; color: var(--mut-dark); }

/* the recreated app window */
.appwin {
  border: 1px solid var(--line-dark); border-radius: 16px; overflow: hidden;
  background: #101016;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  font-size: 13px;
  position: relative;
  aspect-ratio: 16 / 10.4;
  display: flex; flex-direction: column;
}
.appwin-bar {
  display: flex; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--line-dark);
  background: #0c0c11; position: relative;
}
.appwin-dots { display: flex; gap: 6px; }
.appwin-dots i { width: 10px; height: 10px; border-radius: 50%; background: #2c2c36; }
.appwin-dots i:nth-child(1) { background: #ff5f57; }
.appwin-dots i:nth-child(2) { background: #febc2e; }
.appwin-dots i:nth-child(3) { background: #28c840; }
.appwin-title { font-family: var(--font-text); font-size: 13px; position: absolute; left: 50%; transform: translateX(-50%); }
.appwin-title b { font-weight: 700; }
.appwin-meta { font-family: var(--font-mono); font-size: 10px; color: var(--mut-dark); }

.appwin-chips { display: flex; justify-content: space-around; padding: 10px 16px; border-bottom: 1px solid var(--line-dark); }
.s-chip { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mut-dark); }
.s-chip i {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--line-dark);
  display: grid; place-items: center; font-style: normal; font-size: 10px; color: transparent;
}
.s-chip.done i { background: var(--engine); border-color: var(--engine); color: #fff; }
.s-chip.done { color: var(--paper); }

.appwin-body { position: relative; flex: 1; }
.app-scene { position: absolute; inset: 0; padding: 18px 20px; opacity: 0; }
.app-scene.first { opacity: 1; }

.app-scene h5 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.app-scene .sub { font-size: 12px; color: var(--mut-dark); }

.pbar-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 22px; font-size: 12px; }
.pbar-pct { font-family: var(--font-mono); font-weight: 600; color: var(--engine-bright); }
.pbar { margin-top: 8px; height: 14px; border-radius: 7px; background: #1d1d27; position: relative; overflow: hidden; }
.pbar-fill {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: linear-gradient(90deg, #5a4fe0, #8d83ff);
  border-radius: 7px;
}
.pbar-eta {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.pbar-log { margin-top: 14px; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.8; color: var(--mut-dark); }

.scene-grid-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.scene-grid-stats { font-family: var(--font-mono); font-size: 11px; color: var(--mut-dark); }
.scene-grid-stats b { color: var(--paper); font-size: 14px; }
.cluster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cluster-card {
  border: 1px solid var(--line-dark); border-radius: 10px; overflow: hidden; background: #15151d;
}
.cluster-thumbs { display: grid; grid-template-columns: 1fr 1fr; }
.cluster-thumbs span { aspect-ratio: 1; background-size: cover; background-position: center; }
.cluster-tag {
  display: flex; justify-content: space-between; padding: 7px 10px;
  font-family: var(--font-mono); font-size: 10px; color: var(--mut-dark);
}
.cluster-tag b { color: var(--paper); }

.scene-folders { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; position: relative; }
/* /247's photos, expanded inline right under the open folder line */
.folder-gallery { position: absolute; top: 42px; left: 0; right: 0; opacity: 0; pointer-events: none; }
.folder-gallery .gallery-grid { margin-top: 0; gap: 6px; }
/* square tiles, matching the square source crops, so it reads as a clean gallery */
.folder-gallery .gallery-tile { aspect-ratio: 1 / 1; }
.folder-line {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line-dark); border-radius: 10px; padding: 10px 14px;
  font-family: var(--font-mono); font-size: 11.5px;
  background: #14141b;
}
.folder-line .fname { font-weight: 600; }
.folder-line .fmeta { margin-left: auto; color: var(--mut-dark); }
.folder-line .ficon { color: var(--engine-bright); display: inline-block; transform-origin: 50% 50%; }
/* the /247 line glows as it "unfolds" into its gallery */
.folder-line.is-open { border-color: var(--engine-bright); background: #1c1410; box-shadow: 0 0 0 1px var(--engine-bright) inset; }

.walk-spacer { height: 16px; }

@media (max-width: 900px) {
  .walk { padding-top: 16px; }
  /* drop the 80vh centering so the step sits right above the app, not floating */
  .walk-pin { grid-template-columns: 1fr; min-height: 0; align-items: start; gap: 14px; }
  /* taller app + shorter gallery tiles so all 8 thumbs fit on screen */
  /* app height follows the (tallest) gallery scene, so the gap under the
     thumbnails matches the side margin instead of a big void; adapts to width */
  .appwin { aspect-ratio: auto; min-height: 0; }
  /* scene 3 is the final scene now (scene 4 removed); make it relative so the
     absolutely-positioned scenes have a height to fill */
  .appwin-body { flex: none; }
  .app-scene { padding: 16px; }
  .app-scene[data-scene="3"] { position: relative; }
  /* on phones the gallery flows in-line and the other folders hide, so the app
     window wraps snugly around /247 + its photos instead of a tall void below */
  .folder-gallery { position: static; margin-top: 8px; }
  .folder-line.sibling { display: none; }
  /* lift the hero kicker a touch off the headline */
  .ms-hero .kicker { display: block; margin-bottom: 10px; }
  .gallery-grid { gap: 6px; }
  .gallery-tile { aspect-ratio: 4 / 3; }
  /* only the active step shows, so it reads alongside the matching app scene */
  .walk-step { display: none; padding: 0 0 4px; border-left: none; opacity: 1; }
  .walk-step.active { display: block; }
  .walk-step.active::before { display: none; }
  /* reserve room for the tallest step so the app below doesn't shift when the
     step text changes length (e.g. the longer "engine runs" copy) */
  .walk-steps { min-height: 104px; }
}

/* ============================================================
   find one rider — reference shot in, the whole folder out
   ============================================================ */
.rf-grid {
  display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(26px, 4vw, 64px);
  align-items: start;
}
.rf-wall {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px;
  position: relative;
  background: var(--ink-2); border: 1px solid var(--line-dark); padding: 10px;
  border-radius: 14px;
}
.rf-tile { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 6px; }
.rf-tile img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.45s, filter 0.45s; }
.rf-wall.dimmed .rf-tile img { opacity: 0.16; filter: grayscale(0.7); }
.rf-wall.dimmed .rf-tile.hit img { opacity: 1; filter: none; }
.rf-tile.hit::after {
  content: ''; position: absolute; inset: 0; border-radius: 6px;
  box-shadow: inset 0 0 0 0 var(--engine);
  transition: box-shadow 0.3s; pointer-events: none;
}
.rf-wall.dimmed .rf-tile.hit.lit::after {
  box-shadow: inset 0 0 0 3px var(--engine), 0 0 22px rgba(110, 98, 255, 0.55);
}
.rf-scan {
  position: absolute; left: -1%; right: -1%; top: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--engine-bright) 30%, var(--engine-bright) 70%, transparent);
  box-shadow: 0 0 24px 4px rgba(110, 98, 255, 0.5);
  opacity: 0; pointer-events: none;
}
.rf-cap { margin-top: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

.rf-side { display: flex; flex-direction: column; gap: 22px; align-items: center; }
.rf-side .rf-ref .mono-note { text-align: center; }
.rf-ref {
  border: 1px solid var(--line-dark); border-radius: 14px; overflow: hidden;
  background: var(--ink-2); width: min(240px, 100%);
}
.rf-ref img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.rf-ref .mono-note { display: block; padding: 10px 12px; }
.rf-folder {
  width: 100%; border: 1px solid var(--line-dark); border-radius: 14px;
  background: var(--ink-2); padding: 16px;
}
.rf-folder-tab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.rf-folder-name { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--engine-bright); }
.rf-folder-meta { font-family: var(--font-mono); font-size: 11px; color: var(--mut-dark); }
.rf-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rf-slot {
  aspect-ratio: 1; border-radius: 8px;
  border: 1px dashed rgba(244, 241, 234, 0.2);
  background-size: cover; background-position: center;
}
.rf-slot.filled { border-style: solid; border-color: var(--engine); }
@media (max-width: 920px) {
  .rf-grid { grid-template-columns: 1fr; }
  .rf-wall { grid-template-columns: repeat(4, 1fr); }
}

/* features grid */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: 18px; overflow: hidden; }
.feat {
  background: var(--ink); padding: clamp(22px, 2.6vw, 40px);
  min-height: 220px; display: flex; flex-direction: column; gap: 18px;
  transition: background 0.35s;
}
/* fixed offset (not space-between) so titles line up across a row even when
   paragraphs differ in length */
.feat .num { margin-bottom: clamp(18px, 2.2vw, 32px); }
.feat:hover { background: var(--ink-2); }
.feat .num { font-family: var(--font-mono); font-size: 11px; color: var(--engine-bright); letter-spacing: 0.14em; }
.feat h4 { font-size: clamp(18px, 1.7vw, 24px); font-weight: 700; margin-bottom: 8px; }
.feat p { font-size: 14px; line-height: 1.55; color: var(--mut-dark); }
/* tight: 2 columns + shorter cards so the six /0x cards take ~3 rows, not 6 */
@media (max-width: 900px) {
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .feat { min-height: 0; padding: 18px 15px; gap: 10px; }
  .feat .num { margin-bottom: 12px; }
  .feat h4 { font-size: 16px; }
  .feat p { font-size: 12.5px; line-height: 1.45; }
}

/* ============================================================
   ATHLETICS page (light)
   ============================================================ */
.ath-hero {
  min-height: 92svh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(110px, 16vh, 170px) var(--pad) clamp(30px, 5vh, 60px);
  position: relative; overflow: hidden;
}
.ath-hero::before {
  content: ''; position: absolute; inset: 0;
  /* paper fades left-to-right: ink headline stays readable, runners show on the right */
  background:
    linear-gradient(90deg, rgba(244, 241, 234, 0.94) 0%, rgba(244, 241, 234, 0.82) 34%, rgba(244, 241, 234, 0.38) 68%, rgba(244, 241, 234, 0.12) 100%),
    linear-gradient(180deg, rgba(244, 241, 234, 0.35) 0%, transparent 30%, transparent 72%, rgba(244, 241, 234, 0.95) 100%),
    url('../img/athletics/hero_ath_v1.jpg') center 22% / cover no-repeat;
}
/* narrow windows keep the photo BEHIND the text like desktop — the crop shifts
   so the waving runner sits at the right edge, clear of the headline, and the
   veil stays strong only where the text lives */
@media (max-width: 760px) {
  .ath-hero { min-height: 78svh; }
  .ath-hero::before {
    background:
      linear-gradient(90deg, rgba(244, 241, 234, 0.95) 0%, rgba(244, 241, 234, 0.78) 42%, rgba(244, 241, 234, 0.3) 78%, rgba(244, 241, 234, 0.12) 100%),
      linear-gradient(180deg, rgba(244, 241, 234, 0.4) 0%, transparent 30%, transparent 70%, rgba(244, 241, 234, 0.95) 100%),
      url('../img/athletics/hero_ath_v1.jpg') 76% 16% / cover no-repeat;
  }
}
.ath-hero-content { position: relative; z-index: 1; }
/* hero lede was --mut-light (62% ink) and washed out where the paper veil thins toward
   the photo; darken to near-solid ink and cap the width so it stays over the strong veil */
.ath-hero .lede { color: rgba(10, 10, 14, 0.92); max-width: 46ch; }
.ath-hero .h-xl { max-width: 11ch; }
.ath-hero .h-xl em { font-style: normal; color: var(--coral); }
.ath-hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; margin-top: 34px; }

.sports-marquee {
  border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light);
  overflow: hidden; white-space: nowrap; padding: 14px 0;
  background: var(--ink); color: var(--paper);
}
.sports-track { display: inline-flex; gap: 0; animation: marquee 26s linear infinite; }
.sports-track span {
  font-family: var(--font-display); font-size: clamp(18px, 2vw, 28px);
  text-transform: uppercase; letter-spacing: 0.04em; padding: 0 28px;
  display: inline-flex; align-items: center; gap: 28px;
}
.sports-track span::after { content: '◆'; font-size: 10px; color: var(--coral); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sports-track { animation: none; } }

/* --- selfie search demo --- */
.selfie-demo { background: var(--paper); }
.selfie-grid-wrap {
  display: grid; grid-template-columns: 2fr minmax(250px, 1fr);
  column-gap: clamp(28px, 4vw, 64px);
  /* wall and phone share row 1 so the phone centers against the PHOTOS (not the
     controls); the trigger + status sit under the wall in row 2 */
  grid-template-areas: "wall phone" "controls .";
  align-items: center;
}
/* min-width:0 keeps the fr columns at a fixed ratio: without it, the wall's content
   (dimmed/scaled tiles + scanline) grows its track mid-demo and squeezes the phone,
   which then shrinks and makes its cqw-scaled screen overflow */
.photo-wall { grid-area: wall; min-width: 0; }
.selfie-grid-wrap > .phone { grid-area: phone; align-self: center; min-width: 0; }
.selfie-controls { grid-area: controls; }
/* the status sits under the wall in its own row; let it wrap freely. (It must NOT be
   nowrap: a forced single line widens the wall column and shrinks the phone mid-demo.
   The phone centers to the wall row, so status wrapping can't bounce it.) */
.photo-wall {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  position: relative; border-radius: 16px;
}
.wall-tile {
  aspect-ratio: 1; border-radius: 8px; overflow: hidden; position: relative;
  background-size: cover; background-position: center;
  transition: opacity 0.5s, box-shadow 0.5s, transform 0.5s;
}
.wall-tile.ph {
  display: flex; align-items: flex-end; padding: 6px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 600; color: #fff;
}
.photo-wall.dimmed .wall-tile { opacity: 0.22; }
.photo-wall.dimmed .wall-tile.match {
  opacity: 1; transform: scale(1.05);
  box-shadow: 0 0 0 3px var(--coral), 0 16px 40px rgba(224, 58, 28, 0.35);
  z-index: 2;
}
.scanline {
  position: absolute; left: -2%; right: -2%; top: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--coral) 30%, var(--coral) 70%, transparent);
  box-shadow: 0 0 24px 4px rgba(255, 77, 46, 0.5);
  opacity: 0; pointer-events: none;
}

.phone {
  width: min(290px, 100%); margin: 0 auto;
  border-radius: 38px; border: 3px solid var(--ink);
  background: var(--ink); padding: 10px;
  box-shadow: 0 30px 80px rgba(10, 10, 14, 0.35);
  /* size the inner UI relative to the phone's OWN width (cqw) so the mini-phone stays a
     faithful, unclipped miniature when it shrinks beside the wall on phones. cqw values
     are calibrated to the ~264px content width at the 290px desktop size = px / 2.64 */
  container-type: inline-size;
}
.phone-screen {
  border-radius: 10.6cqw; background: #15151d; color: var(--paper);
  overflow: hidden; aspect-ratio: 9 / 17.5;
  display: flex; flex-direction: column;
}
.phone-notch { width: 32.6cqw; height: 6.8cqw; background: var(--ink); border-radius: 0 0 4.5cqw 4.5cqw; margin: 0 auto; }
.phone-head { padding: 4.5cqw 6.1cqw 3cqw; }
.phone-head .ev { font-size: 4.17cqw; font-weight: 600; }
.phone-head .mono-note { font-size: 3.4cqw; }
.selfie-row { display: flex; align-items: center; gap: 3.8cqw; padding: 3cqw 6.1cqw 4.5cqw; }
.selfie-ava {
  width: 17.4cqw; height: 17.4cqw; border-radius: 50%; flex: none;
  object-fit: cover;
  border: 2px solid var(--coral);
  box-shadow: 0 0 14px rgba(255, 77, 46, 0.4);
}
.selfie-meta { font-family: var(--font-mono); font-size: 3.6cqw; line-height: 1.6; color: rgba(244,241,234,0.65); }
.selfie-meta b { color: var(--paper); }
.phone-gallery {
  /* natural height so the found-count hugs the photos; spare space falls below */
  flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2.3cqw;
  padding: 1.5cqw 5.3cqw 0; align-content: start;
}
.pg-slot {
  aspect-ratio: 1; border-radius: 3cqw;
  border: 1px dashed rgba(244, 241, 234, 0.18);
  background-size: cover; background-position: center;
}
.pg-slot.filled { border-style: solid; border-color: var(--coral); }
.phone-found {
  text-align: center; padding: 4.5cqw 3.8cqw 0;
  font-family: var(--font-mono); font-size: 3.8cqw; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--coral);
}
.selfie-controls { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* face-recognition view inside the phone */
.phone-screen { position: relative; }
.faceid {
  position: absolute; inset: 0; z-index: 6;
  background: #0c0c11;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6.1cqw;
  opacity: 0; pointer-events: none;
}
.fid-box {
  position: relative; width: 64%; aspect-ratio: 1;
  background: radial-gradient(70% 70% at 50% 42%, rgba(255, 77, 46, 0.08) 0%, transparent 70%), #111118;
  border-radius: 4.5cqw;
}
.fid-box svg { width: 100%; height: 100%; display: block; }
.fid-dot { fill: var(--coral); }
.fid-link { stroke: var(--coral); stroke-width: 0.5; opacity: 0.28; fill: none; }
.faceid.ok .fid-dot { fill: #2ee06a; }
.faceid.ok .fid-link { stroke: #2ee06a; }
.fid-c {
  position: absolute; width: 8.3cqw; height: 8.3cqw;
  border: 2.5px solid var(--coral);
  transition: border-color 0.25s;
}
.fid-c.c1 { top: -2.7cqw; left: -2.7cqw; border-right: none; border-bottom: none; border-radius: 2.3cqw 0 0 0; }
.fid-c.c2 { top: -2.7cqw; right: -2.7cqw; border-left: none; border-bottom: none; border-radius: 0 2.3cqw 0 0; }
.fid-c.c3 { bottom: -2.7cqw; left: -2.7cqw; border-right: none; border-top: none; border-radius: 0 0 0 2.3cqw; }
.fid-c.c4 { bottom: -2.7cqw; right: -2.7cqw; border-left: none; border-top: none; border-radius: 0 0 2.3cqw 0; }
.faceid.ok .fid-c { border-color: #2ee06a; }
.fid-line {
  position: absolute; left: 5%; right: 5%; top: 4%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--coral) 25%, var(--coral) 75%, transparent);
  box-shadow: 0 0 14px 2px rgba(255, 77, 46, 0.55);
}
.faceid.ok .fid-line { opacity: 0; }
.fid-status {
  font-family: var(--font-mono); font-size: 3.8cqw; font-weight: 600;
  letter-spacing: 0.18em; color: var(--coral);
}
.faceid.ok .fid-status { color: #2ee06a; }

@media (max-width: 900px) {
  /* keep the phone on the RIGHT in the tight window (don't stack); wall gets the bulk,
     phone takes a slim column. Only true phone widths (<=560) fall back to stacked. */
  .selfie-grid-wrap { grid-template-columns: 1.55fr minmax(168px, 0.9fr); column-gap: clamp(16px, 3vw, 32px); }
  .photo-wall { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  /* phones: keep wall and phone side by side; give the phone a near-equal share so
     its inner screen stays readable, wall drops to 3 columns */
  .selfie-grid-wrap { grid-template-columns: 1fr 1.05fr; column-gap: 10px; }
  .photo-wall { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .selfie-controls { margin-top: 18px; }
}

/* match explainer cards */
.match-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); }
.mcard {
  border: 1px solid var(--line-light); border-radius: 18px;
  padding: clamp(22px, 2.6vw, 38px); background: #fff;
  position: relative; overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s;
}
.mcard:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(10, 10, 14, 0.12); }
.mcard .tag {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--coral-deep);
  display: inline-block; border: 1px solid currentColor; border-radius: 999px; padding: 5px 12px;
}
.mcard h4 { font-size: clamp(19px, 1.8vw, 26px); font-weight: 700; margin: 18px 0 10px; }
.mcard p { font-size: 14.5px; line-height: 1.6; color: var(--mut-light); }
.mcard .pct {
  font-family: var(--font-display); font-size: 54px; color: rgba(10, 10, 14, 0.07);
  position: absolute; right: 18px; bottom: 6px; pointer-events: none;
}
@media (max-width: 900px) { .match-cards { grid-template-columns: 1fr; } }

/* organizer value list */
/* base = dark theme (motorsport); .theme-light overrides for athletics */
.value-rows { border-top: 1px solid var(--line-dark); }
.theme-light .value-rows { border-top-color: var(--line-light); }
.value-row {
  display: grid; grid-template-columns: 80px 1fr 1.3fr; gap: clamp(16px, 3vw, 48px);
  padding: clamp(22px, 3.5vh, 40px) 0; border-bottom: 1px solid var(--line-dark);
  align-items: baseline;
}
.theme-light .value-row { border-bottom-color: var(--line-light); }
.value-row .idx { font-family: var(--font-mono); font-size: 13px; color: var(--engine-bright); }
.theme-light .value-row .idx { color: var(--coral-deep); }
.value-row h4 { font-size: clamp(20px, 2.2vw, 32px); font-weight: 700; color: var(--paper); }
.theme-light .value-row h4 { color: var(--ink); }
.value-row p { font-size: 15px; line-height: 1.6; color: var(--mut-dark); }
.theme-light .value-row p { color: var(--mut-light); }
@media (max-width: 760px) { .value-row { grid-template-columns: 1fr; gap: 8px; } }

/* photographer strip (dark band inside light page) */
.photog-strip {
  background: var(--ink); color: var(--paper); border-radius: 22px;
  padding: clamp(30px, 5vw, 64px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
}
.photog-strip .kicker { color: var(--engine-bright); }
.photog-strip h3 { font-size: clamp(26px, 3vw, 44px); max-width: 22ch; }
.photog-strip .btn:hover span { color: var(--ink); }

/* ============================================================
   WHY RACELABS — competitive comparison + FAQ (SEO/GEO)
   ============================================================ */
.why-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 22px);
}
.why-col {
  border-radius: 18px; padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line-dark);
}
.theme-light .why-col { border-color: var(--line-light); }
.why-col--them { background: transparent; }
.why-col--us {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(110,98,255,0.12) 0%, transparent 55%),
    var(--ink-2);
}
.theme-light .why-col--us {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,77,46,0.12) 0%, transparent 55%),
    #fff;
}
.why-head {
  display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; margin-bottom: 22px;
}
.why-col--them .why-head { color: var(--mut-dark); }
.theme-light .why-col--them .why-head { color: var(--mut-light); }
.why-col--us .why-head { color: var(--engine-bright); font-weight: 700; }
.theme-light .why-col--us .why-head { color: var(--coral-deep); }
.why-col ul { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.why-col li { font-size: 15.5px; line-height: 1.5; padding-left: 30px; position: relative; }
.why-col--them li { color: var(--mut-dark); }
.theme-light .why-col--them li { color: var(--mut-light); }
.why-col--them li::before {
  content: '×'; position: absolute; left: 4px; top: -1px; font-weight: 700;
  color: #7a4040;
}
.why-col--us li { color: var(--paper); }
.theme-light .why-col--us li { color: var(--ink); }
.why-col--us li::before {
  content: '✓'; position: absolute; left: 2px; top: 0; font-weight: 700;
  color: var(--engine-bright);
}
.theme-light .why-col--us li::before { color: var(--coral); }
@media (max-width: 760px) { .why-compare { grid-template-columns: 1fr; } }

/* FAQ — native <details> accordion */
.faq { max-width: 880px; border-top: 1px solid var(--line-dark); }
.theme-light .faq { border-top-color: var(--line-light); }
.faq details {
  border-bottom: 1px solid var(--line-dark); padding: 6px 0;
}
.theme-light .faq details { border-bottom-color: var(--line-light); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-size: clamp(17px, 1.9vw, 22px); font-weight: 600;
  transition: color 0.25s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 26px; font-weight: 300; line-height: 1; transition: transform 0.3s;
  color: var(--engine-bright);
}
.theme-light .faq summary::after { color: var(--coral); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--engine-bright); }
.theme-light .faq summary:hover { color: var(--coral-deep); }
.faq details p {
  padding: 0 44px 26px 0; font-size: 15.5px; line-height: 1.7; max-width: 70ch;
  color: var(--mut-dark);
}
.theme-light .faq details p { color: var(--mut-light); }

/* WHY — positive differentiator points (no competitor framing) */
.why-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 3vw, 46px); }
.why-point {
  display: grid; grid-template-columns: 30px 1fr; column-gap: 16px; row-gap: 8px; align-items: start;
}
.why-point .wp-mark {
  grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; font-weight: 700;
  color: var(--ink); background: var(--engine-bright);
}
.theme-light .why-point .wp-mark { background: var(--coral); color: #fff; }
.why-point h4 { font-size: clamp(19px, 2vw, 26px); font-weight: 700; line-height: 1.1; }
.why-point p { font-size: 15px; line-height: 1.62; color: var(--mut-dark); }
.theme-light .why-point p { color: var(--mut-light); }
@media (max-width: 760px) { .why-points { grid-template-columns: 1fr; } }

/* walkthrough scene 5 — opened folder gallery (photos + video clips) */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.gallery-tile {
  position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  background-size: cover; background-position: center; background-color: #15151d;
}
/* play indicator drawn in CSS (circle + triangle), not the ▶ emoji which
   renders as a system glyph (ugly blue square on iOS) */
.gallery-tile.is-video::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(10, 10, 14, 0.5); border: 1.5px solid rgba(255, 255, 255, 0.85);
}
.gallery-tile.is-video::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-38%, -50%);
  width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}
.gallery-tile .vbadge {
  position: absolute; bottom: 6px; right: 6px; z-index: 1;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em;
  background: rgba(10, 10, 14, 0.72); color: #fff; padding: 2px 5px; border-radius: 4px;
}