/* Lewis & Grey International */

:root {
  --bg: #08070d;
  --bg-2: #0e0c17;
  --ink: #ece7de;
  --dim: rgba(236, 231, 222, .74); /* 8.3:1 */
  --faint: rgba(236, 231, 222, .58); /* 5.9:1 on the page colour */
  --line: rgba(236, 231, 222, .14);
  --teal: #8ad7e4;
  --lilac: #d7abe7;
  --gold: #e4b76f;
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(20px, 4.4vw, 72px);
  --ease: cubic-bezier(.76, 0, .24, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.1em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 300; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
::selection { background: rgba(138, 215, 228, .28); color: #fff; }
:focus-visible { outline: 1px solid var(--teal); outline-offset: 4px; }

em, .em {
  font-style: italic;
  background: linear-gradient(100deg, var(--teal) 10%, var(--lilac) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .06em;
}

/* type */
.display { font-size: clamp(2.7rem, 6.3vw, 6.6rem); line-height: 1.02; letter-spacing: -.012em; }
.h2 { font-size: clamp(2.1rem, 4.4vw, 4.4rem); line-height: 1.06; letter-spacing: -.008em; }
.h3 { font-size: clamp(1.6rem, 2.5vw, 2.5rem); line-height: 1.14; }
.lede { font-family: var(--serif); font-size: clamp(1.3rem, 1.75vw, 1.75rem); line-height: 1.38; color: var(--ink); font-weight: 400; }
.body { color: var(--dim); max-width: 34em; }
.label {
  font-family: var(--sans); font-weight: 400; font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--teal);
}
.note { font-size: 13px; color: var(--faint); letter-spacing: .02em; }

/* split words */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; padding-right: .08em; margin-right: -.08em; }
.wi { display: inline-block; will-change: transform; }
.js .wi { transform: translateY(110%); }
.js [data-fade] { opacity: 0; }
.measuring .wi, .measuring [data-fade] { transform: none !important; }

/* layout */
.wrap { padding-left: var(--pad); padding-right: var(--pad); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }
.sec { padding-top: clamp(96px, 15vh, 190px); padding-bottom: clamp(96px, 15vh, 190px); position: relative; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* grain and veil */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%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");
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}
.veil {
  position: fixed; inset: 0; z-index: 100; background: #050409; display: none;
  align-items: center; justify-content: center; transform: translateY(-101%);
  transition: transform .95s var(--ease);
}
.veil img { width: 54px; opacity: .85; transition: opacity .4s; }
.js .veil { display: flex; }
.js.entering .veil { transform: translateY(0); transition: none; }
.js.leaving .veil { transform: translateY(0); }
.js.leaving-prep .veil { transform: translateY(101%); transition: none; }

/* top bar */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between;
  padding: 26px var(--pad); transition: transform .7s var(--out), background-color .5s;
}
.bar.hide { transform: translateY(-110%); }
.bar.solid { background: linear-gradient(rgba(8, 7, 13, .92), rgba(8, 7, 13, 0)); }
.brand img { height: 30px; width: auto; }
.nav { display: flex; gap: clamp(20px, 2.6vw, 44px); }
.nav a, .menu-btn {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; color: var(--ink);
  position: relative; padding: 6px 0; opacity: .82; transition: opacity .3s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .6s var(--out);
}
.nav a:hover, .nav a[aria-current] { opacity: 1; }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.menu-btn { display: none; background: none; border: 0; cursor: pointer; font-family: var(--sans); }
.sheet {
  position: fixed; inset: 0; z-index: 55; background: #07060c; padding: 120px var(--pad) 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease); visibility: hidden;
}
.sheet.open { clip-path: inset(0); visibility: visible; }
.sheet a.big { display: block; font-family: var(--serif); font-size: clamp(2.2rem, 9vw, 3.4rem); line-height: 1.25; }
.sheet .note a { color: var(--dim); }

/* buttons and links */
.btn {
  display: inline-flex; align-items: center; gap: 18px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400;
  padding: 20px 30px; border: 1px solid var(--faint); color: var(--ink); position: relative; overflow: hidden; cursor: pointer;
  background: none; font-family: var(--sans); transition: color .5s var(--out), border-color .5s;
}
.btn::before {
  content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateY(101%);
  transition: transform .65s var(--ease); z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn .arr { width: 26px; height: 1px; background: currentColor; position: relative; transition: width .5s var(--out); }
.btn .arr::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.btn:hover { color: #08070d; border-color: var(--ink); }
.btn:hover::before { transform: translateY(0); }
.btn:hover .arr { width: 40px; }
.link { display: inline-block; position: relative; padding-bottom: 5px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform .7s var(--out); }
.link:hover::after { transform: scaleX(.35); }

/* cinemascope frames */
.cine { position: relative; overflow: hidden; background: #050409; }
.cine img { width: 100%; height: auto; min-height: 100%; object-fit: cover; will-change: transform; }
.cine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 7, 13, .0) 55%, rgba(8, 7, 13, .55)); pointer-events: none; }
.r-scope { aspect-ratio: 2.62 / 1; }
.r-wide { aspect-ratio: 16 / 9; }
.r-tall { aspect-ratio: 4 / 5; }

/* ---------- home: film ---------- */
.film { height: 860vh; position: relative; }
.film-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #040308; }
.film-frame { position: absolute; inset: 0; background: #000; opacity: 0; }
.film-frame canvas, .film-frame video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.film-pin::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(180deg, rgba(4, 3, 8, .62) 0%, rgba(4, 3, 8, 0) 20%, rgba(4, 3, 8, 0) 50%, rgba(4, 3, 8, .5) 74%, rgba(4, 3, 8, .9) 100%),
    radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .38) 100%);
}
.film-title, .film-hud, .film-cue, .film-load, .film-prog { z-index: 2; }
.film-title h1 { font-size: inherit; line-height: inherit; letter-spacing: inherit; margin: 0; }
.film-title {
  position: absolute; left: var(--pad); bottom: clamp(84px, 13vh, 150px); max-width: 11.5em; margin: 0;
  font-size: clamp(2.5rem, 5.2vw, 5.4rem); line-height: 1.03; letter-spacing: -.012em;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .9), 0 0 90px rgba(0, 0, 0, .85);
}
.film-hud {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 28px; display: flex; align-items: flex-end; justify-content: space-between;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 400; color: var(--dim);
}
.film-hud .tc { font-variant-numeric: tabular-nums; color: var(--ink); min-width: 9em; }
.film-ch { display: flex; gap: clamp(14px, 2.2vw, 34px); }
.film-ch li { transition: color .6s, opacity .6s; opacity: .45; white-space: nowrap; }
.film-ch li.on { color: var(--ink); opacity: 1; }
.film-count { font-variant-numeric: tabular-nums; color: var(--ink); margin-left: clamp(14px, 2.2vw, 34px); }
.film-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .08); }
.film-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--lilac)); transform-origin: left; transform: scaleX(0); }
.film-cue { position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: 16px; }
.film-cue::after { content: ""; width: 1px; height: 70px; background: linear-gradient(var(--ink), transparent); animation: cue 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.film-load { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); font-variant-numeric: tabular-nums; transition: opacity .8s; z-index: 2; }
@media (orientation: portrait) {
  .film-title { bottom: 120px; font-size: clamp(2.2rem, 9vw, 3.2rem); }
}

