/* DTEC portfolio: one continuous stage, ink black field, one red accent. */

@font-face {
  font-family: 'Anton';
  src: url('/vendor/fonts/anton-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Google serves Inter as a variable font; one file covers the 400-600 range. */
@font-face {
  font-family: 'Inter';
  src: url('/vendor/fonts/inter-latin-400.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched condensed fallback keeps layout stable if the woff2 is missing. */
@font-face {
  font-family: 'Anton Fallback';
  src: local('Arial Narrow'), local('Impact');
  size-adjust: 92%;
  ascent-override: 98%;
  descent-override: 26%;
  line-gap-override: 0%;
}

:root {
  --ink: #000000;
  --red: #dc2626;
  --red-bright: #ef4444;
  --cream: #f5f1e8;
  --cream-dim: rgba(245, 241, 232, 0.64);
  --cream-faint: rgba(245, 241, 232, 0.14);
  --font-display: 'Anton', 'Anton Fallback', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --header-height: 76px;
  --space-section: clamp(96px, 14vh, 168px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hero-acts-height: 480svh;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  /* The load gate locks scrolling; reserving the gutter keeps the layout
     width identical before and after unlock (no reload jump). */
  scrollbar-gutter: stable;
}

html,
body {
  overflow-x: clip;
}

html.is-locked {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--red);
  color: var(--cream);
}

:focus-visible {
  outline: 2px solid var(--red-bright);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.container {
  width: min(1280px, 100% - clamp(40px, 8vw, 96px));
  margin-inline: auto;
}

/* ---------- the continuous stage ---------- */

.stage-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.stage-canvas[hidden] {
  display: none;
}

[data-mode='lite'] .stage-canvas,
[data-mode='reduced'] .stage-canvas {
  display: none;
}

main {
  position: relative;
  z-index: 1;
}

/* ---------- header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding-inline: clamp(20px, 4vw, 48px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
}

.brand {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--cream);
  text-transform: uppercase;
}

.brand-slash {
  color: var(--red);
}

.site-nav {
  display: flex;
  gap: clamp(18px, 3vw, 36px);
}

.site-nav a {
  color: var(--cream-dim);
  text-decoration: none;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px 2px;
  transition: color 0.3s var(--ease-out);
}

.site-nav a:hover {
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--red);
}

/* ---------- hero acts region ---------- */

#hero {
  height: var(--hero-acts-height);
  position: relative;
  /* No section chrome on the hero: the shared section padding pushed the
     poster/video 14vh below the full-bleed canvas (visible as a black band
     in lite mode and as the poster-to-canvas jump at load in full mode). */
  padding-block: 0;
}

[data-mode='lite'] #hero,
[data-mode='reduced'] #hero {
  height: 100svh;
  min-height: 560px;
}

.hero-viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  overflow: clip;
  display: flex;
  align-items: flex-end;
}

.hero-poster,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The canvas paints with STAGE_OVERSCAN 1.08; the poster matches it so the
   poster-to-canvas handover does not visibly zoom or shift the framing. */
[data-mode='full'] .hero-poster {
  transform: scale(1.08);
}

/* Once the stage draws, the poster yields to the fixed canvas behind main. */
.stage-ready .hero-poster {
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}

.hero-video[hidden] {
  display: none;
}

.hero-viewport::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}

/* The text-legibility gradient leaves with the text, otherwise it stripes
   over the held driver frame as the sticky block scrolls out. */
[data-act='seam'] .hero-viewport::after,
[data-act='driver'] .hero-viewport::after,
[data-act='ink'] .hero-viewport::after {
  opacity: 0;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(48px, 11vh, 120px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

[data-act='seam'] .hero-content,
[data-act='driver'] .hero-content {
  opacity: 0;
  transform: translateY(-3%);
}

.hero-micro {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

.hero-micro::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--red);
  margin-right: 12px;
  vertical-align: middle;
}

.hero-heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 14.5vw, 204px);
  line-height: 0.84;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.hero-line {
  display: block;
}

.hero-dot {
  color: var(--red);
}

.hero-subtitle {
  margin: 26px 0 0;
  max-width: 44ch;
  font-size: clamp(15px, 1.5vw, 19px);
  color: var(--cream-dim);
}

.hero-cta {
  display: inline-block;
  margin-top: 26px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--red);
  color: var(--cream);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: color 0.3s var(--ease-out);
}

