:root {
  --ink: #07080b;
  --ink-soft: #0b0d12;
  --surface: #10131a;
  --surface-2: #151922;
  --surface-3: #1b202b;
  --text: #f7f7f8;
  --muted: #b8bbc4;
  --quiet: #868b97;
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.24);
  --red: #e8173f;
  --red-deep: #a90b2a;
  --red-dark: #6f071d;
  --amber: #ffc857;
  --green: #54e6a4;
  --focus: #ffd166;
  --danger: #ff6b75;
  --radius-xs: 0.45rem;
  --radius-sm: 0.75rem;
  --radius-md: 1.15rem;
  --radius-lg: 1.75rem;
  --radius-pill: 999px;
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 32px 90px rgba(0, 0, 0, 0.48);
  --glow-red: 0 0 48px rgba(232, 23, 63, 0.26);
  --container: min(1180px, calc(100vw - 2rem));
  --container-wide: min(1360px, calc(100vw - 2rem));
  --measure: 68ch;
  --header-height: 76px;
  --status-height: 42px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --fast: 160ms;
  --normal: 320ms;
  --slow: 700ms;
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); overflow-x: clip; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 12% 4%, rgba(232, 23, 63, 0.12), transparent 30rem),
    radial-gradient(circle at 90% 28%, rgba(255, 155, 52, 0.06), transparent 24rem),
    var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 78%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
p, ul, ol { margin-top: 0; }
strong { color: #fff; }
::selection { background: var(--red); color: #fff; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 5000;
  left: 1rem;
  top: 1rem;
  transform: translateY(-200%);
  padding: .8rem 1rem;
  border-radius: var(--radius-sm);
  background: #fff;
  color: #08090d;
  font-weight: 800;
  transition: transform var(--fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.container { width: var(--container); margin-inline: auto; }
.container--wide { width: var(--container-wide); margin-inline: auto; }
.prose { max-width: var(--measure); }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(7, 8, 11, .9);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(130%);
}
.site-header__bar {
  min-height: var(--header-height);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
}
.brand { width: 178px; padding-block: .35rem; }
.brand img { width: 100%; height: auto; }
.desktop-nav { justify-self: center; }
.desktop-nav ul { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.desktop-nav a {
  position: relative;
  text-decoration: none;
  color: #d2d4da;
  font-family: var(--display);
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color var(--fast) ease;
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.65rem;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--fast) var(--ease);
}
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: #fff; }
.desktop-nav a:hover::after, .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 42px;
  padding: .65rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: #fff;
  text-decoration: none;
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 7px 30px rgba(232,23,63,.28);
  transition: transform var(--fast) var(--ease), background var(--fast) ease;
}
.header-cta:hover { transform: translateY(-2px); background: #ff214c; }
.header-cta svg { width: 1.1rem; }
.menu-button { display: none; }

.status-rail {
  background: linear-gradient(90deg, rgba(105,4,26,.88), rgba(32,10,17,.96) 60%, rgba(105,4,26,.76));
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.status-rail__inner {
  min-height: var(--status-height);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  gap: clamp(1rem, 5vw, 4rem);
}
.status-rail__item { display: flex; gap: .55rem; align-items: baseline; white-space: nowrap; }
.status-rail__item small, .status-rail__item strong {
  font-family: var(--display);
  font-size: .68rem;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.status-rail__item small { color: #d5a7b2; }
.status-rail__item strong { color: #fff; }
.status-rail__arrow svg { width: 1rem; }

/* Mobile menu */
.mobile-menu { position: fixed; inset: 0; z-index: 2000; }
.mobile-menu__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.mobile-menu__panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(430px, 92vw);
  overflow-y: auto;
  background:
    radial-gradient(circle at 70% 5%, rgba(232,23,63,.18), transparent 20rem),
    #0c0e13;
  border-left: 1px solid var(--line);
  box-shadow: -40px 0 100px rgba(0,0,0,.6);
  padding: 1.25rem;
  animation: menuIn var(--normal) var(--ease) both;
}
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.mobile-menu__top img { width: 170px; height: auto; }
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  font-size: 1.8rem;
}
.mobile-menu nav ul { list-style: none; padding: 1rem 0; margin: 0; }
.mobile-menu nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.mobile-menu nav a svg { width: 1.25rem; color: var(--red); }
.mobile-menu nav a[aria-current="page"] { color: var(--red); }
.mobile-menu__status { padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,.035); }
.mobile-menu__status strong { display: block; font-family: var(--display); font-size: 1.9rem; line-height: 1; text-transform: uppercase; }
.mobile-menu__status p:not(.eyebrow) { color: var(--muted); margin-block: .75rem 1rem; }
@keyframes menuIn { from { transform: translateX(100%); opacity: .6; } to { transform: none; opacity: 1; } }

/* Type */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .7rem;
  color: var(--amber);
  font-family: var(--display);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.1;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 16px rgba(255,200,87,.6); }
h1, h2, h3, h4 { margin-top: 0; font-family: var(--display); text-wrap: balance; }
h1 {
  margin-bottom: 1.1rem;
  font-size: clamp(3.4rem, 8vw, 7.8rem);
  line-height: .82;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
h2 {
  margin-bottom: 1rem;
  font-size: clamp(2.6rem, 5.8vw, 5.5rem);
  line-height: .9;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
h3 { font-size: clamp(1.65rem, 3vw, 2.4rem); line-height: 1; text-transform: uppercase; }
h4 { font-size: 1.3rem; line-height: 1.1; text-transform: uppercase; }
.lede { max-width: 61ch; color: #d7d9df; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.7; }
.text-gradient { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.55); background: linear-gradient(135deg, var(--red), #ff7d46 65%, var(--amber)); background-clip: text; -webkit-background-clip: text; }
.text-outline { color: transparent; -webkit-text-stroke: 1.5px var(--red); text-shadow: 0 0 34px rgba(232,23,63,.25); }
.kicker { color: var(--muted); font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

/* Buttons */
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 48px;
  padding: .78rem 1.2rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-family: var(--display);
  font-size: .84rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) ease, background var(--fast) ease, border-color var(--fast) ease;
}
.button svg { width: 1.1rem; height: 1.1rem; transition: transform var(--fast) var(--ease); }
.button:hover { transform: translateY(-2px); }
.button:hover svg { transform: translateX(3px); }
.button--primary { color: #fff; background: linear-gradient(135deg, var(--red), #ce0c32); box-shadow: 0 12px 34px rgba(232,23,63,.24); }
.button--primary:hover { background: linear-gradient(135deg, #ff214c, var(--red)); box-shadow: 0 16px 44px rgba(232,23,63,.34); }
.button--secondary { color: #fff; background: rgba(255,255,255,.035); border-color: var(--line-strong); }
.button--secondary:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.07); }
.button--quiet { color: #fff; background: transparent; border-color: var(--line); }
.button[aria-disabled="true"], .button:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Heroes */
.page-hero {
  position: relative;
  min-height: clamp(620px, 78vh, 880px);
  display: grid;
  align-items: center;
  overflow: clip;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(7,8,11,.98) 0%, rgba(7,8,11,.85) 48%, rgba(7,8,11,.35) 100%),
    radial-gradient(circle at 80% 35%, rgba(232,23,63,.2), transparent 32rem);
}
.page-hero::before {
  content: "56";
  position: absolute;
  right: -1vw;
  top: 8%;
  color: rgba(255,255,255,.025);
  font-family: var(--display);
  font-weight: 900;
  font-size: min(34vw, 34rem);
  line-height: .7;
  letter-spacing: -.08em;
  pointer-events: none;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 48%, rgba(232,23,63,.08) 49%, transparent 51%);
  background-size: 220% 100%;
  animation: lightSweep 10s var(--ease) infinite;
}
.page-hero__glow { position: absolute; width: 36rem; height: 36rem; left: -16rem; top: 20%; border-radius: 50%; background: rgba(232,23,63,.13); filter: blur(90px); }
.page-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .75fr); align-items: center; gap: clamp(2rem, 6vw, 7rem); padding-block: clamp(5rem, 10vw, 8rem); }
.page-hero__copy { max-width: 720px; }
.page-hero__media { position: relative; }
.media-frame {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-lg);
  background: #090a0d;
  box-shadow: var(--shadow-lg), 0 0 90px rgba(232,23,63,.13);
  overflow: hidden;
  transform: rotate(-1.4deg);
}
.media-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(7,8,11,.5)); pointer-events: none; }
.media-frame__image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.78) contrast(1.08); }
.media-frame__corner { position: absolute; z-index: 2; width: 2.8rem; height: 2.8rem; border-color: var(--red); }
.media-frame__corner--one { left: .75rem; top: .75rem; border-left: 2px solid var(--red); border-top: 2px solid var(--red); }
.media-frame__corner--two { right: .75rem; bottom: .75rem; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); }
@keyframes lightSweep { 0%, 60% { background-position: 200% 0; } 100% { background-position: -120% 0; } }

.hero-home { min-height: calc(100svh - var(--header-height) - var(--status-height)); }
.hero-home h1 { font-size: clamp(4rem, 8.6vw, 8.6rem); }
.hero-home .page-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .75fr); }
.hero-home .media-frame { transform: rotate(1.8deg); }
.hero-home .media-frame__image { aspect-ratio: 3 / 4; object-position: center 35%; }
.hero-register .page-hero__media img, .hero-rules .page-hero__media img { object-position: center 60%; }

