/* Oculus — the paper system.
 *
 * The stylesheet for the firm: every page except the flight (index.html), which keeps styles.css
 * and its dark cinematic world. This is where the flight lands.
 *
 * WHY PAPER. The flight is not a neutral-black film, whatever the old tokens claimed. Sampling
 * the footage puts every bright band inside a 24-33 degree hue window, and the reveal's own
 * highlight peaks at #D7BFA5 — aged vellum. The animation was already resolving toward paper.
 * So this is not a second brand bolted onto the first: it is the same engraved material, lit and
 * at rest, on the same warm axis the camera flies through. Hue is held at ~30 throughout. Every
 * value below was derived from the frames, not picked.
 *
 * THE BRASS RULE. #BA8745 lands at 2.91:1 on this paper. It cannot carry text and it is not
 * allowed to: brass is for rules, the diamond, and marks. --brass-ink (4.96:1) carries the rare
 * brass-coloured link. That constraint is the point — brass stops being a highlighter and
 * becomes a signature.
 *
 * WHAT DOES NOT COME ACROSS THE THRESHOLD. No grain, no vignette, no mono, no pulse. Those
 * belong to the flight. Down here the work is typography, rule, and space.
 */

:root {
  /* Ground — the vellum the engraving is printed on. */
  --paper:        #F8F5F2;
  --paper-raised: #F0EBE5;   /* nested surfaces: cards, fields, the sunk panel */
  --rule:         #DED6CE;   /* hairlines. The whole structure is built from these. */
  --rule-strong:  #C9BFB2;   /* a rule that needs to be seen rather than felt */

  /* Ink — the bistre the map is drawn in. */
  --ink:      #1F1914;       /* 16.01:1 — headlines, emphasis */
  --ink-soft: #463D34;       /*  9.78:1 — body */
  --muted:    #6D6155;       /*  5.54:1 — labels, secondary. Do not go lighter: this is the floor. */

  /* Brass — the one thing that survives the crossing. */
  --brass:     #BA8745;      /*  2.91:1 — NON-TEXT ONLY. Rules, diamond, marks. */
  --brass-ink: #8C622C;      /*  4.96:1 — brass-coloured text, used sparingly */

  --sans:    "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;

  --header-h: 76px;
  --margin:   clamp(20px, 5vw, 56px);
  --maxw:     1140px;
  --section-y: clamp(72px, 11vh, 148px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Newsreader carries a real optical size axis (6-72). Auto maps it to the rendered size, so an
   * 82px headline gets the tight, fine-detailed display cut and 19px article body gets the open
   * one — the thing Libre Caslon Display could not do, having only the one cut. */
  font-optical-sizing: auto;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }

a { color: inherit; }
img { display: block; max-width: 100%; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--margin); }

/* ── Chrome ───────────────────────────────────────────────────────────────────
 * Paper, not glass. At rest the bar is the page; once it moves it lifts a hairline and settles.
 * No blur theatre — an advisory's header is a ruled edge, nothing more. */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--margin);
  background: rgba(248,245,242,0);
  border-bottom: 1px solid transparent;
  transition: height .3s ease, background .3s ease, border-color .3s ease;
}
/* Solid, not frosted. Translucent chrome is a dark-system luxury: on #0A0A0C everything passing
 * underneath is already dark, so .72 alpha reads as glass. On paper, ink text ghosts straight
 * through anything short of opaque — at .92 you could read the headline sliding under the bar.
 * Solid paper and a hairline is also the more correct object: a ruled edge, not a pane of glass. */
.site-header.is-scrolled {
  height: 64px;
  background: var(--paper);
  border-bottom-color: var(--rule);
}

.wordmark { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ink); }
.wordmark__name { font-family: var(--sans); font-size: 15px; letter-spacing: .22em; font-weight: 500; }
.wordmark__tag {
  font-size: 13px; color: var(--muted); letter-spacing: .01em;
  padding-left: 13px; border-left: 1px solid var(--rule);
  transition: opacity .25s ease;
}
.is-scrolled .wordmark__tag { opacity: 0; }
.wordmark__mark { width: 38px; height: 38px; flex: none; object-fit: contain; transition: width .3s ease, height .3s ease; }
.is-scrolled .wordmark__mark { width: 32px; height: 32px; }

/* The diamond is brass — a mark, not text, so it keeps the accent honestly. */
.diamond {
  width: 8px; height: 8px; flex: none; transform: rotate(45deg);
  background: var(--brass);
}