/* ---------- home: page one ---------- */
.p1 { height: 500vh; position: relative; } /* 4 beats: list, question, two removals */
.p1-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.p1-copy { grid-column: 1 / span 5; position: relative; min-height: 22rem; }
.p1-copy > div { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.p1-copy .label { display: block; margin-bottom: 26px; }
.p1-copy p { margin-top: 26px; }
.serp { grid-column: 7 / span 6; border-top: 1px solid var(--line); font-family: var(--serif); }
.serp-head { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.serp-head b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.serp-row { overflow: hidden; will-change: height, opacity; }
.serp-in { display: grid; grid-template-columns: 2.6em 1fr auto; align-items: baseline; gap: 0 14px; padding: 1.25vh 0; border-bottom: 1px solid var(--line); position: relative; }
.serp-n { font-family: var(--sans); font-size: 11px; letter-spacing: .14em; color: var(--faint); font-variant-numeric: tabular-nums; }
.serp-t { font-size: clamp(1.02rem, 1.5vw, 1.42rem); line-height: 1.25; position: relative; justify-self: start; }
.serp-s { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .08em; color: var(--faint); margin-top: 1px; }
.serp-tag { font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--lilac); opacity: 0; }
.serp-row.new .serp-tag { color: var(--teal); }
.serp-t .strike { position: absolute; left: -6px; right: -6px; top: .62em; height: 1px; background: var(--lilac); transform: scaleX(0); transform-origin: left; }

/* ---------- home: stat ---------- */
.stat { height: 150vh; position: relative; }
.stat-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.stat-num { font-family: var(--serif); font-size: clamp(5rem, 17vw, 17rem); line-height: .86; letter-spacing: -.03em; display: flex; align-items: baseline; gap: .12em; font-variant-numeric: lining-nums; }
.stat-num .a { background: linear-gradient(100deg, var(--teal), #b9c3ea); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-num .to { font-style: italic; font-size: .32em; color: var(--dim); letter-spacing: 0; }
.stat-num .b { background: linear-gradient(100deg, #ddd6ee, var(--lilac)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-row { margin-top: 5vh; align-items: end; }
.stat-row .body { grid-column: 1 / span 4; }
.crowd { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(25, 1fr); gap: 14px 0; }
.crowd i { display: block; width: 1px; height: clamp(18px, 3.4vh, 34px); background: var(--ink); justify-self: center; transition: transform 1.1s var(--out), opacity 1.1s var(--out), background-color 1.1s; }
.crowd i.gone { transform: translateY(-14px) scaleY(.45); opacity: .16; background: var(--lilac); }

/* ---------- home: witnesses ---------- */
.wit .cine { grid-column: 1 / span 7; }
.wit-copy { grid-column: 9 / span 4; align-self: end; }
.wit-copy .h3 { margin: 22px 0 26px; }

/* ---------- home: market (horizontal) ---------- */
.mk { position: relative; }
.mk-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.mk-track { display: flex; align-items: stretch; gap: clamp(40px, 7vw, 130px); padding: 0 var(--pad); will-change: transform; }
.mk-intro { flex: 0 0 min(36vw, 560px); display: flex; flex-direction: column; justify-content: center; }
.mk-intro .h2 { margin: 24px 0 28px; }
.mk-panel { flex: 0 0 min(58vw, 880px); display: flex; flex-direction: column; justify-content: center; }
.mk-panel .cine { margin: 22px 0 30px; }
.mk-head { display: flex; justify-content: space-between; align-items: baseline; }
.mk-head .h2 { font-size: clamp(2rem, 4vw, 4rem); }
.mk-foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; align-items: start; }
.mk-foot dt { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; font-weight: 400; }
.mk-foot dd { font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; }
.mk-end { flex: 0 0 8vw; }
.mk-count { position: absolute; right: var(--pad); bottom: 30px; font-size: 11px; letter-spacing: .22em; color: var(--dim); font-variant-numeric: tabular-nums; }

/* ---------- home: flight (canvas) ---------- */
.fly { height: 300vh; position: relative; } /* 2 beats */
.fly-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.fly canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fly-copy { position: absolute; left: var(--pad); bottom: 12vh; width: min(34em, 46vw); }
.fly-copy > div { position: absolute; left: 0; bottom: 0; opacity: 0; }
.fly-copy .label { display: block; margin-bottom: 22px; }

/* ---------- record ---------- */
.figs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.fig { padding: 34px 28px 40px 0; border-right: 1px solid var(--line); }
.fig + .fig { padding-left: 28px; }
.fig:last-child { border-right: 0; }
.fig b { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 5.6vw, 5.8rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.fig b span { font-size: .5em; letter-spacing: 0; }
.fig p { color: var(--dim); margin: 16px 0 0; max-width: 17em; }
.mast { overflow: hidden; padding: 5vh 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mast-row { display: flex; white-space: nowrap; will-change: transform; font-family: var(--serif); font-size: clamp(2rem, 4.6vw, 4.6rem); line-height: 1.3; }
.mast-row span { padding: 0 .55em; }
.mast-row span:nth-child(even) { font-style: italic; color: var(--dim); }
.clients { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 32px); }
.clients .label { grid-column: 1 / span 3; padding-top: 22px; }
.clients ul { grid-column: 5 / span 8; }
.clients li { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: clamp(1.4rem, 2.3vw, 2.2rem); transition: padding .7s var(--out), color .5s; }
.clients li:first-child { border-top: 1px solid var(--line); }
.clients li span { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.clients li:hover { padding-left: 18px; }

/* ---------- closing and footer ---------- */
.close { position: relative; overflow: hidden; }
.close canvas { position: absolute; right: 2vw; top: 50%; width: min(60vh, 44vw); aspect-ratio: 403 / 380; transform: translateY(-50%); opacity: .95; pointer-events: none; }
.close-in { position: relative; max-width: 46rem; }
.close-in .display { margin: 26px 0 40px; }
.foot { border-top: 1px solid var(--line); padding: 64px var(--pad) 34px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.foot img { height: 34px; width: auto; margin-bottom: 26px; }
.foot h4 { font-family: var(--sans); font-weight: 400; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
.foot p, .foot li { font-size: 14px; line-height: 1.75; color: var(--dim); }
.foot a { transition: color .3s; }
.foot a:hover { color: var(--ink); }
.foot-base { display: flex; justify-content: space-between; gap: 20px; margin-top: 70px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }

/* ---------- inner page hero ---------- */
.hero { padding-top: clamp(170px, 27vh, 300px); padding-bottom: clamp(50px, 8vh, 100px); }
.hero .label { display: block; margin-bottom: 30px; }
.hero .display { max-width: 13.5em; }
.hero-sub { margin-top: clamp(40px, 7vh, 80px); }
.hero-sub .lede { grid-column: 7 / span 6; }
.hero-img { margin: 0 var(--pad) 0 auto; width: min(1040px, calc(100% - 2 * var(--pad))); margin-right: var(--pad); }

/* two column prose */
.duo > .label, .duo > .side { grid-column: 1 / span 4; }
.duo > .main { grid-column: 6 / span 7; }
.duo .h2 { margin-bottom: 34px; }
.duo .h3 { margin-bottom: 20px; }
.duo .lede { margin-bottom: 28px; }

/* ---------- removal: audit ---------- */
.audit { height: 450vh; position: relative; } /* 3 reading beats + dissolve */
.audit-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.audit-copy { grid-column: 1 / span 4; position: relative; min-height: 24rem; }
.audit-copy > div { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.audit-copy .label { display: block; margin-bottom: 24px; }
.audit-copy .h3 { margin-bottom: 20px; }
.paper { grid-column: 6 / span 5; position: relative; padding: clamp(22px, 3vw, 44px); border: 1px solid var(--line); background: rgba(236, 231, 222, .025); height: min(74vh, 720px); display: flex; flex-direction: column; justify-content: space-between; }
.paper-h { height: clamp(14px, 2.4vh, 24px); background: var(--ink); opacity: .82; width: 78%; transform-origin: left; }
.paper-h.s { width: 52%; margin-top: 1.2vh; }
.paper-l { display: flex; gap: 6px; height: clamp(4px, .8vh, 7px); }
.paper-l i { display: block; height: 100%; background: var(--ink); opacity: .26; transform-origin: left; flex: 1 1 0; transition: opacity .9s var(--out), background-color .9s; }
.paper-l i.hit.lit { background: var(--lilac); opacity: 1; }
.paper-gap { height: 1vh; }
.marks { grid-column: 11 / span 2; position: relative; height: min(74vh, 720px); }
.marks li { position: absolute; left: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--lilac); opacity: 0; transform: translateX(-12px); transition: opacity .9s var(--out), transform .9s var(--out); white-space: nowrap; padding-left: 30px; font-weight: 400; }
.marks li::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 1px; background: var(--lilac); }
.marks li.lit { opacity: 1; transform: none; }
.paper-out { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 2.1rem); font-style: italic; color: var(--dim); opacity: 0; padding: 0 12%; line-height: 1.3; }

/* steps with rolling numeral */
.steps { align-items: start; }
.roll { grid-column: 1 / span 4; position: sticky; top: 22vh; }
.roll .label { display: block; margin-bottom: 14px; }
.roll-win { height: 1em; overflow: hidden; font-family: var(--serif); font-size: clamp(7rem, 17vw, 16rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.roll-col { will-change: transform; }
.roll-col span { display: block; height: 1em; background: linear-gradient(100deg, var(--teal), var(--lilac)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.steps-list { grid-column: 6 / span 7; }
.step { padding: 9vh 0; border-top: 1px solid var(--line); transition: opacity .8s var(--out); }
.js .step { opacity: .3; }
.js .step.on { opacity: 1; }
.step:last-child { border-bottom: 1px solid var(--line); }
.step .label { display: block; margin-bottom: 18px; }
.step .h2 { margin-bottom: 26px; font-size: clamp(1.9rem, 3.5vw, 3.4rem); }
.step .lede { margin-bottom: 20px; max-width: 28em; }
.step dl { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 34px; }
.step dt { font-family: var(--serif); font-size: 1.35rem; margin-bottom: 8px; }
.step dd { color: var(--dim); font-size: 15px; }

/* comparison table */
.cmp { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { text-align: left; padding: 24px 20px 24px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-weight: 300; }
.cmp thead th { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); font-weight: 400; padding-bottom: 14px; }
.cmp tbody th { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 2rem); width: 24%; }
.cmp td { color: var(--dim); }
.cmp td b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--ink); }
.cmp tr.us th, .cmp tr.us td b { color: var(--teal); }
.cmp tr.us td { color: var(--ink); }

/* masthead wall */
.wall { font-family: var(--serif); font-size: clamp(1.9rem, 4.7vw, 4.9rem); line-height: 1.22; letter-spacing: -.008em; }
.wall span { color: var(--ink); opacity: .16; transition: opacity 1s var(--out); }
.wall span.lit { opacity: 1; }
.wall span:nth-child(3n) { font-style: italic; }
.wall i { font-style: normal; opacity: .2; padding: 0 .28em; }

/* lists */
.plain li { padding: 20px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 3.2em 1fr; align-items: baseline; }
.plain li:first-child { border-top: 1px solid var(--line); }
.plain li span { font-size: 11px; letter-spacing: .16em; color: var(--faint); font-variant-numeric: tabular-nums; }
.plain li b { font-family: var(--serif); font-weight: 300; font-size: clamp(1.4rem, 2.3vw, 2.1rem); transition: padding .7s var(--out); }
.plain li:hover b { padding-left: 14px; }

/* offices */
.offices { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 90px); }
.office { border-top: 1px solid var(--line); padding-top: 26px; }
.office .clock { font-family: var(--serif); font-size: clamp(3rem, 6vw, 5.6rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; margin: 18px 0 26px; }
.office .clock small { font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); margin-left: 12px; }
.office address { font-style: normal; color: var(--dim); }
.office a { color: var(--ink); }

/* contact form */
.form { grid-column: 6 / span 7; }
.field { position: relative; border-bottom: 1px solid var(--line); padding: 26px 0 12px; }
.field::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--teal), var(--lilac)); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--out); }
.field:focus-within::after { transform: scaleX(1); }
.field label { display: block; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--faint); font-weight: 400; margin-bottom: 8px; transition: color .4s; }
.field:focus-within label { color: var(--teal); }
.field input, .field textarea {
  width: 100%; background: none; border: 0; outline: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.8rem);
  padding: 0; border-radius: 0; resize: none; line-height: 1.3;
}
.field textarea { min-height: 4.2em; }
.field input::placeholder, .field textarea::placeholder { color: rgba(236, 231, 222, .2); font-style: italic; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 40px; flex-wrap: wrap; }
.form-done { font-family: var(--serif); font-size: 1.5rem; margin-top: 30px; display: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  body { font-size: 16px; }
  .nav { display: none; }
  .menu-btn { display: block; }
  .brand img { height: 24px; }
  .film-ch li:not(.on) { display: none; }
  .film-cue { display: none; }
  .hero-img { width: auto; margin: 0 var(--pad); }
  .p1-pin { align-items: stretch; padding-top: 92px; padding-bottom: 20px; }
  .p1-pin .grid { display: flex; flex-direction: column; justify-content: space-between; height: 100%; width: 100%; }
  .p1-copy { min-height: 9.5rem; }
  .p1-copy > div { top: 0; transform: none; }
  .p1-copy .label { margin-bottom: 12px; }
  .p1-copy .h2 { font-size: 1.7rem; }
  .p1-copy p { display: none; }
  .serp-s { display: none; }
  .serp-in { padding: .95vh 0; grid-template-columns: 2em 1fr auto; }
  .serp-t { font-size: 1rem; }
  .stat-row { display: block; }
  .stat-row .body { margin-bottom: 34px; }
  .crowd { gap: 10px 0; }
  .wit .cine, .wit-copy { grid-column: 1 / -1; }
  .wit-copy { margin-top: 40px; }
  .mk-pin { position: static; height: auto; display: block; overflow: visible; }
  .mk-track { display: block; transform: none !important; }
  .mk-intro, .mk-panel { margin-bottom: 90px; }
  .mk-foot { grid-template-columns: 1fr 1fr; }
  .mk-foot p { grid-column: 1 / -1; }
  .mk-end, .mk-count { display: none; }
  .fly-copy { width: auto; right: var(--pad); bottom: 9vh; }
  .figs { grid-template-columns: 1fr; }
  .fig, .fig + .fig { border-right: 0; border-bottom: 1px solid var(--line); padding: 28px 0 32px; }
  .clients .label, .clients ul { grid-column: 1 / -1; }
  .clients .label { padding: 0 0 22px; }
  .clients li span { display: none; }
  .close canvas { opacity: .4; width: 90vw; right: -24vw; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  .foot-base { flex-direction: column; }
  .hero-sub .lede, .duo > .label, .duo > .side, .duo > .main, .form { grid-column: 1 / -1; }
  .duo > .label, .duo > .side { margin-bottom: 28px; }
  .audit-pin { align-items: stretch; padding-top: 92px; padding-bottom: 24px; }
  .audit-pin .grid { display: flex; flex-direction: column; width: 100%; gap: 20px; }
  .audit-copy { min-height: 13rem; }
  .audit-copy > div { top: 0; transform: none; }
  .audit-copy .h3 { font-size: 1.45rem; margin-bottom: 10px; }
  .audit-copy .label { margin-bottom: 10px; }
  .audit-copy p { font-size: 14px; line-height: 1.5; }
  .paper { flex: 1; height: auto; min-height: 0; }
  .marks { display: none; }
  .roll { position: static; grid-column: 1 / -1; display: none; }
  .steps-list { grid-column: 1 / -1; }
  .js .step { opacity: 1; }
  .step dl { grid-template-columns: 1fr; }
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100%; }
  .cmp tbody th { width: 100%; border: 0; padding-bottom: 6px; }
  .cmp td { border: 0; padding: 4px 0; }
  .cmp tr { border-bottom: 1px solid var(--line); padding: 20px 0; }
  .cmp td::before { content: attr(data-h); display: block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); margin-top: 10px; }
  .offices, .form-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .veil { transition: none; }
  .film-cue::after { animation: none; }
}

