/* =============================================================
   ARENA · by Gosu Academy
   Premium scroll-driven landing · pure black, video-blended
   ============================================================= */

/* -------------------------------------------------------------
   RESET · TOKENS
   ------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Palette — pure black, warm amber, cool holographic cyan */
  --bg:              #000000;
  --bg-elev:         #0a0a0a;
  --ink:             #f4f1ea;
  --ink-muted:       #9c9591;
  --ink-dim:         #5a554f;
  --line:            rgba(244, 241, 234, 0.12);
  --line-strong:     rgba(244, 241, 234, 0.28);
  --amber:           #ffb800;
  --amber-soft:      #ffd66d;
  --cyan:            #5ae8ff;
  --red:             #ff4b4b;
  --green:           #39e58c;

  /* Type */
  --font-display:    'Unbounded', 'Inter', system-ui, sans-serif;
  --font-body:       'Inter', system-ui, sans-serif;
  --font-mono:       'Space Mono', ui-monospace, monospace;

  /* Layout */
  --header-h:        72px;
  --edge:            5vw;

  /* Motion */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--amber); color: #000; }

/* Hide scrollbar visually but keep scroll working */
::-webkit-scrollbar { width: 0; height: 0; }
html { scrollbar-width: none; }

/* Lenis */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* -------------------------------------------------------------
   LOADER
   ------------------------------------------------------------- */
#loader {
  position: fixed; inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: grid; place-items: center;
  transition: opacity 0.6s var(--ease-out);
}
#loader.hidden {
  opacity: 0;
  pointer-events: none;
}
.loader-inner {
  width: min(420px, 80vw);
  text-align: left;
}
.loader-brand {
  display: flex; align-items: baseline; gap: 0.6em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0.04em;
}
.loader-mark {
  font-size: 0.8em;
  color: var(--amber);
  transform: translateY(-0.06em);
}
.loader-word {
  letter-spacing: 0.18em;
}
.loader-track {
  margin: 1.8rem 0 0.9rem;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
#loader-bar {
  position: absolute; inset: 0 100% 0 0;
  background: linear-gradient(90deg, var(--amber), var(--amber-soft));
  transition: inset-inline-end 0.25s linear;
}
.loader-meta {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
#loader-percent {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------------
   HEADER
   ------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 1.4rem var(--edge);
  pointer-events: none;
}
.site-header > nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
}
.brand {
  display: flex; align-items: baseline; gap: 0.55em;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 1.02rem;
  line-height: 1;
  color: var(--ink);
}
.brand-mark {
  color: var(--amber);
  font-size: 0.82em;
  transform: translateY(-0.05em);
  display: inline-block;
}
.brand-sub {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  color: var(--ink-muted);
  text-transform: uppercase;
  padding-left: 0.7em;
  border-left: 1px solid var(--line);
  margin-left: 0.1em;
}
.nav-links {
  display: flex; list-style: none; gap: 2.2rem;
  align-items: center;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color 0.3s var(--ease-out);
  position: relative;
  padding: 0.4em 0;
}
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--amber);
  transition: right 0.35s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { right: 0; }
.nav-links .nav-cta {
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 0.65em 1.1em;
  border-radius: 999px;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.nav-links .nav-cta:hover {
  background: var(--amber);
  color: #000;
  border-color: var(--amber);
}
.nav-links .nav-cta::after { display: none; }

/* -------------------------------------------------------------
   STANDALONE HERO (100vh, solid bg, sits above the canvas)
   ------------------------------------------------------------- */
.hero-standalone {
  position: relative;
  z-index: 10;
  height: 100vh;
  min-height: 600px;
  background: var(--bg);
  padding: 0 var(--edge);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 55%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 55%, #000 30%, transparent 90%);
  opacity: 0.55;
}
.hero-standalone::before {
  content: '';
  position: absolute; inset: -10% -10% auto auto;
  width: 55vw; height: 55vw;
  max-width: 760px; max-height: 760px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 184, 0, 0.18), transparent 60%);
  pointer-events: none;
}
.hero-standalone::after {
  content: '';
  position: absolute; bottom: -25%; left: -15%;
  width: 70vw; height: 70vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(circle at 50% 50%, rgba(90, 232, 255, 0.08), transparent 65%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 960px;
  padding-top: 5vh;
}
.hero-label {
  display: inline-flex;
  align-items: center; gap: 0.7em;
  margin-bottom: 2.2rem;
}
.label-dot {
  width: 6px; height: 6px;
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--amber);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.95); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
.hero-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 10.5vw, 10rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero-word {
  display: block;
  overflow: hidden;
  padding-right: 0.06em;
}
.hero-word > span {
  display: inline-block;
  will-change: transform;
}
/* Longer words scale down to stay on one line and inside the hero box.
   TRAINING stays the full heading size for emphasis. */