.nav { display: flex; align-items: center; gap: 34px; }
.nav a { font-size: 15px; color: var(--muted); text-decoration: none; transition: color .2s; }
.nav a:not(.nav__cta) { position: relative; }
.nav a:not(.nav__cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav a:not(.nav__cta):hover { color: var(--ink); }
.nav a:not(.nav__cta):hover::after,
.nav a[aria-current]::after { transform: scaleX(1); }
.nav a[aria-current] { color: var(--ink); }

/* No pulse, no dot. The CTA is a ruled button that means what it says. */
.nav__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: .04em; font-weight: 500;
  color: var(--ink) !important;
  border: 1px solid var(--rule-strong); background: transparent;
  padding: 10px 18px; border-radius: 2px;
  transition: border-color .2s, background .2s, color .2s;
}
.nav__cta:hover { border-color: var(--ink); background: var(--ink); color: var(--paper) !important; }

.burger { display: none; background: none; border: 0; width: 32px; height: 32px; cursor: pointer; }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--ink); margin: 4px auto; transition: .25s; }
.burger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger.open span:nth-child(2) { transform: translateY(-5.5px) rotate(-45deg); }

.menu { position: fixed; inset: var(--header-h) 0 0; z-index: 29; background: var(--paper); padding: 30px var(--margin); }
.menu[hidden] { display: none; }
.menu nav { display: grid; gap: 2px; }
.menu a {
  display: flex; align-items: baseline; gap: 14px; padding: 16px 0;
  font-family: var(--display); font-size: 22px; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--rule);
}
.menu a .mono { font-family: var(--sans); font-size: 11px; color: var(--muted); letter-spacing: .14em; }
.menu__cta { font-family: var(--sans) !important; font-size: 14px !important; color: var(--brass-ink) !important; border-bottom: 0 !important; margin-top: 18px; letter-spacing: .04em; }
.menu__cta--ghost { color: var(--muted) !important; }

/* ── Type ─────────────────────────────────────────────────────────────────────
 * The eyebrow keeps its brass rule — the one visual idiom carried straight over from the flight —
 * but sheds the mono. Set in the sans, tracked, it reads as a section mark instead of a readout. */

.eyebrow {
  font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 500; color: var(--muted);
  display: inline-flex; align-items: center; gap: 14px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--brass); }

h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.005em; line-height: 1.1; color: var(--ink); }
.h-hero { font-size: clamp(40px, 6.2vw, 82px); line-height: 1.04; letter-spacing: -.015em; }
.h-sect { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.12; letter-spacing: -.01em; }
.h-sub  { font-size: clamp(22px, 2.5vw, 32px); }

.lede { max-width: 56ch; font-size: clamp(17px, 1.35vw, 21px); color: var(--ink-soft); line-height: 1.62; }
.body { max-width: 64ch; color: var(--ink-soft); }
.body strong { color: var(--ink); font-weight: 500; }

/* ── Hero ─────────────────────────────────────────────────────────────────────
 * Space is the whole argument here. The headline sits in it; nothing else competes. */

.hero {
  position: relative; min-height: 74vh; display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + 56px) 0 var(--section-y);
  overflow: hidden;
}
.hero__img { position: absolute; inset: 0; z-index: 0; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; }
.hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(248,245,242,.82) 0%, rgba(248,245,242,.7) 45%, var(--paper) 100%); }
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero .eyebrow { margin-bottom: 26px; }
/* Every hero headline sets its own breaks with <br>, so this is a runaway guard, not a measure —
 * it must never be tight enough to override a designed break. Note that `ch` is font-dependent:
 * the old 15ch was silently tuned to whatever face was in --display, and the moment Newsreader
 * arrived (wider) "The power you need." wanted 742px against a 738px box and broke after "you".
 * Four pixels. 22ch lands near the container width, so the explicit breaks always win and a
 * hypothetical unbroken headline still cannot run the full page. */
.hero h1 { margin-bottom: 30px; max-width: 22ch; }
.hero .lede { margin-bottom: 36px; }

.jump { display: flex; flex-wrap: wrap; gap: 30px; font-size: 13px; letter-spacing: .02em; }
.jump a { color: var(--muted); text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid var(--rule); transition: .2s; }
.jump a:hover { color: var(--ink); border-color: var(--brass); }

