/* MacKool Football Intelligence: website v3 (draft), "the war room".
   Black, silver and cobalt. Quiet and exact; cobalt is the only colour.
   Mobile-first. No JavaScript. Every text/background pair is measured by site/tools/audit.py. */

@font-face { font-family: "Archivo Expanded"; src: url("../fonts/Archivo-Expanded-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Archivo Expanded"; src: url("../fonts/Archivo-Expanded-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  /* Palette chosen by Drew (2026-11-04): light, silver, cobalt, graphite, black. No other hues. */
  --navy: #0A0A0B;       /* black: the dominant surface (token name kept so the rest of the sheet is unchanged) */
  --midnight: #000000;   /* deepest black, alternating sections */
  --raise: #1A1A1E;
  --ivory: #F5F2EB;      /* primary type on black */
  --mist: #A3A1A5;       /* silver: secondary type on black */
  --brass: #12578C;      /* cobalt: rules, primary action, numerals */
  --brass-deep: #12578C; /* cobalt as type on light */
  --cobalt-light: #6FA6D6; /* cobalt tint for small type on black */
  --white: #FFFFFF;
  --ink: #0A0A0B;
  --slate: #44474E;      /* graphite */
  --rule: #DAD8DC;       /* light */
  --rule-dark: rgba(163,161,165,.22);
  --turf: #12578C;       /* "observed" tag now cobalt */
  --signal: #0B0A0C;     /* flags: solid black with light type */
  --focus: #3D84C6;
  --light: #DAD8DC;

  --serif: "Archivo Expanded", "Helvetica Neue", Arial, sans-serif;
  --serif-h: "Archivo Expanded", "Helvetica Neue", Arial, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif-condensed, sans-serif;

  --wrap: 78rem;
  --gutter: 1.25rem;
  --sec: 5rem;
}
@media (min-width: 48rem) { :root { --gutter: 2.5rem; --sec: 7rem; } }
@media (min-width: 80rem) { :root { --sec: 9rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--navy); color: var(--ivory); font: 400 1rem/1.65 var(--sans); }
p, ul, ol, dl, dd, h1, h2, h3, h4, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- focus, skip, draft ---------- */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 20; background: var(--white); color: var(--ink); padding: .8rem 1rem; font-weight: 600; }
.skip-link:focus { top: 1rem; }
main:focus { outline: none; }
.draft-banner { margin: 0; max-width: none; background: var(--brass); color: var(--white); text-align: center; font: 600 .8125rem/1.4 var(--sans); padding: .45rem var(--gutter); }

/* ---------- type ---------- */
h1, h2, .serif { font-family: var(--serif); font-weight: 500; letter-spacing: -.012em; line-height: 1.02; }
h1 { font-size: clamp(2.9rem, 8.4vw, 6.75rem); }
h2 { font-size: clamp(2.2rem, 5vw, 3.9rem); }
h3 { font: 600 1.375rem/1.2 var(--serif-h); letter-spacing: -.005em; }
.lede { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.6; max-width: 36rem; color: var(--mist); }
.kicker { font-size: .9375rem; color: var(--cobalt-light); }
.num { font-family: var(--cond); font-weight: 700; font-size: 1.08em; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--brass); }

/* ---------- header ---------- */
.site-header { background: var(--navy); border-bottom: 1px solid var(--rule-dark); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; padding-top: 1rem; padding-bottom: 1rem; }
.wordmark { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; text-decoration: none; color: var(--ivory); }
.wordmark-top { font: 500 1.7rem/1 var(--serif); letter-spacing: .01em; text-transform: none; }
.wordmark-rule { display: block; width: 2.25rem; height: 2px; background: var(--brass); margin: .45rem 0 .4rem; }
.wordmark-sub { font: 700 .75rem/1 var(--cond); letter-spacing: .32em; text-transform: uppercase; color: var(--mist); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 .15rem; margin-left: -.8rem; }
.site-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 .8rem; color: var(--mist); text-decoration: none; font-size: .9375rem; }
.site-nav a:hover { color: var(--ivory); }
.site-nav a[aria-current="page"] { color: var(--ivory); box-shadow: inset 0 -2px 0 var(--cobalt-light); }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.75rem; font: 600 .9375rem/1 var(--sans); letter-spacing: .01em; text-decoration: none; border: 1px solid transparent; border-radius: 0; cursor: pointer; }
.btn-brass { background: var(--brass); color: var(--white); }
.btn-brass:hover { background: #1A6AAA; }
.btn-line { border-color: var(--mist); color: var(--ivory); }
.btn-line:hover { background: var(--raise); }
.btn-ink { background: var(--ink); color: var(--ivory); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ivory); text-decoration: underline; text-decoration-color: var(--cobalt-light); text-underline-offset: .35em; font-weight: 600; font-size: .9375rem; }
.btn[disabled], fieldset[disabled] .btn { background: var(--slate); color: var(--white); border-color: var(--slate); cursor: not-allowed; }