.hero-word--sm {
  font-size: 0.7em;
  line-height: 1;
}
.hero-word--accent > span {
  background: linear-gradient(180deg, var(--amber) 0%, var(--amber-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-tagline {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 400;
  max-width: 42ch;
  margin-top: 2rem;
  color: var(--ink-muted);
  line-height: 1.55;
}
.hero-cta-group {
  display: flex;
  gap: 0.9rem;
  margin-top: 2.4rem;
  flex-wrap: wrap;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  padding: 1em 1.7em;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.hero-cta .cta-arrow {
  font-family: var(--font-body);
  font-weight: 500;
  transition: transform 0.3s var(--ease-out);
}
.hero-cta--primary {
  background: var(--amber);
  color: #000;
  border: 1px solid var(--amber);
  font-weight: 700;
}
.hero-cta--primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-2px);
}
.hero-cta--primary:hover .cta-arrow { transform: translateX(4px); }
.hero-cta--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.hero-cta--ghost:hover {
  border-color: var(--ink);
  background: rgba(244, 241, 234, 0.06);
}

.hero-meta {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.hero-meta-item {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}
.hero-meta-item em {
  font-style: normal;
  color: var(--amber);
  font-size: 0.7em;
}

.scroll-indicator {
  position: absolute;
  bottom: 3vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9em;
  z-index: 3;
}
.scroll-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.scroll-arrow {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, var(--ink-muted), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-arrow::after {
  content: '';
  position: absolute; top: -70%; left: 0;
  width: 1px; height: 40%;
  background: var(--amber);
  animation: scroll-arrow 1.8s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
@keyframes scroll-arrow {
  0%   { top: -40%; }
  100% { top: 110%; }
}

/* -------------------------------------------------------------
   CANVAS (the video)
   ------------------------------------------------------------- */
.canvas-wrap {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  clip-path: circle(0% at 50% 50%);
  will-change: clip-path;
  background: var(--bg);
}
#canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.canvas-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 80% at 50% 50%, transparent 58%, rgba(0,0,0,0.55) 88%, #000 100%),
    linear-gradient(180deg, rgba(0,0,0,0.28) 0%, transparent 16%, transparent 80%, rgba(0,0,0,0.55) 100%);
}

/* -------------------------------------------------------------
   CORNER HUD (sits between canvas and dark overlay — gets dimmed by overlay)
   ------------------------------------------------------------- */
.hud-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}
.hud-overlay.visible { opacity: 1; }
.hud-corner {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--ink-muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.55em;
}
.hud-tl { top: calc(var(--header-h) + 24px); left: var(--edge); }
.hud-tr { top: calc(var(--header-h) + 24px); right: var(--edge); }
.hud-bl { bottom: 28px; left: var(--edge); }
.hud-br { bottom: 28px; right: var(--edge); }
.hud-tick { color: var(--amber); font-size: 0.82em; }
.hud-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: pulse-red 1.4s ease-in-out infinite;
}
@keyframes pulse-red {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* -------------------------------------------------------------
   DARK OVERLAY (for stats — sits above canvas, HUD, marquees)
   ------------------------------------------------------------- */
#dark-overlay {
  position: fixed;
  inset: 0;
  z-index: 3;
  background: #000;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* -------------------------------------------------------------
   MARQUEE (fixed overlays that slide on scroll)
   Sits between canvas and dark overlay, so it gets dimmed during stats.
   ------------------------------------------------------------- */
.marquee-wrap {
  position: fixed;
  left: 0; right: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  will-change: opacity, transform;
}
.marquee-primary   { top: 38vh; }
.marquee-secondary { bottom: 18vh; }

.marquee-text {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14vw;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0.08;
  padding-left: 10vw;
}
.marquee-text--outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--amber);
  opacity: 0.28;
}

/* -------------------------------------------------------------
   SCROLL CONTAINER · SECTIONS
   ------------------------------------------------------------- */
#scroll-container {
  position: relative;
  z-index: 10;
  height: 700vh;  /* video phase — holds 4 scroll-choreographed sections */
  pointer-events: none;
}
#scroll-container > * { pointer-events: auto; }