/* ── Sections ─────────────────────────────────────────────────────────────── */

main { counter-reset: section; }
.section { position: relative; counter-increment: section; padding-block: var(--section-y); border-top: 1px solid var(--rule); }
.section:first-of-type { border-top: 0; }
.section > .wrap { position: relative; }
.section > .wrap > .eyebrow { margin-bottom: 28px; }
.section h2 { margin-bottom: 30px; max-width: 20ch; }

/* The section index reads as a page number on a report, which is what it should have been. */
.section > .wrap::before {
  content: counter(section, decimal-leading-zero);
  position: absolute; top: 0; right: 0; z-index: 1;
  font-family: var(--sans); font-size: 12px; letter-spacing: .1em; font-weight: 500;
  color: var(--rule-strong); pointer-events: none; user-select: none;
}
.section > .wrap > * { position: relative; z-index: 1; }

/* Two pages stand the counter down. Process, because its spine is Assess, Commit, Deliver, numbered
 * 01-03 in the eyebrow, and the corner counter would run a second sequence against them: a section
 * headed STEP 01 sitting under an 04. Research, because it is one section, so the counter is an
 * 01 of 01 announcing nothing. The counter earns its place as a page-number rhythm across a run of
 * sections; against a single one it is just a number in the corner. */
body[data-page="process"] .section > .wrap::before,
body[data-page="research"] .section > .wrap::before { content: none; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 104px); align-items: start; }
.split--wide { grid-template-columns: 1fr 1fr; align-items: start; }

/* The statement column holds while its evidence scrolls past, then releases with the section.
 * The old system left this column stranded — a two-line headline against a long spec table put
 * 350px of dead paper on the left, which read as unfinished rather than generous. Sticky spends
 * that space instead of leaving it: the claim stays in view for exactly as long as the argument
 * supporting it. Works because align-items:start still gives the grid area the full row height,
 * so the box has somewhere to travel. Desktop only — stacked, there is nothing to hold against. */
@media (min-width: 861px) {
  .split--wide > div:first-child {
    position: sticky;
    top: calc(var(--header-h) + 48px);
  }
}

/* The right column's lead paragraph: opened over a hairline so it answers the headline instead
   of floating beside it. */
.split > div > .body:first-child {
  font-size: clamp(18px, 1.4vw, 22px); line-height: 1.58; color: var(--ink); max-width: 44ch;
  padding-top: 26px; border-top: 1px solid var(--rule);
}

/* ── Key facts ────────────────────────────────────────────────────────────────
 * Was a datasheet: mono, uppercase, tracked like a readout. The facts were always fine; the
 * costume was the problem. An advisory sets these the way a term sheet does — quiet, ruled,
 * in the sans, the value carrying the weight. */

.spec { display: grid; gap: 0; margin-top: 34px; border-top: 1px solid var(--rule); }
.spec > div { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.spec dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.spec dd { font-size: 16px; color: var(--ink); }
.spec dd .sub { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; letter-spacing: 0; }

/* ── Numbered rows ────────────────────────────────────────────────────────── */

.rows { display: grid; gap: 0; margin-top: 22px; }
.row { display: grid; grid-template-columns: auto 1fr; gap: clamp(22px, 4vw, 60px); padding: 34px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.row:last-child { border-bottom: 1px solid var(--rule); }
.row__idx { font-size: 12px; color: var(--brass-ink); letter-spacing: .1em; font-weight: 500; }
.row h3 { margin-bottom: 12px; }
.row .body { max-width: 54ch; font-size: 16px; }

/* ── Verbs / cards ────────────────────────────────────────────────────────────
 * On the dark system these were panels separated by steel gaps — a rack of modules. On paper
 * the divider is the structure: hairline-ruled columns, no fill, nothing boxed in. */

.verbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 46px; border-top: 1px solid var(--rule-strong); }
.verb { padding: 34px clamp(20px, 2.4vw, 36px) 0 0; }
.verb + .verb { padding-left: clamp(20px, 2.4vw, 36px); border-left: 1px solid var(--rule); }
.verb__idx { font-size: 11px; color: var(--brass-ink); letter-spacing: .16em; font-weight: 500; }
.verb h3 { font-size: clamp(23px, 2.4vw, 30px); margin: 16px 0 14px; }
.verb .body { font-size: 15px; color: var(--muted); max-width: none; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0; margin-top: 48px; border-top: 1px solid var(--rule-strong); }
.cards--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .cards--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .cards--row { grid-template-columns: 1fr; } }
.cards--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .cards--pair { grid-template-columns: 1fr; } }

