/* ==========================================================================
   Can't Miss Talent — Components
   Every value here traces to DESIGN-cant-miss-talent.md §4.
   Zero shadows. Zero gradients. Zero backdrop blur. Five radii.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: none;
  font: 600 0.81rem/1.6 var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

/* Primary — Signal Red pill. No lift, no scale. */
.btn--primary {
  background: var(--cmt-signal-red);
  color: var(--cmt-paper-cream);
}
.btn--primary:hover  { background: var(--cmt-red-deep); }
.btn--primary:active { background: var(--cmt-red-press); }
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
  background: var(--cmt-mist);
  color: var(--cmt-slate);
  cursor: not-allowed;
}
.on-ink .btn--primary {
  background: var(--cmt-flare-red);
  color: var(--cmt-ink);
}
.on-ink .btn--primary:hover { background: var(--cmt-signal-red); color: var(--cmt-paper-cream); }

/* Secondary — Ink outline pill, hover inverts fully. */
.btn--secondary {
  background: transparent;
  color: var(--cmt-ink);
  border: 1px solid var(--cmt-ink);
}
.btn--secondary:hover  { background: var(--cmt-ink); color: var(--cmt-paper-cream); }
.btn--secondary:active { background: #000000; color: var(--cmt-paper-cream); }
.on-ink .btn--secondary {
  color: var(--cmt-paper-cream);
  border-color: var(--cmt-paper-cream);
}
.on-ink .btn--secondary:hover { background: var(--cmt-paper-cream); color: var(--cmt-ink); }

/* Tertiary — text link button. 1px underline 4px below baseline. */
.link-cta {
  display: inline-block;
  background: none;
  border: none;
  padding: var(--space-2) 0;
  font: 600 1rem/1.5 var(--font-sans);
  color: var(--cmt-signal-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard),
              text-decoration-thickness var(--dur-fast) var(--ease-standard);
}
.link-cta:hover {
  color: var(--cmt-red-deep);
  text-decoration-thickness: 2px;
}
.on-ink .link-cta { color: var(--cmt-flare-red); }
.on-ink .link-cta:hover { color: var(--cmt-flare-red-light); }

/* Subordinate secondary door — visually clearly lesser, unmistakably present. */
.link-quiet {
  font: 500 1rem/1.5 var(--font-sans);
  color: var(--cmt-graphite);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease-standard);
}
.link-quiet:hover { color: var(--cmt-signal-red); }
.on-ink .link-quiet { color: var(--cmt-paper-cream); }
.on-ink .link-quiet:hover { color: var(--cmt-flare-red); }

/* Status pill — never clickable. */
.pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font: 600 0.75rem/1.2 var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  background: var(--cmt-ink);
  color: var(--cmt-paper-cream);
}
.pill--critical { background: var(--cmt-signal-red); color: var(--cmt-paper-cream); }
.pill--placed   { background: var(--cmt-mist);       color: var(--cmt-ink); }

/* --------------------------------------------------------------------------
   Navigation — 72px, opaque Paper Cream, 1px bottom rule, never blurred,
   never shadowed, never shrinks.
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cmt-paper-cream);
  border-bottom: 1px solid var(--cmt-rule);
  transition: transform var(--dur-slow) var(--ease-standard);
}
/* Partially persistent: hide on scroll-down, reveal on scroll-up. */
.site-header[data-hidden="true"] { transform: translateY(-100%); }

.nav {
  height: var(--nav-height);
  max-width: var(--container-slab);
  margin-inline: auto;
  padding-inline: var(--space-12);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav__logo { flex: 0 0 auto; display: block; }
.nav__logo img { width: 180px; height: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-left: auto;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 600 0.81rem/1.3 var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cmt-ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav__link:hover { color: var(--cmt-signal-red); }

/* Active state: the system's one persistent red mark. Never more than one. */
.nav__link[aria-current="page"] { color: var(--cmt-ink); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--cmt-signal-red);
}
/* Second, non-colour signal so the active item survives grayscale. */
.nav__link[aria-current="page"] { font-weight: 700; }

.nav__actions { display: flex; align-items: center; gap: var(--space-4); }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--cmt-rule);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.nav__toggle svg { width: 20px; height: 20px; }

/* Pause motion switch — Heidrick pattern, in the header for this market. */
.motion-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 1px solid var(--cmt-rule);
  border-radius: var(--radius-pill);
  font: 600 0.75rem/1.2 var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cmt-graphite);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.motion-switch:hover { border-color: var(--cmt-ink); color: var(--cmt-ink); }
/* The dot is Ink, not red. The accent is a budget of roughly one element per
   screenful and the nav already spends it on the CTA pill; a utility switch
   does not get to compete. State reads by form — filled vs hollow — so it
   survives grayscale without colour doing any work at all. */
