/* ==========================================================================
   thepathout.ai v2: Gallery White (TPO Brand Guide 2026)
   Ground: pure white. Ink: #1c1b1a. One accent: #843420 (clay, deepened).
   Type: DM Sans (display + body), JetBrains Mono 400 (labels, ledgers).
   Motion: few, deliberate, brand-anchored moments. Reduced-motion complete.
   Phase 1 scope: tokens, base, header, hero, negation band, rules, footer.
   ========================================================================== */

/* ---- Fonts (self-hosted, same files as v1) ---- */

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-variable.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ---- */

:root {
  --paper: #ffffff;
  --ground-alt: #f6f4ef;
  --ink: #1c1b1a;
  --svc-dark: #2a2018;   /* warm espresso ground for the What-we-do machine */
  --muted: #6b6358;
  --accent: #843420;
  --accent-deep: #6d2a19;
  --accent-on-ink: #e0a184;
  --line: #e8e3da;
  --line-on-ink: rgba(255, 255, 255, 0.18);

  --sans: "DM Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --container: 1120px;
}

/* ---- Base ---- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }

h1, h2, h3 {
  margin: 0 0 16px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

p { margin: 0 0 16px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--accent); color: var(--paper); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 16px;
  z-index: 100;
}
.skip-link:focus { left: 16px; top: 16px; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Widows/orphans, site-wide: balance headings so lines even out (no lone word on
   the last line), and keep body copy from ending on a single short word. A
   progressive enhancement; browsers without text-wrap just wrap as before. */
h1, h2, h3,
.hero-standfirst, .page-title, .chapter-title, .chapter-coda,
.th-h2, .th-statement, .neg-close, .pull, .mch-title,
.svc-hero-title, .svc-oneteam-title, .svc-oneteam-pull,
.cta-band h2, .cta-mid h2, .contact-h2, .opp-line, .promise-name {
  text-wrap: balance;
}
p, .chapter-lede, .chapter-body, .th-hero-lede, .page-lede,
.th-statement-sub, .th-step-desc, .rule-desc, .promise-desc, .market-close {
  text-wrap: pretty;
}

.section { padding: 96px 0; }
.section--alt { background: var(--ground-alt); }

/* ---- Shared type patterns ---- */

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}

.headline {
  font-size: clamp(33px, 4.4vw, 48px);
  letter-spacing: -0.025em;
  max-width: 24ch;
  margin-bottom: 24px;
}

.section-intro {
  font-size: 19px;
  color: var(--muted);
  max-width: 56ch;
  margin-bottom: 0;
}
.section-intro + .section-intro { margin-top: 18px; }

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

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  padding: 16px 32px;
  border-radius: 6px;
  text-decoration: none;
  background: var(--accent);
  color: var(--paper);
  transition: background-color 0.15s ease;
}
.btn:hover { background: var(--accent-deep); color: var(--paper); }

.btn--inverse { background: var(--paper); color: var(--accent); }
.btn--inverse:hover { background: var(--ground-alt); color: var(--accent-deep); }

.textlink {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.textlink::after { content: " \2192"; }
.textlink:hover { text-decoration: underline; }

/* ---- Header: the condensed floating ink pill (live-site pattern),
        brand presence kept big per Justin. Always visible while
        scrolling (Nivas 2026-07-07). Solid fill, no blur (anti-slop). ---- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 14px 20px 0;
  pointer-events: none;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
/* Tuck the floating nav up out of the way on scroll-down; JS toggles this. */
.site-header.is-hidden { transform: translateY(-135%); }

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 880px;
  padding: 10px 12px 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: var(--ink);
  box-shadow: 0 8px 30px rgba(28, 27, 26, 0.18);
  pointer-events: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand svg { flex: 0 0 auto; }

.brand-lockup { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--paper);
}
.brand-full {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
  white-space: nowrap;
}

.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav a:not(.btn) {
  font-size: 15px;
  font-weight: 500;
  color: var(--paper);
  text-decoration: none;
  transition: color 0.3s ease;
}
.site-nav a:not(.btn):hover { color: var(--accent-on-ink); }
.site-nav .btn { padding: 11px 18px; font-size: 15px; white-space: nowrap; }

/* the mark in the pill: default is the dark pill (white box, lifted clay arrow) */
.brand-mark path { transition: stroke 0.3s ease; }
.brand-mark .mk-box { stroke: var(--paper); }
.brand-mark .mk-arrow { stroke: var(--accent-on-ink); }
.brand-name, .brand-full { transition: color 0.3s ease; }
.site-header .container { transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }

/* Over a dark section the pill flips to light so it never blends in (Nivas).
   JS toggles .on-dark; it flips back over light sections. */
.site-header.on-dark .container {
  background: var(--paper);
  border-color: rgba(28, 27, 26, 0.10);
  box-shadow: 0 8px 30px rgba(28, 27, 26, 0.12);
}
.site-header.on-dark .brand-name { color: var(--ink); }
.site-header.on-dark .brand-full { color: var(--muted); }
.site-header.on-dark .site-nav a:not(.btn) { color: var(--ink); }
.site-header.on-dark .site-nav a:not(.btn):hover { color: var(--accent); }
.site-header.on-dark .brand-mark .mk-box { stroke: var(--ink); }
.site-header.on-dark .brand-mark .mk-arrow { stroke: var(--accent); }

/* Anchored sections clear the floating pill */
[id] { scroll-margin-top: 104px; }

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

.hero {
  position: relative;
  /* Top-anchored (as it was), just with more room top and bottom than the
     original. Sized so on landing only the marquee tag ("The busywork, you
     know the ones") peeks below the fold, not the scrolling items. */
  min-height: calc(100svh - 72px);
  padding: 180px 0 56px;
  box-sizing: border-box;
  overflow: hidden;
}

.hero-kicker {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}

.hero h1 {
  font-size: clamp(52px, 8.6vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
}

.hero h1 .accent-word { color: var(--accent); }

/* Arrival choreography. Deliberate loosening of the anti-slop motion rule,
   Nivas 2026-07-07 ("the goal is to have fun"): text may rise in on arrival,
   site-wide. Everything arrives once, nothing loops, and reduced motion
   renders every element simply there.

   Three tools:
   - .hero h1 .w        word-by-word headline rise on load
   - .enter (--d)       load-time rise for hero elements, delay via --d
   - [data-rise]        scroll-triggered rise, observer adds .risen */

.hero h1 .w { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .hero h1 .w {
    animation: rise-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(120ms + var(--i, 0) * 85ms);
  }

  .enter {
    animation: rise-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--d, 0ms);
  }

  @keyframes rise-in {
    from { opacity: 0; transform: translateY(0.35em); }
    to   { opacity: 1; transform: none; }
  }

  .js [data-rise] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .js [data-rise].risen { opacity: 1; transform: none; }

  /* The mark's arrow draws itself on load: the path, drawing in. */
  .hero-mark .pa {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: draw-path 0.9s ease 500ms forwards;
  }
  @keyframes draw-path { to { stroke-dashoffset: 0; } }
}

.hero-standfirst {
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 500;
  letter-spacing: -0.01em;
  max-width: 30ch;
  margin-bottom: 40px;
}