/* Shared sections */
.section { position: relative; padding-block: clamp(4.5rem, 9vw, 8rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--line { border-block: 1px solid var(--line); }
.section--surface { background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012)); }
.section--red {
  background:
    linear-gradient(115deg, rgba(100,3,25,.95), rgba(28,8,15,.96)),
    var(--ink);
  border-block: 1px solid rgba(232,23,63,.28);
}
.section-heading { max-width: 780px; margin-bottom: clamp(2rem, 5vw, 4rem); }
.section-heading > p:not(.eyebrow) { color: var(--muted); max-width: 62ch; font-size: 1.05rem; }
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading--center .eyebrow { justify-content: center; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); align-items: center; gap: clamp(2rem, 7vw, 7rem); }
.split--reverse > :first-child { order: 2; }
.split-media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.split-media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.rule { width: 100%; height: 1px; border: 0; margin: 2rem 0; background: var(--line); }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat {
  position: relative;
  min-height: 144px;
  display: grid;
  align-content: center;
  padding: 1.4rem;
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.stat:last-child { border-right: 0; }
.stat strong { font-family: var(--display); font-size: clamp(2.7rem, 5vw, 5rem); line-height: .8; letter-spacing: -.04em; }
.stat span { margin-top: .6rem; color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.stat::after { content: ""; position: absolute; right: -2rem; bottom: -2rem; width: 6rem; height: 6rem; border: 1px solid rgba(232,23,63,.23); border-radius: 50%; }

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.card {
  position: relative;
  padding: clamp(1.3rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: linear-gradient(var(--red), transparent); opacity: .8; }
.card p { color: var(--muted); }
.card .button { margin-top: .5rem; }
.card-number { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.1rem; color: var(--amber); font-family: var(--display); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.card-number::before { content: ""; width: 1.8rem; height: 1px; background: var(--amber); }

/* Home */
.hero-stats { position: relative; z-index: 2; margin-top: -1px; background: rgba(12,14,19,.96); }
.race-flow-preview { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); align-items: stretch; gap: .55rem; }
.flow-node {
  position: relative;
  min-height: 170px;
  display: grid;
  align-content: end;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.025);
}
.flow-node::after { content: ""; position: absolute; right: -.6rem; top: 50%; width: .65rem; height: 1px; background: var(--red); }
.flow-node:last-child::after { display: none; }
.flow-node small { color: var(--amber); font-family: var(--display); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.flow-node strong { display: block; margin-top: .35rem; font-family: var(--display); font-size: 1.25rem; line-height: 1; text-transform: uppercase; }
.flow-node--block { background: linear-gradient(145deg, rgba(232,23,63,.16), rgba(255,255,255,.025)); border-color: rgba(232,23,63,.35); }
.flow-node--finish { background: linear-gradient(145deg, rgba(255,200,87,.12), rgba(255,255,255,.025)); }
.clock-system { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(2rem,6vw,6rem); align-items: center; }
.clock-face {
  position: relative;
  min-height: 410px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(232,23,63,.28);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle, rgba(232,23,63,.15), transparent 56%),
    #090b0f;
  box-shadow: var(--shadow-lg), var(--glow-red);
  overflow: hidden;
}
.clock-face::before, .clock-face::after { content: ""; position: absolute; border: 1px solid rgba(232,23,63,.2); border-radius: 50%; }
.clock-face::before { width: 70%; aspect-ratio: 1; }
.clock-face::after { width: 88%; aspect-ratio: 1; }
.clock-face__time { position: relative; z-index: 1; color: #ff3158; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(4.5rem, 10vw, 8rem); line-height: .9; text-shadow: 0 0 24px rgba(255,37,77,.55); }
.clock-face__label { position: absolute; z-index: 1; bottom: 2rem; color: var(--muted); font-family: var(--display); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.step-list { display: grid; gap: 1rem; counter-reset: step; }
.step-list article { position: relative; padding: 1.15rem 1.2rem 1.15rem 4.25rem; border-left: 1px solid var(--line); background: rgba(255,255,255,.018); }
.step-list article::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; left: 1rem; top: 1rem; color: var(--red); font-family: var(--display); font-size: 1.35rem; font-weight: 900; }
.step-list h3 { font-size: 1.35rem; margin-bottom: .35rem; }
.step-list p { margin-bottom: 0; color: var(--muted); }
.event-status-card { display: grid; grid-template-columns: 1.15fr .85fr; border: 1px solid rgba(232,23,63,.34); border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(145deg, rgba(232,23,63,.13), rgba(255,255,255,.02)); box-shadow: var(--shadow-lg); }
.event-status-card__copy { padding: clamp(2rem,5vw,4rem); }
.event-status-card__copy h2 { font-size: clamp(3rem, 6vw, 6rem); }
.event-status-card__media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; filter: saturate(.7) contrast(1.1); }

/* Race page */
.race-timeline { display: grid; gap: .75rem; }
.race-timeline__row { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 1rem; min-height: 88px; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,.025); }
.race-timeline__row strong { font-family: var(--display); font-size: 1.25rem; text-transform: uppercase; }
.race-timeline__row p { margin: 0; color: var(--muted); }
.race-timeline__row span:last-child { color: var(--amber); font-family: var(--display); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.race-timeline__row--block { border-color: rgba(232,23,63,.38); background: linear-gradient(90deg, rgba(232,23,63,.12), rgba(255,255,255,.02)); }
.race-timeline__row--pit { border-style: dashed; opacity: .88; }

.tab-shell { border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,255,255,.02); overflow: hidden; }
.tab-list { display: flex; gap: .5rem; padding: .75rem; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.18); overflow-x: auto; }
.tab-list [role="tab"] {
  min-height: 46px;
  flex: 1 0 auto;
  padding: .7rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
}
.tab-list [role="tab"][aria-selected="true"] { color: #fff; background: var(--red); border-color: var(--red); }
.tab-panel { padding: clamp(1.2rem,3vw,2.4rem); }
.tab-panel[hidden] { display: none; }
.station-block { margin-bottom: 2rem; }
.station-block:last-child { margin-bottom: 0; }
.station-block__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.station-block__head h3 { margin: 0; }
.station-block__head p { margin: 0; color: var(--muted); }
.station-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }
.station-card { padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,.025); }
.station-card__id { color: var(--red); font-family: var(--display); font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.station-card h4 { margin: .35rem 0 .65rem; }
.station-card p { margin: 0; color: var(--muted); font-size: .93rem; }
.spec-note { margin-top: 1rem; padding: 1rem 1.2rem; border-left: 3px solid var(--amber); background: rgba(255,200,87,.07); color: #e4e1d5; }
.score-formula { padding: clamp(1.5rem,4vw,2.6rem); border: 1px solid rgba(232,23,63,.35); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(232,23,63,.13), rgba(255,255,255,.02)); }
.score-formula code { display: block; color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(1.05rem,2vw,1.35rem); white-space: normal; }
.score-example { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 1.2rem; }
.score-example div { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(0,0,0,.18); }
.score-example small { display: block; color: var(--quiet); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.score-example strong { display: block; margin-top: .25rem; font-family: var(--display); font-size: 1.55rem; }

/* Event / registration */
.status-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.status-panel article { padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,.025); }
.status-panel small { color: var(--quiet); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.status-panel strong { display: block; margin-top: .45rem; font-family: var(--display); font-size: 1.65rem; line-height: 1; text-transform: uppercase; }
.signal-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.8fr); gap: 2rem; padding: clamp(1.5rem,4vw,3rem); border: 1px solid rgba(232,23,63,.35); border-radius: var(--radius-lg); background: radial-gradient(circle at 90% 20%, rgba(232,23,63,.2), transparent 20rem), rgba(255,255,255,.02); }
.signal-panel__list { display: grid; gap: .75rem; }
.signal-panel__list div { display: flex; align-items: flex-start; gap: .7rem; color: var(--muted); }
.signal-panel__list svg { flex: 0 0 auto; width: 1.15rem; margin-top: .25rem; color: var(--green); }
.archive-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.archive-card { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,.025); }
.archive-card time { color: var(--amber); font-family: var(--display); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.archive-card h3 { margin: .45rem 0 .7rem; }
.archive-card p { color: var(--muted); }

/* Forms */
.form-field { display: grid; gap: .45rem; }
.form-field label { color: #eef0f4; font-size: .85rem; font-weight: 700; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  min-height: 50px;
  padding: .85rem 1rem;
  border: 1px solid rgba(255,255,255,.23);
  border-radius: var(--radius-sm);
  background: rgba(5,6,9,.72);
  color: #fff;
  transition: border-color var(--fast) ease, box-shadow var(--fast) ease;
}
.form-field textarea { min-height: 160px; resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #7e828d; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(255,209,102,.12); }
.alert-form { display: grid; grid-template-columns: minmax(180px,1fr) auto; gap: .75rem; align-items: end; }
.alert-form .form-note { grid-column: 1 / -1; margin: 0; color: var(--quiet); font-size: .78rem; }
.alert-form .form-note a { color: #fff; }
.bot-field { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.contact-form .form-field--full, .contact-form .form-actions { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form-actions p { margin: 0; color: var(--quiet); font-size: .8rem; }
.checkbox-field { display: flex; gap: .7rem; align-items: flex-start; color: var(--muted); }
.checkbox-field input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--red); }

/* Results */
.results-controls { display: grid; gap: 1rem; min-width: 0; }
.results-controls > * { min-width: 0; }
.event-selector, .view-selector { display: flex; width: 100%; max-width: 100%; min-width: 0; gap: .6rem; overflow-x: auto; overscroll-behavior-inline: contain; padding-bottom: .15rem; }
.event-selector button, .view-selector button {
  min-height: 46px;
  flex: 1 0 auto;
  padding: .7rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.event-selector button[aria-selected="true"], .view-selector button[aria-selected="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.results-stage { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,255,255,.02); overflow: hidden; }
.results-stage__header { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--line); }
.results-stage__header h2 { margin: 0; font-size: clamp(1.8rem,4vw,3rem); }
.results-stage__header p { margin: .25rem 0 0; color: var(--muted); }
.results-stage__body { min-height: 600px; display: grid; place-items: center; padding: 1rem; }
.embed-consent { max-width: 600px; text-align: center; padding: 2rem; }
.embed-consent svg { width: 3rem; margin: 0 auto 1rem; color: var(--red); }
.embed-consent p { color: var(--muted); }
.results-iframe { width: 100%; min-height: 760px; border: 0; background: #fff; }
.results-fallback { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; padding: 1rem 1.4rem; border-top: 1px solid var(--line); color: var(--muted); }
.results-fallback a { color: #fff; font-weight: 700; }

/* Training / shop / about */
.partner-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.partner-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,255,255,.025); overflow: hidden; }
.partner-card__media { min-height: 340px; position: relative; }
.partner-card__media img { width: 100%; height: 100%; object-fit: cover; }
.partner-card__body { padding: clamp(1.5rem,3vw,2.25rem); }
.partner-card__logo { width: auto; max-width: 220px; max-height: 82px; margin-bottom: 1rem; object-fit: contain; }
.partner-card p { color: var(--muted); }
.detail-list { display: grid; gap: .6rem; margin: 1.2rem 0; }
.detail-list div { display: flex; gap: .7rem; align-items: flex-start; color: var(--muted); }
.detail-list svg { flex: 0 0 auto; width: 1.15rem; margin-top: .25rem; color: var(--amber); }
.product-layout { display: grid; grid-template-columns: minmax(320px,.9fr) minmax(0,1fr); gap: clamp(2rem,7vw,7rem); align-items: start; }
.product-layout > * { min-width: 0; }
.product-gallery__main { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.product-gallery__main img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.product-gallery__thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: .75rem; }
.product-gallery__thumbs button { padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; cursor: pointer; overflow: hidden; }
.product-gallery__thumbs button[aria-pressed="true"] { border-color: var(--red); box-shadow: 0 0 0 2px rgba(232,23,63,.3); }
.product-gallery__thumbs img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.product-price { font-family: var(--display); font-size: 2.5rem; font-weight: 900; }
.product-note { padding: 1rem; border-left: 3px solid var(--amber); background: rgba(255,200,87,.07); color: var(--muted); }
.timeline-story { position: relative; display: grid; gap: 1rem; }
.timeline-story::before { content: ""; position: absolute; left: 1.25rem; top: 2rem; bottom: 2rem; width: 1px; background: linear-gradient(var(--red), rgba(232,23,63,.08)); }
.timeline-story article { position: relative; padding: 1.3rem 1.3rem 1.3rem 4rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,.025); }
.timeline-story article::before { content: ""; position: absolute; left: .9rem; top: 1.45rem; width: .7rem; height: .7rem; border: .35rem solid var(--ink); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 20px rgba(232,23,63,.5); }
.timeline-story time { color: var(--amber); font-family: var(--display); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.timeline-story h3 { margin: .4rem 0 .6rem; }
.timeline-story p { margin: 0; color: var(--muted); }

/* Rules / legal */
.longform-layout { display: grid; grid-template-columns: 250px minmax(0,1fr); align-items: start; gap: clamp(2rem,6vw,5rem); }
.toc { position: sticky; top: calc(var(--header-height) + var(--status-height) + 1.5rem); padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(16,19,26,.9); }
.toc h2 { font-size: 1.2rem; margin-bottom: .75rem; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.toc a { color: var(--muted); text-decoration: none; font-size: .9rem; }
.toc a:hover { color: #fff; }
.longform { width: 100%; max-width: 820px; min-width: 0; }
.longform > section { min-width: 0; scroll-margin-top: calc(var(--header-height) + var(--status-height) + 2rem); padding-bottom: 2.6rem; margin-bottom: 2.6rem; border-bottom: 1px solid var(--line); }
.longform > section:last-child { border-bottom: 0; }
.longform h2 { font-size: clamp(2.2rem,5vw,4rem); }
.longform h3 { margin-top: 2rem; font-size: 1.7rem; }
.longform p, .longform li { color: #c7cad2; }
.longform li + li { margin-top: .45rem; }
.notice { padding: 1.2rem 1.35rem; border: 1px solid rgba(255,200,87,.32); border-left: 4px solid var(--amber); border-radius: var(--radius-sm); background: rgba(255,200,87,.065); }
.notice--red { border-color: rgba(232,23,63,.35); border-left-color: var(--red); background: rgba(232,23,63,.07); }
.rules-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.rules-meta span { padding: .45rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.table-scroll { width: 100%; max-width: 100%; min-width: 0; margin: 1rem 0 2rem; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.table-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.standards-table { width: 100%; min-width: 760px; border-collapse: collapse; margin: 0; font-size: .92rem; }
.standards-table th, .standards-table td { padding: .85rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.standards-table th { background: rgba(232,23,63,.1); color: #fff; font-family: var(--display); letter-spacing: .05em; text-transform: uppercase; }
.standards-table td { color: var(--muted); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: #07080b; }
.footer-alerts { padding-block: clamp(3rem,6vw,5rem); background: linear-gradient(110deg, rgba(103,5,27,.96), rgba(25,8,14,.98)); border-bottom: 1px solid rgba(232,23,63,.25); }
.footer-alerts__grid { display: grid; grid-template-columns: 1fr 1.05fr; align-items: end; gap: clamp(2rem,6vw,6rem); }
.footer-alerts h2 { margin-bottom: .7rem; font-size: clamp(2.5rem,5vw,4.5rem); }
.footer-alerts p:not(.eyebrow) { margin: 0; color: #d1b6bd; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, .7fr); gap: 2rem; padding-block: 4rem; }
.site-footer__brand img { width: 190px; height: auto; }
.site-footer__brand p { color: var(--muted); }
.site-footer nav { display: grid; align-content: start; gap: .45rem; }
.site-footer nav h2 { font-size: 1rem; letter-spacing: .08em; margin-bottom: .5rem; }
.site-footer nav a { color: var(--muted); text-decoration: none; font-size: .9rem; }
.site-footer nav a:hover { color: #fff; }
.social-links { display: flex; gap: .55rem; }
.social-links a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: #fff; }
.social-links a:hover { border-color: var(--red); color: var(--red); }
.social-links svg { width: 1.2rem; }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 2rem; padding-block: 1.2rem 2rem; border-top: 1px solid var(--line); color: var(--quiet); font-size: .74rem; }
.site-footer__bottom p { margin: 0; max-width: 70ch; }

/* Small utility components */
.breadcrumbs { padding-block: 1rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; color: var(--quiet); font-size: .8rem; }
.breadcrumbs li + li::before { content: "/"; margin-right: .45rem; }
.breadcrumbs a { color: var(--muted); }
.badge { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.badge--live { border-color: rgba(84,230,164,.35); color: var(--green); background: rgba(84,230,164,.07); }
.badge--closed { border-color: rgba(232,23,63,.35); color: #ff98ad; background: rgba(232,23,63,.07); }
.inline-link { display: inline-flex; align-items: center; gap: .35rem; color: #fff; font-weight: 700; text-decoration-color: var(--red); text-underline-offset: .22em; }
.inline-link svg { width: 1rem; }
.empty-state { max-width: 760px; margin-inline: auto; padding: clamp(2rem,6vw,5rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 0%, rgba(232,23,63,.18), transparent 22rem), rgba(255,255,255,.025); text-align: center; box-shadow: var(--shadow-lg); }
.empty-state__code { color: rgba(255,255,255,.08); font-family: var(--display); font-size: clamp(6rem,20vw,12rem); font-weight: 900; line-height: .7; }
.empty-state h1 { font-size: clamp(2.7rem,7vw,5.5rem); }
.confirmation-mark { width: 120px; margin-inline: auto; filter: drop-shadow(0 0 26px rgba(232,23,63,.3)); }

/* Motion */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal--delay { transition-delay: 120ms; }
.reveal.is-visible, .no-js .reveal { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .desktop-nav { display: none; }
  .site-header__bar { grid-template-columns: auto 1fr auto; gap: 1rem; }
  .header-cta { justify-self: end; }
  .menu-button {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 42px;
    padding: .55rem .75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.035);
    font-family: var(--display);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .menu-button__lines { display: grid; gap: 3px; }
  .menu-button__lines i { display: block; width: 17px; height: 1px; background: #fff; }
  .page-hero__grid { grid-template-columns: minmax(0,1fr) minmax(270px,.7fr); gap: 2rem; }
  .race-flow-preview { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .flow-node::after { display: none; }
}

@media (max-width: 820px) {
  :root { --container: min(100% - 1.25rem, 760px); --container-wide: min(100% - 1.25rem, 760px); --header-height: 66px; --status-height: 48px; }
  body { font-size: 1rem; }
  .brand { width: 152px; }
  .header-cta { display: none; }
  .site-header__bar { grid-template-columns: auto 1fr; }
  .menu-button { justify-self: end; }
  .status-rail__inner { justify-content: space-between; gap: .35rem; }
  .status-rail__item { display: grid; gap: 0; }
  .status-rail__item small, .status-rail__item strong { font-size: .57rem; }
  .status-rail__arrow { display: none; }
  .page-hero, .hero-home { min-height: auto; }
  .page-hero__grid, .hero-home .page-hero__grid { grid-template-columns: 1fr; padding-block: 4rem; }
  .page-hero__media { max-width: 520px; }
  .page-hero h1 { font-size: clamp(3.3rem,15vw,6rem); }
  .hero-home h1 { font-size: clamp(3.5rem,16vw,6.4rem); }
  .media-frame { transform: none !important; }
  .media-frame__image { aspect-ratio: 16 / 11; object-position: center 35%; }
  .hero-home .media-frame__image { aspect-ratio: 16 / 13; }
  .split, .clock-system, .signal-panel, .event-status-card, .product-layout, .footer-alerts__grid { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: initial; }
  .split-media img { min-height: 320px; }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .card-grid, .station-grid { grid-template-columns: 1fr; }
  .race-flow-preview { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .clock-face { min-height: 340px; }
  .event-status-card__media { order: -1; }
  .event-status-card__media img { min-height: 300px; max-height: 440px; }
  .status-panel { grid-template-columns: 1fr; }
  .archive-grid, .partner-grid { grid-template-columns: 1fr; }
  .partner-card__media { min-height: 280px; }
  .score-example { grid-template-columns: 1fr; }
  .longform-layout { grid-template-columns: 1fr; }
  .toc { position: static; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__bottom { display: grid; }
}

@media (max-width: 560px) {
  h1 { letter-spacing: -.025em; }
  h2 { font-size: clamp(2.45rem,13vw,4.2rem); }
  .section { padding-block: 4rem; }
  .button-row { display: grid; }
  .button { width: 100%; }
  .page-hero__grid { padding-block: 3.2rem; }
  .page-hero__media { margin-top: .5rem; }
  .media-frame__image, .hero-home .media-frame__image { aspect-ratio: 4 / 3; }
  .stat { min-height: 118px; padding: 1rem; }
  .stat strong { font-size: 3rem; }
  .race-flow-preview { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
  .flow-node { flex: 0 0 76vw; scroll-snap-align: start; }
  .race-timeline__row { grid-template-columns: 76px 1fr; }
  .race-timeline__row span:last-child { grid-column: 2; }
  .station-block__head { display: grid; }
  .signal-panel { padding: 1.25rem; }
  .alert-form { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-form .form-field--full, .contact-form .form-actions { grid-column: auto; }
  .results-stage__header { display: grid; }
  .results-stage__body { min-height: 480px; }
  .results-iframe { min-height: 700px; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__brand { grid-column: auto; }
  .standards-table { min-width: 760px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  .button, .card, .media-frame, .tab-shell, .status-panel article, .toc { border: 1px solid CanvasText; }
  .button--primary { background: ButtonFace; color: ButtonText; }
  .eyebrow::before { background: CanvasText; }
}

@media print {
  .site-header, .site-footer, .button-row, .toc, .status-rail { display: none !important; }
  body { background: #fff; color: #000; }
  body::before, body::after { display: none; }
  main { max-width: 100%; }
  .page-hero { min-height: auto; background: none; border: 0; }
  .page-hero__grid { display: block; padding: 1rem 0; }
  .page-hero__media { display: none; }
  .longform-layout { display: block; }
  .longform p, .longform li, .lede { color: #222; }
  h1, h2, h3, h4, strong { color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* Completion and utility pages */
.product-title { max-width: 100%; font-size: clamp(2.75rem, 5vw, 5rem); overflow-wrap: anywhere; text-wrap: pretty; }
.product-gallery__hero { width: 100%; height: auto; }
.partner-wordmark { width: min(320px, 75%); height: auto; margin-bottom: 1.5rem; }
.completion-hero {
  position: relative;
  min-height: calc(100svh - var(--header-height) - var(--status-height));
  display: grid;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 18% 35%, rgba(232, 23, 63, .24), transparent 25rem),
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 45%),
    var(--ink-soft);
}
.completion-hero__glow {
  position: absolute;
  width: 38rem;
  height: 38rem;
  right: -12rem;
  top: -12rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,23,63,.25), transparent 68%);
  filter: blur(20px);
  pointer-events: none;
}
.completion-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
  padding-block: clamp(5rem, 12vw, 10rem);
}
.completion-hero h1 { max-width: 10ch; font-size: clamp(4rem, 10vw, 8.5rem); }
.completion-mark,
.error-code {
  min-height: 320px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(232,23,63,.2), transparent 62%),
    rgba(255,255,255,.025);
  box-shadow: var(--shadow-lg), var(--glow-red);
}
.completion-mark svg { width: 42%; color: var(--focus); }
.error-code {
  border-radius: var(--radius-lg);
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,.55);
  font-family: var(--display);
  font-size: clamp(6rem, 16vw, 12rem);
  font-weight: 900;
  letter-spacing: -.05em;
}
.completion-note { max-width: 54ch; margin-top: 2rem; color: var(--muted); }
.completion-note a { color: #fff; text-underline-offset: .2em; }
@media (max-width: 820px) {
  .completion-hero__grid { grid-template-columns: 1fr; }
  .completion-mark, .error-code { min-height: 220px; max-width: 440px; width: 100%; }
}

/* Approved cinematic home-hero art direction */
.hero-home {
  background:
    linear-gradient(90deg, rgba(7,8,11,.98) 0%, rgba(7,8,11,.90) 42%, rgba(7,8,11,.38) 100%),
    linear-gradient(180deg, rgba(7,8,11,.12), rgba(7,8,11,.58)),
    image-set(
      url("/assets/media/hero-brand-1280.webp") 1x,
      url("/assets/media/hero-brand-1920.webp") 2x
    ) center / cover no-repeat;
}
.hero-visual { isolation: isolate; }
.hero-visual .media-frame { z-index: 2; }
.hero-rfid {
  position: absolute;
  z-index: 4;
  right: 1.2rem;
  top: 23%;
  display: grid;
  min-width: 74px;
  padding: .65rem .72rem;
  border: 1px solid rgba(255,200,87,.35);
  border-radius: .55rem;
  background: rgba(8,9,13,.86);
  box-shadow: 0 14px 40px rgba(0,0,0,.38);
  color: var(--amber);
  font-family: var(--display);
  font-size: .66rem;
  letter-spacing: .12em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-2deg);
}
.hero-rfid strong { color: var(--amber); }
.hero-timer {
  position: absolute;
  z-index: 5;
  left: -2.25rem;
  bottom: -2rem;
  width: min(360px, 78%);
  padding: 1rem 1.25rem 1.15rem;
  border: 1px solid rgba(232,23,63,.65);
  border-left: 4px solid var(--red);
  border-radius: .75rem;
  background: linear-gradient(135deg, rgba(11,13,18,.96), rgba(18,15,21,.9));
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 36px rgba(232,23,63,.18);
  transform: rotate(1.7deg);
}
.hero-timer small,
.hero-timer span {
  display: block;
  color: #aaaeb9;
  font-family: var(--display);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.1;
  text-transform: uppercase;
}
.hero-timer strong {
  display: block;
  margin-block: .25rem .4rem;
  color: #ff244e;
  font-family: var(--display);
  font-size: clamp(3rem, 5.4vw, 5.15rem);
  letter-spacing: .05em;
  line-height: .78;
  text-shadow: 0 0 26px rgba(232,23,63,.45);
}
.hero-patch {
  position: absolute;
  z-index: 6;
  right: -2.6rem;
  bottom: -3.7rem;
  width: clamp(95px, 11vw, 155px);
  height: auto;
  filter: drop-shadow(0 20px 24px rgba(0,0,0,.55));
  transform: rotate(5deg);
}
@media (max-width: 980px) {
  .hero-home { background-position: 63% center; }
  .hero-timer { left: 1rem; bottom: -1.25rem; }
  .hero-patch { right: 1rem; bottom: -3rem; }
}
@media (max-width: 620px) {
  .hero-home {
    background:
      linear-gradient(180deg, rgba(7,8,11,.82), rgba(7,8,11,.97)),
      url("/assets/media/hero-brand-1280.webp") 58% center / cover no-repeat;
  }
  .hero-rfid { right: .7rem; top: 14%; transform: none; }
  .hero-timer { left: .65rem; bottom: -.8rem; width: 72%; transform: none; }
  .hero-timer strong { font-size: 3.15rem; }
  .hero-patch { width: 92px; right: .15rem; bottom: -2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-rfid, .hero-timer, .hero-patch { transform: none; }
}

/* Supplied ROUTE56 Block campaign graphics and official social media */
.brand-strike {
  padding-block: clamp(1.25rem, 3vw, 2.5rem);
  background:
    linear-gradient(90deg, rgba(232,23,63,.05), transparent 24%, transparent 76%, rgba(232,23,63,.05)),
    #050609;
  border-block: 1px solid var(--line);
}
.brand-strike--contained { padding-block: clamp(2.5rem, 6vw, 5rem); border-top: 0; }
.brand-strike__figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-lg);
  background: #06070a;
  box-shadow: var(--shadow-lg), 0 0 52px rgba(232,23,63,.12);
}
.brand-strike__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}
.brand-strike__caption {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.1rem, 2.5vw, 1.8rem);
  background: linear-gradient(90deg, rgba(232,23,63,.16), rgba(255,255,255,.025));
  border-top: 1px solid var(--line);
}
.brand-strike__caption .eyebrow { margin-bottom: .15rem; }
.brand-strike__caption h2 { margin: 0; font-size: clamp(2rem,4.4vw,4.4rem); }

.block-art-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.block-art-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  box-shadow: var(--shadow-sm);
  transition: transform var(--normal) var(--ease), border-color var(--normal) ease, box-shadow var(--normal) ease;
}
.block-art-card:hover {
  transform: translateY(-6px);
  border-color: rgba(232,23,63,.5);
  box-shadow: var(--shadow-lg), 0 0 42px rgba(232,23,63,.12);
}
.block-art-card__media {
  position: relative;
  overflow: hidden;
  background: #050609;
  border-bottom: 1px solid var(--line);
}
.block-art-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(5,6,9,.6));
}
.block-art-card__media img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  transition: transform 800ms var(--ease), filter 800ms var(--ease);
}
.block-art-card:hover .block-art-card__media img { transform: scale(1.025); filter: saturate(1.08) contrast(1.03); }
.block-art-card__body { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.block-art-card__body h3 { margin-bottom: .55rem; font-size: clamp(2rem,3.6vw,3.2rem); }
.block-art-card__body p { color: var(--muted); }
.block-art-card__body ul { margin: 1rem 0 1.4rem; padding: 0; list-style: none; }
.block-art-card__body li { padding-block: .45rem; border-bottom: 1px solid var(--line); }
.block-art-card__stations { min-height: 5.2em; }
.block-art-grid--compact .block-art-card__body { padding-top: 1rem; }

.timing-feature {
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.timing-feature__visual {
  position: relative;
  overflow: visible;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: #050609;
  box-shadow: var(--shadow-lg), 0 0 58px rgba(232,23,63,.14);
}
.timing-feature__visual > img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: inherit;
}
.timing-feature__readout {
  position: absolute;
  right: -1.25rem;
  bottom: 1.4rem;
  width: min(330px, 82%);
  padding: 1rem 1.15rem;
  border: 1px solid rgba(232,23,63,.68);
  border-left: 4px solid var(--red);
  border-radius: var(--radius-sm);
  background: rgba(7,8,11,.94);
  box-shadow: 0 22px 55px rgba(0,0,0,.55), var(--glow-red);
}
.timing-feature__readout small,
.timing-feature__readout span {
  display: block;
  color: var(--muted);
  font-family: var(--display);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.timing-feature__readout strong {
  display: block;
  margin-block: .15rem .4rem;
  color: #ff244e;
  font-family: var(--display);
  font-size: clamp(3rem,5vw,4.8rem);
  letter-spacing: .04em;
  line-height: .9;
  text-shadow: 0 0 26px rgba(232,23,63,.42);
}
.finish-feature__media img { object-position: center; }
.race-timeline__row--finish { border-color: rgba(255,200,87,.45); background: linear-gradient(90deg, rgba(255,200,87,.08), rgba(255,255,255,.018)); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #fff;
  font-family: var(--display);
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration-color: var(--red);
  text-underline-offset: .25em;
  text-transform: uppercase;
}
.text-link svg { width: 1rem; color: var(--red); }

@media (max-width: 980px) {
  .brand-strike__caption { align-items: start; flex-direction: column; gap: .4rem; }
  .block-art-grid { gap: 1rem; }
}

@media (max-width: 820px) {
  .hero-race .media-frame__image { aspect-ratio: 4 / 5; object-position: center; }
  .block-art-grid, .timing-feature { grid-template-columns: 1fr; }
  .block-art-card { max-width: 620px; margin-inline: auto; }
  .timing-feature__visual { width: min(620px, 100%); margin-inline: auto; }
  .timing-feature--reverse .timing-feature__visual { order: -1; }
  .timing-feature__readout { right: .85rem; bottom: .85rem; }
  .split--reverse-mobile .split-media { order: -1; }
}

@media (max-width: 560px) {
  .brand-strike { padding-block: .75rem; }
  .brand-strike--contained { padding-block: 3rem; }
  .brand-strike__figure { border-radius: var(--radius-md); }
  .brand-strike__caption { padding: 1rem; }
  .block-art-card__body { padding: 1.15rem; }
  .timing-feature__readout { width: calc(100% - 1.4rem); right: .7rem; bottom: .7rem; }
  .timing-feature__readout strong { font-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .block-art-card, .block-art-card__media img { transition: none; transform: none !important; }
}


/* Final media-integration corrections */
.race-timeline__row,
.race-timeline__row > * { min-width: 0; }
.split-media--poster { display: grid; place-items: center; background: #050609; }
.split-media--poster img { width: 100%; height: auto; min-height: 0; object-fit: contain; }
@media (max-width: 560px) {
  .race-timeline__row span:last-child { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 560px) {
  .race-timeline__row { grid-template-columns: 76px minmax(0, 1fr); }
  .race-timeline__row p,
  .race-timeline__row span:last-child { min-width: 0; overflow-wrap: anywhere; }
  .race-timeline__row span:last-child { white-space: normal; }
}


/* ==========================================================================
   Diamond refinement pass — owner media, controlled scale and premium motion
   ========================================================================== */

.page-hero {
  min-height: clamp(560px, 72vh, 760px);
}
.hero-home {
  min-height: min(790px, calc(100svh - var(--header-height) - var(--status-height)));
}
.page-hero__grid {
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(4.25rem, 8vw, 6.75rem);
}
.page-hero__media {
  width: min(100%, 460px);
  max-width: 460px;
  justify-self: end;
}
.media-frame__image {
  max-height: 545px;
}
.hero-home .media-frame__image {
  max-height: 585px;
}
.hero-race .media-frame__image {
  object-position: center 18%;
}
.hero-event .media-frame__image {
  object-position: center 34%;
}
.hero-training .media-frame__image {
  object-position: center 42%;
}

.brand-strike__image {
  aspect-ratio: 16 / 7;
  max-height: 560px;
}
.split-media img {
  min-height: 0;
  height: auto;
  max-height: 470px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.event-status-card__media img {
  min-height: 320px;
  max-height: 500px;
}
.timing-feature__visual {
  width: min(100%, 470px);
  justify-self: center;
}
.timing-feature__visual > img {
  aspect-ratio: 4 / 5;
  max-height: 600px;
  object-position: center 38%;
}

/* The complete race sequence now carries its corresponding media inside each frame. */
.race-flow-preview {
  gap: .65rem;
}
.flow-node {
  min-height: 194px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-content: initial;
  overflow: hidden;
  isolation: isolate;
  background: rgba(255,255,255,.024);
  transition:
    transform var(--normal) var(--ease),
    border-color var(--normal) ease,
    box-shadow var(--normal) ease;
}
.flow-node:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 22px 55px rgba(0,0,0,.4), 0 0 30px rgba(232,23,63,.08);
}
.flow-node__media {
  position: relative;
  height: 92px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #050609;
}
.flow-node__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(5,6,9,.35));
  pointer-events: none;
}
.flow-node__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(1.08);
  transition: transform 650ms var(--ease), filter 650ms var(--ease);
}
.flow-node:hover .flow-node__media img {
  transform: scale(1.045);
  filter: saturate(1.05) contrast(1.08);
}
.flow-node__body {
  min-height: 100px;
  display: grid;
  align-content: end;
  flex: 1;
  padding: .9rem;
}
.flow-node::after {
  top: 46px;
}
.flow-node--block {
  background: linear-gradient(145deg, rgba(232,23,63,.14), rgba(255,255,255,.02));
}
.flow-node--finish {
  background: linear-gradient(145deg, rgba(255,200,87,.11), rgba(255,255,255,.02));
}
.flow-node--run-one .flow-node__media img { object-position: center 30%; }
.flow-node--run-two .flow-node__media img { object-position: center 42%; }
.flow-node--run-three .flow-node__media img { object-position: center 32%; }
.flow-node--intake .flow-node__media img,
.flow-node--clutch .flow-node__media img,
.flow-node--redline .flow-node__media img,
.flow-node--finish .flow-node__media img { object-position: center 11%; }

/* Block campaign graphics are cinematic headers, not full-height posters. */
.block-art-card {
  position: relative;
  isolation: isolate;
}
.block-art-card__media img {
  aspect-ratio: 16 / 9;
  object-position: center 13%;
}
.block-art-card__body {
  display: flex;
  flex-direction: column;
  min-height: 330px;
}
.block-art-card__body .button {
  margin-top: auto;
  align-self: flex-start;
}
.block-art-grid--compact .block-art-card__body {
  min-height: 250px;
}

/* Controlled light sweep appears only on deliberate hover/focus interaction. */
.block-art-card::after,
.race-media-card::after,
.partner-card--online::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: -55% -90%;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 45%, rgba(255,255,255,.11) 50%, transparent 55%);
  transform: translateX(-38%);
  opacity: 0;
  transition: transform 750ms var(--ease), opacity 240ms ease;
}
.block-art-card:hover::after,
.block-art-card:focus-within::after,
.race-media-card:hover::after,
.race-media-card:focus-within::after,
.partner-card--online:hover::after,
.partner-card--online:focus-within::after {
  transform: translateX(38%);
  opacity: 1;
}

/* Self-hosted owner media. */
.media-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 7vw, 7rem);
}
.media-story--reverse {
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
}
.media-story__copy {
  max-width: 720px;
}
.media-story .section-heading {
  margin-bottom: 0;
}
.race-media-card {
  position: relative;
  isolation: isolate;
  width: min(100%, 420px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  box-shadow: var(--shadow-lg), 0 0 52px rgba(232,23,63,.11);
}
.race-media-card__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #050609;
  border-bottom: 1px solid var(--line);
}
.race-media-card__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,6,9,.12) 0%, transparent 42%, rgba(5,6,9,.28) 100%),
    linear-gradient(115deg, transparent 65%, rgba(232,23,63,.12));
}
.race-media-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #050609;
}
.race-media-card--home video { object-position: center 45%; }
.race-media-card--race video { object-position: center 43%; }
.race-media-card--event video { object-position: center 40%; }
.race-media-card--training video { object-position: center 46%; }
.race-media-card--about video { object-position: center 44%; }
.race-media-card--results video { object-position: center 48%; }

.race-media-card__source {
  position: absolute;
  z-index: 3;
  left: .9rem;
  top: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-width: calc(100% - 1.8rem);
  padding: .5rem .7rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-pill);
  background: rgba(7,8,11,.76);
  color: #e8e9ed;
  font-size: .68rem;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.race-media-card__source .icon {
  width: 1rem;
  color: #fff;
}
.race-media-card__source strong {
  font-family: var(--display);
  letter-spacing: .09em;
}
.media-control {
  position: absolute;
  z-index: 5;
  right: .85rem;
  bottom: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 42px;
  padding: .62rem .85rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-pill);
  background: rgba(7,8,11,.88);
  color: #fff;
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.media-control:hover {
  border-color: rgba(255,255,255,.55);
  background: rgba(18,20,25,.95);
}
.media-control__glyph {
  width: 1rem;
  color: var(--amber);
  font-family: ui-monospace, monospace;
  font-size: .8rem;
  text-align: center;
}
.race-media-card__body {
  padding: 1.15rem 1.2rem 1.25rem;
}
.race-media-card__body h3 {
  margin-bottom: .35rem;
  font-size: clamp(1.65rem, 3vw, 2.1rem);
}
.race-media-card__body > p {
  margin-bottom: .9rem;
  color: var(--muted);
}
.race-media-card__credit {
  margin: .8rem 0 0 !important;
  color: var(--quiet) !important;
  font-size: .72rem;
  line-height: 1.45;
}
.no-js .media-control { display: none; }

/* Owner-supplied HIIT56 Online campaign art replaces the redundant small logo. */
.partner-card--online {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  grid-template-rows: none;
  align-items: stretch;
}
.partner-card__media--online {
  min-height: 0;
  border-right: 1px solid var(--line);
}
.partner-card__media--online img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  object-fit: cover;
  object-position: center;
}
.partner-card--online .partner-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.partner-card--online .detail-list > div > span:first-child {
  flex: 0 0 auto;
  color: var(--amber);
  font-weight: 900;
}

/* Corrected, condensed owner biography. */
.origin-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .8fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
}
.origin-story__copy h2 {
  max-width: 9ch;
  font-size: clamp(4rem, 8vw, 7rem);
}
.origin-story__copy p:not(.eyebrow) {
  max-width: 64ch;
  color: var(--muted);
}
.origin-story__copy .lede {
  color: #d7d9df;
}
.origin-story__portrait {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: #07080b;
  box-shadow: var(--shadow-lg), 0 0 48px rgba(232,23,63,.1);
}
.origin-story__portrait img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 44%;
}
.timeline-story--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.timeline-story--three::before {
  display: none;
}
.timeline-story--three article {
  min-height: 330px;
  padding: 1.5rem 1.5rem 1.5rem 4rem;
}
.timeline-story--three h3 {
  font-size: clamp(2rem, 3.2vw, 3.1rem);
  line-height: .98;
}

/* Premium scale and rhythm refinements. */
.section {
  padding-block: clamp(4rem, 8vw, 7rem);
}
.section-heading {
  margin-bottom: clamp(1.75rem, 4vw, 3.25rem);
}
.card,
.block-art-card,
.race-media-card,
.partner-card,
.event-status-card {
  backdrop-filter: blur(8px);
}
.button {
  position: relative;
  overflow: hidden;
}
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 520ms var(--ease);
}
.button:hover::before,
.button:focus-visible::before {
  transform: translateX(130%);
}
.button > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 1080px) {
  .page-hero__media { max-width: 420px; }
  .race-flow-preview { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .media-story,
  .media-story--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
    gap: 2.5rem;
  }
  .timeline-story--three {
    grid-template-columns: 1fr;
  }
  .timeline-story--three article {
    min-height: 0;
  }
}

@media (max-width: 820px) {
  .page-hero__media {
    width: min(100%, 520px);
    max-width: 520px;
    justify-self: start;
  }
  .media-frame__image,
  .hero-home .media-frame__image {
    max-height: none;
  }
  .brand-strike__image {
    aspect-ratio: 16 / 9;
  }
  .split-media img {
    min-height: 0;
    max-height: 420px;
  }
  .race-flow-preview {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .block-art-card__body,
  .block-art-grid--compact .block-art-card__body {
    min-height: 0;
  }
  .media-story,
  .media-story--reverse {
    grid-template-columns: 1fr;
  }
  .media-story--reverse .race-media-card {
    order: 2;
  }
  .race-media-card {
    width: min(100%, 430px);
    justify-self: center;
  }
  .partner-card--online {
    grid-template-columns: 1fr;
  }
  .partner-card__media--online {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .partner-card__media--online img {
    min-height: 0;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .origin-story__grid {
    grid-template-columns: 1fr;
  }
  .origin-story__copy h2 {
    max-width: 11ch;
  }
  .origin-story__portrait {
    width: min(100%, 620px);
  }
}

@media (max-width: 560px) {
  .page-hero__grid {
    padding-block: 3rem 3.4rem;
  }
  .brand-strike__image {
    aspect-ratio: 4 / 3;
  }
  .race-flow-preview {
    gap: .7rem;
    padding-inline: .05rem;
  }
  .flow-node {
    flex-basis: 78vw;
    min-height: 186px;
  }
  .flow-node__media {
    height: 88px;
  }
  .block-art-card__media img {
    aspect-ratio: 16 / 10;
  }
  .race-media-card {
    border-radius: var(--radius-md);
  }
  .race-media-card__stage {
    aspect-ratio: 4 / 5;
  }
  .race-media-card__source {
    left: .65rem;
    top: .65rem;
    font-size: .61rem;
  }
  .media-control {
    right: .65rem;
    bottom: .65rem;
  }
  .origin-story__copy h2 {
    font-size: clamp(3.25rem, 15vw, 5.2rem);
  }
  .timeline-story--three article {
    padding: 1.25rem 1.25rem 1.25rem 3.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .block-art-card::after,
  .race-media-card::after,
  .partner-card--online::after,
  .button::before {
    display: none;
  }
  .flow-node:hover,
  .block-art-card:hover {
    transform: none;
  }
}

@media print {
  .race-media-card {
    display: none !important;
  }
}

/* Balanced local training presentation: authentic media supports the story without taking over the page. */
.partner-card--local {
  grid-template-columns: minmax(320px, .86fr) minmax(0, 1.14fr);
  grid-template-rows: none;
  align-items: stretch;
}
.partner-card--local .partner-card__media {
  min-height: 0;
  border-right: 1px solid var(--line);
}
.partner-card--local .partner-card__media img {
  height: 100%;
  min-height: 520px;
  object-position: center 48%;
}
.partner-card--local .partner-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 820px) {
  .partner-card--local {
    grid-template-columns: 1fr;
  }
  .partner-card--local .partner-card__media {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .partner-card--local .partner-card__media img {
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 10;
    object-position: center 48%;
  }
}


/* ROUTE56 owner review pass: media sizing, bottom-anchored sequence art, icon bounds, and true button centering. */

/* Any inline utility icon must have an explicit box. This prevents intrinsic SVG
   dimensions from taking over a page when a component misses a local rule. */
svg.icon {
  inline-size: 1rem;
  block-size: 1rem;
  min-inline-size: 1rem;
  max-inline-size: 1rem;
  max-block-size: 1rem;
  flex: 0 0 1rem;
}
.header-cta svg.icon { inline-size: 1.05rem; block-size: 1.05rem; min-inline-size: 1.05rem; max-inline-size: 1.05rem; max-block-size: 1.05rem; flex-basis: 1.05rem; }
.mobile-menu nav svg.icon { inline-size: 1.15rem; block-size: 1.15rem; min-inline-size: 1.15rem; max-inline-size: 1.15rem; max-block-size: 1.15rem; flex-basis: 1.15rem; }
.social-links a { inline-size: 40px; block-size: 40px; }
.social-links svg.icon { inline-size: .95rem; block-size: .95rem; min-inline-size: .95rem; max-inline-size: .95rem; max-block-size: .95rem; flex-basis: .95rem; }
.text-link { display: inline-flex; align-items: center; gap: .45rem; }
.text-link svg.icon,
.results-fallback svg.icon { inline-size: .95rem; block-size: .95rem; min-inline-size: .95rem; max-inline-size: .95rem; max-block-size: .95rem; flex-basis: .95rem; }
.results-fallback a { display: inline-flex; align-items: center; gap: .45rem; }
.race-media-card__source svg.icon { inline-size: .85rem; block-size: .85rem; min-inline-size: .85rem; max-inline-size: .85rem; max-block-size: .85rem; flex-basis: .85rem; }
.embed-consent > svg.icon { inline-size: 2.6rem; block-size: 2.6rem; min-inline-size: 2.6rem; max-inline-size: 2.6rem; max-block-size: 2.6rem; flex-basis: 2.6rem; }
.completion-mark svg.icon { inline-size: 42%; block-size: auto; min-inline-size: 0; max-inline-size: 42%; max-block-size: none; flex-basis: auto; }

/* Keep every CTA label on the optical center line. The arrow is positioned
   independently so it does not push the words left of center. */
.button {
  position: relative;
  justify-content: center;
  text-align: center;
  padding-inline: 3rem;
}
.button > span:first-child {
  display: block;
  width: 100%;
  text-align: center;
}
.button > svg.icon {
  position: absolute;
  right: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
}
.button:hover > svg.icon { transform: translate(3px, -50%); }

/* Remove all legacy video controls. Videos are purposeful ambient loops. */
.media-control,
video[data-race-video]::-webkit-media-controls { display: none !important; }
video[data-race-video] { pointer-events: none; }

/* Desktop media is editorial, not a vertical social-media wall. */
@media (min-width: 821px) {
  .media-story,
  .media-story--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 500px);
    gap: clamp(2.5rem, 5vw, 5.5rem);
  }
  .media-story--reverse { grid-template-columns: minmax(360px, 500px) minmax(0, 1fr); }
  .race-media-card { width: min(100%, 500px); }
  .race-media-card__stage {
    aspect-ratio: 16 / 9;
    max-height: 282px;
  }
  .race-media-card__body { padding: 1rem 1.15rem 1.1rem; }
  .race-media-card__body h3 { font-size: clamp(1.55rem, 2.1vw, 2rem); }
  .race-media-card__body > p { margin-bottom: .7rem; font-size: .96rem; }
  .race-media-card__credit { margin-top: .6rem !important; }

  /* All seven sequence frames use one bottom edge and one crop behavior. */
  .flow-node { min-height: 330px; }
  .flow-node__media { height: 240px; flex: 0 0 240px; }
  .flow-node__media img,
  .flow-node--run-one .flow-node__media img,
  .flow-node--run-two .flow-node__media img,
  .flow-node--run-three .flow-node__media img,
  .flow-node--intake .flow-node__media img,
  .flow-node--clutch .flow-node__media img,
  .flow-node--redline .flow-node__media img,
  .flow-node--finish .flow-node__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
  }
  .flow-node__body { min-height: 90px; padding: .8rem .85rem .9rem; }
  .flow-node::after { top: 120px; }

  /* Campaign art stays contained even if intrinsic image dimensions change. */
  .block-art-card__media { height: clamp(190px, 15vw, 225px); }
  .block-art-card__media img {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 18%;
  }
  .brand-strike__image { max-height: 420px; }
  .timing-feature__visual > img,
  .finish-feature__media img,
  .split-media--poster img,
  .split-media img,
  .event-status-card__media img { max-height: 440px; }
}

/* Preserve the owner-approved mobile composition while bounding social icons
   and keeping full-width CTA labels truly centered. */
@media (max-width: 820px) {
  .social-links a { inline-size: 38px; block-size: 38px; }
  .social-links svg.icon { inline-size: .9rem; block-size: .9rem; min-inline-size: .9rem; max-inline-size: .9rem; max-block-size: .9rem; flex-basis: .9rem; }
  .button { padding-inline: 2.75rem; }
  .race-media-card__stage { aspect-ratio: 4 / 5; }
}

@media (max-width: 420px) {
  .button { padding-inline: 2.5rem; font-size: .78rem; }
  .button > svg.icon { right: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  video[data-race-video] { animation: none; }
}

/* Prevent long hero copy from forcing a one-column mobile grid wider than the viewport. */
.page-hero__copy,
.page-hero__media {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 820px) {
  .page-hero__grid {
    width: 100%;
    min-width: 0;
  }
  .page-hero__copy,
  .page-hero__media,
  .page-hero__copy .button-row,
  .page-hero__copy .button {
    min-width: 0;
    max-width: 100%;
  }
}

/* ========================================================================== 
   ROUTE56 R6 — cache-busted owner refinement
   Desktop media scale, ambient telemetry, audio controls, founder story,
   intrinsic icon bounds, and optically centered CTAs.
   ========================================================================== */

/* The HTML now carries dimensions too; these rules are the visual ceiling. */
svg.icon {
  inline-size: 1rem !important;
  block-size: 1rem !important;
  min-inline-size: 1rem !important;
  max-inline-size: 1rem !important;
  min-block-size: 1rem !important;
  max-block-size: 1rem !important;
  flex: 0 0 1rem !important;
}
.social-links a {
  inline-size: 38px;
  block-size: 38px;
}
.social-links svg.icon {
  inline-size: .9rem !important;
  block-size: .9rem !important;
  min-inline-size: .9rem !important;
  max-inline-size: .9rem !important;
  min-block-size: .9rem !important;
  max-block-size: .9rem !important;
  flex-basis: .9rem !important;
}
.race-media-card__source svg.icon,
.text-link svg.icon,
.results-fallback svg.icon {
  inline-size: .85rem !important;
  block-size: .85rem !important;
  min-inline-size: .85rem !important;
  max-inline-size: .85rem !important;
  min-block-size: .85rem !important;
  max-block-size: .85rem !important;
  flex-basis: .85rem !important;
}
.embed-consent > svg.icon {
  inline-size: 2.6rem !important;
  block-size: 2.6rem !important;
  min-inline-size: 2.6rem !important;
  max-inline-size: 2.6rem !important;
  min-block-size: 2.6rem !important;
  max-block-size: 2.6rem !important;
  flex-basis: 2.6rem !important;
}

/* True centering: the label occupies the center track; the arrow overlays the
   end of that same track instead of participating in the label's width. */
.button {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  gap: 0;
  padding-inline: 3.15rem;
  text-align: center;
}
.button > span:first-child {
  grid-area: 1 / 1;
  justify-self: center;
  width: auto;
  max-width: 100%;
  text-align: center;
}
.button > svg.icon {
  position: static;
  grid-area: 1 / 1;
  justify-self: end;
  transform: none;
}
.button:hover > svg.icon,
.button:focus-visible > svg.icon {
  transform: translateX(3px);
}

/* Owner-requested audio UI: videos remain autoplaying, looping, and muted by
   default. The range control appears only after the visitor unmutes. */
.media-audio-controls {
  position: absolute;
  z-index: 7;
  right: .75rem;
  bottom: .75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .45rem;
  pointer-events: auto;
}
.media-audio-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  min-height: 38px;
  padding: .5rem .7rem;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: var(--radius-pill);
  background: rgba(5,6,9,.84);
  color: #fff;
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(0,0,0,.42);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: border-color var(--fast) ease, background var(--fast) ease, transform var(--fast) var(--ease);
}
.media-audio-toggle:hover,
.media-audio-toggle:focus-visible {
  border-color: rgba(255,255,255,.68);
  background: rgba(18,20,25,.96);
  transform: translateY(-1px);
}
.media-audio-toggle[aria-pressed="true"] {
  border-color: rgba(255,200,87,.62);
  color: var(--amber);
}
.media-audio-toggle__icon {
  color: currentColor;
}
.media-audio-toggle[aria-pressed="false"] [data-speaker-wave] { display: none; }
.media-audio-toggle[aria-pressed="true"] [data-speaker-mute] { display: none; }
.media-volume-control {
  display: grid;
  place-items: center;
  width: 150px;
  min-height: 34px;
  padding: .45rem .65rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-pill);
  background: rgba(5,6,9,.88);
  box-shadow: 0 10px 28px rgba(0,0,0,.38);
  backdrop-filter: blur(12px);
}
.media-volume-control[hidden] { display: none !important; }
.media-volume-control input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--amber);
  cursor: pointer;
}
.race-media-card video[data-race-video] {
  pointer-events: none;
}

/* Route-line motion fills otherwise empty dark fields without covering copy. */
.media-story,
.origin-story__grid,
.timing-feature,
.split,
.event-status-card,
.partner-card {
  position: relative;
  isolation: isolate;
}
.media-story::before,
.origin-story__grid::before,
.timing-feature::before,
.split::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -2.25rem -4vw;
  pointer-events: none;
  opacity: .72;
  background:
    radial-gradient(circle at 78% 35%, rgba(232,23,63,.17), transparent 25%),
    radial-gradient(circle at 64% 68%, rgba(255,200,87,.07), transparent 20%),
    repeating-linear-gradient(90deg, transparent 0 72px, rgba(255,255,255,.022) 73px 74px),
    repeating-linear-gradient(0deg, transparent 0 72px, rgba(255,255,255,.016) 73px 74px);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.9) 20%, #000 100%);
  animation: route56-grid-drift 16s linear infinite alternate;
}
.media-story::after,
.origin-story__grid::after,
.timing-feature::after,
.split::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(46vw, 620px);
  height: min(46vw, 620px);
  right: -8%;
  top: 50%;
  translate: 0 -50%;
  pointer-events: none;
  opacity: .22;
  border: 1px solid rgba(232,23,63,.34);
  border-radius: 50%;
  box-shadow:
    0 0 0 38px rgba(232,23,63,.035),
    0 0 0 82px rgba(255,255,255,.018),
    0 0 90px rgba(232,23,63,.14);
  background:
    conic-gradient(from 30deg, transparent 0 20%, rgba(232,23,63,.28) 20.5% 21%, transparent 21.5% 48%, rgba(255,200,87,.16) 48.5% 49%, transparent 49.5% 100%);
  animation: route56-telemetry-spin 28s linear infinite;
}
.media-story--reverse::before {
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.9) 80%, transparent 100%);
}
.media-story--reverse::after {
  left: -8%;
  right: auto;
}
.media-story > *,
.origin-story__grid > *,
.timing-feature > *,
.split > * {
  position: relative;
  z-index: 1;
}
@keyframes route56-grid-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 28px -18px, -24px 22px, 72px 0, 0 72px; }
}
@keyframes route56-telemetry-spin {
  to { transform: rotate(360deg); }
}