/* late additions */
.serp-t { transition: color .8s var(--out); }
.serp-row.neg.marked .serp-t { color: var(--lilac); }
.close canvas { filter: drop-shadow(0 0 5px rgba(228, 183, 111, .55)); }
.mk-foot > p { grid-column: auto; }
.cmp td b { white-space: nowrap; }
.bar.solid { background: linear-gradient(rgba(8, 7, 13, .97) 35%, rgba(8, 7, 13, 0)); padding-bottom: 44px; }
@media (max-width: 900px) {
  .p1-pin .grid, .audit-pin .grid { align-items: stretch !important; }
  .mk-foot > p { grid-column: 1 / -1; }
}

/* =====================================================================
   Logos
   ===================================================================== */
.mast-row { align-items: center; }
.mast-row img { height: clamp(26px, 3.1vw, 44px); width: auto; max-width: none; margin: 0 clamp(26px, 3.6vw, 60px); opacity: .82; flex: none; }
.mast-row img.tall { height: clamp(40px, 4.6vw, 66px); }
.mast-row img.wide { height: clamp(20px, 2.3vw, 32px); }
.mast { padding: 6vh 0; }
.mast-row + .mast-row { margin-top: 5vh; }
.press { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.press li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); aspect-ratio: 1.75 / 1; display: flex; align-items: center; justify-content: center; padding: 8%; }
.press img { max-width: 70%; max-height: 40%; width: auto; height: auto; opacity: .14; transition: opacity 1.1s var(--out), transform 1.1s var(--out); transform: scale(.96); }
.press li.lit img { opacity: .92; transform: none; }
.patrons { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(16px, 2.4vw, 40px); align-items: start; }
.patrons li { text-align: center; }
.patrons .mark { height: clamp(56px, 6.4vw, 92px); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.patrons img { max-height: 100%; max-width: 100%; width: auto; height: auto; opacity: .9; }
.patrons span { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); line-height: 1.7; font-weight: 400; }
.patrons-head { display: flex; align-items: center; gap: 22px; margin-bottom: 7vh; }
.patrons-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* =====================================================================
   Crisis Response
   ===================================================================== */