.motion-switch__dot {
  width: 10px; height: 10px;
  border-radius: var(--radius-full);
  background: var(--cmt-ink);
  border: 2px solid var(--cmt-ink);
}
.motion-switch[aria-checked="true"] .motion-switch__dot {
  background: transparent;
  border-color: var(--cmt-slate);
}
.on-ink .motion-switch { border-color: var(--cmt-rule-ink); color: var(--cmt-slate-light); }
.on-ink .motion-switch:hover { border-color: var(--cmt-paper-cream); color: var(--cmt-paper-cream); }
.on-ink .motion-switch__dot { background: var(--cmt-paper-cream); border-color: var(--cmt-paper-cream); }
.on-ink .motion-switch[aria-checked="true"] .motion-switch__dot { background: transparent; border-color: var(--cmt-slate-light); }

/* Mobile drawer — full-screen on Paper Cream, CTA pinned full-width at bottom.
   Hire Talent and For Candidates stay visible OUTSIDE the drawer at all
   breakpoints (NN/g combo nav: 86% use vs 57% hidden-only). */
.nav__mobile-direct { display: none; gap: var(--space-4); margin-left: auto; }

.drawer {
  position: fixed;
  inset: var(--nav-height) 0 0 0;
  z-index: 99;
  background: var(--cmt-paper-cream);
  padding: var(--space-8) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer__links { display: flex; flex-direction: column; gap: var(--space-6); }
.drawer__link {
  font: 600 1.25rem/1.3 var(--font-sans);
  color: var(--cmt-ink);
  text-decoration: none;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--cmt-rule);
  min-height: 44px;
}
.drawer__foot { margin-top: auto; padding-top: var(--space-8); display: grid; gap: var(--space-4); }
.drawer__foot .btn { width: 100%; }

/* 1024–1279: the full desktop nav is shown here, and Newsreader labels run
   wider than the old monospace, so the bar overflowed by ~10px. Tighten the
   inter-link gap and side padding to reclaim the room. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav { padding-inline: var(--space-8); gap: var(--space-6); }
  .nav__links { gap: var(--space-6); }
}

@media (max-width: 1023px) {
  .nav { padding-inline: var(--space-8); }
  .nav__logo img { width: 140px; }
  /* Below desktop the motion switch moves into the drawer and the footer.
     It is still reachable on every page — just not crowding a 375px bar. */
  .nav__links,
  .nav__actions .btn,
  .nav__actions .motion-switch { display: none; }
  .nav__mobile-direct { display: flex; }
  .nav__toggle { display: inline-flex; }
}

@media (max-width: 767px) {
  .nav { padding-inline: var(--space-6); gap: var(--space-4); }
  .nav__mobile-direct .nav__link { font-size: 0.75rem; letter-spacing: 0.18em; }
}

@media (max-width: 479px) {
  .nav__mobile-direct { display: none; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-24) var(--space-16);
  background: var(--cmt-paper-cream);
}

/* The ambient grain layer and its drift animation were removed with the
   Pause Motion control (client edits 02 §3.1) — one change, both gone. */

.hero__inner { position: relative; z-index: 1; }

/* Homepage brand lockup — a large, centered masthead: the first thing on the
   page, sized to answer "what is this" at a glance. width/height attrs reserve
   the box (CLS ~0); static, never animated, so it stays a clean LCP candidate.
   The PNG's own cream matches --cmt-paper-cream, so it sits over the faint
   grain without a visible edge.
   Centered on purpose (client request); the H1/subhead below stay flush-left,
   because DESIGN §3 forbids centered display type — the left spine is kept. */
.hero__logo {
  display: block;
  width: clamp(300px, 46vw, 560px);
  height: auto;
  margin: 0 auto var(--space-12);
}
@media (max-width: 767px) {
  .hero__logo { width: clamp(260px, 78vw, 360px); margin-bottom: var(--space-8); }
}

.hero__eyebrow { color: var(--cmt-signal-red); margin-bottom: var(--space-2); }

/* Line-mask reveal: transform only. Never animate opacity on the LCP element. */
.hero-line { display: block; overflow: hidden; }
.hero-line__inner { display: block; }
.hero-line:nth-child(2) .hero-line__inner { animation-delay: 80ms; }

/* Two-line H1 per client edits 02 §4.1 — "to Miss" shares the line with
   "You Can't Afford". The longer second line cannot fit the container at the
   full display-1 size, so the hero H1 scales fluidly (~10% under display-1 at
   desktop) to hold the two-line setting at every breakpoint. */
.hero__h1 {
  margin-bottom: var(--space-6);
  max-width: none;
  font-size: clamp(2.4rem, 6.8vw, 5.4rem);
}

.hero-sub {
  max-width: 52ch;
  margin-bottom: var(--space-8);
  color: var(--cmt-ink);
}

.hero__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }

.scroll-cue {
  margin-top: var(--space-16);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--cmt-slate);
  font: 600 0.75rem/1.3 var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* --------------------------------------------------------------------------
   Proof strip — four axes, each answering a different objection.
   -------------------------------------------------------------------------- */

.proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--cmt-rule);
  border-left: 1px solid var(--cmt-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.proof__tile {
  border-right: 1px solid var(--cmt-rule);
  border-bottom: 1px solid var(--cmt-rule);
  padding: var(--space-8);
  background: var(--cmt-paper-cream);
}
.proof__axis { color: var(--cmt-signal-red); display: block; margin-bottom: var(--space-4); }
.proof__value {
  font: 500 3rem/1 var(--font-label);
  font-variant-numeric: tabular-nums lining-nums;
  font-optical-sizing: auto;
  color: var(--cmt-ink);
  display: block;
  letter-spacing: -0.015em;
  min-height: 3rem;         /* reserve the filled value's height — CLS <= 0.03 */
}
/* The real values are short (a number, a percentage, a term). Token names are
   long. Set them down so the tile geometry previews the finished state
   instead of the placeholder's. */
.proof__value .token {
  font-size: 0.875rem;
  letter-spacing: 0;
  line-height: 1.4;
}
/* One NEEDS INPUT tag per tile is enough signal. */
.proof__benchmark .token::after { display: none; }
.proof__benchmark .token { font-size: inherit; letter-spacing: inherit; }
.proof__label {
  display: block;
  margin-top: var(--space-3);
  font: 600 1rem/1.4 var(--font-sans);
  color: var(--cmt-ink);
}
.proof__benchmark {
  display: block;
  margin-top: var(--space-2);
  font: 600 0.75rem/1.4 var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cmt-graphite);   /* 12px — see the Slate deviation note in base.css */
}
.proof__objection {
  display: block;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--cmt-rule);
  font: 400 0.88rem/1.5 var(--font-sans);
  color: var(--cmt-graphite);
}
/* Optional supporting line on a proof tile (one card carries a second
   sentence per client edits 01 §2.2). No top rule — the objection line's
   rule was removed in that same edit. */
.proof__note {
  display: block;
  margin-top: var(--space-3);
  font: 400 0.88rem/1.5 var(--font-sans);
  color: var(--cmt-graphite);
}
.on-ink .proof__note { color: var(--cmt-paper-cream); }

@media (max-width: 1023px) { .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px)  { .proof { grid-template-columns: minmax(0, 1fr); } .proof__tile { padding: var(--space-6); } }

.on-ink .proof { border-color: var(--cmt-rule-ink); }
.on-ink .proof__tile { background: var(--cmt-ink); border-color: var(--cmt-rule-ink); }
.on-ink .proof__axis { color: var(--cmt-flare-red); }
.on-ink .proof__value, .on-ink .proof__label { color: var(--cmt-paper-cream); }
.on-ink .proof__benchmark { color: var(--cmt-slate-light); }
.on-ink .proof__objection { color: var(--cmt-paper-cream); border-top-color: var(--cmt-rule-ink); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--cmt-paper-cream);
  border: 1px solid var(--cmt-rule);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
a.card { display: block; text-decoration: none; color: inherit; }
.card:hover { border-color: var(--cmt-ink); }
.card:hover .card__title { color: var(--cmt-signal-red); }
.card__title { transition: color var(--dur-fast) var(--ease-standard); }
.card__eyebrow { color: var(--cmt-signal-red); display: block; margin-bottom: var(--space-3); }
.card__deck { margin-top: var(--space-3); color: var(--cmt-graphite); }

.card--utility { background: var(--cmt-mist); border: none; }
.card--spotlight { background: var(--cmt-white); border: 1px solid var(--cmt-rule); }
.card--feature { padding: var(--space-8); }

.on-ink .card {
  background: var(--cmt-ink-lift);
  border-color: var(--cmt-rule-ink);
}
.on-ink .card:hover { border-color: var(--cmt-paper-cream); }
.on-ink .card:hover .card__title { color: var(--cmt-flare-red-light); }
.on-ink .card__eyebrow { color: var(--cmt-flare-red-light); }
.on-ink .card__deck { color: var(--cmt-paper-cream); }
.on-ink .card--utility { background: var(--cmt-ink-panel); }

/* --------------------------------------------------------------------------
   Feature slab — full-bleed inversion. Alternate red and ink down a page;
   never two red slabs back to back.
   -------------------------------------------------------------------------- */

.slab {
  padding-block: var(--space-32);
  color: var(--cmt-paper-cream);
}
.slab--ink { background: var(--cmt-ink); }
.slab--red { background: var(--cmt-signal-red); }
.slab .t-display-1, .slab .t-display-2, .slab .t-display-3 { color: var(--cmt-paper-cream); }
.slab p { color: var(--cmt-paper-cream); }