/* Founder panel replaces the Pam portrait so authorship is unmistakable. */
.origin-story__grid--founder {
  grid-template-columns: minmax(0, 1.15fr) minmax(290px, .72fr);
}
.founder-plate {
  position: relative;
  min-height: 390px;
  display: grid;
  align-content: end;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid rgba(232,23,63,.36);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(232,23,63,.15), rgba(255,255,255,.025) 55%, rgba(255,200,87,.05)),
    #07080b;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(232,23,63,.12);
}
.founder-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(122deg, transparent 0 42%, rgba(232,23,63,.14) 42.2% 42.7%, transparent 43% 100%),
    repeating-linear-gradient(90deg, transparent 0 44px, rgba(255,255,255,.025) 45px 46px);
  animation: route56-grid-drift 14s linear infinite alternate;
}
.founder-plate__index {
  position: absolute;
  top: -.14em;
  right: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.12);
  font-family: var(--display);
  font-size: clamp(10rem, 18vw, 16rem);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.08em;
  user-select: none;
}
.founder-plate > *:not(.founder-plate__index) {
  position: relative;
  z-index: 1;
}
.founder-plate h3 {
  max-width: 10ch;
  margin-bottom: 1rem;
  font-size: clamp(2.5rem, 4vw, 4rem);
}
.founder-plate ul {
  display: grid;
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.founder-plate li {
  position: relative;
  padding-left: 1.05rem;
  color: #d4d6dc;
}
.founder-plate li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: .42rem;
  height: 1px;
  background: var(--amber);
  box-shadow: 0 0 10px rgba(255,200,87,.55);
}
.story-note {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(255,200,87,.22);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255,200,87,.08), rgba(255,255,255,.018));
}
.story-note__label {
  color: var(--amber);
  font-family: var(--display);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.story-note p { margin: 0; color: #d6d8de; }

/* The user's mobile composition remains intact. Desktop media is deliberately
   smaller and more editorial; campaign art no longer becomes a full-page wall. */
@media (min-width: 821px) {
  .page-hero__media {
    width: min(100%, 390px);
    max-width: 390px;
  }
  .media-frame__image { max-height: 460px; }
  .hero-home .media-frame__image { max-height: 500px; }

  .media-story,
  .media-story--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: clamp(2.4rem, 5vw, 5rem);
  }
  .media-story--reverse {
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  }
  .race-media-card {
    width: min(100%, 420px);
    max-width: 420px;
  }
  .race-media-card__stage {
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 236px;
  }
  .race-media-card__body {
    padding: .95rem 1.05rem 1rem;
  }
  .race-media-card__body h3 {
    font-size: clamp(1.45rem, 1.8vw, 1.85rem);
  }
  .race-media-card__body > p {
    margin-bottom: .55rem;
    font-size: .92rem;
  }
  .race-media-card__credit { margin-top: .5rem !important; }

  .block-art-grid {
    width: min(100%, 980px);
    margin-inline: auto;
  }
  .block-art-card__media {
    height: clamp(128px, 9.5vw, 152px);
  }
  .block-art-card__media img {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 18%;
  }
  .block-art-card__body,
  .block-art-grid--compact .block-art-card__body {
    min-height: 220px;
    padding: 1rem 1.05rem 1.1rem;
  }
  .block-art-card__body h3 {
    font-size: clamp(1.7rem, 2.2vw, 2.3rem);
  }

  .brand-strike__figure {
    width: min(100%, 1020px);
    margin-inline: auto;
  }
  .brand-strike__image {
    max-height: 320px;
    aspect-ratio: 16 / 6.2;
  }

  .timing-feature__visual {
    width: min(100%, 330px);
  }
  .timing-feature__visual > img {
    max-height: 360px;
  }
  .finish-feature__media,
  .split-media,
  .event-status-card__media {
    width: min(100%, 360px);
    max-width: 360px;
    justify-self: end;
  }
  .finish-feature__media img,
  .split-media img,
  .split-media--poster img,
  .event-status-card__media img {
    max-height: 335px;
  }
  .partner-card__media,
  .partner-card__media--online {
    min-height: 0;
  }
  .partner-card__media img,
  .partner-card__media--online img {
    min-height: 0;
    max-height: 360px;
  }

  /* Keep all seven sequence windows identical and anchored to the same lower edge. */
  .flow-node__media {
    height: 240px;
    flex: 0 0 240px;
  }
  .flow-node__media img,
  .flow-node--run-one .flow-node__media img,
  .flow-node--run-two .flow-node__media img,
  .flow-node--run-three .flow-node__media img,
  .flow-node--intake .flow-node__media img,
  .flow-node--clutch .flow-node__media img,
  .flow-node--redline .flow-node__media img,
  .flow-node--finish .flow-node__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom !important;
  }
}

