/* =========================================================================
   Built Like You — Ditch Witch x Littlefield Agency
   ========================================================================= */

:root {
  --orange: #FF5A1F;
  --orange-deep: #E04515;
  --orange-low: #2A1308;
  --black: #0A0A0A;
  --asphalt: #141414;
  --asphalt-2: #1C1C1C;
  --steel: #9A938A;
  --steel-2: #2A2A2A;
  --steel-dark: #6B6B6B;
  --paper: #F2EDE4;
  --paper-2: #E8E1D4;
  --bone: #D8CFBE;
  --hi-vis: #FFC600;
  --rule: rgba(255, 255, 255, 0.12);
  --rule-dark: rgba(10, 10, 10, 0.14);

  --f-display: "Big Shoulders Display", "Anton", "Arial Narrow", sans-serif;
  --f-body: "Archivo", "Helvetica Neue", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --pad-x: clamp(20px, 4vw, 64px);
  --max-w: 1440px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--black); color: var(--paper); font-family: var(--f-body); -webkit-font-smoothing: antialiased; }
body { font-size: 16px; line-height: 1.6; overflow-x: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--orange); color: var(--black); }

/* Type */
.eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: var(--steel); }
.eyebrow .dot { display: inline-block; width: 6px; height: 6px; background: var(--orange); border-radius: 50%; margin-right: 10px; transform: translateY(-2px); }

.display { font-family: var(--f-display); font-weight: 900; line-height: 0.84; letter-spacing: -0.01em; text-transform: uppercase; }
.display.h1 { font-size: clamp(64px, 13vw, 220px); }
.display.h2 { font-size: clamp(48px, 8vw, 132px); }
.display.h3 { font-size: clamp(32px, 4.5vw, 72px); }
.display.h4 { font-size: clamp(28px, 3.2vw, 48px); }

.section-num { font-family: var(--f-display); font-weight: 900; font-size: clamp(80px, 14vw, 220px); line-height: 0.8; color: transparent; -webkit-text-stroke: 1.5px var(--orange); }

.lede { font-family: var(--f-body); font-size: clamp(20px, 2vw, 28px); line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; }

p.body { font-size: 17px; line-height: 1.65; color: var(--bone); max-width: 56ch; }
p.body strong { color: var(--paper); font-weight: 600; }

.label-mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); font-weight: 500; }

/* Topbar */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--pad-x); background: linear-gradient(180deg, rgba(10,10,10,0.92), rgba(10,10,10,0.6) 80%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.topbar .brand { display: flex; align-items: center; gap: 10px; color: var(--paper); font-weight: 600; text-decoration: none; }
.topbar .brand .lf-mark { width: 28px; height: 28px; display: grid; place-items: center; }
.topbar .brand .lf-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.topbar .case-meta { display: flex; gap: 22px; color: #9A958C; }
.topbar .case-meta span strong { color: var(--paper); font-weight: 600; margin-left: 6px; }
.topbar .progress { display: flex; gap: 8px; align-items: center; }
.topbar .progress a { display: block; width: 24px; height: 2px; background: var(--paper); text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; }
.topbar .progress a.active { background: var(--orange); }
.topbar .progress a:hover { background: var(--orange); transform: scaleY(1.6); }
@media (max-width: 900px) { .topbar .case-meta { display: none; } }

/* Hero */
.hero { position: relative; min-height: 100vh; padding: 96px var(--pad-x) 32px; display: flex; flex-direction: column; background: var(--black); overflow: hidden; }
.hero::before { content: ""; position: absolute; top: 0; right: 0; width: 38%; height: 100%; background: repeating-linear-gradient(-45deg, transparent 0 22px, rgba(255, 90, 31, 0.05) 22px 24px); pointer-events: none; }

.hero-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); position: relative; z-index: 2; }
@media (max-width: 700px) { .hero-meta { grid-template-columns: repeat(2, 1fr); gap: 18px 20px; } }
.hero-meta .item .k { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); margin-bottom: 4px; }
.hero-meta .item .v { font-family: var(--f-body); font-size: 14px; color: var(--paper); font-weight: 500; }