/* On a Signal Red field the accent cannot be the accent. Eyebrows go cream. */
.slab--red .t-eyebrow { color: var(--cmt-paper-cream); }
.slab--ink .t-eyebrow { color: var(--cmt-flare-red); }

/* ...but not inside a card on that slab. A card raises the surface to Ink Lift
   #202020 or Ink Panel #2A2A2A, where Flare Red as small type is a documented
   failure (4.05:1 and 3.57:1). Step up to Flare Red Light. */
.slab--ink .card .t-eyebrow,
.slab--ink .card__eyebrow { color: var(--cmt-flare-red-light); }

/* Buttons on any slab reverse out to cream — a red fill on a red field is
   invisible, and an Ink outline on Ink is worse. */
.slab .btn--secondary { color: var(--cmt-paper-cream); border-color: var(--cmt-paper-cream); }
.slab .btn--secondary:hover { background: var(--cmt-paper-cream); color: var(--cmt-ink); }
.slab .link-quiet { color: var(--cmt-paper-cream); }
.slab--red .link-quiet:hover { color: var(--cmt-paper-cream); text-decoration-thickness: 2px; }
.slab--ink .link-quiet:hover { color: var(--cmt-flare-red); }
.slab .t-rail-meta, .slab .quote__title { color: var(--cmt-slate-light); }
.slab--red .t-rail-meta, .slab--red .quote__title { color: var(--cmt-paper-cream); }

/* A token-block keeps its own Mist plate on a slab, so its contents must keep
   Ink/Graphite too. Without this, `.slab p` wins on equal specificity and puts
   Paper Cream text on Mist — 1.17:1, a hard failure. The .on-ink variant
   already handles the Ink slab; this covers the Signal Red one. */
.slab:not(.on-ink) .token-block,
.slab:not(.on-ink) .token-block p,
.slab:not(.on-ink) .token-block li,
.slab:not(.on-ink) .token-block dd { color: var(--cmt-graphite); }
.slab:not(.on-ink) .token-block :is(h1,h2,h3,h4,dt,strong) { color: var(--cmt-ink); }

/* A Mist token chip inside an already-Mist token-block is invisible. Lift the
   nested chip to Paper Cream so the slot still reads as a slot. */
.token-block .token { background: var(--cmt-paper-cream); }
.token-block .token::after { background: var(--cmt-mist); }
.on-ink .token-block .token { background: var(--cmt-ink); }
.on-ink .token-block .token::after { background: var(--cmt-ink-panel); }

/* Footer links that point at pages this mock-up has not built yet. Marked
   rather than silently dead — an empty slot is a task. */
[data-unbuilt] { text-decoration: underline dotted; text-underline-offset: 3px; }
[data-unbuilt]::after {
  content: "NOT BUILT";
  font: 600 0.8125rem/1.2 var(--font-label);
  letter-spacing: 0.18em;
  color: var(--cmt-slate-light);
  margin-left: var(--space-2);
}

@media (max-width: 767px) {
  /* Slabs go 0-radius full-bleed at mobile and never lose fill saturation. */
  .slab { padding-block: var(--space-16); border-radius: 0; }
}

/* --------------------------------------------------------------------------
   Placement Log Rail — reused for the engagement timeline (Section O.8)
   -------------------------------------------------------------------------- */

.rail { position: relative; padding-left: var(--space-8); }
.rail::before {
  content: "";
  position: absolute;
  left: 4px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--cmt-rule);
}
.rail__item { position: relative; margin-bottom: var(--space-4); }
.rail__item:last-child { margin-bottom: 0; }
.rail__item::before {
  content: "";
  position: absolute;
  left: calc(var(--space-8) * -1);
  top: 10px;
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--cmt-signal-red);
}
.rail__meta { display: block; margin-bottom: var(--space-2); }

.on-ink .rail::before { background: var(--cmt-rule-ink); }
.on-ink .rail__item::before { background: var(--cmt-flare-red); }

@media (max-width: 767px) {
  /* Rail collapses to inline timestamps; rule and dot are dropped. */
  .rail { padding-left: 0; }
  .rail::before { display: none; }
  .rail__item::before { display: none; }
}

/* Founder portrait — headshots are 50% circles per DESIGN §Image Treatment,
   with the 1px Rule hairline that wraps standalone photography on cream.
   object-position frames the face inside the square crop. */
.founder-photo {
  display: block;
  width: clamp(200px, 24vw, 260px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: var(--radius-full);
  border: 1px solid var(--cmt-rule);
  margin-bottom: var(--space-8);
}
.on-ink .founder-photo { border-color: var(--cmt-rule-ink); }

/* Decorative bullseye marker — 24px concentric rings, Signal Red, one use. */
.bullseye {
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  border: 2px solid var(--cmt-signal-red);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}
.bullseye::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--cmt-signal-red);
}
.on-ink .bullseye { border-color: var(--cmt-flare-red); }
.on-ink .bullseye::after { background: var(--cmt-flare-red); }

