*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--em); outline-offset: 2px; }
:root {
  --bk: #080808; --em: #F05A10; --wh: #fff;
  --f: 'Outfit', sans-serif; --m: 'JetBrains Mono', monospace;
  --px: clamp(24px, 5vw, 80px);
  --max: 1100px;
}
html { font-size: 16px; }
body { font-family: var(--f); background: var(--bk); color: var(--wh); -webkit-font-smoothing: antialiased; overflow-x: clip; }

/* ── NAV — always solid ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 0 var(--px); height: 56px;
  display: flex; align-items: center;
  background: var(--bk);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background-color .3s, border-color .3s;
  contain: layout style;
}
nav.on-orange { background: var(--em); border-bottom-color: rgba(0,0,0,.1); }
.n-wm { font-weight: 800; font-size: 13px; letter-spacing: .12em; }

/* ── GLOBAL SCANLINE ── */
#scanline {
  position: fixed; left: 0; right: 0; z-index: 90;
  height: 1px; pointer-events: none;
  top: 61.8%; transition: opacity .4s;
  will-change: opacity;
  contain: layout style;
}
#scanline .sl-wire { position: absolute; inset: 0; background: var(--em); opacity: .1; }
#scanline .sl-label {
  position: absolute; top: -8px;
  font-family: var(--m); font-size: 7px; letter-spacing: .04em;
  color: var(--em); opacity: .2; white-space: nowrap;
}
#scanline .sl-l { left: var(--px); }
#scanline .sl-r { right: var(--px); }
#scanline.sl-active .sl-wire { opacity: .4; }
#scanline.sl-active .sl-label { opacity: .45; }
#scanline.sl-orange { opacity: 0; }
#scanline.sl-hidden { opacity: 0; }

/* ── REVEAL ── */
.rv {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.23,1,.32,1), transform .8s cubic-bezier(.23,1,.32,1);
}
.rv.vis { opacity: 1; transform: translateY(0); }
.rv-d1 { transition-delay: .15s; }
.rv-d2 { transition-delay: .3s; }
.rv-d3 { transition-delay: .45s; }


/* ── SECTION NUMBER ── */
.sn {
  font-family: var(--m); font-size: 10px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--em); opacity: .5;
  margin-bottom: clamp(20px,2.5vw,36px);
}

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex; align-items: flex-end;
  padding: 56px var(--px) clamp(48px,8vh,100px);
  position: relative; overflow: hidden;
  contain: layout style paint;
}
/* Subtle data grid background */
.hero-grid {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  transform: translateZ(0);
}
.hero-grid::before {
  content: '';
  position: absolute; inset: -1px;
  background-image:
    linear-gradient(rgba(240,90,16,.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,90,16,.25) 1px, transparent 1px);
  background-size: clamp(40px,6vw,80px) clamp(40px,6vw,80px);
  mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, black 0%, transparent 70%);
}
.hero-inner { position: relative; z-index: 2; max-width: var(--max); width: 100%; }
.hero-label {
  font-family: var(--m); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--em);
  margin-bottom: clamp(14px,1.8vw,24px);
}
.hero-headline {
  font-weight: 800;
  font-size: clamp(44px, 7vw, 100px);
  line-height: 1.04; letter-spacing: -.035em;
}
.hero-headline .accent { color: var(--em); }
/* Hero corner data */
.hero-data {
  position: absolute; z-index: 3;
  font-family: var(--m); font-size: 9px; letter-spacing: .04em;
  color: rgba(255,255,255,.18); line-height: 1.8;
}
.hero-data-tl { top: clamp(72px,10vh,120px); left: var(--px); }
.hero-data-tr { top: clamp(72px,10vh,120px); right: var(--px); text-align: right; }

/* ═══════════════════════════════════════════
   TEXT SECTIONS
   ═══════════════════════════════════════════ */
.txt { padding: clamp(40px,6vh,80px) var(--px); }
.txt-inner { max-width: 760px; }
.txt-inner.wide { max-width: 900px; }
.txt-inner.right { margin-left: auto; margin-right: 0; }

.body-text {
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.72; font-weight: 400;
  color: rgba(255,255,255,.75);
}
.body-text em { font-style: normal; color: var(--wh); font-weight: 500; }
.body-text p + p { margin-top: 1em; }

.body-lg {
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.55; font-weight: 400;
  color: rgba(255,255,255,.7);
}
.body-lg em { font-style: normal; color: var(--wh); font-weight: 600; }

/* ═══════════════════════════════════════════
   DIVIDER — with optional data annotation
   ═══════════════════════════════════════════ */