.card {
  padding: 36px clamp(20px, 2.4vw, 34px) 36px 0;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border-left: 1px solid var(--rule);
  transition: background .25s;
}
.card:first-child { border-left: 0; padding-left: 0; }
.cards > .card:not(:first-child) { padding-left: clamp(20px, 2.4vw, 34px); }
a.card:hover { background: var(--paper-raised); }
.card__idx { font-size: 11px; letter-spacing: .16em; color: var(--brass-ink); margin-bottom: 22px; font-weight: 500; }
.card h3 { font-size: clamp(21px, 2vw, 26px); margin-bottom: 15px; }
.card .body { font-size: 15px; color: var(--muted); flex: 1; }
.card__go { font-size: 13px; letter-spacing: .02em; color: var(--muted); margin-top: 24px; }
a.card:hover .card__go { color: var(--brass-ink); }

/* ── The research index ───────────────────────────────────────────────────────
 * A list, not a card grid. A grid of cards makes six pieces look like six products and asks the
 * reader to shop; this is a publication's contents page, so it lists the work and gets out of the
 * way. Date and topic sit in the margin where a journal puts them, and the argument carries the
 * row. Reading time is the one piece of chrome that earns itself: it is the question every reader
 * of a 1,500-word piece silently asks before starting. */

.index { display: grid; border-top: 1px solid var(--rule-strong); margin-top: 40px; }
.index a {
  display: grid; grid-template-columns: 148px 1fr; gap: clamp(20px, 4vw, 56px);
  padding: 36px 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
  transition: background .2s ease;
}
.index a:hover { background: var(--paper-raised); }
.index__meta { display: grid; gap: 7px; align-content: start; }
.index__date { font-family: var(--sans); font-size: 12px; letter-spacing: .1em; color: var(--ink); font-weight: 500; }
.index__topic { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.index h3 { font-size: clamp(21px, 2.2vw, 29px); line-height: 1.16; margin-bottom: 13px; transition: color .2s ease; }
.index a:hover h3 { color: var(--brass-ink); }
.index p { font-family: var(--sans); font-size: 16px; line-height: 1.62; color: var(--muted); max-width: 60ch; }
.index__read { font-family: var(--sans); font-size: 12px; letter-spacing: .08em; color: var(--muted); margin-top: 16px; }

@media (max-width: 860px) {
  .index a { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .index__meta { grid-auto-flow: column; justify-content: start; gap: 14px; }
}

.figure { position: relative; margin-block: var(--section-y); aspect-ratio: 21/9; overflow: hidden; border: 1px solid var(--rule); }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure figcaption { position: absolute; left: 20px; bottom: 16px; font-size: 11px; letter-spacing: .12em; color: var(--paper); text-transform: uppercase; }

/* ── Buttons ──────────────────────────────────────────────────────────────────
 * Ink, not brass — brass has no contrast to spend on a control. The solid variant fills to ink
 * and the label knocks out to paper: the most confident thing on the page, used once. */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 13px; letter-spacing: .04em; font-weight: 500;
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--ink); border-radius: 2px; padding: 14px 26px;
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--brass-ink); border-color: var(--brass-ink); color: var(--paper); }
.btn--ghost { border-color: var(--rule-strong); color: var(--muted); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: transparent; }

.note { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ── Prose ────────────────────────────────────────────────────────────────── */

/* Article bodies are set in the serif, not the sans. The marketing pages argue in short bursts and
 * a sans lede is right for them; an article is the firm thinking out loud at length, and that is
 * the one thing on this site standing in for a track record it cannot assert. Sans long-form reads
 * as copy. Serif long-form reads as an argument. Optical sizing gives it the text cut automatically,
 * so this is the same face as the headlines, drawn for reading. */
.prose { max-width: 68ch; margin-inline: auto; }
.prose p, .prose li { font-family: var(--display); font-size: 19px; }
.prose p { color: var(--ink-soft); margin-bottom: 26px; line-height: 1.78; }

/* Citations. A cited piece links out on nearly every claim, so the link has to be legible without
 * shouting: ink text on a brass rule. Brass cannot carry the text at 2.91:1, but it can carry the
 * underline, which is the accent doing exactly the job it is allowed to do. */
.prose a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--brass);
  transition: background .2s ease, border-color .2s ease;
}
.prose a:hover { background: rgba(186,135,69,.14); border-bottom-color: var(--brass-ink); }