/* Engagement timeline stage markers — never state by colour alone.
   Upcoming = open Rule ring. Active = filled Signal Red. Done = filled Ink
   plus a check glyph. Three distinct forms, legible in grayscale. */
.stage-marker {
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  border: 2px solid var(--cmt-rule);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  font: 600 0.75rem/1 var(--font-label);
  color: var(--cmt-paper-cream);
}
.stage-marker[data-state="active"] { border-color: var(--cmt-signal-red); background: var(--cmt-signal-red); }
.stage-marker[data-state="done"]   { border-color: var(--cmt-ink); background: var(--cmt-ink); }
.stage-marker[data-state="done"]::after { content: "✓"; }
.stage-marker[data-state="guarantee"] { border-color: var(--cmt-slate); background: var(--cmt-mist); }

/* --------------------------------------------------------------------------
   Video — handoff 04 §3.8
   Click to play. Nothing autoplays. Native controls only: a custom player is
   a large accessibility surface for no benefit, and `preload="none"` means
   nothing is fetched until the visitor presses play, so the reduced-motion
   no-fetch requirement is satisfied structurally rather than by JS.

   Two deviations from §3.8, both to stay inside the design system, which
   §11 says wins:

   1. §3.8 asks for "no radius". The system has five radii and none of them
      is 0 for a contained element — DESIGN §7 says never square corners.
      Using --radius-md, the standard container value, and dropping to 0 only
      at mobile where slabs already go full-bleed.
   2. §3.8 asks for a play affordance built from the stage-marker vocabulary.
      Overlaying our own play button on top of native controls would BE a
      custom player, which §3.8 also forbids. The ring-and-triangle glyph
      therefore sits in the caption bar as a decorative type-mark, not as a
      control. Native controls remain the only interactive surface.
   -------------------------------------------------------------------------- */

.video-figure { margin: 0; }

.video-figure__frame {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--cmt-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cmt-ink);   /* matches the letterbox on the Ink films */
}
.video-figure__frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--cmt-ink);
}
/* Fallback content inside <video> renders only where the element is
   unsupported — which is exactly when it has to be readable. The frame is
   Ink, so it reverses out. Graphite here is 1.14:1. */
.video-fallback {
  /* Literal, not var(). Fallback content inside <video> sits in a
     non-rendered context where custom properties do not resolve — the var()
     collapsed to initial black, invisible on the Ink frame. This is the
     Paper Cream token value verbatim, not a new colour. */
  color: #FAF9F5;
  font: 400 1rem/1.6 var(--font-sans);
  padding: 24px;
  margin: 0;
}

/* Caption bar: title left, duration right, Rail Meta in Graphite — Slate
   fails at this size, per the deviation already recorded in base.css. */
.video-figure__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  justify-content: space-between;
  padding-top: var(--space-3);
}
.video-figure__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font: 600 1rem/1.4 var(--font-sans);
  color: var(--cmt-ink);
}

/* Decorative only — aria-hidden, never a control. Open Rule ring containing a
   solid triangle, so it reads by form and survives the grayscale check. */
.video-glyph {
  width: 24px; height: 24px;
  flex: 0 0 auto;
  border: 2px solid var(--cmt-rule);
  border-radius: var(--radius-full);
  display: inline-grid;
  place-items: center;
}
.video-glyph::after {
  content: "";
  width: 0; height: 0;
  margin-left: 2px;   /* optical centring of a triangle in a circle */
  border-left: 7px solid var(--cmt-ink);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}

.video-figure__meta {
  font: 600 0.75rem/1.4 var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cmt-graphite);
}

/* Standing disclosure that on-screen figures are interface examples, not
   CMT results. Required because the firm is pre-revenue. */
.video-figure__disclaimer {
  margin-top: var(--space-2);
  font: 400 0.81rem/1.45 var(--font-sans);
  color: var(--cmt-graphite);
}

/* Text alternative. These films are SILENT — no audio track — so WCAG 1.2.1
   (Prerecorded Video-only) applies, not 1.2.2 Captions. The obligation is an
   equivalent text alternative, which is what this is. Served HTML, no JS. */