.hero-title { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; padding: 4vh 0; }
.hero-eyebrow { font-family: var(--f-mono); font-size: clamp(12px, 1vw, 14px); letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--bone); margin-bottom: clamp(24px, 4vh, 48px); }
.hero-eyebrow .short { display: none; }
@media (max-width: 600px) { .hero-eyebrow .full { display: none; } .hero-eyebrow .short { display: inline; } }
.hero-eyebrow .dot { display: inline-block; width: 7px; height: 7px; background: var(--orange); border-radius: 50%; margin-right: 12px; transform: translateY(-2px); }
.hero-title .hero-logo { width: min(86%, 1200px); max-width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 40px rgba(0,0,0,0.45)); }
.bly-logo-inline { width: min(360px, 90%); height: auto; display: block; margin: 8px 0 16px; }
.hero-title .line { display: block; position: relative; }
.hero-title .line.l2 { padding-left: clamp(20px, 8vw, 140px); }
.hero-title .line.l3 { padding-left: clamp(40px, 16vw, 280px); color: var(--orange); }

.hero-tag { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-top: 24px; border-top: 1px solid var(--rule); position: relative; z-index: 2; }
.hero-tag .deck { font-family: var(--f-body); font-size: clamp(15px, 1.4vw, 19px); line-height: 1.4; max-width: 48ch; color: var(--bone); }
.hero-tag .scroll-cue { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.hero-tag .scroll-cue::after { content: ""; display: inline-block; width: 1px; height: 36px; background: linear-gradient(180deg, var(--orange), transparent); animation: scrollPulse 1.8s ease-in-out infinite; }
@keyframes scrollPulse { 0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.3; } 50% { transform: scaleY(1); opacity: 1; } }

.hero-reel { position: absolute; inset: 0; z-index: 1; opacity: 0.6; pointer-events: none; }
.hero-reel image-slot { width: 100%; height: 100%; display: block; }
.hero-reel .hero-still { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-reel::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 0%, rgba(10,10,10,0.45) 55%, var(--black) 95%), linear-gradient(180deg, rgba(10,10,10,0.55) 0%, transparent 30%, transparent 60%, rgba(10,10,10,0.95) 100%); }

.scrubber { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--rule); position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; }
.scrubber .play { width: 44px; height: 44px; border: 1.5px solid var(--paper); display: grid; place-items: center; border-radius: 50%; transition: all 0.2s ease; }
.scrubber .play:hover { background: var(--orange); border-color: var(--orange); }
.scrubber .play svg { width: 14px; height: 14px; fill: var(--paper); margin-left: 2px; }
.scrubber .timeline { flex: 1; height: 2px; background: var(--steel-2); position: relative; }
.scrubber .timeline .fill { position: absolute; left: 0; top: 0; height: 100%; width: 34%; background: var(--orange); }
.scrubber .timeline .head { position: absolute; top: 50%; left: 34%; width: 10px; height: 10px; background: var(--orange); transform: translate(-50%, -50%); border-radius: 50%; }
.scrubber .time { font-family: var(--f-mono); font-size: 11px; color: var(--steel); letter-spacing: 0.1em; min-width: 80px; text-align: right; }

/* Marquee */
.marquee { background: var(--orange); color: var(--black); padding: 18px 0; overflow: hidden; position: relative; border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); }
.marquee .track { display: flex; gap: 48px; width: max-content; animation: marquee 30s linear infinite; font-family: var(--f-display); font-weight: 900; font-size: clamp(28px, 3vw, 44px); text-transform: uppercase; letter-spacing: -0.005em; white-space: nowrap; align-items: center; }
.marquee .track .star { display: inline-block; width: 14px; height: 14px; background: var(--black); transform: rotate(45deg); flex-shrink: 0; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Chapters */
.chapter { padding: clamp(80px, 12vh, 160px) var(--pad-x); position: relative; }
.chapter.dark { background: var(--black); color: var(--paper); }
.chapter.asphalt { background: var(--asphalt); color: var(--paper); }
.chapter.paper { background: var(--paper); color: var(--black); }
.chapter-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 64px); align-items: flex-end; padding-bottom: 56px; border-bottom: 1px solid var(--rule); margin-bottom: 56px; }
.chapter.paper .chapter-head { border-bottom-color: var(--rule-dark); }
.chapter-head .title-block { max-width: 760px; }
.chapter-head .display { margin-top: 12px; }
.chapter-head .display.h3 { line-height: 0.92; text-wrap: balance; }
.chapter-head .title-block .head-lede { margin-top: 24px; color: var(--bone); max-width: 60ch; }