.scroll-section {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 var(--edge);
  opacity: 0;
  will-change: opacity, transform;
  z-index: 10;
}

/* alignment zones */
.align-left  { padding-right: 55vw; }
.align-right { padding-left:  55vw; }
.align-left  .section-inner,
.align-right .section-inner { max-width: 40vw; min-width: 320px; }

/* Readability scrim — soft dark gradient on the side where the text sits,
   fading to transparent over the video so the content stays legible without
   covering the footage. Only applied to content sections on desktop. */
.section-content::before {
  content: '';
  position: absolute;
  inset: -15vh -2vw;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.62) 22%,
    rgba(0, 0, 0, 0.32) 45%,
    rgba(0, 0, 0, 0.08) 65%,
    transparent 80%);
  filter: blur(8px);
}
/* Section 02 (align-right / The Shift) — darker scrim for a heavier feel */
.section-content.align-right::before {
  background: linear-gradient(270deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.74) 22%,
    rgba(0, 0, 0, 0.44) 45%,
    rgba(0, 0, 0, 0.14) 65%,
    transparent 82%);
}

/* Extra legibility lift on the big text without a hard shadow */
.section-content .section-heading {
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55);
}
.section-content .section-body,
.section-content .section-label {
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.6);
}
/* Brighter body copy over video so it pops off the scrim */
.section-content .section-body {
  color: #d7d2cb;
}

/* -------------------------------------------------------------
   SECTION TYPOGRAPHY
   ------------------------------------------------------------- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 1.8rem;
}
.section-label--centered { justify-content: center; }
.label-index {
  font-weight: 700;
  color: var(--amber);
}
.label-divider {
  width: 28px; height: 1px;
  background: var(--line-strong);
}
.label-name { color: var(--ink-muted); }

.section-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 5.6rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 1.8rem;
}
.section-heading em {
  font-style: normal;
  font-weight: 500;
  color: var(--amber);
  font-family: var(--font-display);
}

.section-body {
  font-size: clamp(1rem, 1.15vw, 1.13rem);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 40ch;
  margin-bottom: 2rem;
}

/* feature chips (section 001) */
.feature-chips {
  list-style: none;
  display: flex; flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.8rem;
}
.feature-chips li {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.55em 0.95em;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.feature-chips li:last-child {
  color: var(--amber);
  border-color: rgba(255, 184, 0, 0.4);
}

/* feature rows (section 002) */
.feature-rows {
  margin-top: 2rem;
  border-top: 1px solid var(--line);
}
.feature-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
.feature-row-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--amber);
  flex: 0 0 auto;
}
.feature-row-name {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  text-align: right;
}