.hero-lede {
  font-size: 19px;
  color: var(--muted);
  max-width: 54ch;
  margin-bottom: 36px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

/* The restyled mark: ink box at a whisper, full-strength clay arrow.
   The single brand graphic in the hero. Desktop only. */
.hero-mark {
  position: absolute;
  right: 4vw;
  top: 50%;
  transform: translateY(-50%);
  width: 380px;
  pointer-events: none;
  z-index: -1;
}
.hero-mark path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hero-mark .bx { stroke: var(--ink); stroke-opacity: 0.1; stroke-width: 4; }
.hero-mark .pa { stroke: var(--accent); stroke-width: 4; }

@media (max-width: 1020px) { .hero-mark { display: none; } }

/* ---- Negation band: the set piece. Ink ground, lines struck ON SCROLL ---- */

.negation {
  background: var(--ink);
  color: var(--paper);
  padding: 96px 0;
}

.negation .eyebrow { color: var(--accent-on-ink); }

.neg-line {
  font-size: clamp(28px, 4.6vw, 52px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-on-ink);
  color: rgba(255, 255, 255, 0.62);
}
.neg-line:first-of-type { border-top: 1px solid var(--line-on-ink); }

/* The strike is a drawn rule (flat color painted as a background band), not
   text-decoration, so its width can animate left to right. Painted per line
   fragment, so it wraps correctly on small screens. Without JS (no .js on
   <html>) the strike renders complete: never a broken state. */
.neg-line s {
  text-decoration: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(var(--accent-on-ink), var(--accent-on-ink));
  background-repeat: no-repeat;
  background-position: 0 0.65em;
  background-size: 100% 0.13em;
}

/* Both endpoints are percentages: a 0 length to 100% transition is
   non-interpolable and would snap instead of sweep. */
.js .neg-line s {
  background-size: 0% 0.13em;
  transition: background-size 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.js .neg-line.struck s { background-size: 100% 0.13em; }

@media (prefers-reduced-motion: reduce) {
  .js .neg-line s { background-size: 100% 0.13em; transition: none; }
}

.neg-close {
  margin: 48px 0 0;
  font-size: clamp(22px, 3vw, 33px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--paper);
  max-width: 30ch;
}

/* The compressed value prop: three promises as drawing-glyph columns on the
   ink ground. Horizontal (not a stack) and glyph-led, so it reads as a fresh
   beat after the vertical struck negation lines above. One hairline separates
   the group from the neg-close; no per-item dividers (those would echo the
   negation). Each glyph draws itself on as its column enters, staggered. */
.promises {
  margin-top: clamp(52px, 7vh, 72px);
  padding-top: clamp(40px, 5vh, 56px);
  border-top: 1px solid var(--line-on-ink);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
.promise-glyph {
  width: 54px;
  height: 54px;
  display: block;
  margin-bottom: 26px;
  overflow: visible;
}
.pg-draw {
  fill: none;
  stroke: var(--accent-on-ink);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.js .pg-draw { transition: stroke-dashoffset 1s ease; }
@media (prefers-reduced-motion: reduce) { .js .pg-draw { transition: none; } }
.promise-name {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--paper);
}
.promise-desc {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
@media (max-width: 760px) {
  .promises { grid-template-columns: 1fr; gap: 44px; padding-top: 44px; }
  .promise-glyph { margin-bottom: 18px; }
}

/* ==========================================================================
   CHAPTER: the one skeleton every content section obeys. A left rail holds
   the section marker; the path spine runs down it, threading the whole page
   so the sections read as one piece. The main column holds the content, and
   every list in it uses the single .row module below. No per-section grids.
   ========================================================================== */

.chapter { position: relative; padding: 124px 0; }
.chapter .container {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  column-gap: 88px;
}

.chapter-rail { position: relative; }

/* the path spine: a hairline in the brand accent, extended through the
   section padding so consecutive chapters connect into one continuous path */
.chapter-rail::before {
  content: "";
  position: absolute;
  left: 3px;
  top: -96px;
  bottom: -96px;
  width: 2px;
  background: var(--accent);
  opacity: 0.22;
}

.chapter-marker {
  position: sticky;
  top: 120px;
  margin: 0;
  padding: 4px 0 0 26px;
}
.chapter-marker::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.chapter-num {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 6px;
}
.chapter-label {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
  max-width: 13ch;
}

.chapter-main { max-width: 700px; padding-bottom: 4px; }
.chapter-main--wide { max-width: 860px; }

.chapter-title {
  font-size: clamp(31px, 4.1vw, 46px);
  letter-spacing: -0.025em;
  line-height: 1.06;
  max-width: 20ch;
  margin: 0 0 36px;
}
.chapter-lede {
  font-size: 20px;
  line-height: 1.62;
  color: var(--ink);
  max-width: 54ch;
  margin: 0 0 30px;
}
.chapter-body {
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 58ch;
  margin: 0 0 30px;
}
.chapter-main > :last-child { margin-bottom: 0; }
.chapter-coda {
  margin: 40px 0 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
  max-width: 48ch;
}
.chapter-more { display: inline-block; margin-top: 40px; }
.chapter-cta { margin-top: 36px; }

/* §01 opportunity: the four outcomes as nodes on a short path, each revealed on
   scroll (data-rise). Generous vertical rhythm gives the section the height it
   needs for the rail's sticky marker and the accent spine to travel and show
   off. Two-tone lines (muted setup, ink payoff) add design without extra words. */
.opp-list {
  list-style: none;
  margin: 26px 0 10px;
  padding: 0;
}
.opp-item {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: clamp(24px, 4.8vh, 54px) 0;
}
/* Each outcome branches off the main path: a line drawn from the chapter spine
   (the far-left rail) out to this item's dot. The negative left offset reaches
   back across the rail (210px) + the column gap (88px) to start at the spine;
   it draws left-to-right (scaleX from the spine) as the item scrolls in. */
.opp-branch {
  position: absolute;
  /* align with the dot's centre: the item's top padding, then the dot's
     margin-top (9px) plus its radius (6px), less half the line (1px) */
  top: calc(clamp(24px, 4.8vh, 54px) + 14px);
  left: calc(-210px - 88px + 4px);
  width: calc(210px + 88px + 2px);
  height: 2px;
  background: var(--accent);
  opacity: 0.5;
  transform: scaleX(0);
  transform-origin: left center;
}
/* The branch is now driven straight from scroll position (JS, opp module): it
   extends as the chapter marker descends toward this item's dot and retracts as
   you scroll back up. No CSS transition — that would lag and chase the scroll. */
@media (prefers-reduced-motion: reduce) {
  .js .opp-branch { transform: scaleX(1); }
}
.opp-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 9px;
  position: relative;
  z-index: 1;
}
.opp-line {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.14;
  color: var(--ink);
  max-width: 24ch;
}
.opp-lead { color: var(--muted); font-weight: 400; }
/* the payoff lights up in clay only while its node is the one you're at (JS adds
   .active to the nearest item); it fades back as you move past or above it */
.opp-pay { transition: color 0.4s ease; }
.opp-item.active .opp-pay { color: var(--accent); }
/* The opportunity marker masks only the branch segment behind its label: a soft
   white scrim painted into the marker's own background, sitting above the
   branches. It stays transparent at the far left (so the spine and each
   branch's origin still show) and fades back to transparent past the label (so
   the branch reappears on its way to the dot). Result: a branch reads as
   passing behind the label, and only that overlapped span fades out. */
#bill .chapter-marker {
  z-index: 2;
  background: linear-gradient(
    to right,
    transparent 8px,
    var(--paper) 24px,
    var(--paper) 146px,
    transparent 176px
  );
}
@media (max-width: 720px) {
  .opp-item { grid-template-columns: 18px minmax(0, 1fr); gap: 18px; padding: 26px 0; }
  .opp-dot { width: 10px; height: 10px; }
}

/* The one big focal line in a text-heavy chapter. Typographic emphasis,
   NOT a left-accent panel: the memorable phrase carries the accent. */
.pull {
  font-size: clamp(25px, 3.1vw, 36px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 22ch;
  margin: 40px 0;
}
.pull em { color: var(--accent); font-style: normal; }

/* A chapter on ink: the origin story, set apart on a dark ground. Text, marker,
   spine, and links all flip to their on-ink values. */
.chapter--ink { background: var(--ink); color: var(--paper); }
.chapter--ink .chapter-rail::before { background: var(--accent-on-ink); opacity: 0.32; }
.chapter--ink .chapter-marker::before { background: var(--accent-on-ink); }
.chapter--ink .chapter-num { color: var(--accent-on-ink); }
.chapter--ink .chapter-label { color: rgba(255, 255, 255, 0.55); }
.chapter--ink .chapter-title { color: var(--paper); }
.chapter--ink .chapter-lede { color: rgba(255, 255, 255, 0.82); }
.chapter--ink .chapter-body { color: rgba(255, 255, 255, 0.6); }
.chapter--ink .pull { color: var(--paper); }
.chapter--ink .pull em { color: var(--accent-on-ink); }
.chapter--ink .chapter-more { color: var(--accent-on-ink); }
.chapter--ink .chapter-more:hover { color: var(--paper); }

/* A chapter on the warm espresso ground (the "machine" mocha). Same skeleton as
   chapter--ink, tuned for the mocha bg: accents flip to the on-ink clay, and the
   move dots border in the mocha so the spine reads cleanly through them. */
.chapter--mocha { background: var(--svc-dark); color: var(--paper); }
.chapter--mocha .chapter-rail::before { background: var(--accent-on-ink); opacity: 0.3; }
.chapter--mocha .chapter-marker::before { background: var(--accent-on-ink); }
.chapter--mocha .chapter-num { color: var(--accent-on-ink); }
.chapter--mocha .chapter-label { color: rgba(255, 255, 255, 0.55); }
.chapter--mocha .chapter-title { color: var(--paper); }
.chapter--mocha .chapter-lede { color: rgba(255, 255, 255, 0.82); }
.chapter--mocha .twopath-lead { color: var(--accent-on-ink); }
.chapter--mocha .phase-when { color: var(--accent-on-ink); }
.chapter--mocha .phase-name { color: var(--paper); }
.chapter--mocha .phase-desc { color: rgba(255, 255, 255, 0.7); }
.chapter--mocha .timeline::before { background: var(--accent-on-ink); opacity: 0.34; }
.chapter--mocha .phase::before { background: var(--accent-on-ink); border-color: var(--svc-dark); }
.chapter--mocha .svc-teaser-link { color: var(--accent-on-ink); }
.chapter--mocha .svc-teaser-link:hover { color: var(--paper); }
/* the mobile accordion chevron: white on the mocha ground, not the dark clay */
.chapter--mocha .phase-chev { border-color: rgba(255, 255, 255, 0.75); }

/* Concrete services under the "two jobs" framing, so What-we-do names real work
   instead of staying abstract. Two columns mirror the two jobs; accent ticks. */
.what-svcs {
  margin: 40px 0 34px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 64px;
}
.what-svcs-col { border-top: 2px solid var(--accent); padding-top: 20px; }
.what-svcs-head {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}
.what-svcs-list { list-style: none; margin: 0; padding: 0; }
.what-svcs-list li {
  position: relative;
  padding: 0 0 0 20px;
  margin: 0 0 12px;
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--ink);
  line-height: 1.4;
}
.what-svcs-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
@media (max-width: 640px) {
  .what-svcs { grid-template-columns: 1fr; gap: 30px; }
}

/* The single row module: cost mechanism and pricing use this. Label left,
   body right. No boxes, no bespoke grids. */
.rows { margin-top: 52px; border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.6fr);
  column-gap: 64px;
  row-gap: 12px;
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
}
.row-label { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.row-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.row-tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.row-body > p { margin: 0 0 16px; font-size: 17px; line-height: 1.6; color: var(--ink); }
.row-body > p:last-child { margin-bottom: 0; }
.row-meta { color: var(--muted); font-size: 16px; }
.row-meta-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 6px;
}
/* ---- The engagement timeline: three stops on one path. The path turns
        horizontal here to walk through the phases (echoing the spine). ---- */

.timeline {
  list-style: none;
  margin: 64px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  position: relative;
}
/* the move rule reads as a branch OFF the main spine: it starts at the spine
   (left of the rail column) and runs right THROUGH the three move dots, which
   sit at the top of each column. left = -(rail 210 + gap 88) + spine offset. */
.timeline::before {
  content: "";
  position: absolute;
  top: 5px;
  left: calc(4px - 210px - 88px);
  right: 5px;
  height: 2px;
  background: var(--accent);
  opacity: 0.32;
}

.phase { position: relative; }
.phase::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--ground-alt);
}
.phase-when {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 24px 0 12px;
}
.phase-name {
  font-size: clamp(23px, 2.5vw, 29px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 14px;
}
.phase-desc {
  font-size: 16px;
  line-height: 1.58;
  color: var(--muted);
  margin: 0;
}

/* The build detail sits full-width below the three phases, as its own
   horizontal path, so it never unbalances the timeline columns. */
.build-strip {
  margin-top: 48px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.build-strip-label {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 26px;
}
.build-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
}
.build-flow li {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 20px 16px 0 0;
  border-top: 2px solid var(--accent);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.3;
}
.build-flow li::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.build-strip-note {
  margin: 24px 0 0;
  font-size: 14px;
  color: var(--muted);
}


/* ---- The busywork marquee: bigger, funnier, full-bleed ---- */

.marquee-band {
  background: var(--ground-alt);
  padding: 30px 0 34px;
  overflow: hidden;
}

.marquee-tag {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 24px;
  padding: 0 24px;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

.marquee-viewport { white-space: nowrap; }
/* With JS, the viewport itself scrolls, so the visitor can grab or swipe to
   scrub the busywork faster; JS drives the ambient auto-scroll (below). The
   scrollbar is hidden and horizontal over-scroll is contained to the band. */
.js .marquee-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.js .marquee-viewport::-webkit-scrollbar { display: none; }
.js .marquee-viewport.grabbing { cursor: grabbing; }

.marquee-track {
  display: inline-flex;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* the dot between busywork items: accent-colored, with room so each line reads
   as its own beat rather than blurring into the next */
.mq-sep { color: var(--accent); font-weight: 400; margin: 0 0.9em; }

/* the tag's separator: a downward caret (a rotated ^, so it renders in any font) */
.tag-caret { display: inline-block; transform: rotate(180deg); margin: 0 0.3em; }

/* No-JS fallback only: the CSS transform loop. With JS on, the JS module drives
   scrollLeft instead (so the marquee is also grab/swipe scrubbable). */
@media (prefers-reduced-motion: no-preference) {
  html:not(.js) .marquee-track { animation: marquee 220s linear infinite; }
  @keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}

/* ---- Mid-page CTA: a centered moment that fills the width ---- */

.cta-mid { background: var(--ground-alt); padding: 120px 0; text-align: center; }
.cta-mid .eyebrow { margin-bottom: 22px; }
.cta-mid h2 {
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: -0.03em;
  line-height: 1.04;
  max-width: 18ch;
  margin: 0 auto 26px;
}
.cta-mid p { font-size: 20px; color: var(--muted); max-width: 54ch; margin: 0 auto 40px; }
.cta-mid .cta-actions { justify-content: center; }
.cta-actions { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }

/* ---- Final CTA band: text left, the mark large on the right. Fills the
        width and bookends the hero (text left, mark right). ---- */

.cta-band { background: var(--accent); color: var(--paper); padding: 116px 0; }
.cta-band-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: center;
}

/* The mark at scale: the path leaving the box. Bookends the hero mark. */
.way-out {
  display: block;
  width: min(300px, 100%);
  height: auto;
  justify-self: center;
}
.way-out path { stroke-linecap: round; stroke-linejoin: round; }
.cta-band h2 {
  font-size: clamp(33px, 4.4vw, 48px);
  letter-spacing: -0.025em;
  max-width: 20ch;
  margin-bottom: 24px;
}
.cta-band p { font-size: 19px; max-width: 52ch; margin-bottom: 40px; }
.cta-band .textlink { color: var(--paper); }
.cta-band .textlink:hover { color: var(--paper); text-decoration: underline; }

/* ==========================================================================
   Contact page
   ========================================================================== */

/* Two-column hero: title left, lede right, bottom-aligned, so it fills
   the width instead of leaving the right half empty. */
.page-hero { padding: 152px 0 48px; }
.page-hero .container {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  column-gap: 64px;
  align-items: end;
}
.page-hero .eyebrow { grid-column: 1 / -1; margin-bottom: 12px; }
.page-title {
  grid-column: 1;
  font-size: clamp(44px, 7.4vw, 92px);
  letter-spacing: -0.035em;
  line-height: 0.97;
  margin: 0;
}
.page-lede {
  grid-column: 2;
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 44ch;
  margin: 0 0 12px;
}
@media (max-width: 860px) {
  .page-hero .container { grid-template-columns: 1fr; }
  .page-title { grid-column: 1; }
  .page-lede { grid-column: 1; max-width: 60ch; margin: 22px 0 0; }
}

.contact-body { padding-top: 44px; }
.contact-h2 {
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.contact-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 0 26px;
}

.book-block { margin-bottom: 88px; }
.cal-embed {
  margin-top: 8px;
  min-height: 600px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
}
.caption { font-size: 15px; color: var(--muted); margin: 16px 0 0; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
}

/* Form: hairline fields, no cards, no boxes-with-left-borders */
.field { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field input,
.field textarea {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  width: 100%;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(132, 52, 32, 0.12);
}
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#contact-form .btn { margin-top: 4px; border: 0; cursor: pointer; }
#contact-form .btn[disabled] { opacity: 0.6; cursor: default; }
.form-note { font-size: 14px; color: var(--muted); margin: 16px 0 0; }
.form-note--ok { color: var(--accent); }
.form-note--err { color: #a5342a; }

/* ==========================================================================
   Partner / "How we think" page: a centered manifesto. Its own structure,
   NOT the homepage spine. Same brand, type, path motif, and fun.
   ========================================================================== */

.pov-hero { padding: 176px 0 100px; text-align: center; }
.pov-title {
  font-size: clamp(42px, 6.6vw, 92px);
  letter-spacing: -0.035em;
  line-height: 0.98;
  max-width: 16ch;
  margin: 22px auto 30px;
}
.pov-lede {
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 48ch;
  margin: 0 auto;
}

.pov-section { padding: 112px 0; }
.pov-section--alt { background: var(--ground-alt); }

.pov-head { text-align: center; max-width: 42ch; margin: 0 auto; }
.pov-head .eyebrow { margin-bottom: 18px; }
.pov-h2 {
  font-size: clamp(31px, 4.2vw, 50px);
  letter-spacing: -0.028em;
  line-height: 1.05;
  margin: 0 0 20px;
}
.pov-head p { font-size: 19px; line-height: 1.6; color: var(--muted); margin: 0; }

/* the giant centered statement */
.pov-statement {
  text-align: center;
  font-size: clamp(32px, 5.4vw, 64px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  max-width: 15ch;
  margin: 72px auto 0;
}
.pov-statement em { color: var(--accent); font-style: normal; }
.pov-statement-sub {
  text-align: center;
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
  margin: 28px auto 0;
}
.pov-lead-in {
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 40ch;
  margin: 64px auto 0;
}

/* mechanism: three across */
.mechanism {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  max-width: 940px;
  margin: 56px auto 0;
}
.mech { text-align: center; }
.mech-k {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.mech h3 { font-size: 22px; letter-spacing: -0.015em; margin: 0 0 10px; }
.mech p { font-size: 16px; line-height: 1.55; color: var(--muted); margin: 0; }

/* The 4 Paths: one route fans into four, then four blocks */
.path-fan { display: block; width: min(400px, 82%); height: auto; margin: 56px auto 4px; }
.fan-node { opacity: 0.9; }

.paths {
  list-style: none;
  margin: 40px auto 0;
  padding: 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 72px;
}
.path {
  position: relative;
  padding: 34px 8px 8px 0;
  border-top: 1px solid var(--line);
}
.path::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--ground-alt);
}
.path-index {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.path-name { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; margin: 0 0 12px; }
.path-promise {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin: 0 0 14px;
}
.path-desc { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 42ch; }
.paths-note {
  text-align: center;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  margin: 48px auto 0;
}

/* The gap: a two-circle Venn, centered */
.venn-wrap { max-width: 620px; margin: 56px auto 0; text-align: center; }
.venn { display: block; width: 100%; height: auto; }
.venn-c { fill: rgba(132, 52, 32, 0.12); stroke: var(--accent); stroke-width: 2; }
.venn-lobe {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  fill: var(--ink);
}
.venn-center-a {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.04em;
  fill: var(--accent);
}
.venn-center-b { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; fill: var(--muted); }
.venn-caption { font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 46ch; margin: 32px auto 0; }

/* Centered close variant */
.cta-band--center { text-align: center; }
.cta-band--center h2 { margin-left: auto; margin-right: auto; }
.cta-band--center p { margin-left: auto; margin-right: auto; }
.cta-band--center .cta-actions { justify-content: center; }
.way-out--center { width: 84px; margin: 0 auto 32px; }

/* Fun: fan and Venn draw themselves in on arrival. Guarded so no-JS and
   reduced-motion render them complete, never a broken state. */
@media (prefers-reduced-motion: no-preference) {
  .js .path-fan path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .path-fan.risen path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.8s ease;
  }
  .js .path-fan path:nth-child(2) { transition-delay: 0.15s; }
  .js .path-fan path:nth-child(3) { transition-delay: 0.25s; }
  .js .path-fan path:nth-child(4) { transition-delay: 0.35s; }
  .js .path-fan path:nth-child(5) { transition-delay: 0.45s; }
  .js .path-fan .fan-node { opacity: 0; transition: opacity 0.3s ease 0.7s; }
  .js .path-fan.risen .fan-node { opacity: 0.9; }

  .js .venn-c { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js [data-rise].risen .venn-c,
  .js .venn-wrap.risen .venn-c { stroke-dashoffset: 0; transition: stroke-dashoffset 1s ease; }
}

/* ==========================================================================
   PARTNER OPTION A: THE RECEIPT
   The page as a financial instrument. The differentiator (we treat your AI
   bill as ours to shrink) becomes the design system: itemized ledgers, mono
   figures, double-rule totals, cost bars drawn to scale. Zero diagrams.
   ========================================================================== */

.ra-hero { padding: 158px 0 88px; }
.ra-hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  column-gap: 96px;
  align-items: end;
}
.ra-hero h1 {
  font-size: clamp(46px, 6.6vw, 84px);
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 20px 0 26px;
}
.ra-hero-lede {
  font-size: 20px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
  margin: 0;
}

/* the document block: an invoice header, set in type */
.ra-doc {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 6px 0 2px;
}
.ra-doc-row {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 24px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}
.ra-doc-row:first-child { border-top: 0; }
.ra-doc-k { color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.ra-doc-v { text-align: right; color: var(--ink); }
.ra-doc-v em { font-style: normal; color: var(--accent); }

.ra-section { padding: 116px 0; }
.ra-section--alt { background: var(--ground-alt); }
.ra-section--ink { background: var(--ink); color: var(--paper); }

.ra-head { max-width: 700px; }
.ra-head .eyebrow { margin-bottom: 20px; }
.ra-h2 {
  font-size: clamp(32px, 4.4vw, 52px);
  letter-spacing: -0.028em;
  line-height: 1.03;
  margin: 0 0 22px;
  max-width: 20ch;
}
.ra-head p {
  font-size: 19px;
  line-height: 1.62;
  color: var(--muted);
  margin: 0;
  max-width: 54ch;
}
.ra-section--ink .ra-head p { color: rgba(255, 255, 255, 0.72); }

/* THE RECEIPT: the same week of work, priced two ways. Both bars share one
   full-width lane so the length contrast IS the argument. */
.receipt { margin-top: 64px; }
.receipt-cols {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap: 56px;
  padding: 0 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.receipt-legend { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); text-transform: none; }
.receipt-legend i {
  display: inline-block;
  width: 20px;
  height: 9px;
  margin: 0 8px 0 0;
  font-style: normal;
}
.receipt-legend .lg-ink i { background: var(--ink); }
.receipt-legend .lg-tpo i { background: var(--accent); }
.receipt-legend span { margin-right: 26px; white-space: nowrap; }

.receipt-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap: 56px;
  align-items: center;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.receipt-item { margin: 0; }
.receipt-item .ri-name { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.receipt-item .ri-note {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
}

/* the two prices, stacked in one lane, lengths comparable at a glance */
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar { position: relative; height: 12px; }
.bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--w) * 1%);
  background: var(--ink);
}
.bar--tpo i { background: var(--accent); }
.js [data-rise] .bar i { width: 0; transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; }
.js [data-rise] .bar--tpo i { transition-delay: 0.4s; }
.js [data-rise].risen .bar i { width: calc(var(--w) * 1%); }
@media (prefers-reduced-motion: reduce) {
  .js [data-rise] .bar i { width: calc(var(--w) * 1%); transition: none; }
}

.receipt-total {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap: 56px;
  align-items: baseline;
  margin-top: -1px;
  padding: 26px 0 0;
  border-top: 3px double var(--ink);
}
.receipt-total .rt-label { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.receipt-total .rt-value {
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--accent);
  margin: 0;
}

/* standing arrangement: the mechanism, as contract clauses */
.clauses {
  margin-top: 88px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
}
.clause { border-top: 2px solid var(--ink); padding-top: 20px; }
.clause-k {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.clause h3 { font-size: 21px; letter-spacing: -0.015em; margin: 0 0 10px; }
.clause p { font-size: 16px; line-height: 1.58; color: var(--muted); margin: 0; }

/* the 4 paths, as itemized value */
.ra-paths { margin-top: 56px; border-top: 1px solid var(--line); }
.ra-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  column-gap: 96px;
  row-gap: 10px;
  padding: 44px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.ra-path::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.ra-path-index {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.ra-path-name {
  font-size: clamp(36px, 4.6vw, 58px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0;
}
.ra-path-promise {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--accent);
  margin: 6px 0 12px;
}
.ra-path-desc { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 48ch; }
.ra-paths-note {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  margin: 28px 0 0;
}

/* the market, on ink: three ways it is usually sold, and ours */
.market { margin-top: 56px; border-top: 1px solid var(--line-on-ink); }
.market-row {
  display: grid;
  grid-template-columns: minmax(0, 296px) 1fr;
  column-gap: 64px;
  row-gap: 8px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line-on-ink);
}
.market-row .mk-who {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
}
.market-row .mk-what { font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.5); margin: 0; max-width: 52ch; }
.market-row--tpo .mk-who { color: var(--paper); }
.market-row--tpo .mk-what { color: rgba(255, 255, 255, 0.85); }
.market-row--tpo .mk-who::after {
  content: "\2190 us";
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--accent-on-ink);
  margin-left: 14px;
  vertical-align: middle;
}
.market-close {
  margin: 44px 0 0;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--paper);
  max-width: 30ch;
}

/* balance due: the receipt's closing joke, above the CTA */
.balance-line {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 18px;
}
.balance-line em { font-style: normal; color: var(--paper); }

/* ==========================================================================
   PARTNER OPTION B: THE THRESHOLD
   Built from the mark's own geometry. The page starts inside the box (ink),
   passes through, and ends outside (white). The four paths assemble the
   arrow that leaves the box. The scroll is the way out.
   ========================================================================== */

/* HERO: you start inside the box. A framed enclosure on ink, the opening
   cut into the right edge, a stub of the arrow already pointing out. Centered,
   so it can never read as the homepage's left hero. */
.th-hero { background: var(--ink); color: var(--paper); padding: 148px 0 124px; }
.th-hero-frame {
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 36px;
  padding: clamp(52px, 6.5vw, 100px) clamp(40px, 6vw, 92px);
  text-align: center;
}
.th-hero-frame::before {                 /* punch the opening into the bottom edge */
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  height: 6px;
  width: clamp(64px, 11vw, 108px);
  background: var(--ink);
}
.th-hero-stub {                          /* the arrow, already starting to leave, downward */
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.th-hero-stub svg { height: 52px; width: auto; display: block; overflow: visible; transition: transform 0.25s ease; }
.th-hero-stub:hover svg, .th-hero-stub:focus-visible svg { transform: translateY(6px); }
.th-hero-stub:focus-visible { outline: 2px solid var(--accent-on-ink); outline-offset: 3px; border-radius: 10px; }
.th-hero-stub path { fill: none; stroke: var(--accent-on-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* With JS, the frame outline is drawn as an SVG overlay (so it can animate on
   like the mark elsewhere); the CSS border becomes the no-JS fallback. */
.js .th-hero-frame { border-color: transparent; isolation: isolate; }
.th-frame-draw {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; z-index: -1; pointer-events: none;
}
.th-frame-draw path {
  fill: none; stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.th-hero .eyebrow { color: var(--accent-on-ink); margin-bottom: 20px; }
.th-hero h1 {
  font-size: clamp(44px, 6.2vw, 82px);
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0 auto 26px;
  max-width: 15ch;
}
.th-hero h1 .accent-word { color: var(--accent-on-ink); white-space: nowrap; }
.th-hero-lede {
  font-size: 20px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 42ch;
  margin: 0 auto;
}

/* THE COST: the statement, and a gauge that redlines for a trivial job */
.th-cost {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: 72px;
  align-items: center;
  margin-top: 68px;
}
.th-cost .th-statement { margin: 0; }
.th-cost .th-statement-sub { margin: 24px 0 0; }

.th-gauge { text-align: center; }
.gauge { width: 100%; max-width: 320px; height: auto; margin: 0 auto; overflow: visible; }
.gauge-dial { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 6; stroke-linecap: round; }
.gauge-redline { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.gauge-need-mark { stroke: rgba(255, 255, 255, 0.55); stroke-width: 3; stroke-linecap: round; }
.gauge-needle-g { transform-box: view-box; transform-origin: 110px 112px; transform: rotate(-86deg); }
.js .th-gauge.risen .gauge-needle-g { transform: rotate(60deg); transition: transform 1.15s cubic-bezier(0.34, 1.3, 0.64, 1); }
@media (prefers-reduced-motion: reduce) { .gauge-needle-g { transform: rotate(60deg); } }
.gauge-needle { stroke: var(--paper); stroke-width: 4; stroke-linecap: round; }
.gauge-hub { fill: var(--paper); }
.gauge-legend {
  margin: 22px 0 0;
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.58);
}
.gauge-legend b { font-weight: 400; color: rgba(255, 255, 255, 0.9); }
.gauge-legend .gl-red b { color: var(--accent-on-ink); }

/* the race-car engine bolted to a lawnmower: the metaphor, drawn */
.th-engine { text-align: center; }
.engine-art { width: 100%; max-width: 360px; height: auto; margin: 0 auto; overflow: visible; }
.eng { fill: none; stroke: var(--accent-on-ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.eng-bore { fill: none; stroke: var(--accent-on-ink); stroke-width: 2; stroke-linecap: round; opacity: 0.38; }
.eng-piston { fill: var(--accent-on-ink); stroke: none; }
.eng-hub { fill: var(--accent-on-ink); stroke: none; opacity: 0.55; }
.mw-part { fill: none; stroke: rgba(255, 255, 255, 0.44); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.mw-hub { fill: rgba(255, 255, 255, 0.44); stroke: none; }
.mw-ground { stroke: rgba(255, 255, 255, 0.2); stroke-width: 2; stroke-linecap: round; }
.mw-grass { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 2.5; stroke-linecap: round; }
.mw-clip { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.eng-puff { fill: rgba(255, 255, 255, 0.28); stroke: none; opacity: 0; }
.mw-motion { fill: none; stroke: rgba(255, 255, 255, 0.36); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* the tractor comes alive as it scrolls into view: the V8 shakes with far too
     much power, grass clippings arc out, exhaust puffs off the headers, and the
     ground streaks past because it is moving far too fast */
  .th-engine.risen .eng-group { animation: engRev 0.14s linear infinite; }
  .th-engine.risen .mw-motion {
    animation: groundMove 0.55s linear infinite;
    animation-delay: calc(var(--i) * 0.11s);
  }
  .th-engine.risen .mw-clip {
    animation: clipFly 1.15s ease-out infinite;
    animation-delay: calc(var(--i) * 0.16s);
  }
  .th-engine.risen .eng-puff {
    animation: puff 1s ease-out infinite;
    animation-delay: calc(var(--i) * 0.32s);
    transform-box: fill-box; transform-origin: center;
  }
  @keyframes engRev {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(0.6px, -0.5px); }
    50% { transform: translate(-0.5px, 0.4px); }
    75% { transform: translate(0.5px, 0.5px); }
  }
  @keyframes clipFly {
    0% { transform: translate(0, 0); opacity: 0; }
    20% { opacity: 0.9; }
    100% { transform: translate(12px, -16px); opacity: 0; }
  }
  @keyframes puff {
    0% { transform: translate(0, 0) scale(0.5); opacity: 0.5; }
    100% { transform: translate(-9px, -11px) scale(1.5); opacity: 0; }
  }
  @keyframes groundMove {
    0% { transform: translateX(-10px); opacity: 0; }
    30% { opacity: 0.55; }
    100% { transform: translateX(26px); opacity: 0; }
  }
}
/* legend: a filled clay swatch = engine, an outlined swatch = the job */
.engine-legend {
  margin: 24px 0 0;
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.66);
}
.el-item { display: inline-flex; align-items: center; gap: 9px; }
.el-sw { width: 13px; height: 13px; border-radius: 3px; flex: none; }
.el-sw--eng { background: var(--accent-on-ink); }
.el-sw--job { border: 1.5px solid rgba(255, 255, 255, 0.5); }

.th-section { padding: 116px 0; }
.th-section--ink { background: var(--ink); color: var(--paper); }
.th-section--alt { background: var(--ground-alt); }

/* threshold header: the section title framed by a corner of the box */
.th-head { position: relative; max-width: 720px; padding: 34px 0 0 38px; }
.th-corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 88px;
  height: 88px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  border-top-left-radius: 26px;
  opacity: 0.75;
  pointer-events: none;
}
.th-section--ink .th-corner { border-color: var(--accent-on-ink); }
.th-section--ink .eyebrow { color: var(--accent-on-ink); }
.th-h2 {
  font-size: clamp(32px, 4.4vw, 52px);
  letter-spacing: -0.028em;
  line-height: 1.03;
  margin: 0 0 22px;
  max-width: 20ch;
}
.th-head .eyebrow { margin-bottom: 18px; }
.th-head p { font-size: 19px; line-height: 1.62; margin: 0; max-width: 54ch; }
.th-section--ink .th-head p { color: rgba(255, 255, 255, 0.72); }
.th-section:not(.th-section--ink) .th-head p { color: var(--muted); }

.th-statement {
  font-size: clamp(30px, 4.6vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 18ch;
  margin: 64px 0 0 38px;
}
.th-statement em { font-style: normal; color: var(--accent-on-ink); }
.th-statement-sub {
  font-size: 18px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.66);
  max-width: 52ch;
  margin: 24px 0 0 38px;
}

/* mechanism on ink: ledger rows (the homepage rules pattern) */
.th-mech { margin: 72px 0 0 38px; max-width: 860px; }
.th-mech .rule-row:last-child { border-bottom: 1px solid var(--line-on-ink); }

/* THE 4 PATHS: they build ONE arrow. A pinned mark assembles leg by leg as
   you scroll each path; on Adoption the arrow breaks out of the box. */
.th-assembly {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  column-gap: 88px;
  margin-top: 56px;
}
.th-assembly-visual { position: sticky; top: 132px; align-self: start; }
.assembly-mark { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.am-draw { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
/* draw is driven from JS via measured path lengths; this only times it */
.js .am-draw { transition: stroke-dashoffset 0.55s ease; }
@media (prefers-reduced-motion: reduce) { .js .am-draw { transition: none; } }
.assembly-caption {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: center;
  margin: 24px 0 0;
}

.th-steps { list-style: none; margin: 0; padding: 0; }
.th-step {
  min-height: 74vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.th-step:first-child { border-top: 0; }
.js .th-step { transition: opacity 0.45s ease; }
@media (prefers-reduced-motion: no-preference) {
  .js .th-step { opacity: 0.32; }
  .js .th-step.active { opacity: 1; }
}
.th-step-index {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.th-step-name {
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0 0 14px;
}
.th-step-promise {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--accent);
  margin: 0 0 14px;
}
.th-step-desc { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 46ch; }
.th-paths-note {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0 0;
}

/* outside: the open, white market section reuses .market with light rules */
.market--light { border-top-color: var(--line); }
.market--light .market-row { border-bottom-color: var(--line); }
.market--light .market-row .mk-who { color: var(--muted); }
.market--light .market-row .mk-what { color: var(--muted); opacity: 0.85; }
.market--light .market-row--tpo .mk-who { color: var(--ink); }
.market--light .market-row--tpo .mk-what { color: var(--ink); opacity: 1; }
.market--light .market-row--tpo .mk-who::after { color: var(--accent); }
.market-close--light { color: var(--ink); }

/* ---- Services page: dark landing, you drop into the machine ----
   The top is ink, not off-white, so it feels like being transported: the
   scroll is the path in. The hero flows seamlessly into the dark machine
   below (both ink), one continuous descent before the light at the end. */
.svc-hero { background: var(--svc-dark); color: var(--paper); padding: 150px 0 clamp(72px, 12vh, 128px); }
.mch-hero .eyebrow { margin-bottom: 22px; color: var(--accent-on-ink); }
.svc-hero-title {
  font-size: clamp(44px, 6.6vw, 88px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0 0 30px;
  max-width: 15ch;
  color: var(--paper);
}
.svc-hero-title .accent-word { color: var(--accent-on-ink); }
.svc-hero-lede {
  font-size: 21px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 58ch;
  margin: 0;
}
/* The box you start inside: opening on the right, arrow leaving into the machine.
   Drawn on by JS (below); the CSS border is the no-JS fallback. */
.svc-hero-frame {
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 36px;
  padding: clamp(48px, 6vw, 88px) clamp(48px, 6vw, 88px);
}
.js .svc-hero-frame { border-color: transparent; isolation: isolate; }
.svc-hero-stub {
  position: absolute;
  right: -34px;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.svc-hero-stub svg { width: 54px; height: auto; display: block; overflow: visible; transition: transform 0.25s ease; }
.svc-hero-stub:hover svg, .svc-hero-stub:focus-visible svg { transform: translateX(6px); }
.svc-hero-stub:focus-visible { outline: 2px solid var(--accent-on-ink); outline-offset: 3px; border-radius: 10px; }
.svc-hero-stub path { fill: none; stroke: var(--accent-on-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---- The machine: busywork rides in, passes five stations, comes out done.
   Dark and immersive; the belt pans sideways as you scroll. Each station is
   a monoline module framed in the brand's rounded box. ---- */
/* --mch-line is the box's vertical centre on landing. The floating nav eats the
   top ~76px, so centre at 50vh + ~half the nav height to sit evenly between the
   nav and the page bottom (matching the How-we-think box). */
.mch { --mch-line: calc(50vh + 38px); position: relative; height: 540vh; background: var(--svc-dark); color: var(--paper); }
/* Panel 1 of the pan: the landing box. Its arrow sits on the belt line so the
   line "continues" out of the box into the flow of services to its right. */
.mch-hero {
  position: relative; flex: 0 0 auto;
  /* a contained, centred box like the How-we-think landing; the flow of services
     sits well off the right edge (big margin), unseen until you scroll */
  width: min(var(--container), calc(100vw - 48px));
  margin-right: max(72px, calc(50vw - 520px));
}
.mch-hero .svc-hero-frame {
  position: absolute; left: 0; right: 0;
  top: var(--mch-line); transform: translateY(-50%);
  padding: clamp(52px, 6.5vw, 100px) clamp(40px, 6vw, 92px);
  text-align: center;
}
.mch-hero .svc-hero-title { margin-left: auto; margin-right: auto; }
.mch-hero .svc-hero-lede { margin-left: auto; margin-right: auto; }
/* the belt + the five services live in the flow, to the right of the box */
.mch-flow { position: relative; flex: 0 0 auto; display: flex; align-items: stretch; height: 100%; }
.mch-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.mch-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  max-width: var(--container); margin: 0 auto; width: 100%;
  padding: clamp(84px, 11vh, 112px) 24px 0; box-sizing: border-box;
}
.mch-head .eyebrow { color: var(--accent-on-ink); display: block; margin-bottom: 16px; }
.mch-title {
  font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.03; margin: 0 0 18px; max-width: 22ch; color: var(--paper);
}
.mch-progress { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.5); }
.mch-bar { display: inline-block; width: 140px; height: 2px; background: rgba(255, 255, 255, 0.16); border-radius: 2px; overflow: hidden; }
.mch-bar > i { display: block; height: 100%; background: var(--accent-on-ink); transform: scaleX(0); transform-origin: left; }

.mch-viewport { height: 100%; display: flex; align-items: stretch; overflow: hidden; }
.mch-track {
  position: relative; display: flex; align-items: stretch; height: 100%;
  padding-left: max(24px, calc((100vw - var(--container)) / 2 + 24px));
  will-change: transform;
}
/* the belt runs the length of the track, at the module's base */
/* the through-line: a clean line that lives in the flow (off-screen on landing)
   and runs through the services to the end */
.mch-belt {
  position: absolute;
  left: 0; width: 100%;
  top: var(--mch-line); height: 0;
  border-top: 2px solid rgba(224, 161, 132, 0.5);
}

.mch-station { position: relative; flex: 0 0 auto; width: min(500px, 74vw); margin-right: clamp(84px, 9vw, 150px); }
/* each service fades + eases up as it scrolls into the pan (JS adds .revealed) */
.js .mch-station, .js .mch-cap.mch-out { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.mch-station.revealed, .mch-cap.mch-out.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .mch-station, .js .mch-cap.mch-out { transition: opacity 0.4s ease; transform: none; } }

/* ---- Two-track flow: The Build (top) and Making it Stick (bottom), each a
   line of six services, converging on "We do both." ---- */
.mch-flow { display: flex; align-items: center; height: 100%; }
.mch-lanes { display: flex; flex-direction: column; gap: clamp(120px, 20vh, 240px); transform: translateY(clamp(48px, 8vh, 96px)); }

/* Fork (box line splits into two tracks) and converge (tracks rejoin on "We do both").
   Paths are re-synced to the real line positions by JS (syncMchConnectors). */
.mch-fork, .mch-converge { flex: 0 0 auto; align-self: stretch; position: relative; width: clamp(96px, 12vw, 190px); }
.mch-fork-svg, .mch-conv-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mch-fork-svg path, .mch-conv-svg path {
  fill: none; stroke: rgba(224, 161, 132, 0.5); stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.mch-lane { position: relative; display: flex; align-items: flex-start; gap: clamp(40px, 5vw, 84px); padding-top: 6px; }
/* Offset the lower track by half a service-pitch so the top and bottom cards
   interleave rather than line up in columns; the two lines stay independent, so
   nothing reads as "these two happen at the same time." The absolute track line
   still starts at the lane's left, so the fork connects cleanly. */
.mch-lane--stick { padding-left: clamp(90px, 12.5vw, 195px); }
.mch-lane-mobhead { display: none; }
.mch-lane-line {
  position: absolute; top: 6px; left: 0; width: 100%; height: 0;
  border-top: 2px solid rgba(224, 161, 132, 0.5);
  transform-origin: left center;
}
.js .mch-lane-line { transform: scaleX(0); }
.mch-lane-head { flex: 0 0 auto; width: min(260px, 56vw); padding-top: 24px; }
.mch-lane-tag { font-size: clamp(24px, 3vw, 40px); font-weight: 700; letter-spacing: -0.025em; line-height: 1; margin: 0 0 8px; color: var(--paper); }
.mch-lane-sub { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin: 0; max-width: 22ch; }
.mch-svc { flex: 0 0 auto; width: min(280px, 60vw); position: relative; padding-top: 32px; }
.mch-svc-node {
  position: absolute; top: 0; left: 0; width: 13px; height: 13px;
  border-radius: 50%; background: var(--accent-on-ink);
  box-shadow: 0 0 0 5px var(--svc-dark);
}
.mch-svc-top { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.mch-svc-glyph {
  width: 27px; height: 27px; flex: none;
  fill: none; stroke: var(--accent-on-ink); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; overflow: visible;
  transition: stroke 0.4s ease;
}
.mch-svc-num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--accent-on-ink); margin: 0; }
.mch-svc-name { font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.06; margin: 0 0 12px; color: var(--paper); }
.mch-svc-desc { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.66); margin: 0; max-width: 30ch; }

.mch-both {
  flex: 0 0 auto; align-self: center;
  width: min(380px, 74vw);
  margin-left: clamp(70px, 8vw, 150px);
  padding-right: max(24px, calc((100vw - var(--container)) / 2 + 24px));
}
.mch-both-line { font-size: clamp(44px, 6vw, 82px); font-weight: 700; letter-spacing: -0.03em; line-height: 0.96; margin: 0 0 22px; color: var(--accent-on-ink); }
.mch-both-sub { font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, 0.7); margin: 0; max-width: 32ch; }

/* Each card, lane label, and the end statement fade up as the pan brings it in. */
.js .mch-svc, .js .mch-lane-head, .js .mch-both {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.js .mch-svc.revealed, .js .mch-lane-head.revealed, .js .mch-both.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .mch-svc, .js .mch-lane-head, .js .mch-both { transition: opacity 0.4s ease; transform: none; }
}

/* Scroll spotlight + zoom-to-focus: as the pan runs, the service column nearest
   the middle scales up and lights up (node glows) while the rest scale down and
   recede, so the "camera" pushes in on one thing at a time instead of a wall of
   cards. Desktop + motion only. */
.mch-svc-node { transition: transform 0.4s ease, box-shadow 0.4s ease; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .mch-svc { transform-origin: left center; }
  .js .mch-svc.revealed { transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 0.84, 0.44, 1); }
  .js .mch-svc.revealed:not(.active) { opacity: 0.38; transform: scale(0.94); }
  .js .mch-svc.revealed.active { transform: scale(1.06); }
  .mch-svc.active .mch-svc-node {
    transform: scale(1.55);
    box-shadow: 0 0 0 5px var(--svc-dark), 0 0 18px 3px rgba(224, 161, 132, 0.55);
  }
  .mch-svc.active .mch-svc-num { color: var(--paper); }
  .mch-svc.active .mch-svc-glyph { stroke: var(--paper); }
}

/* Pinned lane labels: lifted out of the panning track so "The build" and
   "Making it stick" stay fixed at the left the whole way through. JS sets each
   label's y to its track line and fades the rail in after the fork, out before
   the converge. A soft dark panel behind each one lets cards vanish under it. */
.mch-rail { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.mch-rail-label {
  position: absolute; left: clamp(24px, 4vw, 64px);
  width: min(300px, 42vw);
  /* No opacity fade: the label physically slides on from the left edge. JS
     drives translateX straight from scroll position (starts off-screen). */
  transform: translateY(-50%) translateX(-130%);
}
.mch-rail-label::before {
  content: ""; position: absolute; z-index: -1;
  top: -168px; bottom: -196px; left: -100vw; right: -40px;
  background: linear-gradient(to right, var(--svc-dark) calc(100% - 76px), rgba(42, 32, 24, 0));
}
.mch-rail-tag { font-size: clamp(26px, 3.4vw, 46px); font-weight: 700; letter-spacing: -0.028em; line-height: 1; margin: 0 0 12px; color: var(--paper); }
.mch-rail-sub { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-on-ink); margin: 0; max-width: 20ch; line-height: 1.5; }
@media (max-width: 900px), (prefers-reduced-motion: reduce) { .mch-rail { display: none; } }

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .mch-flow { display: block; }
  .mch-fork, .mch-converge { display: none; }
  .mch-lanes { display: block; transform: none; }
  .mch-lane { flex-direction: column; align-items: stretch; gap: 0; padding: 40px 0 0; }
  .mch-lane-line { display: none; }
  .mch-lane-mobhead { display: block; margin: 0 0 4px; }
  .mch-lane-mobhead span { display: block; font-size: clamp(28px, 7vw, 40px); font-weight: 700; letter-spacing: -0.025em; color: var(--paper); }
  .mch-lane-mobhead em { display: block; font-family: var(--mono); font-size: 12px; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-on-ink); margin-top: 8px; }
  .mch-lane-head { width: auto; padding: 0 0 8px; }
  .mch-svc { width: auto; padding: 22px 0 0 22px; border-left: 2px solid rgba(224, 161, 132, 0.4); margin-top: 22px; }
  .mch-svc-node { top: 24px; left: -7px; }
  .mch-both { width: auto; margin: 48px 0 0; padding: 0; }
}
.mch-module { position: absolute; top: calc(var(--mch-line) - 132px); left: 0; }
.mch-glyph { width: 132px; height: 132px; display: block; overflow: visible; }
.mch-box { fill: var(--svc-dark); stroke: rgba(255, 255, 255, 0.5); stroke-width: 3.5; }
.mch-glyph .gl { fill: none; stroke: var(--accent-on-ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.mch-glyph .gl .dim, .mch-glyph .dim { stroke: rgba(255, 255, 255, 0.55); }

/* Station glyphs come alive (like the mower): gears turn, the spark twinkles,
   bars fluctuate like live data, the wrench ratchets, the check flashes done. */
@media (prefers-reduced-motion: no-preference) {
  .mch-gear, .mch-twinkle, .mch-bar-l, .mch-wrench, .mch-check { transform-box: fill-box; }
  .mch-gear { transform-origin: center; }
  .mch-gear--a { animation: mchSpin 9s linear infinite; }
  .mch-gear--b { animation: mchSpin 7s linear infinite reverse; }
  @keyframes mchSpin { to { transform: rotate(360deg); } }

  .mch-twinkle { transform-origin: center; }
  .mch-twinkle--a { animation: mchTwinkle 2.6s ease-in-out infinite; }
  .mch-twinkle--b { animation: mchTwinkle 2.6s ease-in-out infinite 0.5s; }
  @keyframes mchTwinkle {
    0%, 100% { transform: scale(0.88); opacity: 0.7; }
    50% { transform: scale(1.12); opacity: 1; }
  }

  .mch-bar-l {
    transform-origin: bottom;
    animation: mchBar 2.2s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.28s);
  }
  @keyframes mchBar {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.5); }
  }

  .mch-wrench { transform-origin: center; animation: mchWrench 2.6s ease-in-out infinite; }
  @keyframes mchWrench {
    0%, 100% { transform: rotate(-7deg); }
    50% { transform: rotate(6deg); }
  }

  .mch-check { transform-origin: center; animation: mchCheck 2.8s ease-in-out infinite; }
  @keyframes mchCheck {
    0%, 68%, 100% { transform: scale(1); opacity: 0.5; }
    82% { transform: scale(1.28); opacity: 1; }
  }
}
.mch-copy { position: absolute; top: calc(var(--mch-line) + 30px); left: 0; width: 100%; max-width: 40ch; }
.mch-num { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-on-ink); margin: 0 0 16px; }
.mch-name { font-size: clamp(32px, 4vw, 52px); font-weight: 700; letter-spacing: -0.03em; line-height: 0.96; margin: 0 0 14px; color: var(--paper); }
.mch-promise { font-size: 20px; font-weight: 600; color: var(--accent-on-ink); margin: 0 0 14px; }
.mch-desc { font-size: 16px; line-height: 1.58; color: rgba(255, 255, 255, 0.66); margin: 0; }

/* messy intake and clean output caps at the two ends of the belt */
.mch-cap { position: relative; flex: 0 0 auto; width: min(300px, 56vw); }
.mch-in { margin-right: clamp(84px, 9vw, 150px); }
.mch-out { margin-right: max(24px, calc((100vw - var(--container)) / 2 + 24px)); }
.mch-cap svg { position: absolute; top: 20vh; left: 0; width: 150px; height: auto; overflow: visible; }
.mch-cap .ln { fill: none; stroke: var(--paper); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.mch-cap .ln.dim { stroke: rgba(255, 255, 255, 0.4); }
.mch-cap .ln.acc { stroke: var(--accent-on-ink); }
.mch-cap-label { position: absolute; top: calc(20vh + 176px); left: 0; width: 150px; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.5); margin: 0; }
.mch-cap-done { color: var(--accent-on-ink); }
/* the journey ends on a statement, not a picture: the belt runs out to here */
.mch-end-line {
  position: absolute;
  top: var(--mch-line);
  transform: translateY(-50%);
  left: 0;
  margin: 0;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--accent-on-ink);
}

/* the one-team break: an ink band, a deliberate shift off the cream */
/* Out of the dark machine, into the light: the hard cut from ink to cream
   is the emergence. This is where the pieces resolve into one team. */
.svc-oneteam { background: var(--ground-alt); color: var(--ink); padding: clamp(104px, 15vh, 148px) 0; }
.svc-oneteam .eyebrow { color: var(--accent); display: block; margin-bottom: 22px; }
.svc-oneteam-title {
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.03;
  margin: 0 0 26px;
  max-width: 20ch;
  color: var(--ink);
}
.svc-oneteam-body { font-size: 19px; line-height: 1.62; color: var(--muted); max-width: 56ch; margin: 0 0 44px; }
.svc-oneteam-pull {
  font-size: clamp(27px, 3.6vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ink);
  max-width: 22ch;
  margin: 0 0 36px;
}
.svc-oneteam-pull .accent-word,
.svc-oneteam-pull strong { color: var(--accent); font-weight: inherit; }
.svc-oneteam-link { color: var(--accent); }
.svc-oneteam-link:hover { color: var(--ink); }

/* #how callout: a compact chip row that points to the services page */
/* §02 two-path callout: the bold "what we do" (the build + making it stick),
   stated before the how. Echoes the two tracks on the What-we-do page. */
.twopath {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(22px, 4vw, 60px);
  margin: clamp(38px, 5vw, 66px) 0 clamp(30px, 4vw, 46px);
}
.twopath-col { position: relative; padding-top: 20px; border-top: 2px solid var(--accent); }
.twopath-tag {
  font-size: clamp(30px, 4.2vw, 52px); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.02; margin: 0 0 14px; color: var(--ink);
}
.twopath-say { font-size: clamp(16px, 1.45vw, 19px); line-height: 1.45; color: var(--ink); margin: 0 0 14px; max-width: 24ch; }
.twopath-market {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.twopath-join { display: flex; align-items: center; justify-content: center; }
.twopath-plus {
  display: grid; place-items: center; width: 50px; height: 50px;
  border-radius: 50%; border: 2px solid var(--accent); color: var(--accent);
  font-size: 26px; font-weight: 400; line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .twopath-plus { transition: transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1) 0.15s; transform: rotate(-90deg) scale(0.7); }
  .twopath.risen .twopath-plus { transform: rotate(0) scale(1); }
}
.twopath-lead {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 26px;
}
.svc-teaser-link { display: inline-block; margin-top: 30px; }

@media (max-width: 720px) {
  .twopath { grid-template-columns: 1fr; gap: 8px; }
  .twopath-join { padding: 6px 0; }
}

/* the machine collapses to a calm vertical stack on phones and reduced motion */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .mch { height: auto; }
  .mch-sticky { position: static; height: auto; overflow: visible; }
  .mch-head { position: static; padding-top: 48px; }
  .mch-progress { display: none; }
  .mch-viewport { display: block; overflow: visible; }
  /* the merged landing box + service flow stack vertically on small screens */
  .mch-hero { width: auto; margin: 32px 0 44px; }
  .mch-hero .svc-hero-frame { position: static; transform: none; }
  .mch-flow { display: block; position: static; }
  .mch-flow .mch-belt { display: none; }
  .mch-track {
    flex-direction: column; align-items: stretch; height: auto;
    padding-left: 0; padding-inline: 24px;
    max-width: var(--container); margin: 20px auto 0;
    transform: none !important;
  }
  .mch-belt { display: none; }
  .mch-station {
    position: static; width: 100%; margin: 0; padding: 34px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex; gap: 26px; align-items: flex-start;
  }
  .mch-module { position: static; flex: none; }
  .mch-glyph { width: 84px; height: 84px; }
  .mch-copy { position: static; max-width: none; }
  .mch-name { font-size: clamp(30px, 7vw, 42px); }
  .mch-cap {
    position: static; width: 100%; padding: 30px 0;
    display: flex; align-items: center; gap: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .mch-cap svg { position: static; width: 76px; flex: none; }
  .mch-cap-label { position: static; width: auto; text-align: left; }
}

/* ---- shared responsive for both options ---- */
@media (max-width: 900px) {
  .ra-hero .container,
  .th-hero .container { grid-template-columns: 1fr; }
  .ra-doc { margin-top: 48px; }
  .th-mark { max-width: 300px; justify-self: start; margin-top: 48px; }

  .receipt-cols { grid-template-columns: 1fr; column-gap: 20px; }
  .receipt-row { grid-template-columns: 1fr; column-gap: 20px; }
  .receipt-total { grid-template-columns: 1fr; row-gap: 8px; }
  .receipt-total .rt-value { text-align: left; }

  .clauses { grid-template-columns: 1fr; gap: 40px; max-width: 460px; }
  .ra-path { grid-template-columns: 1fr; column-gap: 0; }
  .market-row { grid-template-columns: 1fr; }

  .th-cost { grid-template-columns: 1fr; row-gap: 48px; }
  .th-gauge { order: -1; }
  .gauge { max-width: 280px; }
  .th-statement, .th-statement-sub, .th-mech { margin-left: 0; }
  .th-head { padding-left: 0; padding-top: 44px; }
  .th-corner { width: 64px; height: 64px; }

  /* assembly becomes a plain stacked list; the full arrow shows once */
  .th-assembly { grid-template-columns: 1fr; row-gap: 12px; }
  .th-assembly-visual { position: static; margin-bottom: 20px; }
  .assembly-mark { max-width: 220px; }
  .th-step { min-height: auto; }
  .js .th-step { opacity: 1; }
}

/* ---- Footer ---- */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 56px 0 36px;
  overflow: hidden;
}

.footer-mega {
  margin: 0 0 24px;
  font-size: clamp(44px, 10.4vw, 152px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.34);
  user-select: none;
  text-align: center;
}

.footer-tagline {
  margin: 0 auto 44px;
  max-width: none;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-align: center;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

.footer-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.footer-brand .brand-name { color: var(--paper); }
.footer-brand .brand-full { color: rgba(255, 255, 255, 0.6); }

.footer-links { display: flex; gap: 24px; }
.footer-links a { color: var(--paper); text-decoration: none; font-size: 16px; }
.footer-links a:hover { color: var(--accent-on-ink); }

.footer-mail { color: var(--paper); font-size: 16px; text-underline-offset: 3px; }
.footer-mail:hover { color: var(--accent-on-ink); }

.footer-slug {
  width: 100%;
  margin: 24px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

/* Phones: the footer-row's space-between left the brand/links/mail left-aligned
   while the mega + tagline were centred, and the four nav links shrank and broke
   mid-phrase ("What we / do"). Stack it in one centred column and let whole
   links wrap. */
@media (max-width: 600px) {
  .footer-row { flex-direction: column; align-items: center; text-align: center; gap: 22px; }
  .footer-brand { justify-content: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 12px 22px; }
  .footer-links a { white-space: nowrap; }
  .footer-slug, .footer-legal { text-align: center; }
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
  .rule-row { grid-template-columns: 1fr; gap: 8px; }

  /* Chapter collapses to a single column; the marker becomes a header
     row and the spine steps aside. */
  .chapter .container { grid-template-columns: 1fr; column-gap: 0; }
  .chapter-rail::before { display: none; }
  .chapter-marker { position: static; padding: 0 0 22px; }
  .chapter-marker::before { display: none; }
  .chapter-num { display: inline; margin: 0 10px 0 0; }
  .chapter-label { display: inline; max-width: none; }

  /* No rail spine to branch from on mobile: hide the branches and give the
     outcome dots a short vertical connector instead, so they still read as one
     path down the section. */
  .opp-branch { display: none; }
  .opp-list { position: relative; }
  /* The connector runs first-dot to last-dot; JS sets --opp-top/--opp-bottom to
     the exact dot centres so it never dangles below the last node (the fallback
     42px is only used before JS runs). */
  .opp-list::before {
    content: "";
    position: absolute;
    left: 5px;
    top: var(--opp-top, 42px);
    bottom: var(--opp-bottom, 42px);
    width: 2px;
    background: var(--accent);
    opacity: 0.2;
  }

  .row { grid-template-columns: 1fr; column-gap: 0; row-gap: 10px; padding: 26px 0; }

  /* Timeline stacks; the horizontal path and its nodes step aside */
  .timeline { grid-template-columns: 1fr; gap: 8px; padding-top: 0; }
  .timeline::before { display: none; }
  .phase { padding: 28px 0; border-top: 1px solid var(--line); }
  .phase:first-child { border-top: 0; }
  .phase::before { display: none; }
  .phase-when { margin-top: 0; }

  /* Build steps wrap instead of cramming into one row */
  .build-flow { flex-wrap: wrap; gap: 4px 24px; }
  .build-flow li { flex: 0 0 auto; border-top: 0; padding: 8px 0 8px 20px; }
  .build-flow li::before { top: 12px; left: 0; }

  /* Final CTA stacks; the mark sits above, smaller */
  .cta-band-grid { grid-template-columns: 1fr; gap: 32px; }
  .cta-band .way-out { grid-row: 1; width: 88px; justify-self: start; margin-bottom: 8px; }
  .cta-band--center .way-out { justify-self: center; }

  /* Partner manifesto: stack the three-across and the 2x2 paths */
  .mechanism { grid-template-columns: 1fr; gap: 40px; max-width: 440px; }
  .paths { grid-template-columns: 1fr; gap: 8px; max-width: 540px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }

  .section, .negation, .cta-mid, .cta-band { padding: 64px 0; }
  .chapter { padding: 72px 0; }
  .pov-section { padding: 72px 0; }
  .pov-hero { padding: 118px 0 60px; }
  .page-hero { padding: 118px 0 36px; }

  .marquee-band { padding: 26px 0 30px; }

  .hero { min-height: auto; display: block; padding: 112px 0 64px; }
  .hero h1 { font-size: clamp(44px, 12vw, 56px); }
  .hero-lede { margin-bottom: 40px; }

  .headline { font-size: clamp(28px, 7vw, 33px); }

  .site-header .container { height: 68px; }
  .brand-name { font-size: 20px; }
  .site-nav { gap: 16px; }
  .nav-page { display: none; }
  .site-nav .btn { padding: 10px 14px; font-size: 14px; }

  .footer-tagline { font-size: 19px; }

  /* Contact form + aside: the grid was a hard 1fr/1fr at all widths, so on a phone
     the form fields collapsed to ~150px — the textarea placeholder broke one word
     per line and the "Send it over" button stacked to three lines. Stack to one
     column so the fields and CTA get full width. */
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }

  /* Services hero: the decorative arrow (svc-hero-stub) sits at right:-34px and
     hangs off-screen once the frame ~= viewport width, pushing the page to 370px
     wide. On mobile the "leaving the box into the machine" metaphor is replaced by
     the stacked lanes below, so drop the arrow and tighten the frame padding. */
  .svc-hero-stub { display: none; }
  .svc-hero-frame { padding: clamp(34px, 7vw, 56px) clamp(24px, 6vw, 44px); }
  .svc-hero { padding-top: 122px; }
}

/* Partner ("How we think") hero: h1 min was 44px, too big for a phone — the word
   "transformation" filled the line and the accent phrase (white-space:nowrap)
   overflowed off the right edge (page → 379px). Ease the size, let the accent wrap,
   and tighten the frame so the heading flows into even lines. */
@media (max-width: 560px) {
  .th-hero h1 { font-size: clamp(29px, 8.4vw, 40px); margin-bottom: 22px; }
  .th-hero h1 .accent-word { white-space: normal; }
  .th-hero-frame { padding: clamp(40px, 9vw, 60px) clamp(22px, 6vw, 44px); }
  .th-hero-lede { font-size: 17px; }

  /* Contact hero: at 44px "Book a 30-minute call." broke mid-compound as
     "Book a 30-" / "minute call.". Ease the size and keep "30-minute call."
     whole (.nobrk) so it breaks cleanly after "Book a". */
  .page-title { font-size: clamp(30px, 8.2vw, 40px); }
  .page-title .nobrk { white-space: nowrap; }
}

/* Narrow phones: the header pill couldn't fit brand + "Book a 30-minute call"
   at once, so the CTA clipped past the right edge. Drop the tagline (the mark +
   TPO still carries the brand), tighten the pill, and give the button room. */
@media (max-width: 430px) {
  .site-header { padding: 12px 10px 0; }
  .site-header .container { gap: 12px; padding: 8px 10px 8px 14px; }
  .brand { gap: 10px; }
  .brand-full { display: none; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-name { font-size: 19px; }
  .site-nav .btn { padding: 10px 14px; font-size: 13.5px; }
}

/* ==========================================================================
   MOBILE POLISH PASS (2026-07-10)
   Everything below is scoped to <=900px / <=720px only, so the desktop
   render (>900px) is untouched. Goal: a tighter, purpose-built phone
   experience, no dead whitespace, no broken/invisible boxes, no orphan
   words. See tmp/mobile-plan.md for the callout map.
   ========================================================================== */

@media (max-width: 900px) {
  /* --- G1: section padding was never reduced for the partner-page section
     types, so phones inherited desktop's 116px+ bands (huge whitespace, the
     "opportunity sits miles below the divider" complaint). Bring them in line
     with the rest of the mobile site. --- */
  .th-section { padding: 60px 0; }
  .ra-section { padding: 60px 0; }
  .svc-oneteam { padding: 68px 0; }

  /* (Contact-grid single-column stacking is already handled by the earlier
     mobile pass in the 720px block above.) */

  /* --- P1 / partner hero: the "you start inside the box" frame relies on a
     JS-drawn SVG outline at 15-30% opacity that reads as absent on a phone,
     leaving the title marooned in a huge field of colour. On mobile, drop the
     JS overlay and show a crisp CSS border instead, and pull the padding way
     in so the box actually hugs the words. --- */
  /* Round 5: match the Services hero box (34px below the nav, 40/24 padding). */
  .th-hero { padding: 116px 0 56px; }
  .th-hero-frame { padding: 40px 24px; border-radius: 26px; }
  .th-frame-draw { display: none; }
  .js .th-hero-frame { border-color: rgba(255, 255, 255, 0.32); }
  .th-hero h1 { font-size: clamp(30px, 8vw, 40px); max-width: 20ch; }

  /* --- P2: the corner bracket (.th-corner) floated disconnected above the
     eyebrow and its vertical stroke collided with the "01" (both at x=0).
     Inset the head content so the label sits *inside* the bracket's embrace,
     and shrink the bracket so it reads as a tight frame, not a stray elbow. --- */
  .th-head { padding: 30px 0 0 22px; }
  .th-corner { width: 40px; height: 40px; border-top-left-radius: 16px; }
  .th-statement, .th-statement-sub, .th-mech { margin-left: 22px; }
}

@media (max-width: 720px) {
  /* --- H2: kill the plus-sign join on the homepage two-path and let the two
     cards sit close (Nivas: "get rid of the plus on mobile, bring them
     together"). Each card keeps its clay top-rule, so they still read as a
     pair. --- */
  .twopath { gap: 26px; margin: 30px 0 34px; }
  .twopath-join { display: none; }
  .twopath-col { padding-top: 16px; }

  /* --- H4: tighten the how-it-works rhythm so "making it stick" and the
     phase timeline don't sit an ocean apart. --- */
  .twopath-lead { margin-bottom: 18px; }
  .timeline { margin-top: 40px; }
  .chapter-coda { margin-top: 30px; }

  /* --- S1 / services hero: same invisible-box problem as the partner hero,
     plus a rightward "into the machine" arrow that points off the screen edge
     on a phone (the journey is vertical here). Show a real box, hide the stray
     arrow, and balance the lede so "run for you." stops dangling. --- */
  .mch { padding-top: 88px; padding-bottom: 56px; }
  .mch-hero { margin: 8px 0 28px; }
  .mch-hero .svc-hero-frame { padding: 40px 24px; border-radius: 26px; }
  .svc-hero-frame .th-frame-draw { display: none; }
  .js .mch-hero .svc-hero-frame { border-color: rgba(255, 255, 255, 0.34); }
  /* (The svc-hero-stub arrow is already hidden by the earlier mobile pass.) */
  .svc-hero-lede { text-wrap: balance; }
  .mch-hero .svc-hero-title { font-size: clamp(34px, 9vw, 46px); }
  .mch-hero .svc-hero-lede { font-size: 17px; }

  /* --- P2 (phones): a touch smaller still. --- */
  .th-head { padding-left: 20px; }
  .th-statement, .th-statement-sub, .th-mech { margin-left: 20px; }

  /* --- H3: the build-flow (Plan / Build / We QA / You review / Live) wrapped
     to two lines on a phone, orphaning "Live". Keep it as one continuous
     path-rail on a single line; if it can't fit it scrolls sideways rather
     than wrapping. --- */
  .build-flow {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .build-flow::-webkit-scrollbar { display: none; }
  .build-flow li {
    flex: 0 0 auto;
    white-space: nowrap;
    border-top: 2px solid var(--accent);
    padding: 13px 22px 0 0;
    font-size: 12px;
    scroll-snap-align: start;
  }
  .build-flow li::before { top: -6px; left: 0; }
  .build-strip-note { margin-top: 18px; }
}

/* ==========================================================================
   MOBILE POLISH PASS - BATCH 2: carousels (2026-07-10)
   The service list and the four paths were tall vertical scrolls on a phone.
   Turn each into a horizontal, swipeable carousel. Desktop is untouched: the
   wrappers use display:contents so >900px renders exactly as before.
   ========================================================================== */

/* Wrapper is invisible to layout on desktop (cards stay direct flex children
   of the lane, exactly as before). */
.mch-lane-cards { display: contents; }

@media (max-width: 900px) {
  /* --- S2: two swipeable carousels, one per track (the builds / making it
     stick), instead of a 12-item vertical scroll. The track heading stays
     fixed above its carousel. --- */
  .mch-lane { padding: 30px 0 0; }
  .mch-lane--stick { padding-left: 0; }
  .mch-lane-cards {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 10px -24px 0;
    padding: 4px 24px 8px;
  }
  .mch-lane-cards::-webkit-scrollbar { display: none; }
  .mch-svc {
    flex: 0 0 76%;
    width: auto;
    margin: 0;
    padding: 24px 22px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
    scroll-snap-align: start;
  }
  .mch-svc-node { display: none; }
  .mch-svc-top { margin-bottom: 16px; }
  .mch-svc-glyph { width: 30px; height: 30px; }
  .mch-svc-desc { max-width: none; }
  /* The desktop pan reveals cards one at a time as they enter; in the carousel
     that leaves the peeked next card invisible (killing the swipe hint), so
     show every card outright on phones. */
  .js .mch-lane-cards .mch-svc { opacity: 1; transform: none; }

  /* --- P3: the four paths become a swipeable carousel; the mark above draws
     itself one leg further as each card centres (JS drives the draw level from
     the carousel's scroll position). --- */
  .th-assembly-visual { position: static; margin: 0 auto 6px; text-align: center; }
  .assembly-mark { max-width: 190px; }
  .th-steps {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 6px -24px 0;
    padding: 6px 24px 10px;
    list-style: none;
  }
  .th-steps::-webkit-scrollbar { display: none; }
  .th-step {
    flex: 0 0 80%;
    min-height: auto;
    border-top: 0;
    padding: 24px 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
    scroll-snap-align: center;
  }
  .th-step-desc { max-width: none; }
  .th-paths-note { text-align: center; margin-top: 22px; }
}

/* ==========================================================================
   MOBILE POLISH PASS - ROUND 2 (2026-07-10): dangling lines, spacing, carousel
   start. All scoped <=900/720px; desktop unchanged.
   ========================================================================== */

@media (max-width: 900px) {
  /* Services + 4-paths carousels: scroll-snap was snapping the first card flush
     to the container edge (past the 24px padding), clipping its left border.
     scroll-padding keeps the snapped first card inset, aligned with the heading. */
  .mch-lane-cards { scroll-padding-left: 24px; }
  .th-steps { scroll-padding-inline: 24px; }

  /* Partner engine: the statement and the drawn engine sat far apart stacked
     (the row-gap plus the SVG's own empty top band). Pull them together and
     shrink the oversized illustration so it reads as a compact aside. */
  .th-cost { row-gap: 12px; }
  .engine-art { max-width: 244px; }
  .engine-legend { margin-top: 12px; }
}

@media (max-width: 720px) {
  /* Build-flow rail: the last node's right padding left a stub of line hanging
     past "Live". Trim it so the path ends at the last node. */
  .build-flow li:last-child { padding-right: 0; }

  /* Negation -> promises: the promises group sat far below "just do the work."
     with a lone divider floating between. Tighten the lead-in. */
  .promises { margin-top: 34px; padding-top: 30px; }

  /* How-it-works: "one engagement, three phases:" sat an ocean above the first
     phase. Pull the timeline up under it. */
  .timeline { margin-top: 16px; }

  /* Partner engine art: trim its own top breathing on phones too. */
  .th-engine { margin-top: 4px; }
}

/* ==========================================================================
   MOBILE NAV MENU (2026-07-10): the nav-page links are hidden on phones, so
   there was no way to reach What we do / How we think / Contact. A hamburger
   in the pill opens a dropdown. Built + injected by v2.js. Desktop unaffected
   (the toggle + menu are display:none above 720px).
   ========================================================================== */

.nav-toggle { display: none; }
.nav-menu { display: none; }

@media (max-width: 720px) {
  .site-header .container { position: relative; }

  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; margin: 0;
    background: none; border: 0; cursor: pointer; flex: 0 0 auto;
    color: var(--paper);
    -webkit-tap-highlight-color: transparent;
  }
  .site-header.on-dark .nav-toggle { color: var(--ink); }
  .nav-toggle svg { width: 24px; height: 24px; overflow: visible; }
  .nav-toggle .nt-line {
    stroke: currentColor; stroke-width: 2; stroke-linecap: round;
    transform-origin: center; transition: transform 0.3s ease, opacity 0.2s ease;
  }
  .site-header.menu-open .nav-toggle .nt-1 { transform: translateY(4px) rotate(45deg); }
  .site-header.menu-open .nav-toggle .nt-2 { transform: translateY(-4px) rotate(-45deg); }

  .nav-menu {
    position: absolute; top: calc(100% + 10px); left: 8px; right: 8px;
    display: flex; flex-direction: column;
    background: var(--paper); color: var(--ink);
    border: 1px solid rgba(28, 27, 26, 0.08); border-radius: 16px;
    box-shadow: 0 14px 44px rgba(28, 27, 26, 0.24);
    padding: 8px;
    opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 60;
  }
  .site-header.menu-open .nav-menu { opacity: 1; transform: none; pointer-events: auto; }
  .nav-menu a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 16px; border-radius: 11px;
    font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .nav-menu a + a { position: relative; }
  .nav-menu a + a::before {
    content: ""; position: absolute; top: 0; left: 16px; right: 16px;
    height: 1px; background: var(--line);
  }
  .nav-menu a:hover, .nav-menu a:focus-visible,
  .nav-menu a[aria-current] { background: var(--ground-alt); color: var(--accent); }
  .nav-menu a::after { content: "\2192"; color: var(--accent); font-weight: 400; }
}

/* ==========================================================================
   MOBILE ACCORDIONS (2026-07-10): the three engagement phases were three tall
   text blocks stacked, making the homepage read copy-heavy. On phones each
   phase collapses to its heading (first one open); tap to expand. Built by
   v2.js; desktop shows every description in full (chevron hidden > 720px).
   ========================================================================== */

.phase-chev { display: none; }

@media (max-width: 720px) {
  .phase { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .phase:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
  .phase-name {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 0;
  }
  .phase-chev {
    display: block; flex: 0 0 auto; width: 10px; height: 10px; margin-right: 4px;
    border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
    transform: rotate(45deg); transition: transform 0.3s ease;
  }
  .phase.open .phase-chev { transform: rotate(-135deg); }
  /* Collapsed by default; the .open class (JS) reveals the description. Without
     JS, the accordion never engages and descriptions render normally (see the
     :not(.js-accordion) safety below). */
  .js-accordion .phase-desc {
    max-height: 0; opacity: 0; overflow: hidden; margin: 0;
    transition: max-height 0.38s ease, opacity 0.3s ease, margin 0.3s ease;
  }
  .js-accordion .phase.open .phase-desc { max-height: 340px; opacity: 1; margin-top: 14px; }
}

/* ==========================================================================
   MOBILE ROUND 3 (2026-07-10): unsquish the hamburger + centre the homepage
   hero box. Scoped <=720px; desktop unchanged.
   ========================================================================== */

@media (max-width: 720px) {
  /* Drop the "THE PATH OUT" tagline on phones (the mark + "TPO" carries the
     brand) so the logo, CTA and menu button aren't fighting for pill width. The
     toggle now sits after the CTA (see v2.js), so it reads as part of the
     right-hand action cluster, well clear of the logo. */
  .brand-full { display: none; }
  .site-nav { gap: 12px; }
  .nav-toggle { margin-left: 2px; }
}

/* ==========================================================================
   MOBILE ROUND 4 (2026-07-10): the services page scrolls DOWN on phones (the
   horizontal machine is a vertical stack), so give its hero box the same
   downward arrow + bottom-opening as the How-we-think hero. Desktop keeps the
   rightward "into the machine" arrow for the horizontal pan.
   ========================================================================== */

@media (max-width: 720px) {
  /* position:relative for the arrow/opening, but reset the desktop offsets it
     re-activates (top:var(--mch-line) would shove the box down half a screen). */
  .mch-hero .svc-hero-frame { position: relative; top: auto; left: auto; right: auto; }
  /* punch the opening into the bottom edge (matches .th-hero-frame::before) */
  /* No z-index: like the partner opening, this must paint over the border but
     UNDER the arrow (a later child), so the arrow emerges cleanly instead of
     being sliced by the opening bar. */
  .mch-hero .svc-hero-frame::before {
    content: ""; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
    height: 4px; width: clamp(58px, 13vw, 96px); background: var(--svc-dark);
  }
  /* reuse the existing arrow, rotated to point straight down out of the box */
  .mch-hero .svc-hero-stub {
    display: block; right: auto; top: auto; left: 50%; bottom: -30px;
    transform: translateX(-50%) rotate(90deg);
  }
  .mch-hero .svc-hero-stub svg { width: 46px; }
  /* room below the box for the arrow + a gap before "The builds" */
  .mch-hero { margin: 8px 0 56px; }
}

/* ==========================================================================
   MOBILE ROUND 5 (2026-07-10): make the three page hero boxes read as the
   SAME box. Size/padding/border/nav-gap were matched to the Services box in
   index.html + the .th-hero rules above; this gives them a shared minimum
   height with vertically-centred content so the shorter one (How-we-think,
   which has no lede/CTA) doesn't look stunted. Boxes with enough content just
   exceed the minimum, so nothing gains dead space. Desktop untouched.
   ========================================================================== */

@media (max-width: 720px) {
  .mkJ-text,
  .mch-hero .svc-hero-frame,
  .th-hero-frame {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ==========================================================================
   LEGAL / TRUST PAGES  (privacy, terms, security)
   Long-form prose the marketing pages never needed. One narrow measure,
   generous line-height, quiet dividers. Shares the site palette + type.
   ========================================================================== */

.legal { padding: 40px 0 96px; }
.legal .container { max-width: 760px; }

.legal-meta {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 0 0 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.legal-meta strong { color: var(--ink); font-weight: 600; }

.legal h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 56px 0 16px;
  scroll-margin-top: 100px;
}
.legal h2:first-of-type { margin-top: 8px; }
.legal h3 {
  font-size: 1.1rem;
  line-height: 1.3;
  margin: 32px 0 12px;
}

.legal p,
.legal li {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink);
}
.legal p { margin: 0 0 18px; }

.legal ul { margin: 0 0 18px; padding-left: 22px; }
.legal li { margin-bottom: 10px; }
.legal li::marker { color: var(--accent); }

.legal a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--accent); }

.legal strong { font-weight: 600; }

/* At-a-glance summary card used at the top of each page */
.legal-tldr {
  background: var(--ground-alt);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 30px;
  margin: 0 0 44px;
}
.legal-tldr .eyebrow { margin-bottom: 12px; }
.legal-tldr p:last-child { margin-bottom: 0; }

/* Definition-style rows for sub-processors / data-handling tables */
.legal-rows { margin: 4px 0 24px; border-top: 1px solid var(--line); }
.legal-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.legal-row dt { font-weight: 600; color: var(--ink); }
.legal-row dd { margin: 0; color: var(--muted); line-height: 1.6; }

@media (max-width: 620px) {
  .legal-row { grid-template-columns: 1fr; gap: 4px; }
  .legal p, .legal li { font-size: 1rem; }
}

/* Footer legal links line */
.footer-legal {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
.footer-legal a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.footer-legal a:hover { color: #ffffff; }
.footer-legal span { color: rgba(255, 255, 255, 0.34); margin: 0 10px; }