/* The signature. House research is signed by the house, the way MGI signs its own, and the mark
 * signs it: the diamond is the only brass on the page that is not a rule. */
.byline {
  display: flex; align-items: center; gap: 13px;
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--rule);
}
.byline p {
  font-family: var(--sans); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500; color: var(--muted);
}

/* The source line under a proprietary exhibit. The reference class marks its own analysis rather
 * than leaving an uncited number sitting in a cited article looking like a missing citation. An
 * unlinked figure that says where it came from reads as access; one that says nothing reads as a
 * hole. Same reason every McKinsey exhibit carries "Source: McKinsey analysis". */
.source {
  font-family: var(--sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: -10px 0 28px; padding-left: 14px;
  border-left: 2px solid var(--brass);
}
.prose h2 { font-size: clamp(25px, 2.8vw, 36px); margin: 60px 0 24px; }
.prose ul { list-style: none; margin: 0 0 26px; display: grid; gap: 15px; }
.prose li { position: relative; padding-left: 28px; color: var(--ink-soft); line-height: 1.65; }
.prose li::before { content: ""; position: absolute; left: 0; top: 13px; width: 12px; height: 1px; background: var(--brass); }
.prose .pull {
  font-family: var(--display); font-size: clamp(23px, 2.6vw, 31px); line-height: 1.34; color: var(--ink);
  border-left: 2px solid var(--brass); padding-left: 28px; margin: 48px 0;
}

/* ── Form ─────────────────────────────────────────────────────────────────── */

.form { display: grid; gap: 24px; margin-top: 38px; }
.field { display: grid; gap: 9px; }
.field label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.field input, .field textarea, .field select {
  background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: 2px;
  color: var(--ink); font-family: var(--sans); font-size: 16px; padding: 14px 15px; width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); background: var(--paper); }
.field textarea { min-height: 130px; resize: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--sans); font-size: 13px; letter-spacing: .02em; color: var(--muted);
  border: 1px solid var(--rule-strong); border-radius: 2px; padding: 10px 16px; cursor: pointer;
  background: transparent; transition: .2s;
}
.chip[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--paper-raised); }

.dl { display: grid; gap: 0; }
.dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 18px 0; border-top: 1px solid var(--rule); }
.dl > div:last-child { border-bottom: 1px solid var(--rule); }
.dl dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.dl dd { color: var(--ink); font-size: 16px; }

/* ── Footer ───────────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--rule-strong); padding: clamp(48px, 7vh, 84px) 0 clamp(32px, 4vh, 48px); margin-top: var(--section-y); }
.foot .wrap { display: flex; flex-direction: column; gap: 34px; }
.foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 34px; }
.foot__cols { display: flex; flex-wrap: wrap; gap: clamp(32px, 6vw, 88px); }
.foot__col { display: grid; gap: 11px; }
.foot__col p.mono { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; color: var(--ink); text-transform: uppercase; font-weight: 500; margin-bottom: 5px; }
.foot__col a { font-size: 14px; color: var(--muted); text-decoration: none; transition: color .2s; }
.foot__col a:hover { color: var(--ink); }
.foot__mark { display: flex; align-items: center; gap: 12px; }
.foot__mark p { font-family: var(--sans); font-size: 10px; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }
.foot__legal { font-size: 11px; letter-spacing: .06em; color: var(--muted); padding-top: 26px; border-top: 1px solid var(--rule); }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: block; }
  .wordmark__tag { display: none; }
  .split, .split--wide { grid-template-columns: 1fr; }
  .verbs { grid-template-columns: 1fr; border-top: 0; }
  .verb { padding: 30px 0 0; border-top: 1px solid var(--rule); }
  .verb + .verb { padding-left: 0; border-left: 0; }
  .row { grid-template-columns: 1fr; gap: 8px; }
  .hero { min-height: 64vh; }
  .cards, .cards--row, .cards--pair { grid-template-columns: 1fr; border-top: 0; }
  .card, .cards > .card:not(:first-child) { border-left: 0; padding-left: 0; padding-top: 30px; border-top: 1px solid var(--rule); }
  .spec > div, .dl > div { grid-template-columns: 1fr; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }