/* ============================================================
   site.css — Forge Hyrox, page-specific layout.
   Reuses framework components; adds only what's unique here.
   Custom classes prefixed .fx-. Every value still a token.
   ============================================================ */

/* Heavy, condensed, uppercase display — gym-poster impact. */
h1, h2, h3, .fx-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  text-transform: uppercase;
}
.nav__brand { font-family: var(--font-display); font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; }
.nav__brand .fx-mark { color: var(--color-brand); }

/* Primary buttons: dark ink on ember so it always passes contrast. */
.btn--primary { color: var(--forge-ink); font-weight: 700; }
.btn { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }

/* Eyebrow: mono, ember, with a hard tick — reads like a label on a machine. */
.eyebrow { font-family: var(--font-mono); color: var(--color-brand); letter-spacing: 0.12em;
  display: inline-flex; align-items: center; gap: var(--space-2); }
.eyebrow::before { content: ""; width: 0.75rem; height: 0.75rem; background: var(--color-brand); }

/* ---- Hero: the race clock ---------------------------------- */
.fx-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--color-border);
  background:
    radial-gradient(80% 60% at 70% 0%, rgba(255,90,31,0.16) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 9px),
    var(--color-bg); }
.fx-hero__inner { display: grid; gap: var(--space-8); padding-block: var(--space-24) var(--space-16); justify-items: start; }
.fx-clock { font-family: var(--font-mono); font-weight: 700; font-size: clamp(2.5rem, 9vw, 5rem);
  color: var(--color-brand); letter-spacing: 0.02em; line-height: 1; }
.fx-clock__colon { animation: fx-blink 1.1s steps(1) infinite; }
.fx-clock__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.22em;
  color: var(--color-text-muted); text-transform: uppercase; margin-top: var(--space-2); }
@keyframes fx-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .fx-clock__colon { animation: none; } }
.fx-hero__title { font-size: clamp(3rem, 10vw, 6rem); margin: var(--space-2) 0; max-width: 14ch; }
.fx-hero__title em { font-style: normal; color: var(--color-brand); }
.fx-hero__lead { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 40ch; }
.fx-hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }

/* Stat strip — data face, hard dividers. */
.fx-stats { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-12);
  padding-top: var(--space-8); border-top: 1px solid var(--color-border); width: 100%; }
.fx-stat__num { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); }
.fx-stat__label { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---- Section scaffolding ----------------------------------- */
.fx-section { padding-block: var(--space-16); }
.fx-section__head { margin-bottom: var(--space-12); }
.fx-section__head h2 { font-size: clamp(2rem, 5vw, var(--text-3xl)); margin-top: var(--space-3); }
.fx-section__head p { color: var(--color-text-muted); margin-top: var(--space-3); max-width: var(--max-width-prose); }

/* ---- The 8 stations: numbered ladder ----------------------- */
.fx-stations { display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); background: var(--color-border);
  border: 1px solid var(--color-border); }
.fx-station { background: var(--color-surface); padding: var(--space-6); display: grid; gap: var(--space-2);
  align-content: start; transition: background var(--transition-fast); }
.fx-station:hover { background: var(--color-surface-2); }
.fx-station__no { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-brand); }
.fx-station__name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--text-lg);
  letter-spacing: -0.01em; }
.fx-station__metric { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-muted); }
@media (max-width: 860px) { .fx-stations { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .fx-stations { grid-template-columns: 1fr; } }
.fx-run { font-family: var(--font-mono); color: var(--color-text-muted); font-size: var(--text-sm);
  margin-top: var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2); }
.fx-run strong { color: var(--color-brand); }

/* ---- Pricing / programmes ---------------------------------- */
.fx-plans { display: grid; gap: var(--space-6); grid-template-columns: repeat(3, 1fr); align-items: start; }
@media (max-width: 820px) { .fx-plans { grid-template-columns: 1fr; } }
.fx-plan { display: grid; gap: var(--space-4); align-content: start; }
.fx-plan--featured { border-color: var(--color-brand); position: relative; }
.fx-plan--featured::before { content: "Most popular"; position: absolute; top: 0; right: 0;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--color-brand); color: var(--forge-ink); padding: var(--space-1) var(--space-3); border-radius: 0 var(--radius-md) 0 var(--radius-md); }
.fx-plan__name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--text-xl); }
.fx-plan__price { font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: 700; color: var(--color-text); }
.fx-plan__price span { font-size: var(--text-sm); color: var(--color-text-muted); }
.fx-plan__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.fx-plan__list li { display: flex; gap: var(--space-2); align-items: baseline; }
.fx-plan__list .ico { color: var(--color-brand); }

/* ---- Coaches ----------------------------------------------- */
.fx-coaches { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .fx-coaches { grid-template-columns: 1fr; } }
.fx-coach { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; }
.fx-coach__avatar { width: 4.5rem; height: 4.5rem; display: grid; place-items: center; border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 900; font-size: var(--text-2xl); color: var(--forge-ink); background: var(--forge-heat); }
.fx-coach__name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--text-lg); }
.fx-coach__role { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--color-brand); text-transform: uppercase; }
.fx-coach__bio { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }

/* ---- Trial / booking split --------------------------------- */
.fx-trial { display: grid; gap: var(--space-12); grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 900px) { .fx-trial { grid-template-columns: 1fr; } }

/* ---- Visit ------------------------------------------------- */
.fx-visit { display: grid; gap: var(--space-12); grid-template-columns: 1fr 1.2fr; align-items: start; }
@media (max-width: 820px) { .fx-visit { grid-template-columns: 1fr; } }
.fx-hours { display: grid; gap: var(--space-2); font-size: var(--text-sm); font-family: var(--font-mono); }
.fx-hours div { display: flex; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-1);
  border-bottom: 1px solid var(--color-border); }
.fx-hours dd { margin: 0; color: var(--color-text-muted); }

/* ---- Motion: pre-hide animated elements, JS reveals them -----
   `.anim` is added to <html> by the head guard ONLY when motion is
   welcome (not prefers-reduced-motion). scripts/motion.js then
   reveals these. With no JS, a script error, or reduced motion,
   `.anim` is absent and nothing here applies — full content shows,
   no layout shift (opacity only; elements keep their space). */
html.anim [data-reveal],
html.anim [data-reveal-group] > *,
html.anim [data-reveal-load] > * { opacity: 0; }