@media (max-width: 820px) {
  .media-story::before,
  .origin-story__grid::before,
  .timing-feature::before,
  .split::before {
    inset: -1rem;
    opacity: .36;
  }
  .media-story::after,
  .origin-story__grid::after,
  .timing-feature::after,
  .split::after {
    width: 360px;
    height: 360px;
    right: -180px;
    opacity: .12;
  }
  .media-story--reverse::after { left: -180px; }
  .origin-story__grid--founder { grid-template-columns: 1fr; }
  .founder-plate { min-height: 340px; }
  .story-note { grid-template-columns: 1fr; gap: .35rem; }
  .media-audio-toggle {
    min-height: 36px;
    padding: .48rem .62rem;
    font-size: .64rem;
  }
  .media-volume-control { width: 132px; }
  .button { padding-inline: 2.8rem; }
}

@media (max-width: 420px) {
  .button { padding-inline: 2.55rem; }
  .media-audio-controls { right: .55rem; bottom: .55rem; }
  .media-audio-toggle span { display: none; }
  .media-audio-toggle { width: 38px; padding-inline: 0; }
  .media-volume-control { width: 118px; }
}

@media (prefers-reduced-motion: reduce) {
  .media-story::before,
  .media-story::after,
  .origin-story__grid::before,
  .origin-story__grid::after,
  .timing-feature::before,
  .timing-feature::after,
  .split::before,
  .split::after,
  .founder-plate::before {
    animation: none !important;
  }
}

/* R6 overflow guard: ambient graphics stay inside their component width. */
.media-story::before,
.origin-story__grid::before,
.timing-feature::before,
.split::before {
  left: 0;
  right: 0;
}
.media-story::after,
.origin-story__grid::after,
.timing-feature::after,
.split::after {
  right: 0;
}
.media-story--reverse::after {
  left: 0;
  right: auto;
}
@media (max-width: 820px) {
  .media-story::before,
  .origin-story__grid::before,
  .timing-feature::before,
  .split::before {
    left: 0;
    right: 0;
  }
  .media-story::after,
  .origin-story__grid::after,
  .timing-feature::after,
  .split::after {
    right: 0;
  }
  .media-story--reverse::after { left: 0; }
}

/* ========================================================================== 
   ROUTE56 R7 — owner-directed frame fidelity and unobtrusive video controls
   ========================================================================== */

/* The new owner-uploaded Intake, Clutch, and Redline photographs are used only
   in the three Home Block cards. A softened full-bleed copy fills the stage,
   while the complete photograph remains visible above it. */
.block-art-card__media--owner {
  isolation: isolate;
  display: grid;
  place-items: center;
  background: #050609;
}
.block-art-card__media--owner::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -10%;
  background:
    linear-gradient(180deg, rgba(5,6,9,.08), rgba(5,6,9,.46)),
    var(--block-card-art) center / cover no-repeat;
  filter: blur(12px) saturate(.9) brightness(.62);
  transform: scale(1.08);
  pointer-events: none;
}
.block-art-card__media--owner::after { z-index: 2; }
.block-art-card__media--owner img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center !important;
  transform-origin: center bottom;
  filter: saturate(1.02) contrast(1.03);
}
.block-art-card:hover .block-art-card__media--owner img {
  transform: scale(1.012);
}