/* ---------- hero ---------- */
.hero { position: relative; background: radial-gradient(120% 90% at 85% 10%, rgba(18,87,140,.22) 0%, transparent 60%), var(--navy); overflow: hidden; }
.hero .wrap { position: relative; display: grid; gap: 3.5rem; padding-top: clamp(3.5rem, 8vw, 7.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero h1 { color: var(--white); margin-top: 1.25rem; max-width: 11ch; }
.hero .lede { margin-top: 2rem; }
.hero .actions { margin-top: 2.75rem; }
@media (min-width: 68rem) { .hero .wrap { grid-template-columns: 1.15fr .85fr; align-items: end; gap: 4rem; } }

/* the field as a ruler: yard markers along the bottom of the hero */
.yardline { position: relative; border-top: 1px solid var(--rule-dark); }
.yardline .wrap { display: flex; justify-content: space-between; padding-top: .9rem; padding-bottom: 1.1rem; }
.yardline::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(90deg, transparent 0 calc(2% - 1px), rgba(163,161,165,.45) calc(2% - 1px) 2%); }
.yardline span { font: 700 .9375rem/1 var(--cond); letter-spacing: .06em; color: var(--mist); width: 2ch; text-align: center; }
.yardline span:nth-child(n+6) { display: none; }
@media (min-width: 40rem) { .yardline span:nth-child(n+6) { display: inline; } }

/* ---------- report sheet ---------- */
.sheet { margin: 0; background: var(--white); color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.04); font-size: .875rem; line-height: 1.5; }
.sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; padding: 1.25rem 1.4rem 1rem; border-bottom: 1px solid var(--ink); }
.sheet-head .t { font: 500 1.375rem/1.1 var(--serif); }
.sheet-head .m { font: 700 .8125rem/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.sheet-example { background: var(--light); color: var(--ink); font: 600 .75rem/1.35 var(--sans); padding: .4rem 1.4rem; }
.sheet-row { display: grid; grid-template-columns: 1fr; gap: .35rem; padding: 1.05rem 1.4rem; border-bottom: 1px solid var(--rule); }
.sheet-row:last-child { border-bottom: 0; }
.sheet-phase { font: 700 .8125rem/1.2 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--brass-deep); }
.sheet-claim { font: 600 1.0625rem/1.3 var(--serif-h); color: var(--ink); }
.sheet-ev { color: var(--slate); }
.sheet-ev .num { color: var(--ink); }
.sheet-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
@media (min-width: 30rem) { .sheet-row { grid-template-columns: 6.5rem 1fr; gap: 1rem; } .sheet-phase { padding-top: .2rem; } }

/* ---------- tags ---------- */
.tag { display: inline-block; font: 700 .75rem/1 var(--cond); letter-spacing: .08em; padding: .32rem .5rem .28rem; border: 1px solid currentColor; white-space: nowrap; }
.tag-obs { color: var(--turf); }
.tag-model { color: var(--slate); }
.tag-film { color: var(--ink); }
.tag-flag { background: var(--ink); border-color: var(--ink); color: var(--white); }
.on-dark .tag-obs { color: var(--cobalt-light); }
.on-dark .tag-flag { background: var(--white); border-color: var(--white); color: var(--ink); }
.on-dark .tag-model { color: var(--mist); }
.on-dark .tag-film { color: var(--ivory); }

/* ---------- sections ---------- */
.section { padding: var(--sec) 0; }
.section-white { background: var(--white); color: var(--ink); }
.section-midnight { background: var(--midnight); }
.section-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head p { max-width: 36rem; font-size: 1.0625rem; color: var(--mist); }
.section-white .section-head p { color: var(--slate); }
.section-white h2 { color: var(--ink); }
.section h2 { max-width: 16ch; }
@media (min-width: 64rem) { .section-head.split { grid-template-columns: 1.1fr .9fr; align-items: end; gap: 4rem; } }

/* statement */
.statement { font: 500 clamp(1.75rem, 3.8vw, 3rem)/1.18 var(--serif); letter-spacing: -.01em; max-width: 24ch; color: var(--ink); }
.statement-by { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; color: var(--slate); font-size: .9375rem; }
.statement-by::before { content: ""; width: 2.5rem; height: 1px; background: var(--brass-deep); }
.statement-grid { display: grid; gap: 3rem; }
.statement-side { display: grid; gap: 1.25rem; align-content: start; color: var(--slate); max-width: 30rem; }
@media (min-width: 64rem) { .statement-grid { grid-template-columns: 1.4fr .6fr; gap: 5rem; align-items: end; } }

/* three phases */
.phases { display: grid; gap: 0; }
.phase { padding: 2.25rem 0; border-top: 1px solid var(--rule-dark); }
.phase h3 { font: 500 clamp(2rem, 3.4vw, 2.75rem)/1 var(--serif); color: var(--white); }
.phase > p { margin-top: .9rem; color: var(--cobalt-light); font-size: .9375rem; }
.phase ul { margin-top: 1.75rem; }
.phase li { padding: .7rem 0; border-top: 1px solid rgba(169,178,191,.16); color: var(--mist); }
.phase li:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 60rem) {
  .phases { grid-template-columns: repeat(3, 1fr); gap: 3.5rem; }
  .phase { border-top: 1px solid var(--brass); }
}
.film-note { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--rule-dark); display: grid; gap: .75rem; }
.film-note h3 { color: var(--white); }
.film-note p { color: var(--mist); max-width: 44rem; }
@media (min-width: 60rem) { .film-note { grid-template-columns: 1fr 2fr; gap: 3.5rem; } }

/* anatomy of a finding */
.anatomy { display: grid; gap: 3.5rem; }
.finding-big { border: 1px solid var(--rule); border-top: 2px solid var(--ink); padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--white); color: var(--ink); box-shadow: 0 30px 60px -40px rgba(11,10,12,.35); }
.finding-big .claim { font: 500 clamp(1.75rem, 3.2vw, 2.4rem)/1.1 var(--serif); margin-top: 1.25rem; }
.finding-big .ev { margin-top: 1.25rem; font-size: 1.0625rem; }
.finding-big .tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.25rem; }
.finding-big .why, .finding-big .verify { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
h3.mini { font: 700 .8125rem/1.3 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-deep); margin-bottom: .35rem; }
.notes { display: grid; gap: 2.25rem; counter-reset: n; }
.notes li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; }
.notes li::before { counter-increment: n; content: counter(n); font: 500 2.25rem/1 var(--serif); color: var(--brass-deep); }
.notes h3 { color: var(--ink); }
.notes p { margin-top: .35rem; color: var(--slate); }
@media (min-width: 64rem) { .anatomy { grid-template-columns: 1.15fr .85fr; gap: 6rem; align-items: center; } }

/* standards */
.rules { border-top: 1px solid var(--brass); }
.rules li { display: grid; gap: .5rem; padding: 2rem 0; border-bottom: 1px solid var(--rule-dark); }
.rules h3 { color: var(--white); font-size: 1.5rem; }
.rules p { color: var(--mist); max-width: 40rem; }
@media (min-width: 60rem) { .rules li { grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: baseline; } }