.ans { height: 350vh; position: relative; } /* 2.5 beats */
.ans-pin, .days-pin, .race-pin, .drum-pin, .odo-pin, .globe-pin, .field-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ans-pin { display: flex; align-items: center; }
.ans-copy { grid-column: 1 / span 5; position: relative; min-height: 20rem; }
.ans-copy > div { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.ans-copy .label { display: block; margin-bottom: 24px; }
.ans-copy p { margin-top: 24px; }
.ans-card { grid-column: 7 / span 6; border: 1px solid var(--line); padding: clamp(24px, 3vw, 46px); background: rgba(236, 231, 222, .022); }
.ans-q { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); font-weight: 400; padding-bottom: 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; }
.ans-q span { color: var(--ink); letter-spacing: .04em; text-transform: none; font-family: var(--serif); font-size: 1.15rem; font-style: italic; }
.ans-a { font-family: var(--serif); font-size: clamp(1.25rem, 1.75vw, 1.7rem); line-height: 1.5; margin: 28px 0; }
.aw { display: inline-block; white-space: pre; overflow: hidden; vertical-align: bottom; transition: color .7s var(--out), text-decoration-color .7s; text-decoration: line-through; text-decoration-color: transparent; text-decoration-thickness: 1px; }
.aw.x { color: var(--lilac); text-decoration-color: var(--lilac); }
.ans-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.ans-meta span { display: block; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; font-weight: 400; }
.ans-meta b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--lilac); transition: color .8s; }
.ans.clean .ans-meta b { color: var(--teal); }