.hero-cta:hover {
  color: var(--red-bright);
}

.hero-driver-chip {
  position: absolute;
  right: clamp(20px, 4vw, 48px);
  bottom: clamp(48px, 11vh, 120px);
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--red);
  color: var(--cream);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

[data-act='driver'] .hero-driver-chip {
  opacity: 1;
}

.hero-loading {
  position: absolute;
  left: clamp(20px, 4vw, 48px);
  top: calc(var(--header-height) + 18px);
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

#hero.is-ready .hero-loading {
  display: none;
}

.hero-scroll-cue {
  position: absolute;
  right: clamp(20px, 4vw, 48px);
  top: 50%;
  margin: 0;
  transform: rotate(90deg) translateX(-50%);
  transform-origin: right center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream-dim);
  transition: opacity 0.5s var(--ease-out);
}

[data-act='driver'] .hero-scroll-cue,
[data-act='seam'] .hero-scroll-cue {
  opacity: 0;
}

.hero-scroll-cue::after {
  content: '';
  display: inline-block;
  width: 44px;
  height: 1px;
  background: var(--red);
  margin-left: 14px;
  vertical-align: middle;
}

[data-mode='lite'] .hero-driver-chip,
[data-mode='reduced'] .hero-driver-chip,
[data-mode='lite'] .hero-loading,
[data-mode='reduced'] .hero-loading,
[data-mode='reduced'] .hero-scroll-cue {
  display: none;
}

/* ---------- shared section chrome ---------- */

main section {
  position: relative;
  padding-block: var(--space-section);
}

.section-head {
  margin-bottom: clamp(40px, 7vh, 80px);
}

.section-label {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--red-bright);
}

main h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.9;
  text-transform: uppercase;
}

/* Panels that overlay the live stage keep their own scrim for legibility.
   The scrim leads in and out with gradients so section edges never band
   against the moving stage behind them. */
.overlay-panel {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.74) 160px,
    rgba(0, 0, 0, 0.74) calc(100% - 160px),
    rgba(0, 0, 0, 0) 100%
  );
  padding-block: calc(var(--space-section) + 80px);
}

/* Fully typographic acts on solid ink with a breathing red glow. */
.glow-section {
  background: var(--ink);
}

.glow-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 70% 20%, rgba(220, 38, 38, 0.12), transparent 70%),
    radial-gradient(50% 40% at 20% 80%, rgba(220, 38, 38, 0.07), transparent 70%);
  pointer-events: none;
}

.glow-section .container {
  position: relative;
  z-index: 2;
}

/* ---------- stats ---------- */

.stats-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 6vh, 64px) clamp(24px, 3vw, 48px);
}

/* Containment keeps per-frame count-up text mutations from re-laying-out the
   grid while the hero scrub is still settling at the acts boundary. */
.stat {
  contain: layout paint;
}

.stat-value {
  display: block;
  min-height: 1em;
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 88px);
  line-height: 1;
  color: var(--red);
}

.stat-label {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* ---------- the shift manifesto ---------- */

.shift-body {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 1.25;
  color: var(--cream);
}

/* ---------- driver band ---------- */

.driver-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.driver-lead {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.35;
  color: var(--cream);
}

.driver-copy p:last-child {
  margin: 18px 0 0;
  color: var(--cream-dim);
  max-width: 44ch;
}

.driver-still {
  margin: 0;
}

.driver-still img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--cream-faint);
}

/* ---------- pillars ---------- */

.pillars-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(36px, 6vh, 56px);
  max-width: 880px;
}

.pillar {
  padding-left: clamp(20px, 3vw, 36px);
  border-left: 1px solid var(--cream-faint);
}

.pillar-lead {
  border-left: 2px solid var(--red);
}

.pillar-index {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--red-bright);
}

.pillar h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 64px);
  line-height: 0.95;
  text-transform: uppercase;
}

.pillar-tag {
  display: inline-block;
  margin: 12px 0 0;
  padding: 6px 12px;
  border: 1px solid var(--red);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
}

