/* ==========================================================================
   "Built for the pit": homepage concept
   Documentary, cinematic, cost-first. Five chapters + compact base.
   Uses the same tokens (tokens.css): Barlow Condensed + Instrument Sans.
   ========================================================================== */

body.is-film { background: var(--cg-black); color: var(--cg-white); }

/* Film grain over everything (very subtle) */
body.is-film::after {
  content: ""; position: fixed; inset: -50%; z-index: 800; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(4) infinite;
}
@keyframes grain { 0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); } 50% { transform: translate(2%,-3%); } 75% { transform: translate(-2%,-1%); } 100% { transform: translate(0,0); } }

/* Cinematic grade applied to every documentary still */
.graded { filter: contrast(1.14) saturate(0.72) brightness(0.8) sepia(0.08); }
.vignette::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0,0,0,0.65) 100%); }

/* Eyebrow: a small uppercase sub-heading before every heading (chapter number, short rule, name) */
.chapter-label { display: flex; align-items: center; gap: 10px; font-family: var(--font-label); font-stretch: var(--label-stretch); font-size: 0.75rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: var(--n-300); }
.chapter-label b { font-family: var(--font-data); font-stretch: normal; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.04em; color: var(--cg-white); }
.chapter-label i { flex: none; width: 28px; height: 1px; background: currentColor; opacity: 0.6; }
.chapter-label.eb { margin-bottom: var(--s-4); }
.chapter-label.eb--sm { margin-bottom: var(--s-2); }
.surface-light .chapter-label, .surface-paper .chapter-label { color: var(--n-600); }
.surface-light .chapter-label b, .surface-paper .chapter-label b { color: var(--cg-black); }
.btn--lg { min-height: 60px; padding: 0 var(--s-6); font-size: 0.875rem; }

/* ==========================================================================
   01 THE STRIKE: film hero (stills cut like film)
   ========================================================================== */
.film-hero { position: relative; height: 100svh; min-height: 680px; overflow: hidden; margin-top: calc((var(--header-h) + var(--utility-h)) * -1); isolation: isolate; }
.shot { position: absolute; inset: 0; margin: 0; opacity: 0; z-index: 0; }
.shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.shot.is-active { opacity: 1; z-index: 1; }
.shot.is-active img { animation: push 4.2s linear forwards; }
@keyframes push { from { transform: scale(1.08) translate(0, 0); } to { transform: scale(1.18) translate(-1.5%, -1%); } }
.shot.is-dip { opacity: 0; transition: opacity 120ms linear; }
.film-hero__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.15) 80%), linear-gradient(0deg, rgba(0,0,0,0.75) 0%, transparent 45%); }
.film-hero__copy { position: absolute; left: 0; right: 0; bottom: clamp(48px, 9vh, 112px); z-index: 3; }
.film-hero__copy h1 { margin-top: var(--s-5); max-width: 15ch; font-size: calc(clamp(3.25rem, 1.6rem + 5.4vw, 7.5rem) * var(--display-scale)); line-height: 0.88; }
.film-hero__copy .t-lead { margin-top: var(--s-5); max-width: 48ch; color: rgba(255,255,255,0.84); }
.film-hero__copy .cluster { margin-top: var(--s-7); gap: var(--s-6); }
.scroll-cue { display: inline-flex; align-items: center; gap: var(--s-3); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; color: var(--n-200); }
.scroll-cue span { width: 1px; height: 36px; background: linear-gradient(var(--cg-yellow) 0 40%, rgba(255,255,255,0.25) 40%); background-size: 1px 200%; animation: cue 1.6s var(--ease) infinite; }
@keyframes cue { from { background-position: 0 100%; } to { background-position: 0 -100%; } }

/* Lower-third: shot captions with story-style progress */
.film-reel { position: absolute; right: var(--edge); bottom: clamp(48px, 9vh, 112px); z-index: 3; width: min(340px, 34vw); }
.film-reel__bars { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 4px; margin-bottom: var(--s-3); }
.film-reel__bars span { height: 2px; background: rgba(255,255,255,0.25); position: relative; overflow: hidden; }
.film-reel__bars span::after { content: ""; position: absolute; inset: 0; background: var(--cg-white); transform: scaleX(0); transform-origin: left; }
.film-reel__bars span.is-done::after { transform: scaleX(1); }
.film-reel__bars span.is-active::after { animation: fill 4.2s linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }
.film-reel__meta { display: flex; justify-content: space-between; font-family: var(--font-data); font-size: 0.8125rem; color: var(--n-300); letter-spacing: 0.04em; }
.film-reel__cap { margin-top: var(--s-2); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; min-height: 2.8em; }
@media (max-width: 860px) { .film-reel { left: var(--gutter); right: auto; top: calc(var(--header-h) + var(--utility-h) + var(--s-5)); bottom: auto; width: calc(100% - var(--gutter) * 2); } .film-reel__cap { min-height: 0; font-size: 0.9375rem; } }

/* ==========================================================================
   Pinned chapters (scroll-driven scenes)
   ========================================================================== */
/* --edge: the 1536 content line inside a full-bleed stage. Absolutely positioned copy
   uses it so it lines up with .container (resolves against the stage width). */
.film-hero, .scene__stage { --edge: max(var(--gutter), calc((100% - var(--container)) / 2)); }
.scene { position: relative; height: var(--len, 400vh); }
.scene__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
.scene__bg { position: absolute; inset: 0; z-index: -1; }
.scene__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.05 + var(--p, 0) * 0.12)); transition: transform 80ms linear; }
.scene__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0, calc(0.72 + var(--p, 0) * 0.16)); }

/* ==========================================================================
   02 THE COST: the price tag builds
   ========================================================================== */
.price { height: 100%; display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-9); align-items: center; padding-top: calc(var(--header-h) + var(--utility-h) + var(--s-6)); padding-bottom: var(--s-8); }
.price__now h2 { margin-top: var(--s-4); max-width: 14ch; }
.price__big { margin-top: var(--s-8); display: flex; align-items: baseline; gap: var(--s-3); font-family: var(--font-data); font-weight: 700; letter-spacing: -0.01em; line-height: 0.8; font-variant-numeric: tabular-nums; }
.price__big [data-big-val] { font-size: calc(clamp(5rem, 2rem + 11vw, 13rem) * var(--data-scale)); white-space: nowrap; transition: font-size var(--dur) var(--ease); }
.price__big.is-long [data-big-val] { font-size: calc(clamp(3.25rem, 1rem + 7.4vw, 8.75rem) * var(--data-scale)); }
.price__big [data-big-unit] { font-size: calc(clamp(1.75rem, 1rem + 2.4vw, 3.5rem) * var(--data-scale)); color: var(--n-300); }
.price__label { margin-top: var(--s-4); font-size: var(--t-lead); color: var(--n-200); max-width: 36ch; min-height: 3.2em; }
.price__steps { display: flex; gap: 6px; margin-top: var(--s-6); }
.price__steps span { width: 40px; height: 3px; background: var(--n-700); transition: background var(--dur); }
.price__steps span.is-on { background: var(--cg-yellow); }