.paper-tally { position: absolute; left: clamp(22px, 3vw, 44px); bottom: -34px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); font-weight: 400; }
.paper-tally b { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }

.days { height: 500vh; position: relative; } /* 4 events */
.days-pin { display: flex; flex-direction: column; justify-content: space-between; padding-top: clamp(100px, 15vh, 150px); padding-bottom: clamp(40px, 7vh, 80px); }
.days-top { display: flex; justify-content: space-between; align-items: baseline; }
.days-wk { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--dim); }
.days-mid { align-items: end; }
.days-num { grid-column: 1 / span 6; font-family: var(--serif); line-height: .8; }
.days-num small { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--faint); margin-bottom: 18px; }
.days-num b { font-weight: 300; font-size: clamp(8rem, 26vw, 25rem); letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; background: linear-gradient(100deg, var(--teal), var(--lilac)); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; padding-right: .04em; }
.days-ev { grid-column: 8 / span 5; position: relative; min-height: 15rem; }
.days-ev > div { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translateY(14px); transition: opacity .8s var(--out), transform .8s var(--out); }
.days-ev > div.on { opacity: 1; transform: none; }
.days-ev .label { display: block; margin-bottom: 16px; }
.days-ev .h3 { margin-bottom: 16px; }
.days-rule { position: relative; height: 74px; }
.days-ticks { position: absolute; left: 0; right: 0; top: 22px; height: 26px; display: flex; justify-content: space-between; align-items: flex-end; }
.days-ticks i { display: block; width: 1px; height: 10px; background: var(--ink); opacity: .2; transition: opacity .5s, height .5s var(--out); }
.days-ticks i.wk { height: 26px; }
.days-ticks i.lit { opacity: .9; }
.days-band { position: absolute; left: 48.2%; right: 0; top: 0; height: 48px; border-top: 1px solid var(--teal); background: linear-gradient(rgba(138, 215, 228, .12), rgba(138, 215, 228, 0)); opacity: 0; }
.days-band span { position: absolute; left: 0; top: -22px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--teal); font-weight: 400; white-space: nowrap; }
.days-head { position: absolute; top: 4px; left: 0; width: 1px; height: 60px; background: var(--lilac); }
.days-head::before { content: ""; position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; background: var(--lilac); transform: rotate(45deg); }
.days-wks { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); font-weight: 400; }

.race { height: 300vh; position: relative; } /* 1 sweep + read */
.race-pin { display: flex; flex-direction: column; justify-content: center; gap: 6vh; }
.race-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.race-top .label { display: block; margin-bottom: 20px; }
.race-clock { text-align: right; white-space: nowrap; }
.race-clock small { display: block; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.race-clock b { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.race-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(16px, 2vw, 32px); align-items: center; padding: 3.2vh 0; border-top: 1px solid var(--line); }
.race-row:last-child { border-bottom: 1px solid var(--line); }
.race-name h3 { font-size: clamp(1.5rem, 2.4vw, 2.3rem); line-height: 1.1; margin-bottom: 8px; }
.race-name p { font-size: 14px; line-height: 1.5; color: var(--dim); margin: 0; max-width: 22em; }
.race-track { position: relative; height: 34px; }
.race-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.race-bar, .race-range { position: absolute; top: 50%; height: 3px; margin-top: -1.5px; left: 0; width: 0; background: var(--ink); }
.race-range { background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 7px); opacity: .55; }
.race-end { position: absolute; top: 50%; transform: translateY(-50%); padding-left: 16px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; color: var(--dim); opacity: 0; font-weight: 400; }
.race-end::before { content: ""; position: absolute; left: -4px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border: 1px solid var(--ink); background: var(--bg); transform: rotate(45deg); }
.race-row.us .race-name h3 { color: var(--teal); }
.race-row.us .race-bar, .race-row.us .race-range { background-color: var(--teal); }
.race-row.us .race-range { background: repeating-linear-gradient(90deg, var(--teal) 0 3px, transparent 3px 7px); }
.race-row.us .race-end { color: var(--teal); }
.race-row.us .race-end::before { background: var(--teal); border-color: var(--teal); }
.race-axis { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(16px, 2vw, 32px); }
.race-axis ol { grid-column: 2; display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .18em; color: var(--faint); text-transform: uppercase; font-variant-numeric: tabular-nums; }