.pillar h3 ~ p:not(.pillar-tag) {
  margin: 14px 0 0;
  max-width: 56ch;
  color: var(--cream-dim);
}

/* ---------- work ---------- */

.work-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.work-row {
  display: grid;
  gap: 10px;
  padding-block: clamp(18px, 3vh, 30px);
  border-top: 1px solid var(--cream-faint);
  transition: padding-left 0.4s var(--ease-out);
}

.work-row:last-child {
  border-bottom: 1px solid var(--cream-faint);
}

.work-row:hover {
  padding-left: clamp(10px, 1.5vw, 22px);
}

.work-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 5.4vw, 76px);
  line-height: 1;
  text-transform: uppercase;
  transition: color 0.3s var(--ease-out);
}

.work-row:hover .work-name {
  color: var(--red);
}

.work-row-special .work-name {
  font-size: clamp(22px, 3.2vw, 44px);
  max-width: 26ch;
}

/* ---------- hover/focus reveal panels (capabilities + work) ---------- */

.panel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.panel-stack {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  display: grid;
}

.panel {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  pointer-events: none;
}

.panel.panel-active,
[data-panel-group]:not(.has-active) .panel:first-child {
  opacity: 1;
  transform: none;
}

.panel img {
  display: block;
  width: 100%;
  /* height:auto beats the HTML height attribute, letting aspect-ratio rule */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--cream-faint);
}

.panel figcaption,
.work-line {
  margin: 14px 0 0;
  color: var(--cream-dim);
  font-size: 14px;
  line-height: 1.7;
  max-width: 46ch;
}

.work-line:empty {
  display: none;
}

[data-panel-target] {
  cursor: pointer;
}

.pillar[aria-expanded='true'] {
  border-left: 2px solid var(--red);
}

.work-row[aria-expanded='true'] .work-name {
  color: var(--red);
}

/* ---------- marquee strips (decorative, full mode only) ---------- */

.marquee {
  position: absolute;
  inset: 0;
  overflow: clip;
  z-index: 1;
  pointer-events: none;
}

.marquee-strip {
  position: absolute;
  margin: 0;
  white-space: nowrap;
  width: max-content;
  font-family: var(--font-display);
  font-size: clamp(80px, 11vw, 180px);
  line-height: 1;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245, 241, 232, 0.07);
}

/* Paused until the owning section is on screen (IO adds .marquee-live). */
.marquee-ltr {
  top: 12%;
  animation: marquee-scroll-ltr 70s linear infinite paused;
}

.marquee-rtl {
  bottom: 10%;
  animation: marquee-scroll-rtl 85s linear infinite paused;
}

.marquee-live .marquee-strip {
  animation-play-state: running;
}

@keyframes marquee-scroll-ltr {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes marquee-scroll-rtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------- split-word heading reveals (full mode only) ---------- */

.split-word {
  display: inline-block;
  overflow: clip;
  vertical-align: bottom;
}

.split-inner {
  display: inline-block;
  transition: transform 0.7s var(--ease-out), opacity 0.7s var(--ease-out);
}

.stage-ready .has-split:not(.revealed) .split-inner {
  transform: translateY(110%);
  opacity: 0;
}

.split-delay-1 {
  transition-delay: 0.06s;
}
.split-delay-2 {
  transition-delay: 0.12s;
}
.split-delay-3 {
  transition-delay: 0.18s;
}
.split-delay-4 {
  transition-delay: 0.24s;
}
.split-delay-5 {
  transition-delay: 0.3s;
}

/* ---------- custom cursor + progress rail (fine pointers, full mode) ---------- */

.has-custom-cursor,
.has-custom-cursor * {
  cursor: none !important;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  pointer-events: none;
  border-radius: 50%;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--red);
}

.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(239, 68, 68, 0.55);
  transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), margin 0.25s var(--ease-out);
}

.cursor-hot .cursor-ring {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-color: var(--red);
}

.progress-rail {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 38vh;
  z-index: 45;
  background: var(--cream-faint);
  pointer-events: none;
}

.progress-rail-fill {
  width: 100%;
  height: 100%;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: top;
}

/* ---------- driver band video ---------- */

.driver-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--cream-faint);
}

.driver-video[hidden] {
  display: none;
}