/* Text-bearing Block and Off Ramp art must never lose letters to a crop. The
   foreground is fully contained and bottom anchored; a blurred duplicate fills
   the frame so the media window still reads as complete edge-to-edge artwork. */
.flow-node--graphic .flow-node__media {
  isolation: isolate;
  background: #050609;
}
.flow-node--graphic .flow-node__media::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -8%;
  background:
    linear-gradient(180deg, rgba(5,6,9,.08), rgba(5,6,9,.42)),
    var(--flow-art) center / cover no-repeat;
  filter: blur(9px) saturate(.88) brightness(.58);
  transform: scale(1.08);
  pointer-events: none;
}
.flow-node--graphic .flow-node__media::after { z-index: 2; }
.flow-node--graphic .flow-node__media img,
.flow-node--intake .flow-node__media img,
.flow-node--clutch .flow-node__media img,
.flow-node--redline .flow-node__media img,
.flow-node--finish .flow-node__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center bottom !important;
  padding: .14rem .14rem 0;
  transform-origin: center bottom;
}
.flow-node--graphic:hover .flow-node__media img {
  transform: none;
  filter: saturate(1.03) contrast(1.06);
}
.flow-node--run .flow-node__media img {
  transform-origin: center bottom;
}

/* Show each source video in full. The poster becomes a dim, blurred backdrop
   instead of cropping the vertical footage to fill a landscape stage. */