/* metric chips (section 005) */
.metric-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
}
.metric-chip {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  padding: 0.5em 0.9em;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.metric-chip em {
  font-style: normal;
  font-size: 0.78em;
  color: var(--amber);
  letter-spacing: 0.22em;
}
.metric-chip--green { border-color: rgba(57, 229, 140, 0.35); }
.metric-chip--green em { color: var(--green); }
.metric-chip--red   { border-color: rgba(255, 75, 75, 0.45); }
.metric-chip--red   em { color: var(--red); }

/* -------------------------------------------------------------
   STATS SECTION (uses the dark overlay)
   ------------------------------------------------------------- */
.section-stats {
  padding: 0 var(--edge);
  text-align: center;
  max-width: 100vw;
}
.section-stats .section-inner { max-width: none; }
.stats-header {
  max-width: 720px;
  margin: 0 auto 4rem;
}
.stats-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid var(--line);
}
.stat {
  background: #000;
  padding: 2.4rem 1.6rem;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.12em;
  row-gap: 0.9rem;
  position: relative;
}
.stat-number {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 5.2rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat-suffix {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  color: var(--amber);
  letter-spacing: -0.02em;
  align-self: baseline;
}
.stat > .stat-label {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  max-width: 28ch;
  line-height: 1.55;
  text-align: center;
}
.stat-label strong {
  color: var(--amber);
  font-weight: 700;
}

/* -------------------------------------------------------------
   WORK · OUR WORK · game panels (normal flow, full-viewport each)
   ------------------------------------------------------------- */
.work-section {
  position: relative;
  z-index: 20;
  background: var(--bg);
  color: var(--ink);
}

/* Header panel — introduces the section before the game panels start */
.work-header {
  position: relative;
  min-height: 70vh;
  padding: 12vh var(--edge) 8vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(ellipse 50% 60% at 50% 40%, rgba(255, 184, 0, 0.08) 0%, transparent 70%),
    var(--bg);
  border-top: 1px solid var(--line);
}
.work-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-top: 0.3rem;
}
.work-heading em {
  font-style: normal;
  font-weight: 500;
  background: linear-gradient(180deg, var(--amber) 0%, var(--amber-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.work-subtitle {
  margin-top: 1.6rem;
  font-size: clamp(1rem, 1.15vw, 1.13rem);
  color: var(--ink-muted);
  max-width: 56ch;
  line-height: 1.6;
}
.work-cue {
  margin-top: 4rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7em;
}
.work-cue-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.work-cue-arrow {
  width: 1px; height: 32px;
  background: linear-gradient(180deg, var(--ink-muted), transparent);
  position: relative;
  overflow: hidden;
}
.work-cue-arrow::after {
  content: '';
  position: absolute; top: -60%; left: 0;
  width: 1px; height: 40%;
  background: var(--amber);
  animation: scroll-arrow 1.8s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}

/* Game panel — full viewport, bold colour, 2-column split */
.work-panel {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 10vh var(--edge);
  overflow: hidden;
  isolation: isolate;
  --panel-bg:    #c25a1f;
  --panel-ink:   #ffffff;
  --panel-accent:#111111;
  --panel-btn:   #ffb800;
  --panel-btn-ink:#111111;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(0,0,0,0.25) 0%, transparent 65%),
    var(--panel-bg);
  color: var(--panel-ink);
}
.work-panel[data-bg="amber"]   { --panel-bg: #c2551a; }
.work-panel[data-bg="cyan"]    { --panel-bg: #155a6b; }
.work-panel[data-bg="green"]   { --panel-bg: #2d6a3b; }
.work-panel[data-bg="crimson"] { --panel-bg: #8a2742; }

/* subtle grid pattern on every panel, masked to the edges */
.work-panel::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 35%, transparent 65%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 35%, transparent 65%, #000 100%);
  pointer-events: none;
  z-index: 0;
}
/* thin divider + index between panels */
.work-panel + .work-panel::after {
  content: '';
  position: absolute;
  top: 0; left: var(--edge); right: var(--edge);
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.work-panel-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.work-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 46ch;
}
.work-code {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.6rem;
  padding: 0.35em 0.8em;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}
.work-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.1rem;
}
.work-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 5.6rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin-bottom: 1.4rem;
  color: #fff;
}
.work-desc {
  font-size: clamp(1rem, 1.15vw, 1.13rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 2rem;
}
.work-meta-list {
  list-style: none;
  width: 100%;
  max-width: 420px;
  margin-bottom: 2.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.work-meta-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.92);
}
.work-meta-list li span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.work-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  padding: 1em 1.8em;
  border-radius: 999px;
  background: var(--panel-btn);
  color: var(--panel-btn-ink);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: transform 0.35s var(--ease-out), background 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.work-cta-btn span {
  font-family: var(--font-body);
  font-weight: 500;
  transition: transform 0.35s var(--ease-out);
}
.work-cta-btn:hover {
  background: #fff;
  color: #000;
  transform: translateY(-2px);
}
.work-cta-btn:hover span { transform: translateX(4px); }

/* Visual side — stylized "game screen" placeholder (drop in image/video later) */
.work-visual {
  position: relative;
  width: 100%;
}
.work-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #0a0a0a;
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 60px color-mix(in srgb, var(--panel-bg) 40%, transparent);
  display: grid;
  place-items: center;
  transform: translateZ(0);
  isolation: isolate;
}

/* Real game screenshot fills the frame; parallax-drift on scroll is driven
   in JS, hover adds a subtle scale-in. Slight vertical scale overshoot lets
   the parallax translate move up/down without exposing empty strips. */
.work-screen-img {
  position: absolute;
  left: 0;
  top: -7%;             /* overshoot: img is 114% tall, -7% top / 107% bottom */
  width: 100%;
  height: 114%;         /* leaves ~7% slack either side for parallax drift */
  object-fit: cover;
  object-position: center;
  transition: transform 0.9s var(--ease-out), filter 0.9s var(--ease-out);
  transform: scale(1);
  will-change: transform;
  z-index: 0;
  filter: saturate(1.02) contrast(1.02);
}
.work-panel:hover .work-screen-img {
  transform: scale(1.05);
  filter: saturate(1.1) contrast(1.06);
}

/* Soft panel-colour tint + inner vignette so the screenshot blends into the
   panel rather than sitting as a flat rectangle. Sits above the image, below
   the HUD elements. */
.work-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 110% 85% at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--panel-bg) 28%, transparent) 0%,
      transparent 35%,
      transparent 65%,
      color-mix(in srgb, var(--panel-bg) 36%, transparent) 100%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.6s var(--ease-out);
}
.work-panel:hover .work-screen::before { opacity: 0.7; }
.work-screen-code {
  position: absolute;
  left: 50%; top: 1.2rem;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  z-index: 2;
  padding: 0.35em 0.9em;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  white-space: nowrap;
}
.work-screen-hud {
  position: absolute;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.7em;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(6px);
}
.work-screen-hud em {
  font-style: normal;
  color: var(--amber);
  font-size: 0.7em;
  animation: pulse 2.2s ease-in-out infinite;
}
.work-screen-hud.hud-tl { top: 1rem;    left: 1rem; }
.work-screen-hud.hud-tr { top: 1rem;    right: 1rem; }
.work-screen-hud.hud-bl { bottom: 1rem; left: 1rem; }
.work-screen-hud.hud-br { bottom: 1rem; right: 1rem; }