.transcript {
  margin-top: var(--space-4);
  border-top: 1px solid var(--cmt-rule);
}
.transcript > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font: 600 0.88rem/1.4 var(--font-sans);
  color: var(--cmt-ink);
  transition: color var(--dur-fast) var(--ease-standard);
}
.transcript > summary::-webkit-details-marker { display: none; }
.transcript > summary:hover { color: var(--cmt-signal-red); }
.transcript > summary::after {
  content: "+";
  font: 500 1.25rem/1 var(--font-label);
  color: var(--cmt-signal-red);
  flex: 0 0 auto;
}
.transcript[open] > summary::after { content: "\2013"; }
.transcript__body { padding-bottom: var(--space-6); max-width: var(--measure); }
.transcript__body p,
.transcript__body li { color: var(--cmt-graphite); font: 400 1rem/1.6 var(--font-sans); }
.transcript__body p + p { margin-top: var(--space-3); }
.transcript__body ol { display: grid; gap: var(--space-3); counter-reset: vslide; }
.transcript__body ol li { padding-left: var(--space-8); position: relative; }
.transcript__body ol li::before {
  counter-increment: vslide;
  content: counter(vslide, decimal-leading-zero);
  position: absolute; left: 0;
  font: 500 0.75rem/1.6 var(--font-label);
  letter-spacing: 0.18em;
  color: var(--cmt-graphite);
}

.on-ink .video-figure__frame { border-color: var(--cmt-rule-ink); }
.on-ink .video-figure__title { color: var(--cmt-paper-cream); }
.on-ink .video-glyph { border-color: var(--cmt-rule-ink); }
.on-ink .video-glyph::after { border-left-color: var(--cmt-paper-cream); }
.on-ink .video-figure__meta,
.on-ink .video-figure__disclaimer { color: var(--cmt-slate-light); }
.on-ink .transcript { border-top-color: var(--cmt-rule-ink); }
.on-ink .transcript > summary { color: var(--cmt-paper-cream); }
.on-ink .transcript > summary:hover,
.on-ink .transcript > summary::after { color: var(--cmt-flare-red); }
.on-ink .transcript__body p,
.on-ink .transcript__body li { color: var(--cmt-paper-cream); }
.on-ink .transcript__body ol li::before { color: var(--cmt-slate-light); }

@media (max-width: 767px) {
  .video-figure__frame { border-radius: 0; border-left: 0; border-right: 0; }
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table-wrap {
  border: 1px solid var(--cmt-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.table { width: 100%; border-collapse: collapse; text-align: left; }
.table thead th {
  background: var(--cmt-mist);
  color: var(--cmt-ink);
  font: 600 0.75rem/1.4 var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: var(--space-3) var(--space-4);
}
.table tbody td, .table tbody th {
  padding: var(--space-4);
  border-top: 1px solid var(--cmt-rule);
  font: 400 1rem/1.6 var(--font-sans);
  color: var(--cmt-graphite);
  vertical-align: top;
}
.table tbody th { color: var(--cmt-ink); font-weight: 600; }
.table tbody tr:nth-child(even) { background: var(--cmt-paper-deep); }
/* Row hover: Red Tint plate plus a 2px Signal Red left border. The border is
   reserved as transparent on every row so hovering never shifts layout —
   and it is a border, not a box-shadow. This system has zero shadows. */
.table tbody tr > :first-child { border-left: 2px solid transparent; }
.table tbody tr:hover { background: var(--cmt-red-tint); }
.table tbody tr:hover > :first-child { border-left-color: var(--cmt-signal-red); }
.table .num {
  font: 500 1rem/1.4 var(--font-label);
  font-variant-numeric: tabular-nums lining-nums;
  font-optical-sizing: auto;
  text-align: right;
  white-space: nowrap;
}

/* Three-column timeline: without explicit proportions the nowrap Elapsed
   column claims width it does not need and squeezes the delivery copy to a
   two-word ribbon between 768px and 1023px. Placeholder tokens are long, so
   Elapsed wraps here rather than forcing the table wider. */
.table--timeline { table-layout: fixed; }
.table--timeline th:nth-child(1), .table--timeline td:nth-child(1) { width: 32%; }
.table--timeline th:nth-child(2), .table--timeline td:nth-child(2) { width: 22%; }
.table--timeline th:nth-child(3), .table--timeline td:nth-child(3) { width: 46%; }
.table--timeline .num { white-space: normal; text-align: left; }
/* Token names are far longer than the day counts that will replace them and
   break mid-word in this column. Set them down so the cell previews the
   finished measure rather than the placeholder's. */
.table--timeline .num .token { font-size: 0.75rem; letter-spacing: 0; }

@media (max-width: 767px) {
  .table--timeline { table-layout: auto; }
  .table--timeline th, .table--timeline td { width: auto !important; }
}

/* Below 768px tables convert to stacked definition cards rather than
   scrolling horizontally. */
@media (max-width: 767px) {
  .table--stack thead { display: none; }
  .table--stack tbody tr { display: block; border-top: 1px solid var(--cmt-rule); padding: var(--space-4) 0; }
  .table--stack tbody tr:hover { background: none; box-shadow: none; }
  .table--stack tbody td, .table--stack tbody th {
    display: block;
    border: 0;
    padding: var(--space-1) var(--space-4);
    text-align: left;
  }
  .table--stack tbody td::before,
  .table--stack tbody th::before {
    content: attr(data-label);
    display: block;
    font: 600 0.75rem/1.4 var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cmt-slate);
    margin-bottom: var(--space-1);
  }
  .table .num { text-align: left; }
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--space-6); max-width: 560px; }

.field { display: grid; gap: 6px; }

/* Labels above the field, always. 50ms label→field saccade vs 500ms
   left-aligned (Penzo). Never placeholder-as-label. */
.field__label {
  font: 500 0.88rem/1.3 var(--font-sans);
  color: var(--cmt-ink);
}
.field__req { color: var(--cmt-signal-red); font-weight: 700; }
.field__opt {
  font: 400 0.88rem/1.3 var(--font-sans);
  color: var(--cmt-graphite);
}
.field__hint {
  font: 400 0.81rem/1.45 var(--font-sans);
  letter-spacing: 0.1px;
  color: var(--cmt-graphite);
}

.input, .select, .textarea {
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  background: var(--cmt-white);
  border: 1px solid var(--cmt-rule);
  border-radius: var(--radius-sm);
  font: 400 1rem/1.5 var(--font-sans);
  color: var(--cmt-ink);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.input::placeholder, .textarea::placeholder { color: var(--cmt-slate); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--cmt-slate); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--cmt-ink); }