/* founder */
.founder { display: grid; gap: 2.5rem; }
.founder .statement { max-width: 22ch; }
.founder-meta { display: grid; gap: .25rem; align-content: start; }
.founder-meta .name { font: 600 1.25rem/1.2 var(--serif-h); color: var(--ink); }
.founder-meta .role { color: var(--slate); }
@media (min-width: 64rem) { .founder { grid-template-columns: 1.5fr .5fr; gap: 5rem; align-items: end; } }

/* CTA */
.cta { background: var(--navy); border-top: 1px solid var(--rule-dark); }
.cta .wrap { display: grid; gap: 2rem; padding-top: var(--sec); padding-bottom: var(--sec); }
.cta h2 { color: var(--white); max-width: 14ch; }
.cta p { margin-top: 1.25rem; color: var(--mist); max-width: 34rem; font-size: 1.0625rem; }
@media (min-width: 60rem) { .cta .wrap { grid-template-columns: 1fr auto; align-items: end; } }

/* ---------- inner pages ---------- */
.page-head { background: var(--navy); }
.page-head .wrap { padding-top: clamp(3.5rem, 7vw, 6.5rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.page-head h1 { color: var(--white); font-size: clamp(2.75rem, 7vw, 5.25rem); max-width: 14ch; margin-top: 1rem; }
.page-head p.lede { margin-top: 1.75rem; }
.cols-2 { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) { .cols-2 { grid-template-columns: 1fr 1.2fr; gap: 5rem; } }
.prose > * + * { margin-top: 1.1rem; }
.prose p { max-width: 38rem; }
.section-white .prose p { color: var(--slate); }
.section-white .prose p.strong, .section-white h3 { color: var(--ink); }
.list li { padding: 1rem 0; border-top: 1px solid var(--rule); }
.list li:last-child { border-bottom: 1px solid var(--rule); }
.section-white .list li { color: var(--slate); }
.section-white .list strong { color: var(--ink); font-weight: 600; }
.on-dark .list li { border-color: rgba(169,178,191,.16); color: var(--mist); }
.on-dark .list strong { color: var(--ivory); font-weight: 600; }

/* contents (numbered: the report really is in this order) */
.deliver { border-top: 1px solid var(--ink); counter-reset: d; }
.deliver li { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem; padding: 1.75rem 0; border-bottom: 1px solid var(--rule); }
.deliver li::before { counter-increment: d; content: counter(d); font: 500 2rem/1 var(--serif); color: var(--brass-deep); }
.deliver h3 { color: var(--ink); }
.deliver p { margin-top: .4rem; color: var(--slate); max-width: 44rem; }
.on-dark .deliver { border-top-color: var(--brass); }
.on-dark .deliver li { border-bottom-color: var(--rule-dark); }
.on-dark .deliver li::before { color: var(--cobalt-light); }
.on-dark .deliver h3 { color: var(--white); }
.on-dark .deliver p { color: var(--mist); }
@media (min-width: 60rem) { .deliver li { grid-template-columns: 5rem 1fr 1.4fr; gap: 2rem; align-items: baseline; } .deliver p { margin-top: 0; } }

/* evidence classes */
.classes { display: grid; gap: 2.5rem; }
.classes li { display: grid; gap: .85rem; align-content: start; padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.classes h3 { font: 500 2rem/1.05 var(--serif); color: var(--ink); }
.classes p { color: var(--slate); }
.classes .example { font-size: .9375rem; padding-left: 1rem; border-left: 1px solid var(--brass-deep); }
@media (min-width: 60rem) { .classes { grid-template-columns: repeat(3, 1fr); gap: 3.5rem; } }

/* three standards on white */
.trio { display: grid; gap: 2.5rem; }
.trio > div { padding-top: 1.5rem; border-top: 1px solid var(--ink); display: grid; gap: .75rem; align-content: start; }
.trio h3 { color: var(--ink); }
.trio p { color: var(--slate); }
@media (min-width: 60rem) { .trio { grid-template-columns: repeat(3, 1fr); gap: 3.5rem; } }

/* full sample report */
.report { max-width: 56rem; margin: 0 auto; }
.report-title { color: var(--white); margin-bottom: 2rem; max-width: none; }
.report .sheet { font-size: .9375rem; }
.report .sheet-row { padding: 1.4rem 1.5rem; }
@media (min-width: 40rem) { .report .sheet-row { grid-template-columns: 8rem 1fr; gap: 1.5rem; } }
.report h3.sheet-claim { font: 500 1.5rem/1.15 var(--serif); }
.report dl { display: grid; grid-template-columns: 1fr; gap: .2rem 1rem; margin-top: .9rem; }
.report dt { font: 700 .75rem/1.5 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-top: .55rem; }
.report dd { color: var(--ink); }
@media (min-width: 40rem) { .report dl { grid-template-columns: 7.5rem 1fr; } .report dt { margin-top: .15rem; } }
.report-foot { padding: 1rem 1.5rem; border-top: 1px solid var(--ink); color: var(--slate); font-size: .8125rem; }

/* placeholders, notice, form */
.placeholder { background: #E8F0F7; color: var(--ink); border: 1px dashed var(--brass); padding: .1rem .35rem; }
.notice { border-left: 3px solid var(--brass); background: var(--ivory); color: var(--ink); padding: 1rem 1.25rem; margin-bottom: 1.75rem; }
form { max-width: 38rem; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .45rem; }
label { font-weight: 600; margin-top: .9rem; color: var(--ink); }
input, textarea { font: inherit; color: var(--ink); background: var(--white); border: 1px solid var(--slate); border-radius: 0; padding: .8rem .9rem; min-height: 52px; width: 100%; }
fieldset[disabled] input, fieldset[disabled] textarea { background: var(--ivory); }
form .btn { margin-top: 1.5rem; justify-self: start; }

/* ---------- footer ---------- */
.site-footer { background: var(--midnight); color: var(--mist); font-size: .875rem; border-top: 1px solid var(--rule-dark); }
.site-footer .wrap { display: grid; gap: .6rem; padding-top: 3.5rem; padding-bottom: 3.5rem; }
.site-footer .wordmark-top { color: var(--ivory); font-size: 1.5rem; margin-bottom: .5rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* fixes after visual review */
.deliver li > div { display: grid; gap: .4rem; }
@media (min-width: 60rem) {
  .deliver li { grid-template-columns: 5rem 1fr; }
  .deliver li > div { grid-template-columns: 1fr 1.7fr; gap: 2rem; align-items: baseline; }
}
.classes .tag, .finding-big > .tag { justify-self: start; }

/* =====================================================================
   v4: cinematic home page. Motion is added by assets/js/motion.js;
   without JavaScript, or with reduced motion, everything below is static and complete.
   ===================================================================== */

/* ---- hero: the field under the lights ---- */
.hero-cine { min-height: min(100svh, 62rem); display: grid; align-content: end; isolation: isolate;
  background: radial-gradient(90% 70% at 50% 0%, rgba(18,87,140,.35) 0%, transparent 60%), radial-gradient(60% 50% at 50% 100%, rgba(18,87,140,.18) 0%, transparent 70%), var(--navy); }
.field-stage { position: absolute; inset: 0; z-index: -1; perspective: 1100px; perspective-origin: 50% 0%; overflow: hidden; }
.field-plane { position: absolute; left: 50%; top: 38%; width: min(150vw, 110rem); transform: translateX(-50%) rotateX(62deg); transform-origin: 50% 0%; }
.field-plane::after { content: ""; position: absolute; inset: -2px; background: linear-gradient(180deg, var(--navy) 0%, transparent 30%, transparent 75%, var(--navy) 100%); }
.field-svg { width: 100%; height: auto; display: block; }
.f-turf { fill: #0E1117; }
.f-ez { fill: #12151C; }
.f-line { stroke: rgba(218,216,220,.32); stroke-width: 2; }
.f-goal { stroke: rgba(218,216,220,.6); stroke-width: 3; }
.f-tick { stroke: rgba(218,216,220,.22); stroke-width: 2; }
.f-num { fill: rgba(218,216,220,.28); font: 700 46px var(--cond); text-anchor: middle; }
.drive { fill: none; stroke: var(--cobalt-light); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(111,166,214,.7)); }
.drive-start { fill: var(--cobalt-light); }
.drive-end rect { fill: var(--brass); }
.drive-end text { fill: #fff; font: 700 20px var(--cond); text-anchor: middle; letter-spacing: .06em; }
.hero-copy { position: relative; padding-top: clamp(6rem, 18vh, 12rem); padding-bottom: 1.5rem; }
.hero-copy h1 { max-width: 12ch; text-shadow: 0 2px 40px rgba(0,0,0,.6); }
.field-caption { position: relative; padding-bottom: 1.5rem; font-size: .8125rem; color: var(--mist); }
@media (min-width: 68rem) { .field-plane { top: 30%; width: min(120vw, 120rem); } }

/* ---- scale: real database counters ---- */
.scale { background: var(--midnight); text-align: left; }
.scale-title { max-width: 18ch; color: var(--white); }
.counters { display: grid; gap: 2.5rem; margin: clamp(3rem, 6vw, 5rem) 0 0; }
.counters > div { border-top: 1px solid var(--brass); padding-top: 1.25rem; }
.counters dt { font: 700 .875rem/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--cobalt-light); }
.counters dd { margin: .9rem 0 0; font: 500 clamp(3.5rem, 9vw, 7.5rem)/.9 var(--serif); color: var(--white); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }
.scale-note { margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 40rem; color: var(--mist); font-size: 1.0625rem; }
@media (min-width: 60rem) { .counters { grid-template-columns: 1.3fr 1fr .8fr; gap: 3.5rem; } }

/* ---- model ---- */
.kicker-dark { font-size: .9375rem; color: var(--brass-deep); }
.model-grid { display: grid; gap: 3rem; }
.model-copy h2 { margin-top: 1rem; color: var(--ink); }
.model-copy p:not(.kicker-dark) { margin-top: 1.25rem; color: var(--slate); max-width: 32rem; }
.model-copy .num { color: var(--ink); }
.model-tags { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; font-size: .9375rem; }
.model-fig { margin: 0; }
.curve-svg { width: 100%; height: auto; overflow: visible; }
.c-grid { stroke: var(--rule); stroke-width: 1; }
.c-axis { color: var(--slate); fill: currentColor; font: 700 15px var(--cond); letter-spacing: .04em; }
.c-axis-title { text-transform: uppercase; letter-spacing: .12em; font-size: 13px; }
.c-bin { fill: rgba(18,87,140,.16); stroke: rgba(18,87,140,.55); stroke-width: 1; }
.c-curve { fill: none; stroke: var(--brass); stroke-width: 3.5; stroke-linecap: round; }
.c-note circle { fill: var(--white); stroke: var(--ink); stroke-width: 2.5; }
.c-note text { color: var(--ink); fill: currentColor; }
.c-note-v { font: 500 30px var(--serif); }
.c-note-l { font: 700 14px var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.model-fig figcaption { margin-top: 1.25rem; font-size: .875rem; color: var(--slate); max-width: 40rem; }
@media (min-width: 64rem) { .model-grid { grid-template-columns: .8fr 1.2fr; gap: 5rem; align-items: center; } }

/* ---- phases: horizontal panels (pinned on wide screens by motion.js) ---- */
.phases-pin { background: var(--navy); padding: var(--sec) 0; overflow: hidden; }
.phases-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.phases-head h2 { color: var(--white); max-width: 14ch; }
.phases-head p { color: var(--mist); max-width: 34rem; font-size: 1.0625rem; }
@media (min-width: 64rem) { .phases-head { grid-template-columns: 1.1fr .9fr; align-items: end; gap: 4rem; } }
.phases-track { display: grid; gap: 1.5rem; padding: 0 var(--gutter); }
.panel { background: var(--raise); border-top: 1px solid var(--brass); padding: clamp(1.5rem, 3vw, 3rem); display: grid; gap: 2rem; }
.panel-n { font: 700 .875rem/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--cobalt-light); }
.panel h3 { margin-top: 1rem; font: 500 clamp(1.9rem, 3.2vw, 2.75rem)/1.05 var(--serif); color: var(--white); max-width: 16ch; }
.panel ul { margin-top: 1.75rem; }
.panel li { padding: .7rem 0; border-top: 1px solid rgba(163,161,165,.16); color: var(--mist); }
.panel-fig { margin: 0; background: var(--white); color: var(--ink); padding: 1.25rem 1.25rem 1rem; display: grid; gap: .9rem; align-content: start; }
.panel-fig .tag { justify-self: start; }
.panel-fig figcaption { font-size: .8125rem; color: var(--slate); }
.mini-svg { width: 100%; height: auto; }
.m-lab { color: var(--slate); fill: currentColor; font: 600 16px var(--sans); }
.m-val { color: var(--ink); fill: currentColor; font: 700 20px var(--cond); }
.m-val-big { color: var(--ink); fill: currentColor; font: 500 40px var(--serif); }
.m-track { fill: #EEEDEF; }
.m-bar { fill: var(--brass); }
.m-dot { fill: none; stroke: var(--slate); stroke-width: 2; }
.m-dot-on { fill: var(--brass); stroke: var(--brass); }
.m-flag rect { fill: none; stroke: var(--ink); stroke-width: 2; }
.m-flag text { color: var(--ink); fill: currentColor; font: 700 15px var(--cond); letter-spacing: .08em; }
.m-axis { stroke: var(--slate); stroke-width: 1.5; }
.m-ret { fill: rgba(18,87,140,.75); }
.m-tb { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 5; }
.m-avg { stroke: var(--brass); stroke-width: 3; }
@media (min-width: 64rem) {
  .phases-track.is-pinned { display: flex; width: max-content; gap: 2.5rem; padding: 0 var(--gutter); }
  .phases-track.is-pinned .panel { width: min(72vw, 64rem); grid-template-columns: 1fr 1fr; align-items: center; }
  .phases-track:not(.is-pinned) .panel { grid-template-columns: 1fr 1fr; align-items: center; }
  .phases-track:not(.is-pinned) { max-width: var(--wrap); margin: 0 auto; }
}

/* ---- report section ---- */
.report-grid { display: grid; gap: 3rem; }
.report-copy h2 { color: var(--ink); }
.report-copy p { margin-top: 1.25rem; color: var(--slate); max-width: 30rem; }
.text-link-dark { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration-color: var(--brass); text-underline-offset: .35em; }
@media (min-width: 64rem) { .report-grid { grid-template-columns: .8fr 1.2fr; gap: 5rem; align-items: center; } }
.section-white .sheet { box-shadow: 0 50px 90px -40px rgba(11,10,12,.45), 0 0 0 1px var(--rule); }

/* v4 refinements after first visual pass */
.hero-cine .hero-copy { display: block; padding-bottom: clamp(14rem, 34vh, 22rem); }
.hero-cine .hero-copy h1 { margin-top: 1.25rem; }
.field-plane { top: 52%; }
.field-plane::after { background: linear-gradient(180deg, var(--navy) 0%, rgba(11,10,12,.55) 22%, transparent 45%, transparent 70%, var(--navy) 100%); }
@media (min-width: 68rem) { .field-plane { top: 50%; width: min(118vw, 118rem); } .hero-cine .hero-copy { padding-bottom: clamp(16rem, 38vh, 24rem); } }
.f-line { stroke: rgba(218,216,220,.22); }
.f-num { fill: rgba(218,216,220,.18); }
.c-axis { font-size: 22px; }
.c-axis-title { font-size: 18px; }
.c-note-v { font-size: 42px; }
.c-note-l { font-size: 18px; }
.field-stage { perspective: 900px; perspective-origin: 50% 20%; }
.field-plane, .field-plane[style] { top: auto; bottom: -6%; transform-origin: 50% 100%; }
.field-plane { transform: translateX(-50%) rotateX(60deg); width: min(160vw, 130rem); }
@media (min-width: 68rem) { .field-plane { top: auto; bottom: -10%; width: min(130vw, 130rem); } }
.field-plane::after { background: linear-gradient(180deg, var(--navy) 0%, rgba(11,10,12,.4) 30%, transparent 55%, transparent 85%, var(--navy) 100%); }
@media (min-width: 68rem) {
  .hero-cine { min-height: min(100svh, 56rem); align-content: center; }
  .hero-cine .hero-copy { padding-top: 4rem; padding-bottom: 5rem; }
  .hero-cine .hero-copy > * { max-width: 40rem; }
  .field-stage { left: 34%; perspective: 1000px; perspective-origin: 40% 0%; }
  .field-plane { top: 14%; bottom: auto; left: 52%; width: 125%; transform-origin: 50% 0%; transform: translateX(-50%) rotateX(52deg); }
  .field-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy) 0%, rgba(11,10,12,.6) 14%, transparent 34%); pointer-events: none; }
  .field-plane::after { background: linear-gradient(180deg, var(--navy) 0%, transparent 18%, transparent 82%, var(--navy) 100%); }
}
.hero-cine > .wrap { width: 100%; }
@media (min-width: 68rem) {
  .field-stage { left: 30%; perspective: 800px; perspective-origin: 55% -10%; }
  .field-plane { top: auto; bottom: 2%; left: 55%; width: 110%; transform-origin: 50% 100%; transform: translateX(-50%) rotateX(58deg); }
}

/* v4.1: field is now pre-projected in the SVG; no CSS 3D */
.field-stage, .field-stage[class] { left: 0; right: 0; top: auto; bottom: 0; height: 64%; perspective: none; }
.field-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--navy) 0%, rgba(11,10,12,.55) 30%, rgba(11,10,12,.1) 60%, transparent 100%); }
.field-plane, .field-plane[class] { position: absolute; inset: 0; left: 0; top: 0; bottom: auto; width: 100%; height: 100%; transform: none; }
.field-plane::after { display: none; }
.field-svg { width: 100%; height: 100%; }
.f-num { font-size: 60px; }
.drive-end text { font-size: inherit; }
.hero-cine { min-height: min(100svh, 60rem); align-content: start; }
.hero-cine .hero-copy, .hero-cine .hero-copy[class] { padding-top: clamp(4rem, 10vh, 7rem); padding-bottom: clamp(16rem, 40vh, 26rem); }
@media (min-width: 68rem) { .hero-cine h1 { max-width: 15ch; font-size: clamp(3rem, 6.4vw, 6.25rem); } .hero-cine .hero-copy > * { max-width: none; } .hero-cine .lede { max-width: 36rem; } .field-stage { height: 58%; } }
.field-stage, .field-stage[class] { height: 100%; }
.field-stage::after { background: linear-gradient(180deg, var(--navy) 0%, rgba(11,10,12,.85) 30%, rgba(11,10,12,.35) 55%, transparent 80%); }
.hero-cine { min-height: 100svh; }
@media (min-width: 68rem) { .field-stage, .field-stage[class] { height: 100%; } .hero-cine .hero-copy, .hero-cine .hero-copy[class] { padding-bottom: clamp(14rem, 34vh, 20rem); } }
.sheet-anim { overflow: hidden; }

/* =====================================================================
   v5: live data hero, engine console, model calculator
   ===================================================================== */
.field-plane { position: absolute; }
.field-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-cine { --mx: 70%; --my: 60%; }
.hero-cine::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(28rem 20rem at var(--mx) var(--my), rgba(111,166,214,.10), transparent 70%); }
.field-caption { display: grid; gap: .6rem; }
.field-caption p { max-width: 46rem; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .8125rem; color: var(--mist); }
.legend li { display: inline-flex; align-items: center; gap: .45rem; }
.sw { width: 1.1rem; height: 3px; border-radius: 2px; display: inline-block; }
.sw-td { background: #FFFFFF; } .sw-fg { background: #6FA6D6; } .sw-punt { background: #A3A1A5; } .sw-to { background: #3D84C6; }

/* engine console */
.agent { background: var(--navy); border-top: 1px solid var(--rule-dark); }
.agent-grid { display: grid; gap: 3rem; }
.agent-copy h2 { color: var(--white); margin-top: 1rem; max-width: 12ch; }
.agent-copy p:not(.kicker) { margin-top: 1.25rem; color: var(--mist); max-width: 30rem; }
.console { margin: 0; background: #050506; border: 1px solid rgba(163,161,165,.22); box-shadow: 0 40px 80px -40px rgba(18,87,140,.55); font: 400 .875rem/1.7 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--ivory); }
.console-bar { display: flex; align-items: center; gap: .45rem; padding: .7rem 1rem; border-bottom: 1px solid rgba(163,161,165,.18); }
.console-bar span { width: .65rem; height: .65rem; border-radius: 50%; background: #2A2A30; }
.console-bar p { margin-left: .6rem; font-size: .75rem; color: var(--mist); }
.console-bar strong { color: var(--ivory); font-weight: 600; }
.console-lines { padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: .15rem; overflow-x: auto; }
.console-lines li { display: flex; gap: .5rem; align-items: baseline; white-space: nowrap; min-width: 0; }
.c-fill { flex: 1 1 1rem; min-width: 1rem; border-bottom: 1px dotted rgba(163,161,165,.35); transform: translateY(-.3em); }
.c-prompt { color: var(--cobalt-light); }
.c-dim { color: var(--mist); }
.c-num { color: var(--white); }
.c-ok { color: #8FC2EA; }
.c-model { color: var(--light); }
.c-flag { color: var(--ink); background: var(--white); padding: 0 .35rem; font-weight: 600; }
.c-done { color: var(--white); margin-top: .5rem; font-weight: 600; }
.console-lines li.is-hidden { visibility: hidden; }
.console-lines li.is-typing::after { content: ""; display: inline-block; width: .55em; height: 1.05em; background: var(--cobalt-light); margin-left: .2rem; transform: translateY(.15em); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (min-width: 64rem) { .agent-grid { grid-template-columns: .75fr 1.25fr; gap: 5rem; align-items: center; } }
@media (max-width: 40rem) { .console { font-size: .75rem; } .console-lines li { white-space: normal; flex-wrap: wrap; } .c-fill { display: none; } }

/* calculator */
.calc { margin-top: 1.75rem; padding: 1.25rem 1.4rem; border: 1px solid var(--rule); border-left: 3px solid var(--brass); display: grid; gap: .75rem; }
.calc label { margin: 0; font: 700 .8125rem/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.calc input[type=range] { width: 100%; min-height: 44px; padding: 0; border: 0; accent-color: var(--brass); background: transparent; }
.calc-out { font-size: 1.0625rem; color: var(--slate); }
.calc-out output { font: 500 1.75rem/1 var(--serif); color: var(--ink); }
.c-probe { display: none; }
.c-probe.on { display: inline; }
.c-probe-line { stroke: var(--brass); stroke-width: 1.5; stroke-dasharray: 4 5; }
.c-probe-dot { fill: var(--brass); stroke: var(--white); stroke-width: 3; }
.c-l { white-space: nowrap; }
@media (max-width: 40rem) { .c-l { white-space: normal; } }

/* =====================================================================
   v6: cinematic chapters (full-screen scenes; footage drops into .ch-media)
   ===================================================================== */
.phases-intro { background: var(--navy); padding-bottom: clamp(2rem, 4vw, 3rem); }
.phases-intro .section-head { margin-bottom: 0; }
.phases-intro h2 { color: var(--white); }
.chapters { position: relative; background: #000; }
.chapter { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.ch-media { position: absolute; inset: -6% -3%; z-index: -2; background-color: #050506; background-size: cover; background-position: center; will-change: transform; }
.ch-media video, .ch-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.1) 70%, rgba(0,0,0,.35) 100%), linear-gradient(90deg, rgba(0,0,0,.55) 0%, transparent 55%); }
.ch-body { display: grid; gap: 2rem; padding-top: 8rem; padding-bottom: clamp(3rem, 8vh, 6rem); width: 100%; }
.ch-title { font: 500 clamp(3.75rem, 13vw, 11.5rem)/.86 var(--serif); letter-spacing: -.03em; color: var(--white); }
.ch-cap { margin-top: 1.5rem; max-width: 34rem; color: var(--light); font-size: 1.0625rem; line-height: 1.65; }
.ch-card { margin: 0; background: rgba(255,255,255,.96); color: var(--ink); padding: 1.1rem 1.1rem .9rem; display: grid; gap: .8rem; max-width: 30rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.ch-card .tag { justify-self: start; }
.ch-card figcaption { font-size: .8125rem; color: var(--slate); }
@media (min-width: 64rem) { .ch-body { grid-template-columns: 1.3fr .7fr; align-items: end; gap: 4rem; } .ch-card { justify-self: end; width: 100%; } }

/* stand-in scenes until footage arrives: light, lines and depth, all palette colours */
.ch-m-off { background-image: radial-gradient(60% 55% at 78% 22%, rgba(111,166,214,.45), transparent 60%), repeating-linear-gradient(105deg, transparent 0 118px, rgba(218,216,220,.07) 118px 120px), linear-gradient(180deg, #0B1624, #000); }
.ch-m-def { background-image: radial-gradient(55% 60% at 18% 30%, rgba(61,132,198,.45), transparent 62%), repeating-linear-gradient(0deg, transparent 0 46px, rgba(218,216,220,.05) 46px 48px), linear-gradient(180deg, #08111C, #000); }
.ch-m-st { background-image: radial-gradient(40% 35% at 30% 6%, rgba(255,255,255,.35), transparent 70%), radial-gradient(40% 35% at 72% 6%, rgba(255,255,255,.3), transparent 70%), radial-gradient(70% 60% at 50% 100%, rgba(18,87,140,.35), transparent 70%), linear-gradient(180deg, #0A1420, #000); }
.ch-m-st .goalpost-svg { position: absolute; left: 50%; bottom: 0; height: 88%; width: auto; transform: translateX(-10%); }
.ch-m-film { background-image: radial-gradient(45% 40% at 70% 40%, rgba(111,166,214,.4), transparent 65%), linear-gradient(90deg, transparent 49.8%, rgba(218,216,220,.06) 50%, transparent 50.2%), repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 3px 4px), linear-gradient(180deg, #07090D, #000); }

/* scene index on the right edge (desktop) */
.ch-dots { position: absolute; right: clamp(1rem, 2.5vw, 2rem); top: 0; bottom: 0; z-index: 3; display: none; pointer-events: none; }
@media (min-width: 64rem) { .ch-dots { display: block; } }
.ch-dots-inner, .ch-dots { list-style: none; }
.ch-dots li { position: sticky; top: calc(50vh - 3.5rem); width: 3px; height: 1.5rem; margin: .55rem 0; background: rgba(218,216,220,.3); border-radius: 2px; transition: background .3s, height .3s; }
.ch-dots li.on { background: var(--white); height: 2.75rem; }
.ch-dots { position: fixed; top: 50%; bottom: auto; transform: translateY(-50%); opacity: 0; transition: opacity .4s; }
.ch-dots li { position: static; }
.chapters.in-view .ch-dots { opacity: 1; }
.ch-title { font-size: clamp(3.5rem, 10.5vw, 9.5rem); }
.ch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ch-m-st .goalpost-svg { display: none; }

/* v6: cinematic inner page heads (same scene engine as the home chapters) */
.page-cine { position: relative; overflow: hidden; isolation: isolate; min-height: min(78svh, 46rem); display: grid; align-items: end; }
.page-cine .ch-media { inset: 0; }
.page-cine .wrap { width: 100%; padding-top: clamp(8rem, 22vh, 14rem); padding-bottom: clamp(3rem, 8vh, 5.5rem); }
.page-cine h1 { font-size: clamp(3rem, 8.5vw, 7rem); max-width: 13ch; }
.c-note-v { font: 700 38px var(--cond); letter-spacing: 0; } .calc-out output { font: 700 2rem/1 var(--cond); } .counters dd { font-variant-numeric: lining-nums; }

/* v8: logo (Field Dial) in the header */
.wordmark { flex-direction: row; align-items: center; gap: .8rem; }
.wordmark-mark { flex: none; display: block; }
.wordmark-text { display: flex; flex-direction: column; }
.wordmark-top { font: 600 1.15rem/1 var(--serif-h); letter-spacing: .36em; }
.wordmark-rule { width: 1.6rem; margin: .4rem 0 .35rem; }
.wordmark-sub { font-size: .66rem; letter-spacing: .4em; }
.site-footer .wordmark-top { font: 600 1.05rem/1 var(--serif-h); letter-spacing: .36em; }

/* v9: identity "The Vertex" (Archivo Expanded replaces Bodoni) */
h1, h2, .serif { font-weight: 500; letter-spacing: -0.02em; line-height: 1.04; }
h1 { font-size: clamp(2.4rem, 6.6vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); }
h3 { font-weight: 500; letter-spacing: -0.01em; }
.ch-title { font-size: clamp(3rem, 8.6vw, 8rem); letter-spacing: -0.035em; font-weight: 500; }
.counters dd { font-size: clamp(3rem, 7.4vw, 6.4rem); letter-spacing: -0.03em; }
.statement { font-size: clamp(1.6rem, 3.2vw, 2.6rem); letter-spacing: -0.015em; line-height: 1.2; }
.wordmark { gap: .75rem; }
.wordmark-top { font: 500 1.15rem/1 var(--serif); letter-spacing: .08em; }
.wordmark-rule { display: none; }
.wordmark-sub { font: 400 .56rem/1 var(--serif); letter-spacing: .3em; margin-top: .42rem; color: var(--mist); }
.site-footer .wordmark-top { font: 500 1.05rem/1 var(--serif); letter-spacing: .08em; }

/* =====================================================================
   v10: split-screen phases menu, expanding frame, warm-white rhythm, finale
   ===================================================================== */
:root { --warm: #F5F2EB; --warm-2: #ECE8DF; }
.section-white { background: var(--warm); }

/* split-screen menu */
.menu { background: var(--warm); color: var(--ink); }
.menu-grid { display: grid; grid-template-columns: 1fr; }
.menu-stage { position: relative; height: 62svh; min-height: 22rem; background: #000; overflow: hidden; }
.menu-scene { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.menu-scene.is-on { opacity: 1; }
.menu-scene .ch-media { inset: 0; }
.menu-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent 50%); }
.menu-card { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; margin: 0; max-width: 26rem; background: rgba(255,255,255,.97); padding: 1rem 1rem .8rem; display: grid; gap: .7rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
  transform: translateY(10px); opacity: 0; transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1) 120ms, opacity 500ms ease 120ms; }
.menu-scene.is-on .menu-card { transform: none; opacity: 1; }
.menu-card .tag { justify-self: start; }
.menu-card figcaption { font-size: .8125rem; color: var(--slate); }
.menu-side { padding: clamp(3rem, 6vw, 6rem) var(--gutter); display: flex; flex-direction: column; gap: 1.25rem; }
.menu-side h2 { color: var(--ink); max-width: 13ch; }
.menu-list { margin-top: 1.5rem; border-top: 1px solid #CFCAC0; }
.menu-list li { border-bottom: 1px solid #CFCAC0; }
.menu-item { all: unset; box-sizing: border-box; width: 100%; min-height: 64px; display: flex; align-items: baseline; gap: 1.25rem; padding: 1.1rem 0; cursor: pointer; color: #8A867E; transition: color 200ms ease; }
.menu-item:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.menu-item[aria-expanded="true"], .menu-item:hover { color: var(--ink); }
.menu-n { font: 500 .8125rem/1 var(--serif); letter-spacing: .1em; color: var(--brass-deep); }
.menu-t { font: 500 clamp(1.5rem, 2.6vw, 2.2rem)/1.1 var(--serif); letter-spacing: -0.02em; }
.menu-detail { display: grid; gap: .5rem; padding: 0 0 1.4rem 2.6rem; color: var(--slate); max-width: 34rem; }
.menu-lead { color: var(--ink); font-weight: 600; }
.js-menu .menu-item[aria-expanded="false"] + .menu-detail { display: none; }
@media (min-width: 64rem) {
  .menu-grid { grid-template-columns: 1.15fr .85fr; min-height: 100svh; }
  .menu-stage { position: sticky; top: 0; height: 100svh; }
  .menu-side { justify-content: center; padding: 6rem 4rem; }
  .menu-card { left: 2.5rem; bottom: 2.5rem; right: auto; width: 24rem; }
}
@media (prefers-reduced-motion: reduce) { .menu-scene, .menu-card { transition: none; } }

/* expanding frame */
.expand { position: relative; background: var(--warm); height: 220svh; }
.expand-sticky { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.expand-frame { position: relative; width: 100%; height: 100%; overflow: hidden; clip-path: inset(var(--ei, 14%) var(--ei, 14%) var(--ei, 14%) var(--ei, 14%)); background: #000; display: grid; align-items: end; }
.expand-frame .ch-media { inset: 0; }
.expand-copy { position: relative; width: 100%; padding-bottom: clamp(3rem, 10vh, 7rem); opacity: var(--eo, 0); transform: translateY(calc((1 - var(--eo, 0)) * 24px)); }
.expand-copy h2 { color: var(--white); max-width: 15ch; }
.expand-copy p { margin-top: 1.25rem; color: var(--light); max-width: 34rem; font-size: 1.0625rem; }
.no-js .expand, .reduce .expand { height: auto; }
.no-js .expand-sticky, .reduce .expand-sticky { position: relative; height: 80svh; }
.no-js .expand-frame, .reduce .expand-frame { clip-path: none; }
.no-js .expand-copy, .reduce .expand-copy { opacity: 1; transform: none; }

/* finale */
.finale { position: relative; min-height: 92svh; display: grid; align-items: center; overflow: hidden; isolation: isolate; text-align: center; background: #000; }
.finale .ch-media { inset: 0; z-index: -2; }
.finale-shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 55%, rgba(0,0,0,.25), rgba(0,0,0,.85)); }
.finale-copy { display: grid; justify-items: center; gap: 1.5rem; padding-top: 6rem; padding-bottom: 6rem; }
.finale-copy h2 { color: var(--white); max-width: 14ch; font-size: clamp(2.4rem, 6vw, 5rem); }
.finale-copy p { color: var(--light); max-width: 34rem; font-size: 1.0625rem; }
@media (max-width: 63.99rem) {
  .menu-stage { position: sticky; top: 0; z-index: 2; height: 48svh; min-height: 20rem; }
  .menu-card { left: .75rem; right: .75rem; bottom: .75rem; padding: .75rem .8rem .6rem; gap: .5rem; }
  .menu-card figcaption { display: none; }
}
.contact-card { display: grid; gap: .9rem; align-content: start; }
.contact-label { font: 700 .8125rem/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); margin-top: .75rem; }
.contact-big { font: 500 clamp(1.25rem, 2.4vw, 1.9rem)/1.2 var(--serif); letter-spacing: -0.01em; color: var(--ink); text-decoration-color: var(--brass); text-underline-offset: .3em; word-break: break-word; min-height: 44px; display: inline-flex; align-items: center; }
.contact-card .btn { justify-self: start; margin-top: 1rem; }

/* about: headshot */
.headshot { margin: 0; max-width: 26rem; }
.headshot img { width: 100%; height: auto; display: block; border-radius: 4px; filter: grayscale(.15) contrast(1.02); }
/* sample report pages */
.sample-fig { margin: 0 0 2.5rem; }
.sample-fig img { width: 100%; height: auto; display: block; border-radius: 4px; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 18px 40px -20px rgba(0,0,0,.45); }
.sample-fig figcaption { margin-top: .75rem; font-size: .9rem; color: var(--slate); }
.section-midnight .sample-fig figcaption { color: #C9CCD3; }
.sample-fig a { display: block; }
.quote-note { font-size: .95rem; color: var(--slate); margin-top: 1rem; }
.book { margin-top: 1.25rem; }
.contact-form { display: grid; gap: .5rem; margin-top: 2rem; max-width: 34rem; }
.contact-form label { font-size: .85rem; color: var(--slate); margin-top: .5rem; }
.contact-form input, .contact-form textarea { font: inherit; padding: .75rem .85rem; border: 1px solid #C9CCD3; border-radius: 4px; min-height: 44px; background: #fff; color: var(--ink); }
.contact-form button { margin-top: 1rem; justify-self: start; }