/* Situation */
.situation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 80px); align-items: start; }
.situation-grid .copy { display: flex; flex-direction: column; gap: 18px; }
.situation-grid .copy p { font-size: 17px; line-height: 1.65; color: var(--bone); }
.situation-grid .copy p strong { color: var(--paper); font-weight: 600; }
.situation-grid .copy .lede { color: var(--paper); }
.situation-grid .visual { position: relative; aspect-ratio: 4 / 5; }
.situation-grid .visual image-slot { width: 100%; height: 100%; }
.situation-grid .visual .caption { margin-top: 14px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); display: flex; justify-content: space-between; }
@media (max-width: 900px) { .situation-grid { grid-template-columns: 1fr; } }

/* Insight */
.insight { padding: clamp(100px, 16vh, 200px) var(--pad-x); background: var(--asphalt); position: relative; overflow: hidden; }
.insight::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 30%, rgba(255, 90, 31, 0.08), transparent 50%), radial-gradient(circle at 10% 80%, rgba(255, 90, 31, 0.05), transparent 60%); pointer-events: none; }
.insight-inner { max-width: 1400px; margin: 0 auto; position: relative; }
.insight .chapter-head { padding-bottom: 32px; margin-bottom: 32px; }
.insight .chapter-head .title-block { padding-bottom: 8px; }
.insight-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.insight-body .quote { margin-top: 0; }
.insight-image { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--asphalt-2); }
.insight-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .insight-body { grid-template-columns: 1fr; }
  .insight-image { aspect-ratio: 4 / 3; }
}
.insight .quote-mark { font-family: var(--f-display); font-size: clamp(120px, 18vw, 280px); line-height: 0.8; color: var(--orange); font-weight: 900; }
.insight .quote { font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 6vw, 96px); line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase; color: var(--paper); margin-top: 40px; max-width: 24ch; }
.insight .quote em { color: var(--orange); font-style: normal; }
.insight .attribution { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.insight .attribution .who { max-width: 30ch; }
.insight .attribution .who .name { font-family: var(--f-display); font-size: 24px; font-weight: 800; text-transform: uppercase; }
.insight .attribution .who .role { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); margin-top: 4px; }
.insight .attribution .stat { text-align: right; }
.insight .attribution .stat .num { font-family: var(--f-display); font-size: clamp(40px, 5vw, 72px); font-weight: 900; line-height: 1; color: var(--orange); }
.insight .attribution .stat .label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); margin-top: 6px; max-width: 22ch; }