.divider {
  padding: 0 var(--px);
  display: flex; align-items: center; gap: 16px;
}
.divider-line { flex: 1; height: 1px; background: rgba(255,255,255,.06); }
.divider-label {
  font-family: var(--m); font-size: 8px; letter-spacing: .1em;
  color: rgba(255,255,255,.1); text-transform: uppercase;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════
   TURN — "Except the boot"
   Full-width orange line + massive type
   ═══════════════════════════════════════════ */
.turn-bar {
  height: 3px;
  background: var(--em);
  margin: 0 var(--px);
}
.turn-wrap {
  padding: clamp(40px,6vh,80px) var(--px) clamp(48px,8vh,100px);
}
.turn {
  font-weight: 800;
  font-size: clamp(40px, 6.5vw, 96px);
  line-height: 1.05; letter-spacing: -.035em;
  color: var(--em);
  max-width: var(--max);
}

/* ═══════════════════════════════════════════
   MATERIAL STRIP
   ═══════════════════════════════════════════ */
.mat-single {
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mat-single .mat-cell { width: 100%; }
.mat-cell img { width: 100%; max-height: 480px; object-fit: cover; object-position: center bottom; display: block; }

/* ═══════════════════════════════════════════
   ORANGE — Statement + Answer
   ═══════════════════════════════════════════ */
.orange {
  background: var(--em); color: var(--bk);
  padding: clamp(72px,12vh,160px) var(--px);
  position: relative; overflow: hidden;
  contain: layout style paint;
}
.orange-inner { position: relative; z-index: 2; max-width: var(--max); }
.orange-st-dim {
  font-weight: 800;
  font-size: clamp(36px, 5.5vw, 80px);
  line-height: 1.1; letter-spacing: -.025em;
  color: var(--wh);
}
.orange-st-bright {
  font-weight: 800;
  font-size: clamp(36px, 5.5vw, 80px);
  line-height: 1.1; letter-spacing: -.025em;
  color: var(--bk); margin-top: .06em;
}
.orange-rule {
  width: 40px; height: 3px;
  background: rgba(0,0,0,.2);
  margin: clamp(32px,4vw,56px) 0;
}
.orange-headline {
  font-weight: 800;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.12; letter-spacing: -.02em;
  color: var(--bk);
}
.orange-body {
  margin-top: clamp(16px,2vw,28px);
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.72;
  color: rgba(0,0,0,.5); max-width: 600px; font-weight: 400;
}

/* ═══════════════════════════════════════════
   PROMISE — BIG standalone line
   ═══════════════════════════════════════════ */
.promise-wrap {
  padding: clamp(80px,14vh,180px) var(--px);
}
.promise-inner { max-width: var(--max); }
.promise-small {
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 400;
  color: rgba(255,255,255,.45);
  margin-bottom: clamp(8px,1vw,16px);
}
.promise-big {
  font-weight: 800;
  font-size: clamp(28px, 4.5vw, 64px);
  line-height: 1.1; letter-spacing: -.025em;
  color: var(--wh);
}
.promise-big .em-or { color: var(--em); }

/* ═══════════════════════════════════════════
   FINALE — Orange ending
   ═══════════════════════════════════════════ */
.finale-orange {
  background: var(--em); color: var(--bk);
  padding: clamp(80px,14vh,180px) var(--px) clamp(80px,12vh,160px);
  text-align: center; position: relative;
  contain: layout style paint;
}
.finale-orange-inner { position: relative; z-index: 2; }
.fo-close {
  font-size: clamp(16px, 1.5vw, 21px);
  color: rgba(0,0,0,.55);
  margin-bottom: clamp(48px,8vh,100px);
}
.fo-logo { margin-bottom: clamp(16px,2vw,28px); }
.fo-claim {
  font-weight: 900;
  font-size: clamp(40px, 7vw, 108px);
  line-height: 1.05; letter-spacing: -.035em;
  color: var(--bk); white-space: nowrap;
}
.fo-line {
  width: 48px; height: 3px; background: rgba(0,0,0,.2);
  margin: clamp(20px,2.5vw,36px) auto clamp(28px,3.5vw,48px);
}
.fo-email a {
  font-family: var(--m); font-size: clamp(13px, 1.2vw, 16px);
  color: var(--bk); text-decoration: none;
  letter-spacing: .04em; opacity: .4; transition: opacity .3s;
}
.fo-email a:hover { opacity: .7; }

/* ── FOOTER — slim black bar ── */
footer {
  background: var(--bk);
  padding: 18px var(--px);
}
.ft-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.ft-left { display: flex; align-items: center; gap: 12px; }
.ft-logo-mark { font-weight: 800; font-size: 10px; letter-spacing: .1em; color: rgba(255,255,255,.4); }
.ft-company { font-family: var(--m); font-size: 8px; color: rgba(255,255,255,.35); }
.ft-links { display: flex; gap: 16px; }
.ft-links a { font-family: var(--m); font-size: 9px; color: rgba(255,255,255,.35); text-decoration: none; letter-spacing: .05em; transition: color .2s; }
.ft-links a:hover { color: rgba(255,255,255,.6); }

/* ── KEYFRAMES ── */
@keyframes w1{0%{transform:scale(1.4)}12%{transform:scale(1.36)}20%{transform:scale(1.08)}28%{transform:scale(1)}87%{transform:scale(1)}100%{transform:scale(1.4)}}
@keyframes w2{0%{transform:scale(1)}13%{transform:scale(1.4)}25%{transform:scale(1.36)}41%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes w3{0%{transform:scale(1)}26%{transform:scale(1.4)}38%{transform:scale(1.36)}54%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes w4{0%{transform:scale(1)}39%{transform:scale(1.4)}51%{transform:scale(1.36)}67%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes w5{0%{transform:scale(1)}52%{transform:scale(1.4)}64%{transform:scale(1.36)}80%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes w6{0%{transform:scale(1)}65%{transform:scale(1.4)}77%{transform:scale(1.36)}93%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.8;transform:scale(1.04)}}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .txt-inner.right{margin-left:0}
  .hero-data{display:none}
}
@media(max-width:600px){
  .hero{align-items:center;padding:56px var(--px) 0}
  .ft-inner{flex-direction:column;align-items:center;text-align:center}
  .fo-claim{font-size:clamp(32px,11vw,60px);white-space:normal}
  #scanline .sl-label{display:none}
}