/* =====================================================================
   Capabilities
   ===================================================================== */
.stack { position: relative; }
.card { position: sticky; top: 0; height: 100vh; height: 100svh; background: var(--bg); border-top: 1px solid var(--line); overflow: hidden; }
.card-in { height: 100%; align-items: center; will-change: transform, opacity; transform-origin: 50% 0; }
.card-txt { grid-column: 1 / span 6; }
.card-txt .label { display: block; margin-bottom: 22px; }
.card-txt .h2 { font-size: clamp(2rem, 3.9vw, 3.9rem); margin-bottom: 24px; }
.card-txt .lede { max-width: 27em; }
.card-txt dl { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 4.5vh; padding-top: 3vh; border-top: 1px solid var(--line); }
.card-txt dt { font-family: var(--serif); font-size: 1.3rem; margin-bottom: 8px; }
.card-txt dd { color: var(--dim); font-size: 15px; line-height: 1.6; }
.card-txt dd a { color: var(--ink); border-bottom: 1px solid var(--faint); }
.card-fig { grid-column: 8 / span 5; height: min(64vh, 560px); }
.card-fig canvas { width: 100%; height: 100%; }
.card-no { position: absolute; right: var(--pad); bottom: 30px; font-size: 11px; letter-spacing: .22em; color: var(--faint); font-variant-numeric: tabular-nums; }

.drum { height: 300vh; position: relative; } /* 4 short turns at 50vh */
.drum-pin { display: flex; align-items: center; }
.drum-pin .grid { width: 100%; align-items: center; }
.drum-side { grid-column: 1 / span 3; }
.drum-side .label { display: block; margin-bottom: 20px; }
.drum-count { display: block; margin-top: 30px; font-size: 11px; letter-spacing: .22em; color: var(--faint); font-variant-numeric: tabular-nums; }
.drum-stage { grid-column: 4 / span 9; height: 70vh; position: relative; perspective: 1300px; }
.drum-wheel { position: absolute; inset: 0; transform-style: preserve-3d; }
.drum-wheel li { position: absolute; left: 0; right: 0; top: 50%; height: 1.5em; margin-top: -.75em; line-height: 1.5em; font-family: var(--serif); font-size: clamp(1.7rem, 4.9vw, 5rem); letter-spacing: -.01em; white-space: nowrap; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.drum-stage::before, .drum-stage::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); top: calc(50% - 4.2vw); z-index: 2; }
.drum-stage::after { top: calc(50% + 4.2vw); }

/* =====================================================================
   Track Record
   ===================================================================== */
.odo { height: 150vh; position: relative; }
.odo-pin { display: flex; flex-direction: column; justify-content: center; gap: 5vh; }
.odo-pin > .label { margin: 0; font-family: var(--sans); }
.odo-num { display: flex; align-items: flex-start; font-family: var(--serif); font-weight: 300; font-size: clamp(2.5rem, 14.2vw, 15.5rem); line-height: 1; height: 1em; overflow: hidden; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.od { display: block; width: .5em; height: 1em; overflow: hidden; text-align: center; transition: opacity .6s; }
.odc { display: block; will-change: transform; }
.odc span { display: block; height: 1em; }
.oc { display: block; width: .22em; text-align: center; opacity: .45; }
.odo-row[data-pre] .oc:first-child { width: .46em; opacity: 1; background: linear-gradient(100deg, var(--teal), var(--lilac)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.odo-row p { margin: 14px 0 0; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); font-weight: 400; }

.globe { height: 400vh; position: relative; } /* 4 turns at 75vh */
.globe-pin { display: flex; align-items: center; }
.globe-pin .grid { width: 100%; align-items: center; }
.globe-copy { grid-column: 1 / span 5; }
.globe-copy .label { display: block; margin-bottom: 22px; }
.globe-copy .h2 { font-size: clamp(1.9rem, 3.3vw, 3.3rem); margin-bottom: 5vh; }
.globe-list li { display: grid; grid-template-columns: 3em 1fr auto; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--line); opacity: .32; transition: opacity .8s var(--out), padding .8s var(--out); }
.globe-list li:last-child { border-bottom: 1px solid var(--line); }
.globe-list li.on { opacity: 1; padding-left: 14px; }
.globe-list span { font-size: 11px; letter-spacing: .16em; color: var(--faint); }
.globe-list b { font-family: var(--serif); font-weight: 300; font-size: clamp(1.3rem, 2vw, 1.9rem); }
.globe-list i { font-style: normal; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); opacity: 0; transition: opacity .8s; }
.globe-list li.on i { opacity: 1; }
.globe-fig { grid-column: 7 / span 6; height: min(80vh, 760px); align-self: center; }
.globe-fig canvas { width: 100%; height: 100%; }

/* =====================================================================
   The Firm
   ===================================================================== */