/* Identity */
.identity { background: var(--paper); color: var(--black); --steel: var(--steel-dark); }
.identity .chapter-head { border-bottom-color: var(--rule-dark); }
.identity .section-num { -webkit-text-stroke-color: var(--orange); }
.identity .eyebrow { color: var(--steel-2); }
.identity .lede { color: var(--black); }
.id-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.id-card { background: #FFFFFF; border: 1px solid var(--rule-dark); padding: 32px; position: relative; }
.id-card .corner-tl, .id-card .corner-br { position: absolute; width: 8px; height: 8px; border-color: var(--orange); border-style: solid; }
.id-card .corner-tl { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.id-card .corner-br { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.id-card .id-card-head { display: flex; justify-content: space-between; align-items: flex-start; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); margin-bottom: 28px; }
.id-logo { grid-column: span 7; min-height: 460px; display: flex; flex-direction: column; }
.id-logo .logo-stage { flex: 1; display: grid; place-items: center; background: var(--black); color: var(--paper); margin: 0 -32px; padding: 32px; position: relative; overflow: hidden; }
.id-logo .logo-stage::before { content: ""; position: absolute; inset: 24px; border: 1px dashed rgba(255, 255, 255, 0.08); }
.wordmark { font-family: var(--f-display); font-weight: 900; font-size: clamp(40px, 7vw, 110px); line-height: 0.82; letter-spacing: -0.015em; text-transform: uppercase; position: relative; text-align: center; }
.wordmark .row { display: block; }
.wordmark .row .dw { display: inline-block; background: var(--orange); color: var(--black); padding: 0 0.18em 0.04em; margin-right: 0.12em; }
.wordmark .tagline { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(14px, 1.4vw, 22px); letter-spacing: 0.2em; color: var(--orange); margin-top: 18px; line-height: 1; }
.id-logo .logo-meta { display: flex; justify-content: space-between; margin-top: 24px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); }
.id-type { grid-column: span 5; min-height: 460px; display: flex; flex-direction: column; }
.id-type .specimen { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 0; }
.id-type .specimen .row { border-bottom: 1px solid var(--rule-dark); padding-bottom: 18px; }
.id-type .specimen .row:last-child { border-bottom: none; padding-bottom: 0; }
.id-type .specimen .row .glyph { font-family: var(--f-display); font-weight: 900; font-size: 90px; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; color: var(--black); }
.id-type .specimen .row .glyph.body { font-family: var(--f-body); font-weight: 700; font-size: 56px; letter-spacing: -0.02em; }
.id-type .specimen .row .glyph.mono { font-family: var(--f-mono); font-weight: 500; font-size: 38px; letter-spacing: 0; }
.id-type .specimen .row .meta { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); margin-top: 8px; }
.id-type .specimen .row .meta strong { color: var(--black); font-weight: 600; }
.id-color { grid-column: span 7; }
.swatch-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 24px; }
.swatch { aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.swatch .name { font-weight: 700; }
.swatch .vals span { display: block; margin-top: 2px; }
.swatch.s-orange { background: var(--orange); color: var(--black); }
.swatch.s-black { background: var(--black); color: var(--paper); }
.swatch.s-asphalt { background: var(--asphalt-2); color: var(--paper); }
.swatch.s-steel { background: var(--steel); color: var(--paper); }
.swatch.s-paper { background: var(--paper-2); color: var(--black); border: 1px solid var(--rule-dark); }
.id-lockups { grid-column: span 5; min-height: 320px; }
.lockup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.lockup-tile { aspect-ratio: 1; display: grid; place-items: center; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; position: relative; }
.lockup-tile.dark { background: var(--black); color: var(--paper); }
.lockup-tile.orange { background: var(--orange); color: var(--black); }
.lockup-tile.light { background: var(--paper-2); color: var(--black); }
.lockup-tile.outline { background: var(--paper); color: var(--black); border: 1px solid var(--black); }
.lockup-tile .mini { font-size: 26px; letter-spacing: -0.02em; line-height: 0.9; text-align: center; }
.lockup-tile .mini .accent { color: var(--orange); }
.lockup-tile.orange .mini .accent { color: var(--paper); }
.lockup-tile .corner { position: absolute; top: 8px; left: 8px; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.5; }
@media (max-width: 1000px) { .id-logo, .id-type, .id-color, .id-lockups { grid-column: span 12; } .swatch-row { grid-template-columns: repeat(3, 1fr); } }

/* Photography */
.photography { background: var(--black); padding: clamp(60px, 9vh, 120px) 0 clamp(80px, 12vh, 160px); }
.photography .chapter-head { padding: 0 var(--pad-x) 32px; margin-bottom: 0; border-bottom: 1px solid var(--rule); }
.spread { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; }
.spread .frame { position: relative; overflow: hidden; }
.spread .frame image-slot { width: 100%; height: 100%; display: block; }
.spread .frame .cap { position: absolute; bottom: 16px; left: 16px; right: 16px; z-index: 3; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); display: flex; justify-content: space-between; pointer-events: none; text-shadow: 0 1px 8px rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.3s ease; }
.spread .frame:hover .cap { opacity: 1; }
.spread .f1 { grid-column: 1 / span 7; aspect-ratio: 7 / 6; }
.spread .f2 { grid-column: 8 / span 5; aspect-ratio: 5 / 6; }
.spread .f3 { grid-column: 1 / span 4; aspect-ratio: 4 / 5; }
.spread .f4 { grid-column: 5 / span 4; aspect-ratio: 4 / 5; }
.spread .f5 { grid-column: 9 / span 4; aspect-ratio: 4 / 5; }
.spread-callout { grid-column: 1 / -1; padding: 80px var(--pad-x); background: var(--paper); color: var(--black); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 80px); align-items: end; position: relative; }
.spread-callout .num { font-family: var(--f-display); font-size: clamp(80px, 14vw, 220px); font-weight: 900; line-height: 0.8; color: var(--orange); letter-spacing: -0.02em; }
.spread-callout .copy { padding-bottom: 16px; }
.spread-callout .copy h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 3.2vw, 44px); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; max-width: 18ch; }
.spread-callout .copy p { margin-top: 14px; max-width: 44ch; font-size: 15px; line-height: 1.55; color: var(--steel-2); }
.spread .f6 { grid-column: 1 / span 12; aspect-ratio: 21 / 9; }
.spread .f7 { grid-column: 1 / span 5; aspect-ratio: 5 / 5; }
.spread .f8 { grid-column: 6 / span 7; aspect-ratio: 7 / 5; }
@media (max-width: 900px) {
  .spread .f1, .spread .f2, .spread .f3, .spread .f4, .spread .f5,
  .spread .f6, .spread .f7, .spread .f8 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .spread-callout { grid-template-columns: 1fr; }
}