.input:disabled, .select:disabled {
  background: var(--cmt-paper-deep);
  border-color: var(--cmt-mist);
  color: var(--cmt-slate);
}
.select { appearance: none; padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23141414' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Error: multiple cues — 2px border, label-set ERROR tag, and text. Never colour
   alone. The user's input is preserved. */
.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select {
  border: 2px solid var(--cmt-signal-red);
}
.field__error {
  display: none;
  align-items: baseline;
  gap: var(--space-2);
  font: 400 0.81rem/1.45 var(--font-sans);
  color: var(--cmt-signal-red);
}
.field[data-invalid="true"] .field__error { display: flex; }
.field__error::before {
  content: "ERROR";
  font: 600 0.8125rem/1.2 var(--font-label);
  letter-spacing: 0.18em;
  border: 1px solid var(--cmt-signal-red);
  border-radius: var(--radius-sm);
  padding: 1px 4px;
  flex: 0 0 auto;
}

/* Radios — 2–3 options get radios, not a dropdown (2.5s faster, CXL). */
.radio-set { display: grid; gap: var(--space-3); border: 0; padding: 0; margin: 0; }
.radio-set legend { padding: 0; margin-bottom: var(--space-3); }
.radio {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  cursor: pointer;
}
.radio input, .checkbox input {
  width: 24px; height: 24px;   /* WCAG 2.5.8 target size */
  accent-color: var(--cmt-signal-red);
  flex: 0 0 auto;
  margin: 0;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 44px;
  padding-block: var(--space-2);
  cursor: pointer;
}
.checkbox span { font: 400 0.88rem/1.55 var(--font-sans); color: var(--cmt-graphite); }

/* Resume drop zone — must also be a real clickable input (WCAG 2.5.7).
   Formats and size stated BEFORE the picker (WCAG 3.3.2). */
.dropzone {
  border: 1px dashed var(--cmt-rule);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  background: var(--cmt-mist);
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.dropzone[data-dragging="true"] { border-color: var(--cmt-signal-red); border-style: solid; }
.dropzone__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.file-chip {
  display: none;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--cmt-paper-cream);
  border: 1px solid var(--cmt-rule);
  border-radius: var(--radius-sm);
}
.file-chip[data-has-file="true"] { display: inline-flex; }
.file-chip__remove {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 1px solid var(--cmt-rule);
  border-radius: var(--radius-full);
  background: none;
  cursor: pointer;
  font: 600 0.75rem/1 var(--font-label);
  color: var(--cmt-ink);
}
.file-chip__remove:hover { border-color: var(--cmt-signal-red); color: var(--cmt-signal-red); }

/* Notice at Collection sits adjacent to submit, not only in the footer. */
.submit-block { display: grid; gap: var(--space-4); }
.notice-line {
  font: 400 0.81rem/1.45 var(--font-sans);
  color: var(--cmt-graphite);
}
.notice-line a { color: var(--cmt-signal-red); text-underline-offset: 3px; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  border-left: 2px solid var(--cmt-signal-red);
  background: var(--cmt-red-tint);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  color: var(--cmt-ink);
}
.form-status:empty { display: none; }

/* --------------------------------------------------------------------------
   Accordion (FAQ) — all answers in the served HTML, never JS-injected.
   -------------------------------------------------------------------------- */

.accordion { border-top: 1px solid var(--cmt-rule); }
.accordion details { border-bottom: 1px solid var(--cmt-rule); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font: 600 1.13rem/1.4 var(--font-sans);
  color: var(--cmt-ink);
  transition: color var(--dur-fast) var(--ease-standard);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--cmt-signal-red); }