/* -------------------------------------------------------------
   OFFERINGS · game-menu (Soft vs Hard skills + bespoke)
   ------------------------------------------------------------- */
.offerings-section {
  position: relative;
  z-index: 20;
  padding: 14vh var(--edge) 10vh;
  background: var(--bg);
  color: var(--ink);
  /* Eat the trailing empty space of the scroll-container so the jump
     from "The numbers don't lie" into Offerings is seamless. The
     scroll-container reserves ~1 viewport of scroll past its last
     pinned section; this pulls Offerings up into that unused tail. */
  margin-top: -175vh;
}
.offerings-header {
  max-width: 720px;
  margin: 0 auto 5rem;
  text-align: center;
}
.offerings-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6.2vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-top: 0.3rem;
}
.offerings-heading em {
  font-style: normal;
  font-weight: 500;
  background: linear-gradient(180deg, var(--amber) 0%, var(--amber-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.offerings-subtitle {
  margin-top: 1.4rem;
  font-size: clamp(1rem, 1.15vw, 1.13rem);
  color: var(--ink-muted);
  line-height: 1.6;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

.offerings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  max-width: 1280px;
  margin: 0 auto;
}

.offering-card {
  position: relative;
  background: #0a0a0a;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 2.2rem 2rem 0;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--ease-out), border-color 0.5s var(--ease-out), background 0.5s var(--ease-out);
}
.offering-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, color-mix(in srgb, var(--amber) 14%, transparent) 0%, transparent 60%);
  opacity: 0.55;
  z-index: -1;
  transition: opacity 0.6s var(--ease-out);
}
.offering-card[data-track="hard"]::before {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, color-mix(in srgb, var(--cyan) 16%, transparent) 0%, transparent 60%);
}
.offering-card:hover {
  transform: translateY(-4px);
  border-color: rgba(244, 241, 234, 0.5);
  background: #0f0f0f;
}
.offering-card:hover::before { opacity: 1; }