/* Horizontal gallery */
.h-scroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 32px var(--pad-x) 16px; scrollbar-width: thin; scrollbar-color: var(--orange) var(--asphalt); }
.h-scroll::-webkit-scrollbar { height: 6px; }
.h-scroll::-webkit-scrollbar-track { background: var(--asphalt); }
.h-scroll::-webkit-scrollbar-thumb { background: var(--orange); }
.h-scroll .tile { flex: 0 0 clamp(280px, 32vw, 480px); aspect-ratio: 3 / 4; scroll-snap-align: start; position: relative; background: var(--asphalt-2); }
.h-scroll .tile image-slot { width: 100%; height: 100%; }
.h-scroll .tile .meta { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; display: flex; justify-content: space-between; color: var(--paper); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.7)); }
.h-scroll-cue { padding: 0 var(--pad-x) 32px; display: flex; justify-content: space-between; align-items: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); }

/* Film */
.film { background: var(--asphalt); color: var(--paper); padding: clamp(80px, 12vh, 160px) var(--pad-x); }
.film .video-grid { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; }
.video-card { position: relative; background: var(--black); cursor: pointer; overflow: hidden; border: 1px solid var(--rule); transition: border-color 0.25s ease; aspect-ratio: 16 / 9; }
.video-card:hover { border-color: var(--orange); }
.video-card image-slot { width: 100%; height: 100%; }
.video-card .vc-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.85) 100%); z-index: 2; pointer-events: none; }
.video-card .vc-top { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); }
.video-card .vc-top .runtime { color: var(--orange); }
.video-card .vc-bottom .title { font-family: var(--f-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 36px); line-height: 1; text-transform: uppercase; letter-spacing: -0.005em; max-width: 18ch; }
.video-card .vc-bottom .sub { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone); margin-top: 10px; }
.video-card .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; background: var(--orange); border-radius: 50%; display: grid; place-items: center; z-index: 3; transition: transform 0.25s ease, background 0.25s ease; pointer-events: none; }
.video-card:hover .play-btn { transform: translate(-50%, -50%) scale(1.08); background: var(--paper); }
.video-card .play-btn svg { width: 22px; height: 22px; fill: var(--black); margin-left: 3px; }
.video-card.lg { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
@media (max-width: 900px) { .film .video-grid { grid-template-columns: 1fr; grid-template-rows: none; } .video-card.lg { grid-column: 1; grid-row: auto; aspect-ratio: 16/9; } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.96); display: none; z-index: 100; padding: 48px var(--pad-x); flex-direction: column; justify-content: center; align-items: center; }
.lightbox.open { display: flex; }
.lightbox .lb-frame { width: 100%; max-width: 1280px; aspect-ratio: 16 / 9; background: var(--black); position: relative; border: 1px solid var(--rule); }
.lightbox .lb-frame::before { content: "VIDEO PLACEHOLDER"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.24em; color: var(--steel); }
.lightbox .lb-frame.has-video::before { display: none; }
.lightbox .lb-frame.has-video .lb-play { display: none; }
.lightbox .lb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; }
.lightbox .lb-frame .lb-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 92px; height: 92px; background: var(--orange); border-radius: 50%; display: grid; place-items: center; }
.lightbox .lb-frame .lb-play svg { width: 32px; height: 32px; fill: var(--black); margin-left: 4px; }
.lightbox .lb-meta { width: 100%; max-width: 1280px; display: flex; justify-content: space-between; margin-top: 24px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); }
.lightbox .lb-meta .title { font-family: var(--f-display); font-size: 28px; font-weight: 800; letter-spacing: 0; color: var(--paper); }
.lightbox .lb-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border: 1px solid var(--paper); border-radius: 50%; display: grid; place-items: center; color: var(--paper); font-family: var(--f-mono); font-size: 16px; }
.lightbox .lb-close:hover { background: var(--orange); border-color: var(--orange); color: var(--black); }
.lightbox .lb-fallback { position: absolute; top: 24px; left: 24px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); text-decoration: none; padding: 10px 14px; border: 1px solid var(--rule); transition: all 0.2s ease; }
.lightbox .lb-fallback:hover { background: var(--orange); border-color: var(--orange); color: var(--black); }