.accordion summary::after {
  content: "+";
  font: 500 1.25rem/1 var(--font-label);
  color: var(--cmt-signal-red);
  flex: 0 0 auto;
}
.accordion details[open] summary::after { content: "–"; }
.accordion__body { padding-bottom: var(--space-6); }
.accordion__body p { color: var(--cmt-graphite); max-width: var(--measure); }
.accordion__body p + p { margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   Pull quote / testimonial
   -------------------------------------------------------------------------- */

.quote { border-left: 2px solid var(--cmt-signal-red); padding-left: var(--space-6); }
.quote__attrib {
  margin-top: var(--space-4);
  font: 500 1rem/1.5 var(--font-sans);
  color: var(--cmt-ink);
}
/* Slate at 16px clears AA on Paper Cream (4.51:1) but not on Paper Deep
   (4.20:1), and attributions appear on both. Graphite is safe on either. */
.quote__title { font: 400 1rem/1.5 var(--font-sans); color: var(--cmt-graphite); }
.on-ink .quote { border-left-color: var(--cmt-flare-red); }
.on-ink .quote__attrib { color: var(--cmt-paper-cream); }
.on-ink .quote__title { color: var(--cmt-slate-light); }

/* --------------------------------------------------------------------------
   Footer — Ink, five-column doormat plus legal bar.
   -------------------------------------------------------------------------- */

.site-footer { background: var(--cmt-ink); color: var(--cmt-paper-cream); padding-block: var(--space-16) var(--space-8); }
.site-footer__logo img { width: 64px; height: 64px; margin-bottom: var(--space-12); }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-8);
}
.footer-col h2 {
  font: 600 0.75rem/1.4 var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cmt-slate-light);
  margin-bottom: var(--space-4);
}
.footer-col ul { display: grid; gap: var(--space-3); }
.footer-col a {
  font: 400 0.88rem/1.5 var(--font-sans);
  color: var(--cmt-paper-cream);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.footer-col a:hover { color: var(--cmt-flare-red); }

.footer-legal {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--cmt-rule-ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}
.footer-legal a, .footer-legal button {
  font: 600 0.75rem/1.4 var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cmt-slate-light);
  text-decoration: none;
  background: none;
  border: none;
  padding: var(--space-2) 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}
.footer-legal a:hover, .footer-legal button:hover { color: var(--cmt-paper-cream); }
.footer-legal .is-alert { color: var(--cmt-flare-red); }
.footer-legal__copy {
  width: 100%;
  font: 400 0.81rem/1.5 var(--font-sans);
  color: var(--cmt-slate-light);
}

@media (max-width: 1023px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px)  { .footer-cols { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Page-level utilities
   -------------------------------------------------------------------------- */

.page-head { padding-block: var(--space-16) var(--space-12); border-bottom: 1px solid var(--cmt-rule); }
.page-head .t-eyebrow { color: var(--cmt-signal-red); display: block; margin-bottom: var(--space-2); }

.numbered { counter-reset: step; display: grid; gap: var(--space-8); }
.numbered__item { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-6); align-items: start; }
.numbered__item::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font: 500 2rem/1 var(--font-label);
  color: var(--cmt-signal-red);
  font-variant-numeric: tabular-nums lining-nums;
  font-optical-sizing: auto;
}
@media (max-width: 479px) {
  .numbered__item { grid-template-columns: 1fr; gap: var(--space-3); }
}

.draft-banner {
  background: var(--cmt-signal-red);
  color: var(--cmt-paper-cream);
  padding: var(--space-4) 0;
}
.draft-banner p {
  font: 600 0.81rem/1.6 var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cmt-paper-cream);
}

.legal-body { max-width: var(--measure); }
.legal-body h2 { margin-top: var(--space-12); margin-bottom: var(--space-4); }
.legal-body h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
.legal-body p, .legal-body li { color: var(--cmt-graphite); }
.legal-body p + p { margin-top: var(--space-4); }
.legal-body ul { list-style: disc; padding-left: var(--space-6); display: grid; gap: var(--space-2); margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   Phase 1 typography — Newsreader label role (replaced the monospace face).
   The base .t-* label classes carry weight/tracking/variant; these component
   labels set their type inline, so give them the same tabular lining figures
   and optical sizing per the 2.2 spec. Family, weight and 0.18em tracking are
   already set on each rule above; this only adds the numeric properties.
   -------------------------------------------------------------------------- */
.btn, .pill, .nav__link, .motion-switch, .scroll-cue, .video-figure__meta,
.table thead th, .footer-col h2, .footer-legal a, .footer-legal button,
.draft-banner p {
  font-variant-numeric: tabular-nums lining-nums;
  font-optical-sizing: auto;
}