.race-media-card__stage {
  isolation: isolate;
  background: #050609;
}
.race-media-card__stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -9%;
  background:
    linear-gradient(180deg, rgba(5,6,9,.18), rgba(5,6,9,.46)),
    var(--video-poster) center / cover no-repeat;
  filter: blur(16px) saturate(.84) brightness(.58);
  transform: scale(1.1);
  pointer-events: none;
}
.race-media-card__stage::after { z-index: 2; }
.race-media-card video[data-race-video] {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent;
}

/* Audio controls are discoverable on entry, then disappear one second after
   the last mouse movement or tap. They return on pointer movement, tap, or
   keyboard focus. The volume control still exists only while audio is unmuted. */
.media-audio-controls {
  transition: opacity 120ms ease, transform 120ms var(--ease);
}
.js .media-audio-controls {
  opacity: 0 !important;
  transform: translateY(6px);
  pointer-events: none !important;
}
.js .race-media-card.is-media-controls-visible .media-audio-controls,
.js .race-media-card:focus-within .media-audio-controls {
  opacity: 1 !important;
  transform: translateY(0);
  pointer-events: auto !important;
}
.no-js .media-audio-controls {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (min-width: 821px) {
  .block-art-card__media--owner {
    height: clamp(170px, 11vw, 195px);
  }
}

@media (max-width: 820px) {
  .block-art-card__media--owner img {
    object-fit: contain !important;
  }
  .flow-node--graphic .flow-node__media img {
    object-fit: contain !important;
    object-position: center bottom !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .block-art-card__media--owner::before,
  .flow-node--graphic .flow-node__media::before,
  .race-media-card__stage::before {
    filter: none;
    transform: none;
  }
  .media-audio-controls { transition: none; }
}


/* ========================================================================== 
   ROUTE56 R8 — final owner-directed media fidelity
   ========================================================================== */

/* The exact owner uploads named Intake.jpg, The Clutch.jpg, and Redline.jpg
   are composited into 16:9 production frames and used only in these three
   Home cards. Their equipment remains visible without relying on a fragile
   object-position crop. */
.block-art-card__media--owner {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: auto !important;
  min-block-size: 0 !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden;
  background: #050609 !important;
}
.block-art-card__media--owner::before { display: none !important; }
.block-art-card__media--owner::after {
  z-index: 2;
  background: linear-gradient(180deg, rgba(5,6,9,.02), rgba(5,6,9,.12));
}
.block-art-card__media--owner img {
  position: absolute !important;
  z-index: 1;
  inset: 0;
  inline-size: 100% !important;
  block-size: 100% !important;
  max-block-size: none !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  transform: none !important;
  filter: none !important;
}
.block-art-card:hover .block-art-card__media--owner img,
.block-art-card:focus-within .block-art-card__media--owner img {
  transform: none !important;
}

/* Sequence graphics carry a built-in safe area. The complete title art stays
   visible at every breakpoint while the stage remains visually full. */
.flow-node--graphic .flow-node__media {
  background-color: #050609;
  background-image: var(--flow-art);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.flow-node--graphic .flow-node__media::before { display: none !important; }
.flow-node--graphic .flow-node__media img,
.flow-node--intake .flow-node__media img,
.flow-node--clutch .flow-node__media img,
.flow-node--redline .flow-node__media img,
.flow-node--finish .flow-node__media img {
  position: relative !important;
  z-index: 1;
  inline-size: 100% !important;
  block-size: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  padding: 0 !important;
  transform: none !important;
  transform-origin: center bottom !important;
}
.flow-node--graphic:hover .flow-node__media img,
.flow-node--graphic:focus-within .flow-node__media img {
  transform: none !important;
}

/* Every self-hosted ROUTE56 clip is shown in full. The blurred poster fills
   unused side space while the source video itself is never cropped. */
.race-media-card__source { display: none !important; }
.race-media-card__stage {
  isolation: isolate;
  background: #050609 !important;
}
.race-media-card video[data-race-video] {
  position: relative !important;
  z-index: 1;
  display: block;
  inline-size: 100% !important;
  block-size: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
}

/* Audio controls appear for discovery and interaction, then fade after one
   second. They return on pointer movement, tap, or keyboard focus. */
.media-audio-controls {
  transition: opacity 140ms ease, transform 140ms var(--ease) !important;
}
.js .media-audio-controls {
  opacity: 0 !important;
  transform: translateY(6px) !important;
  pointer-events: none !important;
}
.js .race-media-card.is-media-controls-visible .media-audio-controls,
.js .race-media-card:focus-within .media-audio-controls {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
.media-volume-control[hidden] { display: none !important; }

@media (min-width: 821px) {
  .block-art-card__media--owner {
    block-size: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
}

@media (max-width: 820px) {
  .block-art-card__media--owner {
    block-size: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
  .flow-node--graphic .flow-node__media img {
    object-fit: contain !important;
    object-position: center bottom !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-audio-controls { transition: none !important; }
}


/* ========================================================================== 
   ROUTE56 R9 — text-safe framed artwork
   Lettered artwork must fill its component without sacrificing any title,
   number, logo, or copy. A dimmed cover copy fills the stage; the complete
   image is contained above it. This applies consistently across the site.
   ========================================================================== */
.text-safe-frame {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  background: #050609 !important;
}
.text-safe-frame::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -9%;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(5,6,9,.16), rgba(5,6,9,.52)),
    var(--text-safe-art) center / cover no-repeat;
  filter: blur(14px) saturate(.84) brightness(.52);
  transform: scale(1.1);
  pointer-events: none;
}
.text-safe-frame > img {
  position: relative !important;
  z-index: 1 !important;
  display: block;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  transform: none !important;
}
.text-safe-frame > img:hover,
.text-safe-frame:focus-within > img { transform: none !important; }
.media-frame.text-safe-frame::after,
.block-art-card__media.text-safe-frame::after { z-index: 2; }
.media-frame.text-safe-frame > .media-frame__corner,
.timing-feature__visual.text-safe-frame > .timing-feature__readout { z-index: 4; }

/* The wide identity artwork keeps its complete logo and tag line at every
   breakpoint while the atmospheric duplicate fills the wider crop. */
.brand-strike__media {
  inline-size: 100%;
  aspect-ratio: 16 / 6.2;
  overflow: hidden;
}
.brand-strike__media > .brand-strike__image {
  inline-size: 100% !important;
  block-size: 100% !important;
  max-block-size: none !important;
  aspect-ratio: auto !important;
  padding: clamp(.2rem, .45vw, .45rem);
}

/* Hero frames with embedded lettering or shirt graphics. */
.media-frame.text-safe-frame > .media-frame__image {
  inline-size: 100% !important;
  block-size: 100% !important;
  padding: clamp(.25rem, .6vw, .55rem);
}

/* Pit Stop: preserve THE PIT STOP and the full bottle while retaining the
   existing readout overlay and fixed card proportions. */
.timing-feature__visual.text-safe-frame > img {
  inline-size: 100% !important;
  block-size: 100% !important;
  max-block-size: none !important;
  padding: clamp(.35rem, .75vw, .65rem);
}

/* Race-page Block posters and Off Ramp artwork. */
.block-art-card__media.text-safe-frame > img {
  inline-size: 100% !important;
  block-size: 100% !important;
  max-block-size: none !important;
  aspect-ratio: auto !important;
  padding: .3rem;
}
.finish-feature__media.text-safe-frame > img,
.split-media.text-safe-frame > img {
  inline-size: 100% !important;
  block-size: 100% !important;
  max-block-size: none !important;
  padding: clamp(.3rem, .65vw, .55rem);
}

/* HIIT56 Online poster and merchandise art both contain important text. */
.partner-card__media--online.text-safe-frame > img {
  inline-size: 100% !important;
  block-size: 100% !important;
  min-block-size: 0 !important;
  max-block-size: none !important;
  padding: clamp(.4rem, .8vw, .7rem);
}
.product-gallery__main.text-safe-frame > img {
  inline-size: 100% !important;
  block-size: 100% !important;
  padding: clamp(.4rem, .8vw, .75rem);
}
.product-gallery__thumbs img {
  object-fit: contain !important;
  object-position: center !important;
  padding: .18rem;
  background: #050609;
}

@media (max-width: 820px) {
  .brand-strike__media { aspect-ratio: 16 / 10; }
  .timing-feature__visual.text-safe-frame > img,
  .media-frame.text-safe-frame > .media-frame__image,
  .partner-card__media--online.text-safe-frame > img { padding: .35rem; }
}
@media (max-width: 560px) {
  .brand-strike__media { aspect-ratio: 4 / 3; }
  .text-safe-frame::before { filter: blur(11px) saturate(.82) brightness(.5); }
}
@media (prefers-reduced-motion: reduce) {
  .text-safe-frame::before { transform: scale(1.06); }
}