/* =========================================================
   Impact Consultive — Design System
   Black/white polarity + red-rust splash. Brand type:
   Abolition (headers) + Commuter Sans (body).
   ========================================================= */

/* ---------- Brand fonts (self-hosted, licensed) ----------
   Abolition (Fort Foundry) for display, Commuters Sans (Dharma Type) for everything
   else. Full retail cuts: the earlier DEMO files sabotaged 28 characters — including
   the digit 4 — which forced a unicode-range allowlist on every Commuter face. Both
   families now carry the complete set, so those allowlists are gone. Do not
   reintroduce them; they would silently suppress characters that render fine. */
@font-face {
  font-family: "Abolition";
  src: url("../assets/fonts/Abolition/Abolition-SoftOblique.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Commuter Sans";
  src: url("../assets/fonts/Commuter%20Sans/commuterssans-extralight.otf") format("opentype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Commuter Sans";
  src: url("../assets/fonts/Commuter%20Sans/commuterssans-regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Commuter Sans";
  src: url("../assets/fonts/Commuter%20Sans/commuterssans-semibold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* Core polarity */
  --black:      #231f20;   /* warm charcoal — matches the logo artwork exactly */
  --black-2:    #2e2a2b;
  --black-3:    #3a3536;
  --white:      #ffffff;
  --off-white:  #f4f3f2;   /* light section bg */

  /* Color splash — deep red rust */
  --accent:      #961624;  /* signature rust red */
  --accent-dark: #901407;  /* deeper rust for hovers */
  --accent-lite: #c62c3b;  /* lifted rust — for accents on dark backgrounds */

  /* Semantic */
  --bg:         var(--white);
  --ink:        var(--black);     /* headings */
  --text:       #1a1a1a;
  --text-soft:  #6a6a6a;
  --border:     #e2e2e2;
  --border-dark:#2a2a2a;

  /* Type — brand fonts: Abolition (headers) + Commuter Sans (body) */
  --font-body: "Commuter Sans", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-head: "Abolition", "Jost", "Impact", sans-serif;
  --font-num:  "Anton", "Abolition", "Impact", sans-serif;   /* money figures — reliable $ */
  --font-sans:    var(--font-body);
  --font-display: var(--font-body);

  /* Layout */
  --maxw: 1180px;
  --radius: 0px;               /* sharp, aggressive edges */
  --shadow-hard: 10px 10px 0 var(--black);
  --shadow-soft: 0 14px 40px rgba(0,0,0,.14);
  --gutter: clamp(20px, 5vw, 52px);
  --header-h: 74px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 200;            /* Commuter Sans Extra Light */
  color: var(--text);
  background: var(--bg);
  line-height: 1.75;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.05;
  margin: 0 0 .5em;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
h3 { font-size: 1.2rem; letter-spacing: .01em; }
p  { margin: 0 0 1rem; }
::selection { background: var(--accent); color: #fff; }

/* Display headlines — Abolition (condensed soft-oblique) */
h1, h2 {
  font-family: var(--font-head); font-weight: 400; letter-spacing: .012em; line-height: .96;
}
/* Long-form article headings stay in the body face for readability */
.article h1, .article h2, .article h3 {
  font-family: var(--font-body); font-weight: 600; letter-spacing: 0; text-transform: none;
}

/* Off-screen but readable by assistive tech and search — used where a page needs an
   h1 for document structure without showing one. */
/* <picture> wrappers (WebP + PNG fallback) must not affect layout */
picture { display: contents; }

.skip-link { position: absolute; left: 0; top: 0; z-index: 1000; transform: translateY(-120%);
  background: var(--accent); color: #fff; padding: .7rem 1.1rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; font-size: .8rem; text-decoration: none; }
.skip-link:focus { transform: none; outline: 2px solid #fff; outline-offset: -4px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(60px, 9vw, 120px) 0; }
.section--soft { background: var(--off-white); }
.section--ink { background: var(--black); color: #c9c9c9; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--accent); display: inline-block; }
.lead { font-size: 1.18rem; color: var(--text-soft); max-width: 60ch; text-transform: none; }
.section--ink .lead { color: #9a9a9a; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.center .eyebrow { justify-content: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display);
  font-weight: 700; font-size: .92rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .95rem 1.7rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translate(-3px, -3px); }
.btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--primary:hover { box-shadow: 6px 6px 0 var(--black); }
.btn--ghost { border-color: var(--black); color: var(--black); background: transparent; }
.btn--ghost:hover { background: var(--black); color: #fff; box-shadow: 6px 6px 0 var(--accent); }
.btn--light { background: #fff; color: var(--black); border-color: #fff; }
.btn--light:hover { box-shadow: 6px 6px 0 var(--accent); }
.btn--outline-light { border-color: #fff; color: #fff; background: transparent; }
.btn--outline-light:hover { background: #fff; color: var(--black); box-shadow: 6px 6px 0 var(--accent); }

/* ---------- Brand wordmark ---------- */
.brand { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand__img { height: 46px; width: auto; display: block; }
.site-footer .brand__img { height: 52px; }
@media (max-width: 900px) { .brand__img { height: 40px; } }
.brand__logo { display: inline-flex; align-items: baseline; gap: .1em; }
.brand__bang { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; color: var(--accent); transform: skewX(-8deg); }
.brand__name { font-family: var(--font-display); font-weight: 900; font-size: 1.2rem; letter-spacing: -.02em; color: #fff; text-transform: uppercase; }
.brand__sub  { font-family: var(--font-display); font-weight: 500; font-size: .62rem; letter-spacing: .34em; color: #fff; text-transform: uppercase; align-self: center; margin-left: .5em; opacity: .85; }
/* brand on light backgrounds */
.brand--dark .brand__name, .brand--dark .brand__sub { color: var(--black); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--black);
  border-bottom: 1px solid var(--border-dark);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s ease;
}
.site-header.nav-hidden { transform: translateY(-105%); opacity: 0; pointer-events: none; }
body.home .site-header { position: fixed; left: 0; right: 0; }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.nav__links { display: flex; align-items: center; gap: 2.1rem; list-style: none; margin: 0; padding: 0; }
.nav__links a { color: #e6e6e6; font-weight: 500; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.nav__links a:hover { color: var(--accent); text-decoration: none; }
.nav__links a.active { color: var(--accent); }
.nav__cta { margin-left: .4rem; }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { display: block; width: 26px; height: 2px; background: #fff; margin: 6px 0; transition: .25s; }

@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--black); border-bottom: 1px solid var(--border-dark);
    padding: .5rem var(--gutter) 1.5rem; display: none;
  }
  .nav__links.open { display: flex; }
  .nav__links li { width: 100%; }
  .nav__links a { display: block; padding: .95rem 0; width: 100%; border-bottom: 1px solid #1e1e1e; font-size: 1rem; }
  .nav__cta { margin: 1rem 0 0; }
  .nav.open .nav__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* ---------- Intro (home cold-open) ---------- */
.intro {
  position: relative;
  min-height: 100vh;
  background: var(--black);
  display: grid; place-items: center;
  text-align: center;
  overflow: hidden;
  padding: 2rem;
}
.intro__inner { position: relative; z-index: 1; }
.intro__logo { display: block; }
.intro__logo img { width: min(680px, 84vw); height: auto; margin: 0 auto; opacity: 0; animation: logoIn 1.2s cubic-bezier(.2,.8,.2,1) .35s forwards; }
@keyframes logoIn { from { opacity: 0; transform: scale(.94); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } }
.intro__bang {
  font-family: var(--font-display); font-weight: 900; color: var(--accent);
  font-size: clamp(3.5rem, 15vw, 12rem); line-height: 1; transform: skewX(-8deg);
  opacity: 0; animation: bangIn .7s cubic-bezier(.2,.8,.2,1) .3s forwards;
}
.intro__word {
  font-family: var(--font-display); font-weight: 900; color: #fff; text-transform: uppercase;
  font-size: clamp(3.2rem, 14vw, 11rem); line-height: 1; letter-spacing: .32em;
  opacity: 0; animation: wordIn 1s cubic-bezier(.2,.8,.2,1) .6s forwards;
}
.intro__sub {
  font-family: var(--font-display); font-weight: 500; color: #fff; text-transform: uppercase;
  font-size: clamp(.9rem, 2.6vw, 1.6rem); letter-spacing: .5em; margin: 1rem 0 0;
  opacity: 0; animation: fadeUp .8s ease 1.1s forwards;
}
.intro__line { height: 4px; width: 0; background: var(--accent); margin: 2rem auto 0; animation: lineGrow .7s ease 1.5s forwards; }
.intro__tag {
  color: #9a9a9a; text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; margin: 1.4rem 0 0;
  opacity: 0; animation: fadeUp .8s ease 1.8s forwards;
}
.intro__scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: #7a7a7a; text-transform: uppercase; letter-spacing: .2em; font-size: .7rem; font-weight: 600;
  opacity: 0; animation: fadeUp .8s ease 2.3s forwards; transition: opacity .3s ease;
}
.intro__scroll:hover { color: #fff; text-decoration: none; }
.intro__chev { width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); animation: bounce 1.8s ease-in-out infinite; }
.intro.scrolled .intro__scroll { opacity: 0; pointer-events: none; }

@keyframes bangIn   { from { opacity: 0; transform: skewX(-8deg) translateY(-40px); } to { opacity: 1; transform: skewX(-8deg) translateY(0); } }
@keyframes wordIn   { from { opacity: 0; letter-spacing: .6em; filter: blur(6px); } to { opacity: 1; letter-spacing: .04em; filter: blur(0); } }
@keyframes fadeUp   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes lineGrow { from { width: 0; } to { width: min(280px, 60vw); } }
@keyframes introGlow{ from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes bounce   { 0%,100% { transform: rotate(45deg) translate(0,0); } 50% { transform: rotate(45deg) translate(4px,4px); } }

/* ---------- Hero (pitch) ---------- */
.hero { position: relative; overflow: hidden; background: var(--black); color: #fff; }
/* Ghost "!" — the logo mark, oversized, bleeding off the right edge */
.hero::after, .fx-ghost::after {
  content: ""; position: absolute; z-index: 0; right: -3%; top: 50%; transform: translateY(-50%);
  width: min(54vh, 470px); height: 130%;
  -webkit-mask: url("../assets/!mpact-icon_WHITE.png") no-repeat center right; mask: url("../assets/!mpact-icon_WHITE.png") no-repeat center right;
  -webkit-mask-size: contain; mask-size: contain;
  background: var(--accent); opacity: .12; pointer-events: none;
}
.fx-ghost { position: relative; overflow: hidden; }
.fx-ghost > .container { position: relative; z-index: 1; }

/* Halftone / Ben-Day dot cluster — fades in from the top-right corner */
.cta-band::after, .fx-dots::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; color: var(--accent-lite);
  background-image: radial-gradient(currentColor 2.3px, transparent 2.9px);
  background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(74% 84% at 100% 0%, #000 0%, transparent 60%);
  mask-image: radial-gradient(74% 84% at 100% 0%, #000 0%, transparent 60%);
  opacity: .7;
}
.fx-dots { position: relative; overflow: hidden; }
.fx-dots > .container { position: relative; z-index: 1; }
@media (max-width: 620px) { .hero::after, .fx-ghost::after { opacity: .07; } }
.hero .container { position: relative; z-index: 1; padding-top: clamp(70px, 10vw, 120px); padding-bottom: clamp(70px, 10vw, 120px); }
.hero h1 { color: #fff; max-width: 16ch; }
.hero h1 .hl { color: var(--accent); }
.hero p { color: #b8b8b8; font-size: 1.2rem; max-width: 54ch; text-transform: none; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.hero__stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.5rem); margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid #262626; }
.stat__num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 900; color: #fff; line-height: 1; }
.stat__num span { color: var(--accent); }
.stat__label { font-size: .82rem; color: #8a8a8a; text-transform: uppercase; letter-spacing: .1em; margin-top: .3rem; }

/* ---------- Grid / Cards ---------- */
.grid { display: grid; gap: 1.4rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 1.9rem;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover { transform: translate(-4px, -4px); box-shadow: var(--shadow-hard); border-color: var(--black); }
.section--soft .card { background: #fff; }
.card__icon {
  width: 52px; height: 52px; border-radius: var(--radius);
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: var(--black); color: var(--accent);
}
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--text-soft); margin: 0; font-size: .98rem; text-transform: none; }

/* Inverted cards (e.g. "How we help") — dark brand-gray body, white hover lines */
.cards-invert .card { background: var(--black-3); border-color: #4a4443; }
.cards-invert .card h3 { color: #fff; }
.cards-invert .card p { color: #b7b2b1; }
.cards-invert .card__icon { background: rgba(0,0,0,.28); color: var(--accent); }
.cards-invert .card:hover { border-color: #fff; box-shadow: 8px 8px 0 #000; transform: translate(-4px,-4px); }

/* ---------- Trust ---------- */
.trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 3.5rem); }
.trust span { font-family: var(--font-display); font-weight: 700; color: var(--black); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; opacity: .55; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; gap: 1.1rem; }
.step { display: flex; gap: 1.3rem; align-items: flex-start; background:#fff; border:1.5px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1.7rem; }
.step__num { counter-increment: step; flex: none; width: 48px; height: 48px; border-radius: var(--radius); background: var(--accent); color:#fff; font-family: var(--font-display); font-weight: 900; display: grid; place-items: center; font-size: 1.2rem; }
.step__num::before { content: "0" counter(step); }
.step h3 { margin-bottom: .25rem; }
.step p { color: var(--text-soft); margin: 0; text-transform: none; }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.media-card { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-hard); background: var(--black-2); aspect-ratio: 4/3; }
.list-check { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .8rem; }
.list-check li { padding-left: 2.2rem; position: relative; color: var(--text); text-transform: none; }
.list-check li::before { content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 14px; background: var(--accent); }
.section--ink .list-check li { color: #d0d0d0; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--black); color:#fff; border-radius: var(--radius); padding: clamp(2.8rem, 6vw, 4.5rem); text-align: center; position: relative; overflow: hidden; border: 2px solid var(--black); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color:#fff; }
.cta-band p { color: #ededed; font-size: clamp(1.05rem, 2.2vw, 1.28rem); font-weight: 500; max-width: 52ch; margin-inline: auto; text-transform: none; }
.cta-band .hero__actions { justify-content: center; }

/* ---------- Blog ---------- */
/* The log list follows a bare breadcrumb, not a hero, so it does not need the top
   padding every other .chapter is sized for. Bottom padding stays put. */
.chapter.chapter--log, .chapter.chapter--contact { padding-top: clamp(20px, 2.6vw, 36px); }
/* Wider than a reading column: at 960px the three tiles are only ~207px of content
   each, which forces a long category like TRANSFORMATION onto a second line. Room
   here is the robust fix — squeezing the tracking would only hold until the next
   long category. Matches the width the testimonial grid already uses. */
.chapter.chapter--log .container { max-width: 1120px; }

/* Mission Log cards — the testimonial card's frame and offset block, reused.
   Purely typographic: the site carries no decorative imagery anywhere else. */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2.4vw, 1.7rem); }
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.post-card { display: flex; flex-direction: column; background: var(--black-2);
  border: 1.5px solid #4a4443; border-radius: 0;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.post-card:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--accent-lite);
  border-color: #fff; text-decoration: none; }
.post-card__body { padding: clamp(1.6rem, 3vw, 2rem) clamp(1.4rem, 3vw, 1.8rem); display: flex; flex-direction: column; height: 100%; }
/* article plates — one 1200x630 graphic per post (assets/plates/), cropped to 16:9 on the
   cards and shown whole at the top of the article. See tools/build-plates.py. */
.post-card__img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; border-bottom: 1px solid #322d2e; }
.chapter .article .article-plate { margin: 0 0 clamp(2.4rem, 4.5vw, 3.4rem); }   /* not .plate — Services owns that name */
/* the opening breathes in two pauses, not five equal gaps: kicker + headline + date sit
   tight as one unit; a short rust rule and a wide gap mark where the piece begins */
.article-kicker { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.article-kicker__read { font-size: .72rem; color: var(--accent-lite); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
.chapter .article h1 { margin-bottom: .55rem; }
.chapter .article p.article-meta { margin-bottom: 0; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.chapter .article .article-meta a { color: #c9c4c3; text-decoration: none; }
.chapter .article .article-meta a:hover { color: #fff; }

/* ---------- article end: author card, one next read, share tools ---------- */
.article-end { margin-top: clamp(3rem, 6vw, 4.5rem); }
.author-card { display: grid; grid-template-columns: 112px 1fr; gap: clamp(1.2rem, 3vw, 2rem); align-items: start;
  background: var(--black-2); border: 1px solid #322d2e; padding: clamp(1.4rem, 3vw, 2rem); }
@media (max-width: 560px) { .author-card { grid-template-columns: 1fr; } }
.author-card__photo { position: relative; width: 112px; height: 112px; background: var(--black-3); overflow: hidden; }
.author-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.author-card__photo.is-empty img { display: none; }
.author-card__mono { display: none; position: absolute; inset: 0; place-items: center; font-family: var(--font-head); font-size: 2.6rem; color: var(--accent-lite); }
.author-card__photo.is-empty .author-card__mono { display: grid; }
.author-card__label { display: block; font-size: .68rem; color: var(--accent-lite); text-transform: uppercase; letter-spacing: .18em; font-weight: 600; margin-bottom: .5rem; }
.chapter .article .author-card__name { margin: 0 0 .15rem; font-family: var(--font-head); font-weight: 400; font-size: 1.7rem; text-transform: uppercase; letter-spacing: .012em; color: #fff; }
.chapter .article .author-card__title { margin: 0 0 .9rem; font-size: .78rem; color: #8a8483; text-transform: uppercase; letter-spacing: .14em; font-weight: 500; }
.chapter .article .author-card__bio { font-size: .95rem; line-height: 1.7; margin: 0 0 1rem; }
.chapter .article .author-card__links { margin: 0; display: flex; gap: .7rem; align-items: center; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 500; }
.chapter .article .author-card__links a { color: var(--accent-lite); text-decoration: none; }
.chapter .article .author-card__links a:hover { color: #fff; }
.chapter .article .author-card__links span { color: #4a4443; }
/* the next read carries the site's chevron wipe. The plate thumbnail rides above the sweep
   (it is the card's picture), the paper slides in behind it and the title flips to ink. */
.next-read { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: clamp(1rem, 2.5vw, 1.6rem); align-items: center;
  margin-top: 1rem; padding: 1rem; border: 1px solid #322d2e; text-decoration: none; color: inherit; }
.next-read:hover { text-decoration: none; }
@media (max-width: 560px) { .next-read { grid-template-columns: 1fr; } }
.next-read__img { position: relative; z-index: 3; display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; }
.next-read__text { position: relative; z-index: 1; }
.next-read__label { display: block; font-size: .68rem; color: var(--accent-lite); text-transform: uppercase; letter-spacing: .18em; font-weight: 600; margin-bottom: .4rem; }
.next-read__title { display: block; font-family: var(--font-head); font-size: clamp(1.3rem, 2.6vw, 1.7rem); text-transform: uppercase; color: #fff; line-height: 1; }
.next-read__wipe { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--off-white);
  display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: clamp(1rem, 2.5vw, 1.6rem); align-items: center; padding: 1rem;
  -webkit-clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%); clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%);
  transition: -webkit-clip-path .44s cubic-bezier(.2,.75,.2,1), clip-path .44s cubic-bezier(.2,.75,.2,1); }
.next-read__wipe::before { content: ""; }                 /* holds the thumbnail's column so the copy lines up */
.next-read__wipe .next-read__label { color: var(--accent); }
.next-read__wipe .next-read__title { color: var(--ink); }
.next-read:hover .next-read__wipe, .next-read:focus-visible .next-read__wipe {
  -webkit-clip-path: polygon(0 0, 100% 0, 114% 50%, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 114% 50%, 100% 100%, 0 100%); }
@media (prefers-reduced-motion: reduce) { .next-read__wipe { transition: none; } }
@media (max-width: 560px) { .next-read__wipe { grid-template-columns: 1fr; } .next-read__wipe::before { aspect-ratio: 1200 / 630; } }
.article-tools { margin-top: 1.6rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1.5rem;
  font-size: .7rem; color: #8a8483; text-transform: uppercase; letter-spacing: .12em; font-weight: 500; }
.article-tools a, .article-tools .copy-link { color: #e7e3e2; text-decoration: none; margin-left: .7rem; }
.article-tools a:hover, .article-tools .copy-link:hover { color: var(--accent-lite); }
.article-tools .copy-link { font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.article-tools .copy-link.is-copied { color: var(--accent-lite); }
.article-tools__fix a { margin-left: .35rem; }
.article-rule { width: 44px; height: 3px; border: 0; background: var(--accent); margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 clamp(1.8rem, 3.5vw, 2.6rem); }
.chapter .article p.lead { line-height: 1.65; margin-bottom: 2.4rem; }
.chapter .article .article-plate svg { display: block; width: 100%; height: auto; }
.post-card__meta { font-size: .72rem; color: var(--accent-lite); text-transform: uppercase;
  letter-spacing: .18em; margin-bottom: .9rem; font-weight: 600; }
/* Tile titles carry the same two-face break as the article they open: the display
   face takes the opening phrase, the body face takes the rest a step smaller. The
   card's own scale is larger than a plain heading so the oblique has room to read. */
.chapter .post-card h2 { color: #fff; font-family: var(--font-body); font-weight: 600;
  /* the title is the card's only content now, so it carries the whole tile */
  font-size: clamp(1.6rem, 2.1vw, 2rem); line-height: 1.25; letter-spacing: .01em;
  text-transform: none; margin: 0; }
/* One fixed scale on every tile, so titles read evenly card to card. Fitting each
   line to the card width instead made the sizes swing 2.5x between tiles — exact,
   but the grid stopped reading as a set. The display line runs deliberately oversized
   against the body-face line beneath it so it reads as the card's header. */
.chapter .post-card h2 .h-display { display: block; font-size: 1.32em;
  font-family: var(--font-head); font-weight: 400; text-transform: uppercase;
  letter-spacing: .015em; line-height: 1.06; margin-bottom: .3em; }
.chapter .post-card h2 .h-rest { display: block; font-size: .58em; font-weight: 600;
  letter-spacing: .02em; line-height: 1.4; color: #c9c4c3; }
.chapter .post-card p { color: #c9c4c3; font-weight: 200; font-size: .95rem; line-height: 1.7;
  margin: .8rem 0 0; max-width: none; text-transform: none; }
.tag { display:inline-block; font-size:.72rem; font-weight:700; color: #fff; background: var(--accent); padding:.3rem .8rem; border-radius: var(--radius); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Article ---------- */
/* Log footer note — quiet, in the fine-print register the Toolbox established */
.chapter .log-cta { margin: clamp(2.8rem, 6vw, 4rem) auto 0; text-align: center;
  color: #8a8483; font-size: .95rem; font-weight: 400; }

/* Article body — same dark reading surface as every other page */
.article { max-width: 720px; margin: 0 auto; }
.chapter .container.article { max-width: 720px; }   /* .chapter .container would widen it to 960 */
/* Article titles open in the display face, then hand off to the body face —
   the oblique carries the brand, the upright bold carries the readability. */
/* The article's primary header runs in the display face; h2/h3 below stay in the
   body face, where long-form reading beats display character. */
.article h1 { font-family: var(--font-head); font-weight: 400; letter-spacing: .012em; }

/* the display h1 scale (up to 5rem) sets five lines in a 720px column — long-form
   titles need their own, smaller step while keeping the brand's uppercase */
.article h1 { text-transform: uppercase; color: #fff;
  font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.08; margin-bottom: .6em; }
.chapter .article h2 { margin-top: 2.6rem; margin-bottom: .9rem; text-transform: none;
  letter-spacing: -.01em; color: #fff; font-size: clamp(1.5rem, 3.2vw, 2rem); }
.chapter .article h3 { margin-top: 1.9rem; text-transform: none; color: #fff; }
.chapter .article p, .chapter .article li { color: #c9c4c3; font-weight: 200;
  font-size: clamp(1rem, 2vw, 1.12rem); line-height: 1.78; max-width: none; text-transform: none; }
.chapter .article strong { color: #fff; font-weight: 600; }
.article ul, .article ol { padding-left: 1.3rem; }
.chapter .article li + li { margin-top: .5rem; }
.chapter .article blockquote { margin: 2.4rem 0; padding: 1.2rem 1.6rem;
  border-left: 4px solid var(--accent); background: rgba(255,255,255,.035);
  color: #fff; font-size: clamp(1.05rem, 2.4vw, 1.25rem); font-weight: 400; line-height: 1.6; }
.chapter .article p.article-meta { color: #8a8483; font-size: .78rem; margin-bottom: 2.2rem;
  text-transform: uppercase; letter-spacing: .18em; font-weight: 400; }
.chapter .article p.lead { color: #e7e3e2; font-weight: 200;
  font-size: clamp(1.12rem, 2.3vw, 1.3rem); line-height: 1.7; max-width: none; }

/* ---------- Contact form ---------- */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
/* Honeypot field — off-screen for people, present for bots */
.form__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.field { display: grid; gap: .4rem; }
.field label { font-size: .8rem; font-weight: 700; color: var(--black); text-transform: uppercase; letter-spacing: .06em; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 1rem; color: var(--text);
  padding: .85rem .9rem; border: 2px solid var(--border); border-radius: var(--radius);
  background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--black); box-shadow: 4px 4px 0 var(--accent);
}
.field textarea { resize: vertical; min-height: 130px; }
.form__note { font-size: .85rem; color: var(--text-soft); text-transform: none; }
.contact-cards { display: grid; gap: 1rem; }
.contact-cards .card { padding: 1.3rem 1.5rem; }
.contact-cards .card h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; }
.contact-cards .card a { font-weight: 600; color: var(--black); }
.contact-cards .card a:hover { color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: #8a8a8a; padding: clamp(52px, 7vw, 80px) 0 32px; border-top: 3px solid var(--accent); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .brand { margin-bottom: .9rem; }
.site-footer p { font-size: .95rem; max-width: 34ch; text-transform: none; }
.footer-col h4 { color: #fff; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.footer-col a { color: #8a8a8a; font-size: .95rem; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #242424; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.footer-legal a { color: inherit; text-decoration: none; }
.footer-legal a:hover { color: var(--accent-lite); }
/* legal pages ride the article register; the h1 keeps the display face at a calmer size */
.chapter .article.legal h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); margin-top: .6rem; }
.chapter .article.legal h2 { font-size: 1.15rem; margin-top: 2.2rem; }
.chapter .article.legal a { color: #e7e3e2; text-decoration: underline; text-underline-offset: .2em; }
.chapter .article.legal a:hover { color: var(--accent-lite); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: var(--black); color: #fff; border-bottom: 3px solid var(--accent); padding: clamp(60px, 8vw, 110px) 0 clamp(48px, 6vw, 72px); }
.page-hero h1 { color: #fff; max-width: 20ch; }
/* The log headline now carries the brand on its own, so it takes the accent. Uses the
   lifted rust, the site's token for red on dark — the deeper --accent drops below
   3:1 against the hero and would fail contrast even at display size. */
.page-hero--log h1, .page-hero--contact h1 { color: var(--accent); }
/* no accent rule under this hero: the headline already carries the red, and the
   two together read as one red block rather than a headline and a divider */
.page-hero--log, .page-hero--contact { border-bottom: none; padding-bottom: clamp(26px, 3.4vw, 46px); }
/* the h1's default .5em bottom margin is 40px at display size — most of the gap */
.page-hero--log h1, .page-hero--contact h1 { margin-bottom: .14em; }

.page-hero .lead { color: #b8b8b8; }
.breadcrumb { font-size: .8rem; color: #8a8a8a; margin-bottom: 1.2rem; text-transform: uppercase; letter-spacing: .1em; }
.breadcrumb a { color: #8a8a8a; }
.breadcrumb a:hover { color: var(--accent); }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .intro__logo img, .intro__sub, .intro__line, .intro__tag, .intro__invite, .intro__scroll, .intro::before { animation: none !important; opacity: 1 !important; filter: none !important; }
  .intro__line { width: min(280px, 60vw); }
  .intro__chev { animation: none; }
}

/* ===================================================================
   Narrative "dossier" — full-bleed chapters, brand type, quiet prose
   =================================================================== */

/* Small-UI weight fixes for the Commuter faces we actually load (200/400/600) */
.eyebrow { font-weight: 600; }
.btn { font-weight: 600; }
.nav__links a { font-weight: 500; }

/* Cover: "by invite only" under the logo */
.intro__invite { margin-top: 1.5rem; color: var(--accent-lite); text-transform: uppercase;
  letter-spacing: .44em; font-size: .78rem; font-weight: 600; opacity: 0;
  animation: fadeUp .8s ease 2.6s forwards; }

.chapter { background: var(--black); color: #c9c4c3; padding: clamp(72px, 11vw, 150px) 0; position: relative; overflow: hidden; }
.chapter + .chapter { border-top: 1px solid #322d2e; }
.chapter .container { max-width: 960px; position: relative; z-index: 1; }
.chapter__eyebrow { display: inline-flex; align-items: center; gap: .7rem; color: var(--accent-lite);
  text-transform: uppercase; letter-spacing: .28em; font-size: .78rem; font-weight: 600; margin-bottom: 1.4rem; }
.chapter__eyebrow::before { content: ""; width: 34px; height: 3px; background: var(--accent); }
.chapter h2 { color: #fff; margin-bottom: 1.3rem; }
.chapter p { font-weight: 200; font-size: clamp(1.12rem, 2.3vw, 1.4rem); line-height: 1.78; color: #c9c4c3; max-width: 66ch; }
.chapter p + p { margin-top: 1.35rem; }
.chapter strong { font-weight: 600; color: #fff; }
.chapter--center { text-align: center; }
.chapter--center .container { max-width: 820px; }
.chapter--center .chapter__eyebrow { justify-content: center; }
.chapter--center p { margin-left: auto; margin-right: auto; }

/* Client proof wall — unified white marks, color on hover */
.logo-wall { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(1.8rem, 4vw, 3rem) clamp(2.2rem, 5vw, 4rem); margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.logo-wall .logo { flex: 0 0 auto; width: clamp(118px, 20vw, 188px); display: grid; place-items: center; min-height: 92px; }
.logo-wall img { width: 100%; max-height: 74px; object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1); opacity: .68;
  transition: opacity .22s ease, filter .22s ease; }
.logo-wall .logo:hover img { filter: none; opacity: 1; }

/* Making a Millionaire — the pearl */
.progression { margin: clamp(3.4rem, 8vw, 6rem) auto; max-width: 820px; padding: 0 1rem; }
.progression img { width: 100%; height: auto; }
/* Single scroll-driven figure: small $100K -> huge, red, emphatic $3.5M (grows + counts up) */
.millionfig { text-align: center; margin: clamp(4rem, 10vw, 8rem) 0 clamp(1.4rem, 3vw, 2.2rem); }
.millionfig__num { display: inline-block; font-family: var(--font-num); font-weight: 400;
  font-size: clamp(4.5rem, 15vw, 10rem); line-height: .9; letter-spacing: .01em;
  color: var(--fig-color, #7f7a79);
  transform: skewX(-9deg) scale(var(--fig-scale, .4)); transform-origin: center center;
  will-change: transform; }
.bignum__cap { text-align: center; color: #8a8483; text-transform: uppercase; letter-spacing: .24em; font-size: .82rem; }
.pull { font-family: var(--font-head); font-weight: 400; color: #fff;
  font-size: clamp(1.5rem, 3.6vw, 2.2rem); line-height: 1.1; text-transform: uppercase;
  letter-spacing: .01em; margin-top: clamp(2rem, 5vw, 3rem); max-width: 22ch; }
.chapter--center .pull { margin-left: auto; margin-right: auto; }

/* Capability list (expertise) — restrained chips, not a marketing grid */
.caps { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.2rem; }
.caps > span, .caps > a {
  position: relative; overflow: hidden;
  border: 1px solid #4a4443; color: #e7e3e2; padding: .55rem 1.05rem;
  text-transform: uppercase; letter-spacing: .09em; font-size: .8rem; font-weight: 500;
  transition: color .22s ease, border-color .22s ease, transform .22s ease;
}
/* hover fill arrives on the site's chevron point — same gesture as the invite button */
.caps > span::before, .caps > a::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--caps-fill, var(--accent));
  -webkit-clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%);
          clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%);
  transition: -webkit-clip-path .44s cubic-bezier(.2,.75,.2,1),
                      clip-path .44s cubic-bezier(.2,.75,.2,1);
}
/* the label rides above the fill — same layering as .btn--invite .btn__txt */
.caps__txt { position: relative; z-index: 1; }
.caps > a { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.caps > a:hover { text-decoration: none; }
.caps > a:focus-visible::before {
  -webkit-clip-path: polygon(0 0, 100% 0, 114% 50%, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 114% 50%, 100% 100%, 0 100%);
}
/* the "see all" tile leads — accent edge at rest, and a white wipe so it keeps standing apart */
.caps > .caps__more { border-color: var(--accent); color: #fff; font-weight: 600; }
/* white-on-white would swallow the label mid-sweep, so the fill carries its own dark copy of it:
   backer and type are one clipped layer and arrive together, never crossfading past each other */
.caps > .caps__more::before { content: none; }
.caps__wipe {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: center; gap: .55rem; padding: .55rem 1.05rem;
  background: #fff; color: #141414;
  -webkit-clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%);
          clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%);
  transition: -webkit-clip-path .44s cubic-bezier(.2,.75,.2,1),
                      clip-path .44s cubic-bezier(.2,.75,.2,1);
}
.caps > .caps__more:focus-visible .caps__wipe {
  -webkit-clip-path: polygon(0 0, 100% 0, 114% 50%, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 114% 50%, 100% 100%, 0 100%);
}
.caps__arrow { position: relative; z-index: 1; display: inline-block; transition: transform .22s ease; }
@media (hover: hover) {
  .caps > span:hover, .caps > a:hover {
    border-color: var(--accent); color: #fff; transform: translateY(-3px);
  }
  .caps > span:hover::before, .caps > a:hover::before {
    -webkit-clip-path: polygon(0 0, 100% 0, 114% 50%, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 114% 50%, 100% 100%, 0 100%);
  }
  .caps > .caps__more:hover .caps__wipe {
    -webkit-clip-path: polygon(0 0, 100% 0, 114% 50%, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 114% 50%, 100% 100%, 0 100%);
  }
  /* the arrow steps once the chevron has swept past it — follow-through, not a second race */
  .caps > .caps__more:hover .caps__arrow {
    transform: translateX(4px); transition: transform .22s ease .2s; }
}
@media (prefers-reduced-motion: reduce) {
  .caps > span, .caps > a, .caps__arrow, .caps__wipe,
  .caps > span::before, .caps > a::before { transition: none; }
  .caps > span:hover, .caps > a:hover { transform: none; }
}

/* ---------- Services — headline treatment ---------- */
.chapter h1 { color: #fff; margin-bottom: 1.3rem; }
/* struck-through headline word — the red rule does the work, not the browser default */
.strike { text-decoration: none; position: relative; color: #6f6968; }
/* In a menu the struck name must still read as an available link — keep the link's
   own colour and let the red rule alone carry the device, or it looks disabled.
   The rule is sized in em for headline scale; at 13px menu text that lands at 0.78px,
   which is sub-pixel and effectively invisible. Menus get a fixed 2px in lifted rust. */
.nav__links .strike, .footer-col .strike { color: inherit; }
.nav__links .strike::after, .footer-col .strike::after {
  height: 2px; background: var(--accent-lite); }
.strike::after { content: ""; position: absolute; left: -.015em; right: -.015em; top: 52%;
  height: .06em; background: var(--accent); transform: skewY(-1.6deg); }

/* Owned numbers — the record that needs no client sign-off */
/* flex, not grid — an odd count leaves a short last row, and it should sit centred
   under the others rather than orphaned to the left */
.stats { display: flex; flex-wrap: wrap; justify-content: center;
  /* row gap stays generous; the column gap tightens first so the 3-across row
     survives down to tablet instead of collapsing to a lone orphan */
  gap: clamp(2.4rem, 5vw, 3.4rem) clamp(1.1rem, 2.6vw, 2.2rem);
  margin-top: clamp(2.6rem, 6vw, 4rem); }
.stat { text-align: center; flex: 0 1 196px; }
.stat__num { display: block; font-family: var(--font-num); font-weight: 400;
  font-size: clamp(3.4rem, 8.5vw, 6rem); line-height: .9; color: var(--accent-lite);
  transform: skewX(-8deg); white-space: nowrap; }
.stat__cap { display: block; margin-top: .9rem; text-transform: uppercase; letter-spacing: .18em;
  font-size: .72rem; color: #8a8483; line-height: 1.6; }
/* the claim carries, the qualifier recedes — same two-tier cite as the testimonials */
.stat__cap b { display: block; font-weight: 600; color: #fff; letter-spacing: .16em; }
.chapter .stat__note { font-size: .95rem; color: #8a8483; margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- Contact — the form on the site's dark surface ----------
   .form/.field/.card were authored for the light theme this page used to sit on.
   Everything below re-skins them for .chapter without touching the light rules,
   which other components may still rely on. */
/* column heads sit in the fine-print register the Record and Toolbox established —
   they label a column, they are not section headlines */
.chapter h2.col-head { font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  color: #fff; text-transform: uppercase; letter-spacing: .18em; margin-bottom: 1.4rem; }
.chapter .field label { color: #8a8483; font-weight: 600; font-size: .72rem; letter-spacing: .18em; }
.chapter .field input, .chapter .field select, .chapter .field textarea {
  background: var(--black-2); border: 1.5px solid #4a4443; color: #e7e3e2;
  font-weight: 200; }
.chapter .field input::placeholder, .chapter .field textarea::placeholder { color: #6f6968; }
.chapter .field input:focus, .chapter .field select:focus, .chapter .field textarea:focus {
  border-color: #fff; box-shadow: 4px 4px 0 var(--accent-lite); }
.chapter .form__note { color: #8a8483; font-size: .82rem; font-weight: 400; max-width: 52ch; }
/* the submit button's default hover block is --black, invisible on this ground */
.chapter .btn--primary:hover { box-shadow: 6px 6px 0 var(--accent-lite); }

/* the second column is gone, so the form sets its own measure rather than
   stretching to a container built for two */
.form-wrap { max-width: 680px; }
/* the phone field is taller than its row-mate now that it carries the checkboxes;
   without this the neighbouring input stretches to match it */
.chapter .form__row > .field { align-content: start; }
/* the select only ever holds three short options — at full measure it read as an
   empty bar. Sized to its content instead of the form's width. */
.chapter .field--narrow select { max-width: 22rem; }
/* the native select painted the system's own gradient over the form — a non-match
   for the brand. Flattened to the paper tint the Services tabs and the CTA wipe use
   for standing out on ink, with a hand-drawn chevron in place of the OS one. */
.chapter .field select {
  appearance: none; -webkit-appearance: none;
  background: var(--off-white) 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' fill='none' stroke='%23231f20' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .95rem center;
  background-size: 12px 8px;
  color: var(--ink); border-color: var(--off-white); font-weight: 400;
  padding-right: 2.6rem; cursor: pointer; transition: none;
}
/* no slab, no slide — the select just opens. A quiet border change marks focus. */
.chapter .field select:focus { border-color: #fff; box-shadow: none; }
.chapter .field select option { background: var(--off-white); color: var(--ink); }
/* Contact runs centred: the headline and the form block sit on the page's centre
   axis. Fields inside the form stay left-aligned — centred labels and inputs are
   markedly harder to scan and fill. */
.page-hero--contact h1 { max-width: none; }
/* the headline keys off the form, not the page: its container takes the form's
   680px measure (plus the gutters) so both left edges land on the same line */
.page-hero--contact .container { max-width: calc(680px + 2 * var(--gutter)); }
.chapter.chapter--contact .container { max-width: var(--maxw); }
.chapter--contact .form-wrap { margin-inline: auto; }
.chapter--contact .form { text-align: left; }
/* the terminal action and the fine print centre with the block */
.chapter--contact .form__submit { text-align: center; margin-top: clamp(1.6rem, 3.5vw, 2.8rem); }
.chapter--contact .form__note { text-align: center; margin-inline: auto; }

/* Submit — sized like the feature buttons elsewhere, and carrying the site's chevron
   wipe. The wipe holds its own dark copy of the label: a plain white sweep would
   swallow white type mid-transition, the same trap the See All Services tile hit. */
.btn--chevron { position: relative; overflow: hidden;
  font-size: 1.05rem; padding: 1.3rem 3.1rem; letter-spacing: .16em; }
.btn--chevron .btn__txt { position: relative; z-index: 1; }
.btn--chevron .btn__wipe { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: grid; place-items: center;
  background: #fff; color: var(--black);
  -webkit-clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%);
          clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%);
  transition: -webkit-clip-path .44s cubic-bezier(.2,.75,.2,1),
                      clip-path .44s cubic-bezier(.2,.75,.2,1); }
.btn--chevron:hover .btn__wipe, .btn--chevron:focus-visible .btn__wipe {
  -webkit-clip-path: polygon(0 0, 100% 0, 114% 50%, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 114% 50%, 100% 100%, 0 100%); }
@media (prefers-reduced-motion: reduce) { .btn--chevron .btn__wipe { transition: none; } }
/* Header invite carries the same wipe at nav scale. The sweep is the brand paper
   tint on ink type — the dark slab and lift the other primaries use would vanish
   against the header's black, so the colour change does the whole job here. */
/* an afterthought in the header, a shout everywhere else: sized down to sit in the
   nav links' register rather than compete with the page's own calls to action */
.nav__cta .btn--chevron { font-size: .7rem; font-weight: 600; padding: .55rem 1.05rem; letter-spacing: .14em; }
.nav__cta .btn--chevron .btn__wipe { background: var(--off-white); color: var(--ink); }
.nav__cta .btn--chevron:hover, .nav__cta .btn--chevron:focus-visible {
  transform: none; box-shadow: none; border-color: var(--off-white); }
/* checkbox pair qualifying the phone number */
.chapter .checks { display: flex; gap: 1.4rem; margin-top: .55rem; }
.chapter .check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: #8a8483; }
.chapter .check input { appearance: none; width: 15px; height: 15px; margin: 0;
  border: 1.5px solid #4a4443; background: var(--black-2); display: grid; place-content: center; }
.chapter .check input:checked { border-color: var(--accent-lite); background: var(--accent-lite); }
.chapter .check input:checked::after { content: ""; width: 7px; height: 4px; border-left: 2px solid #fff;
  border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.chapter .check input:focus-visible { outline: 2px solid var(--accent-lite); outline-offset: 2px; }
.chapter .check:hover { color: #8a8483; }
/* no hover motion on this page — the form should sit still while it is being filled in */
.chapter--contact .btn:hover { transform: none; box-shadow: none; }

/* direct-line cards borrow the testimonial card's frame and offset block */
.chapter .contact-cards { display: grid; gap: 1rem; }
.chapter .contact-cards .card { background: var(--black-2); border: 1.5px solid #4a4443;
  border-radius: 0; padding: 1.4rem 1.5rem; }
.chapter .contact-cards .card:hover { transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0 var(--accent-lite); border-color: #fff; }
.chapter .contact-cards .card h3 { color: #8a8483; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em; margin-bottom: .5rem; }
.chapter .contact-cards .card p { margin: 0; font-size: .98rem; }
.chapter .contact-cards .card a { color: #e7e3e2; font-weight: 400; }
.chapter .contact-cards .card a:hover { color: var(--accent-lite); }
/* response time is a note, not a card — same two-tier line as the Toolbox */
.chapter .contact-note { margin-top: 1.6rem; font-size: .82rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .18em; color: #8a8483; line-height: 1.9; }
.chapter .contact-note b { display: block; color: #fff; font-weight: 600; letter-spacing: .16em; }

/* ---------- The toolbox — credentials, given deliberately less room than the record ---------- */
/* the heading announces at full section size like every other; the restraint lives
   in the fine print below it, not in shrinking the announcement */
/* a fine-print band — framed like a colophon, not a trophy shelf.
   The label lives inside the rules with its list, so it reads as that group's
   heading rather than as a stray line floating above a border. */
.toolbox__band { margin-top: clamp(1.9rem, 4vw, 2.6rem); padding: 1.25rem 0;
  border-top: 1px solid #3a3536; border-bottom: 1px solid #3a3536; }
.chapter .toolbox__label { margin: 0 auto .9rem; max-width: none; font-weight: 600; color: #fff;
  text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; line-height: 1.6; }
.toolbox__list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .85rem clamp(1.3rem, 3.5vw, 2.4rem);
  text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; color: #8a8483; }
.chapter .toolbox__line { margin-top: 1.15rem; margin-inline: auto; max-width: 72ch;
  font-weight: 400; font-size: .72rem; line-height: 1.9;
  text-transform: uppercase; letter-spacing: .18em; color: #8a8483; }
.chapter .toolbox__line b { color: #fff; font-weight: 600; letter-spacing: .16em; margin-right: .75rem; }

/* ---------- Testimonials — their words, in our frame ---------- */
/* the centered chapter caps at 820px — three quotes need more room */
.chapter--voices .container { max-width: 1120px; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); text-align: left;
  gap: clamp(1.1rem, 2.4vw, 1.7rem); margin-top: clamp(2.6rem, 6vw, 4rem); }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

.quote { position: relative; display: flex; flex-direction: column; margin: 0;  /* figure's UA margin */
  background: var(--black-2); border: 1.5px solid #4a4443;
  padding: clamp(2.6rem, 5vw, 3.1rem) clamp(1.5rem, 3vw, 1.9rem) clamp(1.6rem, 3vw, 1.9rem);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
/* the offset block carries the accent on hover — lifted rust, so it reads as red against the dark */
.quote:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--accent-lite); border-color: #fff; }
/* oversized red quote mark, straddling the top border */
.quote::before { content: "\201C"; position: absolute; top: -.02em; left: .22em;
  font-family: var(--font-num); font-size: clamp(3.4rem, 7vw, 4.6rem); line-height: 1;
  color: var(--accent-lite); pointer-events: none; }
.chapter .quote p { font-size: clamp(1rem, 1.9vw, 1.08rem); line-height: 1.7; color: #e7e3e2;
  max-width: none; margin: 0 0 auto; }
.chapter .quote strong { color: #fff; }
.quote__cite { display: block; margin-top: clamp(1.6rem, 3.5vw, 2.1rem); padding-top: 1.1rem;
  border-top: 1px solid #4a4443; text-transform: uppercase; letter-spacing: .18em;
  font-size: .72rem; line-height: 1.7; color: #8a8483; }
.quote__cite b { display: block; font-weight: 600; color: #fff; letter-spacing: .16em; }

/* ---------- The close — a sense of occasion ---------- */
.chapter.chapter--close { border-top: none;
  padding-top: clamp(80px, 12vw, 160px); padding-bottom: clamp(80px, 12vw, 160px); }
.chapter--close .invite { margin-top: clamp(3.8rem, 8vw, 6.5rem); position: relative; z-index: 1; }
.invite__rule { display: block; width: 64px; height: 3px; background: var(--accent);
  margin: 0 auto clamp(1.6rem, 4vw, 2.4rem); }
.chapter--close .invite__note { text-transform: uppercase; letter-spacing: .18em;
  font-size: .74rem; font-weight: 500; opacity: .6; margin: 1.2rem auto 0; }
/* Framed "notice" box with the PAUSE label straddling the top border */
.chapter--close .warnbox { position: relative; max-width: 640px;
  margin: clamp(2.8rem, 6vw, 4.2rem) auto 0;
  border: 1.5px solid var(--accent);
  padding: clamp(2.4rem, 5.5vw, 3.2rem) clamp(1.6rem, 4vw, 2.4rem) clamp(1.9rem, 4vw, 2.4rem); }
.chapter--close .warnbox p { margin: 0; font-size: clamp(.9rem, 1.9vw, 1.05rem); line-height: 1.6; }
.chapter--close .warnbox__label { position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%); background: var(--fg-bg, var(--black)); padding: 0 .9rem;
  white-space: nowrap; font-family: var(--font-head); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem); line-height: 1; letter-spacing: .05em; color: var(--accent); }
.btn--invite { font-size: 1.16rem; padding: 1.55rem 3.6rem; letter-spacing: .2em;
  background: var(--btn-base, var(--accent)); color: var(--btn-text, #fff); border: 2px solid #fff;
  position: relative; overflow: hidden; }
/* hover is a colour change only — no lift, no offset block */
.btn--invite:hover { box-shadow: none; transform: none; color: #141414; }
.btn--invite .btn__txt { position: relative; z-index: 1; }
/* chevron-pointed colour wipe (solid -> solid), scroll-driven from main.js */
.btn--invite::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--btn-fill, transparent);
  -webkit-clip-path: var(--btn-clip, polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%));
          clip-path: var(--btn-clip, polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%)); }

/* Scroll-in reveal — rule, declaration, and CTA slide up in sequence */
.chapter--close .invite.reveal { opacity: 1; transform: none; }
.chapter--close .invite__rule,
.chapter--close .invite__cta,
.chapter--close .invite__note {
  opacity: 0; transform: translateY(36px);
  transition: opacity .6s ease, transform .75s cubic-bezier(.2,.75,.2,1);
}
.chapter--close .invite.in .invite__rule { opacity: 1; transform: none; transition-delay: .05s; }
.chapter--close .invite.in .invite__cta  { opacity: 1; transform: none; transition-delay: .28s; }
.chapter--close .invite.in .invite__note { opacity: .6; transform: none; transition-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
  .chapter--close .invite__rule,
  .chapter--close .invite__cta { opacity: 1 !important; transform: none !important; }
  .chapter--close .invite__note { opacity: .6 !important; transform: none !important; }
}

/* Scroll-lit finale — holds charcoal, then dissolves to soft gray as you scroll.
   The --fg-* vars are driven by main.js; the fallbacks below are the charcoal
   "hold" state before/without JS. */
.chapter--lit { background: var(--fg-bg, var(--black)); position: relative; overflow: hidden; }
.chapter--lit .container { position: relative; z-index: 1; }
.chapter--lit h2 { color: var(--fg-head, #fff); }
.chapter--lit p { color: var(--fg-text, #c9c4c3); }
.chapter--lit strong { color: var(--fg-head, #fff); }
.chapter--lit .chapter__eyebrow { color: var(--accent); }
.chapter--lit .invite__rule { background: var(--accent); }

/* Home: the light-gray finale already sets the footer apart — drop the red divider */
body.home .site-footer, body.finale .site-footer { border-top: none; }

/* ---------- 404 ---------- */
/* one chapter, centred and tall enough to hold the viewport on its own. The struck
   word is the site's device: the weaker word crossed out for the one that counts. */
.chapter--lost { min-height: calc(100vh - var(--header-h)); display: grid; place-items: center; }
.chapter--lost .container { max-width: 960px; }   /* the standard chapter measure, so the eyebrow lands where every other page's does */
/* the eyebrow keys off the page like its siblings; the art and caption stay centred beneath it */
.chapter--lost .chapter__eyebrow { display: flex; justify-content: flex-start; }
/* the art is the body copy here: a monospace figure, inline-block so the centred
   chapter centres the block while the characters keep their left-aligned grid */
.chapter--lost .lost__fig { margin: 1.4rem 0 clamp(2.2rem, 4.5vw, 3.4rem); }
.chapter--lost .lost__art { display: inline-block; margin: 0; text-align: left; white-space: pre;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(.48rem, 1.55vw, 1.05rem); line-height: 1.2; color: #8a8483; }
/* the caption keys off the art the way Contact's headline keys off the form: art, caption
   and links share one shrink-wrapped block, centred on the page, left-aligned inside */
.chapter--lost .lost__body { display: inline-block; max-width: 100%; text-align: left; }
.chapter--lost .lost__caption { color: #fff; margin-bottom: 0; font-size: clamp(1.7rem, 4.2vw, 2.9rem); text-align: left; }
/* the way out is the menu itself, set as one quiet line in the nav links' register */
/* a back door, not a statement: fine-print scale, muted until hovered */
.chapter--lost .lost__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .3rem .65rem; margin-top: 2.4rem; }
.chapter--lost .lost__links a { color: #8a8483; font-weight: 500; font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; transition: color .15s ease; }
.chapter--lost .lost__links a:hover { color: #e7e3e2; }
.chapter--lost .lost__links span { color: #4a4443; font-size: .7rem; line-height: 1; }
.chapter--lost .lost__links .strike { color: inherit; }
.chapter--lost .lost__links .strike::after { height: 1px; background: var(--accent); }
/* Home footer: brand left, the two remaining columns pushed to the right, right-aligned */
body.home .footer-grid, body.finale .footer-grid { grid-template-columns: 1fr auto auto; }
body.home .footer-col, body.finale .footer-col { text-align: right; }
@media (max-width: 780px) {
  body.home .footer-grid, body.finale .footer-grid { grid-template-columns: 1fr 1fr; }
  body.home .footer-col, body.finale .footer-col { text-align: left; }
}


/* =========================================================
   Services matrix — the ingredients board, industry tabs and
   the weighting panel. Scoped to .mx; every custom property is
   mx- prefixed so it cannot collide with the tokens above.
   ========================================================= */
.mx {
  --mx-accent: var(--accent);
  --mx-accent-lite: var(--accent-lite);
  --mx-font-body: var(--font-body);
  --mx-font-display: var(--font-head);
  --mx-font-mono: "IBM Plex Mono",ui-monospace,Menlo,monospace;
  --mx-hair: var(--black-3);
  --mx-ink: var(--black);
  --mx-ink-2: #2a2526;
  --mx-ink-3: #332e2f;
  --mx-mute: #8a8483;
  --mx-mute-panel: #968f8e;
  --mx-panel: #322d2e;
  --mx-panel-2: #2a2526;
  --mx-panel-line: #423c3d;
  --mx-paper: var(--off-white);
  --mx-text-hi: #e7e3e2;
}
/* ---------- the constant: every ingredient, always on ---------- */
.mx{margin-top:clamp(2.6rem, 5.5vw, 4.2rem)}
.levers{margin-top:0}
.levers__grid{display:flex;flex-wrap:wrap;gap:1px;background:var(--mx-hair);border:1px solid var(--mx-hair)}
/* flex, not grid: rows always fill edge to edge, so the lever count can change without a ragged row */
.lever{flex:1 1 178px;background:var(--mx-ink);padding:1.05rem .85rem 1rem;
  display:flex;flex-direction:column;gap:.6rem;transition:background .18s}
@media (max-width:520px){.lever{flex-basis:132px}}
.lever:hover{background:var(--mx-ink-2)}
.lever__top{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.lever__name{font-size:.7rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mx-mute);line-height:1.25;transition:color .3s}
.lever.on .lever__name{color:var(--mx-text-hi)}
.lever.lead .lever__name{color:#fff}
.lever__num{font-family:var(--mx-font-mono);font-size:.66rem;color:#5f5859;font-variant-numeric:tabular-nums;
  transition:color .3s}
.lever.on .lever__num{color:var(--mx-mute)}
.lever.lead .lever__num{color:var(--mx-accent-lite)}
.lever__track{height:3px;background:var(--mx-ink-3);position:relative;overflow:hidden}
.lever__fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--mx-text-hi);
  transition:width .62s cubic-bezier(.22,.61,.36,1),background .3s}
.lever.lead .lever__fill{background:var(--mx-accent-lite)}
@media (prefers-reduced-motion:reduce){.lever__fill{transition:none}}

/* ---------- tabs ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:2px;align-items:flex-end;margin-top:clamp(2.4rem,5vw,3.4rem)}
.tab{font-family:var(--mx-font-body);font-weight:500;text-transform:uppercase;letter-spacing:.15em;
  font-size:.64rem;color:var(--mx-mute);background:var(--mx-ink-2);border:1px solid var(--mx-hair);border-bottom:none;
  padding:.8rem 1.05rem .68rem;cursor:pointer;transition:color .18s,background .18s}
.tab:hover{color:var(--mx-text-hi);background:var(--mx-ink-3)}
.tab:focus-visible{outline:2px solid var(--mx-accent-lite);outline-offset:2px}
.tab[aria-selected="true"]{background:var(--mx-paper);color:var(--mx-ink);border-color:var(--mx-paper)}
.tab--q{font-family:var(--mx-font-display);font-size:.98rem;letter-spacing:.06em;color:var(--mx-accent-lite);
  padding:.62rem 1.4rem .5rem}
.tab--q[aria-selected="true"]{color:var(--mx-accent)}

/* ---------- the panel ---------- */
.panel{position:relative;margin-top:-1px;background:var(--mx-panel);color:var(--mx-text-hi);
  border:1px solid var(--mx-panel-line);display:grid;grid-template-columns:1.16fr .84fr;
  animation:rise .3s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel{animation:none}}
@media (max-width:880px){.panel{grid-template-columns:1fr}}

.pane{padding:clamp(2.2rem,4.2vw,3rem) clamp(1.5rem,3vw,2.3rem)}
.pane--l{border-right:1px solid var(--mx-panel-line);display:flex;flex-direction:column}
.pane--r{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
  background:var(--mx-panel-2)}
@media (max-width:880px){.pane--l{border-right:none;border-bottom:1px solid var(--mx-panel-line)}}

.stamp{font-family:var(--mx-font-mono);font-size:.57rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mx-mute-panel);margin-bottom:.6rem}
.panel__title{font-family:var(--mx-font-display);font-weight:400;text-transform:uppercase;color:#fff;
  font-size:clamp(1.85rem,4.4vw,2.9rem);line-height:.94;letter-spacing:.01em;margin:0}
.panel__rule{height:2px;background:var(--mx-accent-lite);margin:1rem 0 1.3rem}

.meta{display:grid;grid-template-columns:.85fr .7fr 1.35fr;gap:1.1rem;margin:0 0 1.6rem}
@media (max-width:880px){.meta{grid-template-columns:1fr 1fr}}
.meta dt{font-family:var(--mx-font-mono);font-size:.55rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mx-mute-panel);margin-bottom:.38rem}
.meta dd{margin:0;font-size:.85rem;line-height:1.45;font-weight:400;color:#d6d1d0}
.meta dd b{font-weight:600}
.meta dd .hot{color:var(--mx-accent-lite);font-weight:600}

.sub{font-family:var(--mx-font-mono);font-size:.57rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mx-accent-lite);margin:0 0 .95rem}

.seq{list-style:none;counter-reset:step;margin:0 0 1.7rem;padding:0;display:flex;flex-direction:column;gap:.72rem}
.seq li{counter-increment:step;position:relative;padding-left:2rem;font-size:.88rem;line-height:1.5;
  font-weight:400;color:#c9c4c3}
.seq li::before{content:counter(step);position:absolute;left:0;top:-2px;
  font-family:var(--mx-font-display);font-size:1.1rem;line-height:1.2;color:var(--mx-accent-lite)}

.note{margin-top:auto;padding-top:1.35rem;border-top:1px solid var(--mx-panel-line)}
.note b{display:block;font-family:var(--mx-font-mono);font-size:.55rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mx-accent-lite);margin-bottom:.5rem}
.note p{margin:0;font-size:.96rem;line-height:1.56;font-weight:400;color:#e7e3e2}

.plate svg{width:100%;max-width:300px;height:auto;display:block}
.wedge{stroke:var(--mx-panel-2);stroke-width:.7;transition:opacity .16s}
.plate.dim .wedge{opacity:.2}
.plate.dim .wedge.hot{opacity:1}
/* the rail answers the plate the way the plate already answered the rail */
.levers__grid.dim .lever{opacity:.3}
.levers__grid.dim .lever.hot{opacity:1;background:var(--mx-ink-2)}
.lever.hot .lever__name{color:#fff}
.lever.hot .lever__num{color:var(--mx-accent-lite)}
.lever.hot .lever__fill{background:var(--mx-accent-lite)}
.lever{transition:opacity .16s,background .16s}
.lever:focus-visible{outline:2px solid var(--mx-accent-lite);outline-offset:-2px}
/* labels never take the pointer — the wedge beneath owns the hover, so a hidden
   sliver label cannot steal it and light up the wrong lever */
.wlabel{pointer-events:none}
@media (prefers-reduced-motion:reduce){.lever{transition:none}}
.wlabel{font-family:var(--mx-font-mono);font-weight:500;font-variant-numeric:tabular-nums;
  pointer-events:none;transition:opacity .16s}
.plate.dim .wlabel{opacity:.14!important}
.plate.dim .wlabel.hot{opacity:1!important}

/* ---------- blank panel ---------- */
.blank .pane--l{justify-content:center}
.blank p{margin:0;font-size:1rem;line-height:1.66;font-weight:400;color:#c9c4c3}
.blank p + p{margin-top:1.05rem;color:#e7e3e2}
.blank strong{font-weight:600;color:#fff}

/* Back on the display face: the licensed Abolition carries '?', which the test cut
   did not — that gap was what used to drop this through to the system's Impact.
   Abolition is oblique, so its ink sits ~0.8 units right of the advance-based centre;
   the x in services-matrix.js is nudged to 49.18 to put the glyph on the true centre. */
.qmark{font-family:var(--mx-font-display);font-size:40px;fill:#fff}

/* CTA — the site's own chevron wipe (styles.css .btn--invite), driven by hover instead of scroll */
.cta{position:relative;overflow:hidden;display:inline-block;margin-top:2rem;align-self:flex-start;
  background:var(--mx-accent);color:#fff;text-decoration:none;font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:.72rem;padding:1.05rem 2.2rem;border:2px solid var(--mx-accent);
  transition:color .3s ease .06s}
.cta span{position:relative;z-index:1}
/* The wipe carries its own dark copy of the label. A bare --mx-paper sweep under
   white type made the words vanish mid-transition — the same trap the See All
   Services tile and the contact Send button hit. Backer and type arrive together. */
.cta .cta__wipe{position:absolute;inset:0;z-index:2;pointer-events:none;
  display:grid;place-items:center;
  background:var(--mx-paper);color:var(--mx-ink);
  clip-path:polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%);
  transition:clip-path .44s cubic-bezier(.2,.75,.2,1)}
.cta:hover .cta__wipe,.cta:focus-visible .cta__wipe{clip-path:polygon(0 0, 100% 0, 114% 50%, 100% 100%, 0 100%)}
.cta:focus-visible{outline:2px solid var(--mx-accent-lite);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.cta::before{transition:none}}