.offering-icon {
  width: 56px; height: 56px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin-bottom: 1.6rem;
  color: var(--amber);
  font-size: 1.2rem;
  background: rgba(0, 0, 0, 0.45);
}
.offering-card[data-track="hard"] .offering-icon { color: var(--cyan); }
.offering-icon span {
  display: inline-block;
  transform: translateY(-1px);
}

.offering-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.6rem;
}
.offering-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 2.6vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1rem;
}
.offering-intro {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink-muted);
  line-height: 1.6;
  max-width: 38ch;
  margin-bottom: 1.8rem;
}
.offering-list {
  list-style: none;
  border-top: 1px solid var(--line);
}
.offering-list li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.45;
}
.offering-list li span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--amber);
  flex: 0 0 2ch;
}
.offering-card[data-track="hard"] .offering-list li span { color: var(--cyan); }

.offering-footer {
  margin: 1.6rem -2rem 0;
  padding: 1rem 2rem 1.3rem;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
}
.offering-footer-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  color: var(--ink-muted);
  text-transform: uppercase;
}

/* Bespoke banner — full-width highlight below the two cards */
.offerings-bespoke {
  max-width: 1280px;
  margin: 2.4rem auto 0;
}
.bespoke-inner {
  position: relative;
  border: 1px solid rgba(255, 184, 0, 0.32);
  border-radius: 14px;
  padding: 2.6rem 2.4rem;
  background:
    radial-gradient(ellipse 40% 120% at 0% 50%, rgba(255, 184, 0, 0.12) 0%, transparent 70%),
    #0a0a0a;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
}
.bespoke-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid rgba(255, 184, 0, 0.4);
  padding: 0.55em 0.9em;
  border-radius: 999px;
  white-space: nowrap;
  align-self: center;
}
.bespoke-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.bespoke-body {
  grid-column: 2 / 3;
  margin-top: 0.6rem;
  font-size: 0.96rem;
  color: var(--ink-muted);
  line-height: 1.55;
  max-width: 56ch;
}
.bespoke-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.95em 1.5em;
  border-radius: 999px;
  background: var(--amber);
  color: #000;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out), color 0.3s var(--ease-out);
  white-space: nowrap;
  align-self: center;
}
.bespoke-cta span {
  font-family: var(--font-body);
  font-weight: 500;
}
.bespoke-cta:hover {
  background: var(--ink);
  color: #000;
  transform: translateY(-2px);
}

/* -------------------------------------------------------------
   PROCESS · horizontal timeline (4 stages)
   ------------------------------------------------------------- */
.process-section {
  position: relative;
  z-index: 20;
  padding: 14vh var(--edge) 12vh;
  background: var(--bg);
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.process-header {
  max-width: 720px;
  margin: 0 auto 6rem;
  text-align: center;
}
.process-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6.2vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-top: 0.3rem;
}
.process-heading em {
  font-style: normal;
  font-weight: 500;
  background: linear-gradient(180deg, var(--amber) 0%, var(--amber-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.process-subtitle {
  margin-top: 1.4rem;
  font-size: clamp(1rem, 1.15vw, 1.13rem);
  color: var(--ink-muted);
  line-height: 1.6;
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;
}

.process-track {
  list-style: none;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  counter-reset: process;
}
/* The connecting line behind the nodes — passes through node centres */
.process-track::before {
  content: '';
  position: absolute;
  top: 52px;
  left: calc(100% / 8);          /* centred under the first node */
  right: calc(100% / 8);         /* centred under the last node */
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 184, 0, 0.5) 10%,
    rgba(255, 184, 0, 0.35) 50%,
    rgba(255, 184, 0, 0.5) 90%,
    transparent 100%);
  z-index: 0;
}

.process-step {
  position: relative;
  padding: 0 1.2rem;
  text-align: center;
  z-index: 1;
}
.process-index {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--amber);
  margin-bottom: 1.2rem;
  padding-top: 0.25rem;
}
.process-node {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto 2rem;
  border-radius: 50%;
  background: #0a0a0a;
  border: 1px solid rgba(255, 184, 0, 0.6);
  position: relative;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 1), 0 0 24px rgba(255, 184, 0, 0.25);
}
.process-node::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--amber);
  transform: scale(0.6);
  transition: transform 0.5s var(--ease-out);
}
.process-step:hover .process-node::after { transform: scale(1); }
.process-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.7rem;
}
.process-body {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink-muted);
  line-height: 1.55;
  max-width: 28ch;
  margin: 0 auto;
}