.glyph { height: 320vh; position: relative; } /* reveal + dive */
.glyph-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #040308; }
.glyph canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.glyph-copy { position: absolute; left: 0; right: 0; bottom: clamp(40px, 8vh, 90px); }
.glyph-copy .label { display: block; margin-bottom: 22px; }
.glyph-copy h1 { max-width: 15em; text-shadow: 0 0 40px #040308, 0 0 90px #040308; }
.glyph-cap { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; letter-spacing: .2em; text-transform: uppercase; font-size: 11px; opacity: 0; }

.field { height: 250vh; position: relative; } /* 1.5 beats */
.field-pin { display: flex; align-items: center; }
.field-noise { position: absolute; inset: 0; pointer-events: none; }
.field-noise span { position: absolute; white-space: nowrap; font-family: var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); opacity: 0; will-change: opacity, transform; }
.field-noise span.it { font-family: var(--serif); font-style: italic; letter-spacing: 0; text-transform: none; }
.field-copy { position: relative; width: 100%; }
.field-copy .label { display: block; margin-bottom: 26px; }
.field-copy .lede { max-width: 30em; margin-top: 5vh; opacity: 0; }

.file { border: 1px solid var(--line); background: rgba(236, 231, 222, .022); padding: clamp(22px, 3vw, 44px); }
.file-h { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--faint); padding-bottom: 20px; border-bottom: 1px solid var(--line); font-weight: 400; }
.file-h span:last-child { color: var(--lilac); }
.file dl > div { display: grid; grid-template-columns: 9em 1fr; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.file dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.file dt { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); font-weight: 400; }
.file dd { font-family: var(--serif); font-size: clamp(1.2rem, 1.7vw, 1.6rem); color: var(--dim); }
.red { position: relative; display: inline-block; --r: 0; }
.red::after { content: ""; position: absolute; left: -4px; right: -4px; top: .12em; bottom: .02em; background: var(--ink); transform: scaleX(var(--r)); transform-origin: left; }

.dial-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: center; }
.dial-wrap canvas { grid-column: 1 / span 5; width: 100%; aspect-ratio: 1 / 1; }
.dial-wrap .offices { grid-column: 7 / span 6; grid-template-columns: 1fr; gap: 5vh; }

/* =====================================================================
   Contact
   ===================================================================== */
.letter { grid-column: 1 / span 8; font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 3rem); line-height: 1.7; font-weight: 300; }
.letter p { margin: 0 0 .5em; }
.blank, .blank-ruler { font-family: var(--serif); font-size: inherit; font-style: italic; font-weight: 300; letter-spacing: 0; }
.blank { background: none; border: 0; border-bottom: 1px solid var(--faint); color: var(--teal); outline: 0; padding: 0 3px; margin: 0 .12em; border-radius: 0; line-height: 1.2; min-width: 3em; max-width: 100%; transition: border-color .5s; }
.blank::placeholder { color: rgba(236, 231, 222, .26); }
.blank:focus { border-bottom-color: var(--teal); }
.blank-ruler { position: absolute; visibility: hidden; white-space: pre; left: -9999px; top: 0; }
.letter textarea.blank { display: block; width: 100% !important; margin: .3em 0 0; resize: none; line-height: 1.45; min-height: 3em; }
.letter-side { grid-column: 10 / span 3; align-self: start; position: sticky; top: 18vh; }
.letter-side canvas { width: 100%; aspect-ratio: 403 / 380; margin-bottom: 26px; filter: drop-shadow(0 0 5px rgba(228, 183, 111, .55)); }
form.grid { position: relative; }

@media (max-width: 900px) {
  .press { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .press li { padding: 4%; }
  .patrons { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .ans-pin .grid, .globe-pin .grid, .drum-pin .grid { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 22px; }
  .ans-pin { padding-top: 90px; align-items: stretch; }
  .ans-copy { min-height: 9.5rem; }
  .ans-copy > div { top: 0; transform: none; }
  .ans-copy .h2 { font-size: 1.6rem; }
  .ans-copy p { display: none; }
  .ans-copy .label { margin-bottom: 12px; }
  .ans-a { font-size: 1.12rem; margin: 18px 0; }
  .ans-q { flex-direction: column; gap: 6px; }
  .paper-tally { display: none; }
  .days-mid { display: block; }
  .days-ev { min-height: 12.5rem; margin-top: 3vh; }
  .days-ev .h3 { font-size: 1.5rem; }
  .days-ev p { font-size: 14px; }
  .days-wks { font-size: 8px; letter-spacing: .12em; }
  .race-row, .race-axis { grid-template-columns: 1fr; row-gap: 12px; }
  .race-axis ol { grid-column: 1; }
  .race-axis li:nth-child(even) { display: none; }
  .race-name p { display: none; }
  .race-row { padding: 2.4vh 0; }
  .race-end { font-size: 11px; letter-spacing: .1em; }
  .race-row:last-child .race-end { left: auto !important; right: 0; top: -14px; transform: none; padding: 0; }
  .race-row:last-child .race-end::before { display: none; }
  .card { position: relative; height: auto; padding: 70px 0; }
  .card-in { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 30px; }
  .card-fig { height: 62vw; }
  .card-txt dl { grid-template-columns: 1fr; }
  .card-no { display: none; }
  .drum-pin { padding-top: 100px; align-items: stretch; }
  .drum-stage { height: 52vh; flex: 1; }
  .drum-wheel li { font-size: 1.55rem; white-space: normal; height: 2.6em; margin-top: -1.3em; line-height: 1.3; display: flex; align-items: center; }
  .drum-stage::before, .drum-stage::after { display: none; }
  .globe-pin { padding-top: 84px; align-items: stretch; }
  .globe-pin .grid { flex-direction: column-reverse; gap: 0; }
  .globe-fig { height: 42vh; }
  .globe-copy .h2 { font-size: 1.45rem; margin-bottom: 2vh; }
  .globe-list li { padding: 8px 0; }
  .globe-list b { font-size: 1.1rem; }
  .globe-list i { display: none; }
  .glyph-copy h1 { font-size: 1.9rem; }
  .file dl > div { grid-template-columns: 1fr; row-gap: 6px; }
  .dial-wrap { display: block; }
  .dial-wrap canvas { max-width: 420px; margin: 0 auto 6vh; }
  .letter, .letter-side { grid-column: 1 / -1; }
  .letter-side { position: static; margin-top: 50px; }
  .letter-side canvas { display: none; }
  .letter { line-height: 1.75; }
}
.race-end.flip { transform: translate(-100%, -190%); padding: 0 14px 0 0; }
.race-end.flip::before { left: auto; right: -5px; top: 190%; }
.drum-stage::before, .drum-stage::after { display: none; }
.days-wk { white-space: nowrap; }
@media (max-width: 900px) {
  .ans-pin .grid, .globe-pin .grid, .drum-pin .grid { align-items: stretch !important; }
  .days-top .label { max-width: 60%; line-height: 1.7; }
  .days-band span { left: auto; right: 0; font-size: 8px; letter-spacing: .12em; }
}

/* =====================================================================
   Polish
   ===================================================================== */
.stat-src { opacity: 0; }
.stat-num .b { display: inline-block; will-change: transform, opacity; }
.card { box-shadow: 0 -40px 90px rgba(0, 0, 0, .65); border-top: 1px solid rgba(236, 231, 222, .1); }
.card:first-child { box-shadow: none; }
html.held { overscroll-behavior: none; }
.glyph-pin::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4,3,8,0) 55%, rgba(4,3,8,.85) 100%); }
.glyph-copy, .glyph-cap { z-index: 2; }
.od, .oc { transition: width .45s var(--out), opacity .45s var(--out); }
.od.off { width: 0; opacity: 0; }
.oc.off { width: 0; opacity: 0; }
.odo-row[data-pre] .oc:first-child { width: .46em !important; opacity: 1 !important; }
@media (orientation: portrait) { .film-frame video { object-position: 12% 50%; } }