/* Impact */
.impact { background: var(--paper); color: var(--black); padding: clamp(80px, 12vh, 160px) var(--pad-x); }
.impact.closing-only { padding: clamp(80px, 14vh, 180px) var(--pad-x); }
.impact.closing-only .closing-quote { margin-top: 0; padding-top: 0; border-top: 0; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 32px; }
.impact.closing-only .closing-quote .q { max-width: 22ch; }
.impact.closing-only .closing-quote .who { padding-bottom: 0; }
.impact .chapter-head { border-bottom-color: var(--rule-dark); }
.impact .section-num { -webkit-text-stroke-color: var(--orange); }
.impact .eyebrow { color: var(--steel-2); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); margin-top: 56px; }
.stat-card { padding: 36px 28px; border-right: 1px solid var(--rule-dark); display: flex; flex-direction: column; gap: 18px; min-height: 280px; }
.stat-card:last-child { border-right: none; }
.stat-card .stat-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel-2); display: flex; justify-content: space-between; }
.stat-card .stat-num { font-family: var(--f-display); font-weight: 900; font-size: clamp(56px, 7vw, 120px); line-height: 0.85; letter-spacing: -0.02em; margin-top: auto; }
.stat-card .stat-num .unit { color: var(--orange); }
.stat-card .stat-desc { font-family: var(--f-body); font-size: 14px; line-height: 1.45; color: var(--steel-2); max-width: 28ch; }
@media (max-width: 900px) { .stats-grid { grid-template-columns: 1fr 1fr; } .stat-card:nth-child(2) { border-right: none; } .stat-card:nth-child(1), .stat-card:nth-child(2) { border-bottom: 1px solid var(--rule-dark); } }
.closing-quote { margin-top: clamp(64px, 10vh, 120px); padding-top: clamp(48px, 8vh, 96px); border-top: 1px solid var(--rule-dark); display: grid; grid-template-columns: 2fr 1fr; gap: clamp(24px, 4vw, 80px); align-items: end; }
.closing-quote .q { font-family: var(--f-display); font-weight: 700; font-size: clamp(32px, 4.5vw, 64px); line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; max-width: 18ch; }
.closing-quote .q em { color: var(--orange); font-style: normal; }
.closing-quote .who { padding-bottom: 8px; }
.closing-quote .who .name { font-family: var(--f-display); font-size: 22px; font-weight: 800; text-transform: uppercase; }
.closing-quote .who .role { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-2); margin-top: 4px; }
@media (max-width: 900px) { .closing-quote { grid-template-columns: 1fr; } }