/* ---------- credits roll ---------- */

#credits .container {
  text-align: center;
}

.credits-roll {
  margin: 0;
  display: grid;
  gap: clamp(22px, 3.5vh, 34px);
  justify-items: center;
}

.credit {
  display: grid;
  gap: 6px;
}

.credit dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

.credit dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 34px);
  line-height: 1.1;
  text-transform: uppercase;
}

.credit:last-child dd {
  color: var(--red);
}

/* ---------- first engagement ---------- */

.start-body {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.5;
  color: var(--cream);
}

.start-note {
  margin: 22px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--red-bright);
}

/* ---------- finale (over the closer act) + footer ---------- */

#finale {
  min-height: 100svh;
  display: flex;
  align-items: center;
  text-align: center;
  background: linear-gradient(
    to bottom,
    #000000 0%,
    rgba(0, 0, 0, 0.45) 38%,
    rgba(0, 0, 0, 0.45) 70%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

/* Copy must stay readable over the bright daylight cockpit resolve. */
#finale .container {
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.9), 0 1px 6px rgba(0, 0, 0, 0.6);
}

[data-mode='lite'] #finale,
[data-mode='reduced'] #finale {
  background: var(--ink);
}

/* Lite-mode closer: the low-key cockpit loop plays behind the finale copy. */
.finale-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.finale-video[hidden] {
  display: none;
}

#finale .container {
  position: relative;
  z-index: 2;
}

#finale .section-label {
  margin-bottom: 20px;
}

.finale-proof {
  margin: 0 auto 30px;
  max-width: 56ch;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

#finale h2 {
  font-size: clamp(52px, 10vw, 160px);
}

.finale-sub {
  margin: 22px auto 0;
  max-width: 40ch;
  color: var(--cream);
}

.cta-row {
  margin-top: clamp(36px, 6vh, 56px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 16px 36px;
  border: 1px solid var(--cream);
  color: var(--cream);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
  border-color: var(--red);
  background: rgba(220, 38, 38, 0.16);
}

.btn-primary {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

.btn-primary:hover {
  background: #b91c1c;
}

.site-footer {
  position: relative;
  z-index: 1;
  background: var(--ink);
  border-top: 1px solid var(--cream-faint);
  padding-block: 40px;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}

.site-footer p {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cream-dim);
}

/* ---------- grain ---------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
}

[data-mode='full'] .grain {
  background-image: url('/assets/grain/noise-128.png');
  background-size: 128px 128px;
  animation: grain-shift 1.1s steps(1) infinite;
}

@keyframes grain-shift {
  0% {
    background-position: 0 0;
  }
  20% {
    background-position: -64px 48px;
  }
  40% {
    background-position: 48px -32px;
  }
  60% {
    background-position: -32px -64px;
  }
  80% {
    background-position: 64px 24px;
  }
  100% {
    background-position: 0 0;
  }
}

[data-mode='lite'] .grain,
[data-mode='reduced'] .grain {
  display: none;
}

/* ---------- reveals ---------- */

.pre {
  opacity: 0;
  transform: translateY(28px);
}

.stage-ready .pre {
  will-change: opacity, transform;
}

.revealed .pre {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.revealed .pre:nth-child(2) {
  transition-delay: 0.07s;
}
.revealed .pre:nth-child(3) {
  transition-delay: 0.14s;
}
.revealed .pre:nth-child(4) {
  transition-delay: 0.21s;
}
.revealed .pre:nth-child(5) {
  transition-delay: 0.28s;
}
.revealed .pre:nth-child(6) {
  transition-delay: 0.35s;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .driver-grid {
    grid-template-columns: 1fr;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .panel-layout {
    grid-template-columns: 1fr;
  }
  .panel-stack {
    position: static;
    display: grid;
    gap: 28px;
  }
  .panel {
    grid-area: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  #work .panel-stack {
    display: none;
  }
  .marquee,
  .progress-rail {
    display: none;
  }
}

@media (max-width: 480px) {
  .cta-row .btn {
    width: 100%;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .grain,
  .hero-scroll-cue,
  .hero-driver-chip,
  .hero-loading,
  .marquee,
  .cursor-dot,
  .cursor-ring,
  .progress-rail {
    display: none;
  }
}