/* -------------------------------------------------------------
   FLOW SECTIONS (feedback + CTA, normal flow after video world)
   ------------------------------------------------------------- */
.flow-section {
  position: relative;
  z-index: 20;
  padding: 14vh var(--edge);
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.flow-inner {
  max-width: 900px;
  margin: 0 auto;
}
.flow-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.6vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 1.6rem;
}
.flow-heading em {
  font-style: normal;
  font-weight: 500;
  color: var(--amber);
}
.flow-heading--cta em {
  background: linear-gradient(180deg, var(--amber) 0%, var(--amber-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.flow-body {
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  color: var(--ink-muted);
  max-width: 52ch;
  margin-bottom: 2rem;
  line-height: 1.6;
}
.flow-section--cta {
  padding-bottom: 18vh;
}

/* -------------------------------------------------------------
   CTA SECTION
   ------------------------------------------------------------- */
.section-cta .section-heading--cta em {
  background: linear-gradient(180deg, var(--amber) 0%, var(--amber-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2.4rem;
}
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  padding: 1.05em 1.8em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.cta-button--primary {
  background: var(--amber);
  color: #000;
  border: 1px solid var(--amber);
  font-weight: 700;
}
.cta-button--primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-2px);
}
.cta-button--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.cta-button--ghost:hover {
  border-color: var(--ink);
  background: rgba(244, 241, 234, 0.06);
}
.cta-arrow {
  transition: transform 0.3s var(--ease-out);
  font-family: var(--font-body);
  font-weight: 500;
}
.cta-button--primary:hover .cta-arrow { transform: translateX(4px); }

/* -------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 15;
  background: var(--bg);
  padding: 4rem var(--edge) 2rem;
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
}
.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line);
}
.footer-brand {
  display: flex; align-items: baseline; gap: 0.55em;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 1rem;
  color: var(--ink);
}
.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  justify-self: center;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  align-items: flex-end;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-links a {
  color: var(--ink);
  transition: color 0.3s var(--ease-out);
}
.footer-links a:hover { color: var(--amber); }

.footer-baseline {
  display: flex;
  justify-content: space-between;
  padding-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* -------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------- */
@media (max-width: 900px) {
  :root {
    --edge: 24px;
    --header-h: 62px;
  }

  .brand-sub { display: none; }

  .nav-links { gap: 1rem; }
  .nav-links li:not(:last-child) { display: none; }

  .hero-standalone { height: 100svh; }
  .hero-content { padding-top: 8vh; }
  /* Tighter heading so TRAINING fits even on 320px phones. */
  .hero-heading { font-size: clamp(2.4rem, 13.5vw, 5.2rem); }
  .hero-tagline { font-size: 1rem; margin-top: 1.5rem; max-width: 34ch; }
  .hero-meta { gap: 1rem; }
  .hero-meta-item { font-size: 0.64rem; }

  /* Mobile uses a solid panel backdrop, so hide the desktop scrim */
  .section-content::before { display: none; }

  /* Collapse side alignment — center with dark backdrop for readability over video */
  .align-left, .align-right {
    padding-left: var(--edge);
    padding-right: var(--edge);
  }
  .align-left .section-inner,
  .align-right .section-inner {
    max-width: 100%;
    background: rgba(0, 0, 0, 0.72);
    padding: 1.8rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    backdrop-filter: blur(10px);
  }

  .section-heading { font-size: clamp(2rem, 9vw, 3.2rem); }
  .section-body    { font-size: 1rem; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 1.8rem 1rem; }

  .offerings-section { margin-top: -120vh; }
  .work-panel { padding: 12vh var(--edge); }

  /* Offerings → single column + stacked bespoke layout */
  .offerings-section { padding: 10vh var(--edge); }
  .offerings-header { margin-bottom: 3rem; }
  .offerings-grid { grid-template-columns: 1fr; gap: 1rem; }
  .offering-card { padding: 1.8rem 1.4rem 0; }
  .offering-footer { margin: 1.4rem -1.4rem 0; padding: 0.9rem 1.4rem 1.1rem; }
  .bespoke-inner {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 2rem 1.5rem;
  }
  .bespoke-body { grid-column: 1 / -1; }
  .bespoke-cta { justify-self: flex-start; }

  /* Process → vertical timeline on mobile */
  .process-section { padding: 10vh var(--edge); }
  .process-header { margin-bottom: 3.5rem; }
  .process-track {
    grid-template-columns: 1fr;
    max-width: 480px;
    gap: 2.4rem;
  }
  .process-track::before {
    top: 0; bottom: 0;
    left: 23px; right: auto;        /* node centre: left 12 + half of 22 = 23 */
    width: 1px;
    height: auto;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(255, 184, 0, 0.5) 6%,
      rgba(255, 184, 0, 0.35) 50%,
      rgba(255, 184, 0, 0.5) 94%,
      transparent 100%);
  }
  .process-step {
    text-align: left;
    padding: 0 0 0 3.4rem;
    position: relative;
  }
  .process-index {
    position: absolute;
    top: 0; left: 3.4rem;
    margin-bottom: 0;
  }
  .process-node {
    position: absolute;
    top: 4px; left: 12px;
    margin: 0;
  }
  .process-title { margin-top: 1.6rem; }
  .process-body { margin: 0; max-width: 42ch; }

  /* Hero CTAs — tighter on narrow screens */
  .hero-cta-group { gap: 0.7rem; }
  .hero-cta { padding: 0.9em 1.4em; font-size: 0.7rem; }
  .work-panel-inner {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  .work-visual { order: -1; }
  .work-screen { aspect-ratio: 16 / 10; }
  .work-screen-code {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    top: 0.8rem;
    padding: 0.3em 0.7em;
  }
  .work-screen-hud {
    font-size: 0.56rem;
    letter-spacing: 0.18em;
    padding: 0.3em 0.55em;
  }

  /* Stack label above value so long industry/skill strings don't overflow */
  .work-meta-list { max-width: none; }
  .work-meta-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.9rem 0;
  }

  /* Game-panel CTA: tighter on mobile so letter-spacing + padding don't
     push the pill past the viewport edge */
  .work-cta-btn {
    align-self: flex-start;
    max-width: 100%;
    padding: 0.95em 1.4em;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
  }
  .work-header { padding: 10vh var(--edge) 6vh; }
  .work-heading { font-size: clamp(2.6rem, 14vw, 4.4rem); }
  .flow-section { padding: 10vh var(--edge); }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .footer-meta { justify-self: start; }
  .footer-links { align-items: flex-start; }
  .footer-baseline { flex-direction: column; gap: 0.6rem; }

  #scroll-container { height: 520vh; }

  .marquee-text { font-size: 22vw; }
  .hud-corner { font-size: 0.58rem; letter-spacing: 0.18em; }
  .hud-bl .hud-text, .hud-br .hud-text { display: none; }
}

@media (max-width: 480px) {
  .nav-links .nav-cta { padding: 0.55em 0.9em; font-size: 0.66rem; }

  /* Hero CTAs stack full-width for easier tapping */
  .hero-cta-group { flex-direction: column; align-items: stretch; }
  .hero-cta { width: 100%; justify-content: center; }

  /* Stats switch to a single column so the longer labels have room to breathe */
  .stats-grid { grid-template-columns: 1fr; }
  .stat { padding: 1.6rem 1rem; }

  /* Final CTA buttons full-width */
  .cta-group { flex-direction: column; align-items: stretch; }
  .cta-button { width: 100%; justify-content: center; }

  /* Header — tighten title-only HUD area */
  .brand-name { font-size: 0.92rem; }
}

/* Accessibility — respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}