/* Footer */
.foot { background: var(--black); color: var(--paper); padding: 80px var(--pad-x) 32px; border-top: 1px solid var(--rule); }
.foot-top { padding-bottom: 60px; border-bottom: 1px solid var(--rule); }
.foot-top .next-up { display: flex; flex-direction: column; gap: 12px; cursor: pointer; }
.foot-top .next-up .label { color: var(--steel); }
.foot-top .next-up .case { font-family: var(--f-display); font-weight: 800; font-size: clamp(36px, 5vw, 72px); line-height: 0.9; text-transform: uppercase; letter-spacing: -0.01em; }
.foot-top .next-up .case .arrow { display: inline-block; transition: transform 0.25s ease; color: var(--orange); margin-left: 0.2em; }
.foot-top .next-up:hover .case .arrow { transform: translateX(12px); }
.credits { display: grid; grid-template-columns: max-content max-content; gap: 32px 96px; justify-content: start; }
.credits .cred .role { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); }
.credits .cred .names { font-family: var(--f-body); font-size: 14px; line-height: 1.5; color: var(--paper); margin-top: 6px; }
.foot-bottom { margin-top: 32px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); }
.foot-bottom .lf-stamp { display: flex; align-items: center; gap: 10px; color: var(--paper); }
.foot-bottom .lf-stamp .lf-mark { width: 24px; height: 24px; display: grid; place-items: center; }
.foot-bottom .lf-stamp .lf-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 900px) {
  .foot { padding: 56px var(--pad-x) 28px; }
  .foot-top { padding-bottom: 40px; }
  .credits { grid-template-columns: 1fr; gap: 24px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .foot-bottom > div { line-height: 1.5; }
}

image-slot { background: var(--asphalt-2); }

/* Photo gallery — magazine grid */
.gallery { padding: 0 var(--pad-x); margin-top: 24px; }
.gallery-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 24px; border-bottom: 1px solid var(--rule); margin-bottom: 28px; gap: 24px; flex-wrap: wrap; }
.gallery-head .gallery-meta { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); }
.gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; }
.g-tile { position: relative; overflow: hidden; background: var(--asphalt-2); }
.g-tile img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.g-tile:hover img { transform: scale(1.04); }
.g-tile.gt-v { grid-column: span 3; aspect-ratio: 3 / 4; }
.g-tile.gt-h { grid-column: span 6; aspect-ratio: 3 / 2; }
@media (max-width: 1100px) {
  .g-tile.gt-v { grid-column: span 6; aspect-ratio: 3 / 4; }
  .g-tile.gt-h { grid-column: span 12; aspect-ratio: 3 / 2; }
}
@media (max-width: 600px) {
  .g-tile.gt-v, .g-tile.gt-h { grid-column: span 12; aspect-ratio: 4 / 3; }
}

/* Reveals — smooth, slow scroll-in */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: 0.10s; }
.reveal.delay-2 { transition-delay: 0.20s; }
.reveal.delay-3 { transition-delay: 0.30s; }
.reveal.delay-4 { transition-delay: 0.40s; }
.reveal.delay-5 { transition-delay: 0.50s; }
.reveal.delay-6 { transition-delay: 0.60s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .marquee .track { animation: none; } .scrubber, .hero-tag .scroll-cue::after { animation: none; } }

/* Back to top */
.back-to-top {
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 20px));
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--black);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
  z-index: 60;
}
.back-to-top svg { width: 18px; height: 18px; display: block; }
.back-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: var(--paper); }
.back-to-top:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity 0.15s linear; transform: none; } }