.receipt {
  position: relative; background: #F1EEE6; color: #111; padding: var(--s-6) var(--s-6) var(--s-7);
  font-family: var(--font-mono); font-size: 0.8125rem; box-shadow: 0 30px 80px -30px rgba(0,0,0,0.9);
}   /* sits square: no tilt (4 Nov) */
.receipt header { display: flex; justify-content: space-between; align-items: start; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1.5px dashed #111; }
.receipt header img { height: 22px; width: auto; }
.receipt header span { font-size: 0.6875rem; letter-spacing: 0.06em; text-align: right; line-height: 1.5; }
.receipt ol { padding: var(--s-4) 0; display: grid; gap: var(--s-3); }
.receipt li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-2); align-items: baseline; opacity: 0.18; transform: translateX(-6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.receipt li.is-on { opacity: 1; transform: none; }
.receipt li i { border-bottom: 1.5px dotted #111; transform: translateY(-4px); }
.receipt li b { font-family: var(--font-data); font-size: 1.25rem; font-weight: 700; letter-spacing: 0; }
.receipt footer { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding-top: var(--s-4); border-top: 1.5px dashed #111; }
.receipt footer span { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.receipt footer b { font-family: var(--font-data); font-weight: 700; font-size: 2rem; background: var(--cg-yellow); padding: 2px 10px; opacity: 0.18; transition: opacity var(--dur); }
.receipt footer b.is-on { opacity: 1; }
.receipt__fine { margin-top: var(--s-4); font-size: 0.6875rem; line-height: 1.5; color: #555; }

@media (max-width: 1023px) {
  .price { grid-template-columns: 1fr; gap: var(--s-5); align-content: center; }
  .price__big { margin-top: var(--s-5); }
  .receipt { padding: var(--s-4) var(--s-4) var(--s-5); }
  .receipt li b { font-size: 1rem; }
  .receipt footer b { font-size: 1.375rem; }
  .price__now h2 { font-size: calc(2rem * var(--display-scale)); }
}
@media (max-width: 767px) {
  .price { align-content: start; gap: var(--s-4); padding-top: calc(var(--header-h) + var(--utility-h) + var(--s-5)); padding-bottom: var(--s-4); }
  .price__now h2 { font-size: calc(1.75rem * var(--display-scale)); margin-top: var(--s-3); }
  .price__big { margin-top: var(--s-4); }
  .price__big [data-big-val] { font-size: calc(4.25rem * var(--data-scale)); }
  .price__big.is-long [data-big-val] { font-size: calc(3.25rem * var(--data-scale)); }
  .price__label { font-size: 1rem; line-height: 1.5; min-height: 3em; margin-top: var(--s-3); }
  .price__steps { display: none; }
  .receipt header { padding-bottom: var(--s-3); }
  .receipt header img { height: 18px; }
  .receipt ol { padding: var(--s-3) 0; gap: var(--s-2); }
  .receipt footer { padding-top: var(--s-3); }
  .receipt__fine { margin-top: var(--s-3); }
}
@media (max-width: 767px) and (max-height: 760px) {
  .price__now h2 { font-size: calc(1.5rem * var(--display-scale)); }
  .price__big [data-big-val] { font-size: calc(3.5rem * var(--data-scale)); }
  .price__big.is-long [data-big-val] { font-size: calc(2.75rem * var(--data-scale)); }
  .receipt header, .receipt__fine { display: none; }
}

/* ==========================================================================
   03 THE GUARD: x-ray on the real machine
   ========================================================================== */
.xray { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.xray .photo { filter: contrast(1.12) saturate(0.7) brightness(0.82); }
.xray-dim { fill: #000; }
.xray-wall { fill: none; stroke: var(--cg-yellow); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.xray-ghost { fill: rgba(10,10,10,0.72); }
.xray-rod { fill: url(#chrome); }
.xray-tick { stroke: var(--cg-yellow); stroke-width: 1; vector-effect: non-scaling-stroke; }
.xray-scan { fill: url(#scanGlow); }
.xray-tag { font-family: var(--font-body); fill: var(--cg-white); }
.xray-tag__k { font-weight: 600; }
.xray-tag__v { font-size: 0.86em; fill: var(--n-300); }
.xray-lead { stroke: rgba(255,255,255,0.7); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.xray-ring { fill: none; stroke: var(--cg-white); vector-effect: non-scaling-stroke; }
.xray-rock { fill: #3b322b; stroke: #8a7b6c; stroke-width: 1; vector-effect: non-scaling-stroke; }
.xray-path { fill: none; stroke: rgba(255,255,255,0.55); stroke-dasharray: 4 6; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Shade under the copy so the headline reads on the bright plate (same recipe as the hero) */
@media (min-width: 768px) {
  [data-scene="xray"] .scene__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.42) 30%, rgba(0,0,0,0) 56%), linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 40%); }
}
.xray-copy { position: absolute; left: var(--edge); bottom: clamp(32px, 7vh, 80px); z-index: 2; width: min(460px, calc(100% - var(--gutter) * 2)); }
.xray-copy h2 { margin-top: var(--s-4); }
.xray-steps { margin-top: var(--s-6); position: relative; min-height: 7.5em; }
.xray-step { position: absolute; inset: 0 auto auto 0; opacity: 0; transform: translateY(10px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); background: rgba(0,0,0,0.78); border-left: 2px solid var(--cg-yellow); padding: var(--s-4) var(--s-5); backdrop-filter: blur(6px); }
.xray-step.is-on { opacity: 1; transform: none; }
.xray-copy .chapter-label, .xray-copy h2 { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.is-deep .xray-copy .chapter-label, .is-deep .xray-copy h2 { opacity: 0; transform: translateY(-8px); }
.is-portrait .xray-tag, .is-portrait .xray-lead { display: none; }
.xray-step .t-label { color: var(--n-400); display: block; margin-bottom: 6px; font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.xray-step p { font-size: 1rem; line-height: 1.5; }
.xray-prog { position: absolute; right: var(--edge); bottom: clamp(32px, 7vh, 80px); z-index: 2; font-family: var(--font-data); color: var(--n-300); font-size: 0.875rem; letter-spacing: 0.06em; }
@media (max-width: 767px) {
  .xray-copy { bottom: calc(var(--s-6) + var(--proto-clear, 0px)); }
  .xray-copy h2 { font-size: calc(1.875rem * var(--display-scale)); }
  .xray-steps { min-height: 8.5em; }
  .xray-prog { display: none; } .xray-tag, .xray-lead { display: none; }
  [data-scene="xray"] .scene__stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 62%; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.9) 42%, #000); }
}

/* 04 THE PROOF, FIND YOUR GUARD and LOCAL SUPPORT: see film-base.css */

/* ==========================================================================
   05 YOUR NUMBERS
   ========================================================================== */
.numbers { position: relative; padding-block: var(--section-y); overflow: hidden; isolation: isolate; }
.numbers__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 6fr 6fr; gap: var(--s-9); align-items: center; }
.numbers h2 { margin-top: var(--s-4); max-width: 14ch; font-size: calc(clamp(2.75rem, 1.6rem + 4vw, 5.75rem) * var(--display-scale)); }
.numbers__lead { margin-top: var(--s-5); color: var(--n-300); max-width: 44ch; }
.numbers__cta { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; }
.receipt--live li { opacity: 1; transform: none; }
.receipt--live footer b { opacity: 1; }
.receipt--live .r-field { display: grid; gap: 4px; padding: var(--s-2) 0; }
.receipt--live label { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: #555; }
.receipt--live select, .receipt--live input[type=range] { width: 100%; }
.receipt--live select { appearance: none; background: transparent; border: 0; border-bottom: 1.5px solid #111; font: 600 1rem/1.4 var(--font-body); padding: 6px 24px 6px 0; color: #111; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23111' stroke-width='1.75'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; border-radius: 0; }
.receipt--live .r-row { display: flex; justify-content: space-between; align-items: baseline; }
.receipt--live .r-row output { font-family: var(--font-data); font-weight: 700; font-size: 1.125rem; }
.receipt--live input[type=range] { accent-color: #111; height: 28px; }
@media (max-width: 1023px) { .numbers__grid { grid-template-columns: 1fr; gap: var(--s-7); } }
@media (max-width: 767px) { .numbers h2, .numbers__lead { max-width: calc(100% - 72px); } }

/* ==========================================================================
   BASE: answers
   ========================================================================== */
.base { padding-block: var(--section-y); border-top: 1px solid var(--rule-dark); }
.base h2 { font-size: calc(clamp(2rem, 1.4rem + 2vw, 3.25rem) * var(--display-scale)); }

/* ==========================================================================
   Chapter rail (right edge) + running strike total
   ========================================================================== */

.tally { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%); z-index: 95; display: flex; align-items: center; gap: var(--s-5); padding: 10px 10px 10px var(--s-5); background: rgba(0,0,0,0.86); border: 1px solid var(--rule-dark); backdrop-filter: blur(8px); transition: transform var(--dur-slow) var(--ease); white-space: nowrap; }
.tally.is-on { transform: translate(-50%, 0); }
.tally__lbl { font-size: 0.8125rem; color: var(--n-400); }
.tally__v { font-family: var(--font-data); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.tally__v small { font-size: 0.65em; color: var(--n-400); margin-left: 2px; }
.tally__sep { width: 1px; height: 22px; background: var(--rule-dark); }
.tally .btn { min-height: 40px; white-space: nowrap; }
@media (max-width: 1023px) { .tally__lbl { display: none; } }
@media (max-width: 767px) { .tally { left: 12px; right: 12px; transform: translateY(140%); gap: var(--s-3); padding-left: var(--s-4); } .tally.is-on { transform: none; } .tally .hide-sm, .tally__lbl, .tally__sep { display: none; } .tally .btn { margin-left: auto; padding: 0 14px; } .has-tally .proto-fab { bottom: 84px; } .has-tally .proto-panel { bottom: 140px; } }
.proto-fab, .proto-panel { transition: bottom var(--dur) var(--ease); }

/* Build-cost flags inside review notes */
.review-note .build { display: block; margin-top: 4px; padding-top: 4px; border-top: 1px dashed #D6A622; }

@media (prefers-reduced-motion: reduce) { body.is-film::after { animation: none; } .shot.is-active img { animation: none; } }

/* ==========================================================================
   Homepage text links (4 Nov refine): sentence case and underlined, no tracked caps
   and no arrow. Buttons keep the design-system style, without arrows.
   ========================================================================== */
body.is-film .link-arrow { gap: 0; padding-block: 2px; font-family: var(--font-body); font-stretch: normal; font-weight: 600; font-size: 1rem; text-transform: none; letter-spacing: 0; background: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-thickness var(--dur-fast); }
body.is-film .link-arrow:hover { text-decoration-thickness: 2px; }