:root {
  --ink: #090a0a;
  --paper: #edece6;
  --yellow: #f4d000;
  --red: #e43b2f;
  --line: rgba(255,255,255,.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--yellow); color: #000; }

.hero { --mx: 0px; --my: 0px; position: relative; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; isolation: isolate; }
.hero-photo { position: absolute; z-index: -3; inset: -18px; background: url('/hero-truck.png') 52% center/cover no-repeat; transform: translate(var(--mx), var(--my)) scale(1.035); transition: transform .3s ease-out; }
.hero-shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(3,4,4,.92) 0%, rgba(3,4,4,.68) 37%, rgba(3,4,4,.1) 67%), linear-gradient(0deg, rgba(3,4,4,.8) 0%, transparent 35%, rgba(3,4,4,.35) 100%); }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .2; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%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='.3'/%3E%3C/svg%3E"); }

.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 24px clamp(22px,4vw,64px); border-bottom: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: .16em; }
.brand { display: inline-flex; width: max-content; align-items: center; gap: 9px; font-style: italic; font-weight: 900; letter-spacing: -.07em; }
.brand-dmk { font-size: 25px; line-height: .8; }
.brand-divider { width: 3px; height: 24px; background: var(--yellow); transform: skewX(-15deg); }
.brand-racing { font-size: 11px; letter-spacing: .18em; }
.discipline { justify-self: center; color: #c7c7c2; }
.mini-link { justify-self: end; border-bottom: 1px solid rgba(255,255,255,.55); padding-bottom: 5px; transition: color .2s, border-color .2s; }
.mini-link:hover { color: var(--yellow); border-color: var(--yellow); }

.hero-content { width: min(770px, 86vw); margin: auto 0 auto clamp(22px,7vw,112px); padding: 70px 0; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; font: 700 10px/1 Arial, sans-serif; letter-spacing: .19em; text-transform: uppercase; color: #a8aaa7; }
.eyebrow span { color: var(--yellow); }
.hero h1, .manifesto h2, .follow h2 { margin: 0; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-weight: 900; letter-spacing: -.035em; line-height: .82; text-transform: uppercase; }
.hero h1 { font-size: clamp(68px, 10.2vw, 166px); max-width: 1000px; text-wrap: nowrap; }
.hero h1 span { display: block; color: transparent; -webkit-text-stroke: 1.5px var(--yellow); margin-left: clamp(26px,6vw,96px); }
.hero-copy-row { margin-top: 38px; margin-left: clamp(28px,10vw,156px); display: flex; align-items: center; gap: 42px; }
.lead { max-width: 340px; margin: 0; color: #c4c5c0; font-size: 13px; line-height: 1.65; }
.lead strong { color: #fff; }
.cta { --cta-bg: var(--yellow); --cta-fg: #090a0a; display: inline-flex; align-items: stretch; min-width: 246px; height: 56px; background: var(--cta-bg); color: var(--cta-fg); font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); transition: transform .2s ease, filter .2s ease; }
.cta:hover { transform: translateY(-3px); filter: brightness(1.08); }
.cta-label { display: grid; place-items: center; padding: 0 24px; flex: 1; }
.cta-arrow { display: grid; place-items: center; width: 54px; border-left: 1px solid rgba(0,0,0,.25); font-size: 19px; }
.track-line { display: flex; gap: 20px; align-items: center; margin: 0 clamp(22px,4vw,64px) 23px; font: 700 8px/1 Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #848581; }
.track-line i { height: 1px; background: rgba(255,255,255,.26); flex: 1; }
.track-line b { color: #fff; }
.scroll-cue { position: absolute; right: clamp(22px,4vw,64px); top: 50%; display: flex; align-items: center; gap: 10px; transform: rotate(90deg) translateX(50%); transform-origin: right; text-transform: uppercase; font-size: 8px; letter-spacing: .2em; }
.scroll-cue i { width: 36px; height: 1px; background: var(--yellow); }

.manifesto { background: var(--paper); color: var(--ink); min-height: 700px; padding: clamp(80px,11vw,170px) clamp(22px,7vw,112px); display: grid; grid-template-columns: .45fr 1.3fr .85fr; gap: clamp(30px,5vw,90px); align-items: start; }
.section-index { font-size: 10px; font-weight: 700; letter-spacing: .2em; padding-top: 10px; }
.kicker { margin: 0 0 19px; color: #6b6c68; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.manifesto h2 { font-size: clamp(55px,7vw,105px); }
.manifesto-copy > p:last-child { max-width: 510px; margin: 42px 0 0; padding-left: clamp(0px,5vw,80px); font-size: 15px; line-height: 1.75; color: #555650; }
.telemetry { border-top: 1px solid #b8b8b2; }
.telemetry div { padding: 23px 0; border-bottom: 1px solid #b8b8b2; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.telemetry span { color: #777873; font-size: 9px; letter-spacing: .17em; }
.telemetry strong { font: 900 12px/1 Arial, sans-serif; letter-spacing: .06em; }

.follow { min-height: 82svh; position: relative; overflow: hidden; padding: 32px clamp(22px,4vw,64px) clamp(60px,8vw,120px); display: flex; flex-direction: column; isolation: isolate; }
.follow-image { position: absolute; z-index: -3; inset: 0; background: url('/hero-truck.png') 86% 56%/155% auto no-repeat; filter: grayscale(.15) contrast(1.1); transform: scaleX(-1); }
.follow-overlay { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(8,9,9,.95), rgba(8,9,9,.62) 55%, rgba(8,9,9,.05)), linear-gradient(0deg, rgba(8,9,9,.8), transparent 60%); }
.follow-topline { display: flex; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.follow-content { margin: auto 0 0 clamp(0px,7vw,100px); }
.follow-content > p { color: var(--yellow); text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.follow h2 { font-size: clamp(66px,10vw,150px); margin: 20px 0 45px; }
.follow h2 em { color: var(--yellow); font-style: normal; }
.cta-light { --cta-bg: #f4f3ed; }
footer { min-height: 120px; padding: 35px clamp(22px,4vw,64px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid #252626; color: #858682; font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }
footer p:last-child { justify-self: end; }
.footer-brand { color: #fff; }

@media (max-width: 800px) {
  .topbar { grid-template-columns: 1fr 1fr; }
  .discipline { display: none; }
  .hero-photo { background-position: 59% center; opacity: .9; }
  .hero-shade { background: linear-gradient(0deg, rgba(3,4,4,.88), rgba(3,4,4,.18) 70%), linear-gradient(90deg, rgba(3,4,4,.78), transparent); }
  .hero-content { width: auto; margin: auto 22px 62px; padding: 60px 0 0; }
  .hero h1 { font-size: clamp(56px,17vw,102px); text-wrap: wrap; }
  .hero h1 span { margin-left: 0; }
  .hero-copy-row { margin: 30px 0 0; flex-direction: column; align-items: flex-start; gap: 26px; }
  .lead { max-width: 300px; color: #e2e2dd; }
  .scroll-cue { display: none; }
  .track-line { gap: 10px; }
  .track-line span:last-child { display: none; }
  .manifesto { grid-template-columns: 1fr; min-height: auto; }
  .section-index { display: none; }
  .manifesto-copy > p:last-child { padding-left: 0; }
  .telemetry { margin-top: 30px; }
  .follow { min-height: 720px; }
  .follow-image { background-size: auto 100%; background-position: 48% center; opacity: .68; }
  .follow-topline span:last-child { display: none; }
  .follow-content { margin-left: 0; }
  .follow h2 { font-size: clamp(55px,17vw,96px); }
  footer { grid-template-columns: 1fr auto; gap: 20px; }
  footer p:first-of-type { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-photo, .cta { transition: none; }
}