/* =====================================================================
   Home film that simply plays
   ===================================================================== */
.film[data-film="play"] { height: 100vh; height: 100svh; }
.film[data-film="play"] .film-pin { position: relative; }
.film[data-film="play"] .film-frame { will-change: transform, opacity; transform-origin: 50% 40%; }
.film[data-film="play"] .film-cue { opacity: .55; transition: opacity 1.2s var(--out); }
.film.ended .film-cue { opacity: 1; }
.film-again {
  position: absolute; left: 50%; bottom: 74px; transform: translate(-50%, 12px); z-index: 2; opacity: 0; pointer-events: none;
  background: none; border: 0; border-bottom: 1px solid var(--faint); padding: 6px 0; cursor: pointer; color: var(--ink);
  font: 400 11px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; transition: opacity 1.2s var(--out), transform 1.2s var(--out), border-color .4s;
}
.film-again:hover { border-color: var(--ink); }
.film.ended .film-again { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.lead { padding-top: clamp(110px, 18vh, 210px); padding-bottom: clamp(40px, 8vh, 90px); }
.lead .label { display: block; margin-bottom: 30px; }
.lead .display { max-width: 13em; }
.cine video { display: block; width: 100%; height: 100%; object-fit: cover; background: #050409; }

/* =====================================================================
   Home: the reel loops, the words change
   ===================================================================== */
.film[data-film="loop"] { height: 400vh; }
.film[data-film="loop"] .film-hud { justify-content: space-between; }
.say-count { color: var(--ink); font-variant-numeric: tabular-nums; }
.says { position: absolute; left: 0; right: 0; bottom: clamp(96px, 15vh, 170px); z-index: 2; }
.say { position: absolute; left: var(--pad); right: var(--pad); bottom: 0; visibility: hidden; }
.say .label { display: block; margin-bottom: 22px; }
.say-h { font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 5.4vw, 5.6rem); line-height: 1.04; letter-spacing: -.012em; margin: 0;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55); }
.say-line { display: block; }
.say-note { max-width: 32em; margin: 26px 0 18px; color: var(--ink); opacity: .82; font-size: 16px; }
.say .link { color: var(--ink); }
@media (max-width: 900px) {
  .say-h { font-size: clamp(2rem, 8.6vw, 3rem); }
  .say-line { display: inline; }
  .says { bottom: 110px; }
  .film[data-film="loop"] .film-hud span:last-child { display: none; }
}

/* clips play once and hold their last frame */
.cine video { transition: opacity 1.2s var(--out); }
.cine video.waiting { opacity: .001; }
.cine { background: #050409; }
.globe-list li.done { opacity: .6; }
.globe-list li.done i { opacity: 0; }

.close { min-height: 78vh; display: flex; align-items: center; }

/* stages share the page colour, and their lower scrims finish in it, so no seam shows where a stage ends */
.film-pin, .glyph-pin { background: var(--bg); }
.glyph-pin::after { background: linear-gradient(180deg, rgba(8, 7, 13, 0) 62%, rgba(8, 7, 13, .7) 88%, var(--bg) 100%); }
.film-pin::after {
  background:
    linear-gradient(180deg, rgba(8, 7, 13, .62) 0%, rgba(8, 7, 13, 0) 20%, rgba(8, 7, 13, 0) 48%, rgba(8, 7, 13, .55) 76%, rgba(8, 7, 13, .92) 96%, var(--bg) 100%),
    radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .38) 100%);
}
.patrons img { max-width: 72%; }
@media (max-width: 900px) {
  .r-scope { aspect-ratio: 4 / 3; }
  .hero-img.r-scope { aspect-ratio: 4 / 3; }
  .patrons .mark { height: 58px; }
  .patrons img { max-width: 62%; }
}

/* =====================================================================
   Launch: legal pages, form states, footer links
   ===================================================================== */
.legal-hero { padding-bottom: 4vh; }
.legal-body { grid-column: 3 / span 8; max-width: 46rem; padding-bottom: clamp(96px, 15vh, 190px); }
.legal-body p { color: var(--dim); font-size: 16px; line-height: 1.75; margin: 0 0 1.1em; }
.legal-body p:first-child, .legal-body p:nth-child(2) { color: var(--ink); }
.legal-body h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.8rem); margin: 2.4em 0 .7em; padding-top: 1.1em; border-top: 1px solid var(--line); }
.legal-body h3 { font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 1.8em 0 .6em; }
.legal-body strong { color: var(--ink); font-weight: 400; }
.foot-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-legal a { color: var(--dim); }
.blank.invalid { border-bottom-color: #e59aa8; }
.form-msg { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--teal); margin-top: 22px; min-height: 1.6em; }
.form-msg.bad { color: #f0b3be; }
form.sent .blank { pointer-events: none; opacity: .7; }
form.sent button[type=submit] { opacity: .4; }
.trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 900px) { .legal-body { grid-column: 1 / -1; } .foot-legal { gap: 14px; } }