/* Hallmark · shape: redline (a draft marked up, top to bottom) · genre: editorial · theme: custom · job: hire · idea: "The page is a marked-up draft: the old way of running financial services struck through in red, the new way set in heavy type beside it" · vibe: "annual report, marked up by an engineer"
 * paper: oklch(97% 0.006 250) · accent: oklch(55% 0.215 27) · display: Onest 900 · body: Onest 400 · hero: a typeset sentence across eleven columns with "a pilot" struck out in red, lede and actions on the bottom edge · nav: logo left, four links and the email as the contact, no rule · footer: a colophon under a heavy rule, logo, reading list, address, legal · imagery: none in the hero; four real team portraits and six partner logos below · signature: the red strike drawn through "a pilot" in the headline, then through each real before (10%, years, rubber-stamps)
 * axes: light/grotesk-heavy/chromatic-red · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H5 E4 S4 R4 V5 · weakest: S, a strike device alone could sit on any consultancy; every strike is tied to a before the client's own case content states (10% sampled, cores that take years, rubber-stamped decisions), and figures without a stated before stay unstruck */
/* Hallmark · waive 38iii · the struck "a pilot" in the h1 · the strike is the page's signature, it appears once in a heading, in the hero only */
/* Hallmark · answered F3 · heads carry text-wrap: balance from base.css */
/* Hallmark · waive 49b · the two reading links in the footer wrap at 320 · they are the published article titles on trippl.co and stay whole rather than cut */
/* Hallmark · dismissed 58 · the h1 word count reads the visually hidden sentence and the struck visible one together; the visible headline is the client's own nine-word positioning line */
/* Hallmark · waive 77 · each inner page closes on one head and one action (Talk to us, See the work) · the close is the hire action on work, services, process, about and contact */
/* Hallmark · dismissed 77 · inner pages (work, contact, 404, process) are deliberately short; the section-count check is written for a landing page */
/* Hallmark · dismissed 46a · 70% faster payment processing is the client's own case figure from content.ts */
/* Hallmark · dismissed 25 · section ledes, case captions and verb lines are one or two short sentences, the caption range from 28ch applies */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- page ---------- */
body { font-size: var(--text-md); line-height: 1.6; font-weight: 400; }
h1, h2, h3 { font-weight: 900; letter-spacing: var(--tracking-display); color: var(--color-ink); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

.hero__head .visually-hidden, .case__fig .visually-hidden, .verbs .visually-hidden, .verb .visually-hidden { white-space: normal; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }

/* ---------- links and controls ---------- */
.link { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule); text-decoration-thickness: 2px; text-underline-offset: 0.22em; transition: text-decoration-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-accent); }
.link:active { color: var(--color-ink-2); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--space-xl); border: 1px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ---------- the strike, the page's one mark ---------- */
.strike { position: relative; display: inline-block; color: var(--color-muted); text-decoration: none; white-space: nowrap; }
.strike::after { content: ""; position: absolute; left: -0.05em; right: -0.05em; top: 50%; height: var(--strike); margin-top: calc(var(--strike) / -2); background: var(--color-accent); transform-origin: left center; }
.hero .strike::after, .case-hero .strike::after { animation: draw 700ms var(--ease-out) 350ms both; }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.js [data-reveal]::after { transform: scaleX(0); transition: transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms + 120ms); }
.js [data-reveal].is-in::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .hero .strike::after, .case-hero .strike::after { animation: none; }
  .js [data-reveal]::after { transform: scaleX(1); transition: none; }
}

/* ---------- nav ---------- */
.nav { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); }
.nav__logo { display: inline-flex; color: var(--color-ink); border-radius: var(--radius-card); transition: color var(--dur-short) var(--ease-out); }
.nav__logo svg { width: 132px; height: auto; }
.nav__logo:hover { color: var(--color-ink-2); }
.nav__logo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
.nav__links { display: flex; align-items: center; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); font-weight: 600; }
.nav__links a { color: var(--color-ink); text-decoration: none; padding-block: var(--space-xs); border-bottom: 2px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.nav__links a:hover { border-bottom-color: var(--color-accent); }
.nav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav__mail { font-size: var(--text-sm); font-weight: 600; }
.nav__links { margin-left: auto; }

/* ---------- hero ---------- */
.hero { min-height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); padding-block: var(--space-xl); }
.hero__head { font-size: var(--text-display); line-height: 0.94; max-width: 13.5em; }
.hero__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; row-gap: var(--space-lg); }
.hero__lede { grid-column: 1 / span 6; font-size: var(--text-lead); line-height: 1.45; max-width: 36ch; }
.hero__actions { grid-column: 8 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg) var(--space-xl); justify-content: flex-end; font-weight: 600; }

/* ---------- section scaffolding ---------- */
.section { padding-block: var(--section-gap) 0; }
.section__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); align-items: end; margin-bottom: var(--space-3xl); }
.section__head h2 { grid-column: 1 / span 7; font-size: var(--text-section); line-height: 1; }
.section__head p { grid-column: 8 / -1; color: var(--color-muted); max-width: 40ch; }

/* ---------- work: the results ---------- */
.cases { list-style: none; margin: 0; padding: 0; }
.case { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; padding-block: var(--space-xl) var(--space-2xl); border-top: var(--rule-heavy) solid var(--color-ink); }
.case + .case { border-top-width: 1px; }
.case__fig { grid-column: 1 / span 7; margin: 0; font-weight: 900; letter-spacing: -0.045em; line-height: 0.82; font-variant-numeric: lining-nums tabular-nums; }
.case__was { display: block; font-size: var(--text-section); line-height: 1; margin-bottom: var(--space-sm); --strike: 0.12em; }
.case__now { display: block; font-size: var(--text-poster); }
.case__label { display: block; margin-top: var(--space-md); font-size: var(--text-md); font-weight: 600; letter-spacing: 0; line-height: 1.3; color: var(--color-ink-2); }
.case__unit { font-size: 0.42em; letter-spacing: -0.02em; margin-left: 0.06em; }
.case__text { grid-column: 8 / -1; display: grid; gap: var(--space-sm); padding-bottom: var(--space-xs); }
.case__text h3 { font-size: var(--text-title); line-height: 1.15; letter-spacing: -0.02em; }
.case__text p { color: var(--color-ink-2); max-width: 42ch; }
.case__text strong { font-weight: 600; color: var(--color-ink); }
.case__text .link { justify-self: start; font-weight: 600; margin-top: var(--space-xs); }

/* ---------- services: five rows ---------- */
.services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-rule); }
.service { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.service a { grid-column: 1 / span 7; font-size: var(--text-run); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; color: var(--color-ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.service a:hover { text-decoration-color: var(--color-accent); }
.service a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.service p { grid-column: 8 / -1; color: var(--color-muted); }
.runin { font-size: var(--text-run); line-height: 1.22; font-weight: 900; letter-spacing: -0.03em; max-width: none; }
.runin a { color: var(--color-ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.runin a:hover { text-decoration-color: var(--color-accent); }
.runin a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.runin__stop { color: var(--color-accent); }
.runin__note { font-size: var(--text-md); font-weight: 400; letter-spacing: 0; color: var(--color-muted); margin-inline: var(--space-xs) var(--space-lg); white-space: nowrap; }

/* ---------- how it works: the ink band ---------- */
.band { background: var(--color-ink); color: var(--color-on-ink); margin-top: var(--section-gap); padding-block: var(--section-gap-s); }
.band h2 { color: var(--color-on-ink); }
.band .section__head p { color: var(--color-on-ink-muted); }
.band :focus-visible { outline-color: var(--color-focus-on-ink); }
.verbs { list-style: none; margin: 0; padding: 0; }
.verb { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-md); }
.verb__word { grid-column: 1 / span 7; font-size: var(--text-verb); font-weight: 900; line-height: 0.95; letter-spacing: -0.04em; }
.verb p { grid-column: 8 / -1; color: var(--color-on-ink-muted); max-width: 38ch; }
.verb--never .verb__word { grid-column: 1 / span 7; font-size: clamp(2.5rem, 6.4vw, 6rem); color: var(--color-on-ink-muted); }
.verb--never p { grid-column: 8 / -1; }
.verb--never .strike { color: var(--color-on-ink-muted); --strike: 0.11em; }
.verb--never .strike::after { background: var(--color-accent); }
.verb--never p { color: var(--color-on-ink); }
.band__foot { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-ink); color: var(--color-on-ink-muted); max-width: 70ch; font-size: var(--text-sm); }

/* ---------- people ---------- */
.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.person { display: grid; gap: var(--space-xs); align-content: start; }
.person__photo { aspect-ratio: 4 / 5; margin-bottom: var(--space-sm); border-radius: var(--radius-card); background: var(--color-paper-2); outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.person__photo > img { object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.06); }
.person h3 { font-size: var(--text-title); line-height: 1.1; letter-spacing: -0.02em; }
.person p { color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- sectors and partners ---------- */
.sectors { list-style: none; margin: 0; padding: 0; grid-column: 1 / -1; columns: 2; column-gap: var(--gap-columns); font-size: var(--text-run); font-weight: 900; letter-spacing: -0.03em; line-height: 1.18; }
.sectors li { break-inside: avoid; }
.partners { margin: var(--space-3xl) 0 0; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.partners ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: center; }
.partners img { height: 40px; width: auto; max-width: 100%; filter: grayscale(1) brightness(0.35) contrast(1.4); }
.partners figcaption { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- contact ---------- */
.contact { padding-block: var(--section-gap) var(--section-gap-s); }
.contact h2 { font-size: var(--text-section); line-height: 1; margin-bottom: var(--space-xl); }
.contact__mail { display: inline-block; font-family: var(--font-display); font-size: var(--text-display-s); font-weight: 900; letter-spacing: -0.045em; line-height: 1; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 0.07em; text-underline-offset: 0.14em; overflow-wrap: break-word; min-width: 0; max-width: 100%; transition: color var(--dur-short) var(--ease-out); }
.contact__mail:hover { color: var(--color-ink-2); }
.contact__mail:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 6px; }
.contact__meta { margin-top: var(--space-2xl); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); }
.contact__meta p { grid-column: span 4; }

/* ---------- footer ---------- */
.footer { border-top: var(--rule-heavy) solid var(--color-ink); padding-block: var(--space-2xl) var(--space-xl); font-size: var(--text-sm); }
.footer__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
.footer__logo { grid-column: 1 / span 3; align-self: start; color: var(--color-ink); }
.footer__logo svg { width: 120px; height: auto; }
.footer__col { grid-column: span 3; display: grid; gap: var(--space-xs); align-content: start; }
.footer__col--wide { grid-column: span 6; }
.footer__col h2 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; margin-bottom: var(--space-2xs); }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.footer__legal { margin-top: var(--space-2xl); display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); color: var(--color-muted); }

/* ---------- narrower screens ---------- */
@media (max-width: 60rem) {
  .nav { height: auto; flex-wrap: wrap; row-gap: var(--space-xs); padding-block: var(--space-md) var(--space-xs); }
  .nav__links { order: 3; width: 100%; margin-left: 0; overflow-x: auto; gap: var(--space-lg); font-size: var(--text-md); scrollbar-width: none; }
  .nav__links a { white-space: nowrap; display: inline-block; padding-block: var(--space-sm); }
  .hero { min-height: auto; padding-block: var(--space-xl) var(--space-2xl); gap: var(--space-xl); }
  .hero__lede, .hero__actions { grid-column: 1 / -1; }
  .hero__actions { justify-content: flex-start; }
  .section__head h2, .section__head p { grid-column: 1 / -1; }
  .section__head { margin-bottom: var(--space-2xl); }
  .case__fig, .case__text { grid-column: 1 / -1; }
  .case__text { margin-top: var(--space-lg); }
  .service a, .service p { grid-column: 1 / -1; }
  .service p { margin-top: var(--space-xs); }
  .verb__word, .verb p, .verb--never .verb__word, .verb--never p { grid-column: 1 / -1; }
  .verb { padding-block: var(--space-sm) var(--space-lg); }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partners ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact__meta p { grid-column: 1 / -1; }
  .footer__logo, .footer__col, .footer__col--wide { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .sectors { columns: 1; }
  .people { gap: var(--space-xl) var(--gap-columns); }
  .runin__note { display: block; white-space: normal; margin: var(--space-2xs) 0 var(--space-md); }
}

/* ---------- page turn: the old page is struck through, the new one set ---------- */
.wipe { position: fixed; left: 0; right: 0; top: 50%; height: clamp(10px, 1.4vw, 20px); background: var(--color-accent); transform: translateY(-50%) scaleX(0); transform-origin: left center; z-index: var(--z-modal); pointer-events: none; }
.leaving .wipe { transform: translateY(-50%) scaleX(1); transition: transform 480ms var(--ease-out); }
.leaving body > header, .leaving main, .leaving body > footer { opacity: 0.28; transition: opacity 480ms var(--ease-out); }
.js.arriving .wipe { transform: translateY(-50%) scaleX(1); transform-origin: right center; }
.js.arriving body > header, .js.arriving main, .js.arriving body > footer { opacity: 0; transform: translateY(8px); }
.arrived .wipe { transform: translateY(-50%) scaleX(0); transform-origin: right center; transition: transform 520ms var(--ease-in-out) 60ms; }
.arrived body > header, .arrived main, .arrived body > footer { opacity: 1; transform: none; transition: opacity 520ms var(--ease-out) 220ms, transform 520ms var(--ease-out) 220ms; }
@media (prefers-reduced-motion: reduce) {
  .wipe { display: none; }
  .js.arriving body > header, .js.arriving main, .js.arriving body > footer, .leaving main { opacity: 1; transform: none; }
}

/* ---------- case page ---------- */
.nav__links a[aria-current="page"] { border-bottom-color: var(--color-accent); }
.case-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); padding-block: var(--space-xl) var(--space-md); align-items: end; }
.case-hero__back { grid-column: 1 / -1; font-weight: 600; }
.case-hero__title { grid-column: 1 / span 10; font-size: var(--text-display); line-height: 0.94; }
.case-hero__fig { grid-column: 1 / span 7; }
.case-hero__lede { grid-column: 8 / -1; font-size: var(--text-lead); line-height: 1.45; padding-bottom: var(--space-md); }
.strike--line { white-space: normal; display: inline; --strike: 0.12em; }
.strike--line::after { display: none; }
.strike--line { color: var(--color-ink-2); text-decoration: line-through; text-decoration-color: var(--color-accent); text-decoration-thickness: 0.14em; }
.band__title { font-size: var(--text-section); line-height: 1.02; color: var(--color-on-ink); max-width: 20ch; margin-bottom: var(--space-2xl); }
.outcomes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); font-size: var(--text-title); font-weight: 600; line-height: 1.35; }
.outcomes li { padding-top: var(--space-md); border-top: 1px solid var(--color-rule-ink); }
.why { padding-bottom: var(--section-gap-s); display: grid; gap: var(--space-xl); }
.why__text { font-size: var(--text-run); font-weight: 900; letter-spacing: -0.03em; line-height: 1.15; max-width: 28ch; }
@media (max-width: 60rem) {
  .case-hero__title, .case-hero__fig, .case-hero__lede { grid-column: 1 / -1; }
  .outcomes { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- inner pages ---------- */
.page-hero { padding-block: var(--space-2xl); display: grid; gap: var(--space-xl); }
.page-hero__title { font-size: clamp(2.75rem, 8vw, 7.5rem); line-height: 0.95; max-width: 14em; }
.page-hero__lede { font-size: var(--text-lead); line-height: 1.45; max-width: 46ch; color: var(--color-ink-2); }
.section--tight { padding-top: 0; }
.more { margin-top: var(--space-2xl); display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg) var(--space-xl); font-weight: 600; }
.contact > .btn, .contact > .cta-row { margin-top: var(--space-xs); }

/* case pages: the struck list, then what replaced it */
.ledger-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); border-top: var(--rule-heavy) solid var(--color-ink); padding-top: var(--space-2xl); margin-top: var(--space-2xl); }
.ledger-wrap--after { border-top-width: 1px; }
.ledger__head { grid-column: 1 / span 5; font-size: var(--text-section); line-height: 1; }
.ledger__list { grid-column: 6 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl); font-size: var(--text-xl); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.ledger__list li { max-width: 34ch; }
.case-hero__lede strong { font-weight: 600; }
.next { padding-block: 0 var(--section-gap-s); }
.next__link { display: grid; gap: var(--space-sm); padding-top: var(--space-xl); border-top: var(--rule-heavy) solid var(--color-ink); color: var(--color-ink); text-decoration: none; }
.next__label { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.next__title { font-size: var(--text-section); font-weight: 900; letter-spacing: -0.03em; line-height: 1; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.next__link:hover .next__title { text-decoration-color: var(--color-accent); }
.next__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* services page */
.service-block { min-height: 36rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); padding-block: var(--space-2xl) var(--space-3xl); border-top: var(--rule-heavy) solid var(--color-ink); }
.service-block + .service-block { border-top-width: 1px; }
.service-block__head { grid-column: 1 / span 6; display: grid; gap: var(--space-md); align-content: start; }
.service-block__head h2 { font-size: var(--text-section); line-height: 1; }
.service-block__short { font-size: var(--text-lead); color: var(--color-muted); }
.service-block__body { grid-column: 8 / -1; display: grid; gap: var(--space-2xl); }
.service-block__lead { font-size: var(--text-lead); line-height: 1.45; }
.points { margin: 0; display: grid; gap: var(--space-xl); }
.points dt { font-weight: 600; }
.points dd { margin: var(--space-2xs) 0 0; color: var(--color-ink-2); }

/* process page */
.steps { list-style: none; margin: 0; padding: 0; }
.step { min-height: 40rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); padding-block: var(--space-2xl) var(--space-3xl); border-top: var(--rule-heavy) solid var(--color-ink); }
.step + .step { border-top-width: 1px; }
.step__word { grid-column: 1 / span 6; align-self: start; font-size: var(--text-verb); font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; }
.step__body { grid-column: 8 / -1; display: grid; gap: var(--space-lg); align-content: start; }
.step__sub { font-weight: 600; color: var(--color-muted); }
.step__body h3 { font-size: var(--text-title); line-height: 1.15; letter-spacing: -0.02em; }
.step__points { margin: 0; padding-left: var(--space-lg); display: grid; gap: var(--space-xs); color: var(--color-ink-2); }
.step__points li::marker { color: var(--color-accent); }
.quad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.quad li { display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-md); border-top: 1px solid var(--color-rule-ink); }
.quad h3 { font-size: var(--text-title); line-height: 1.15; letter-spacing: -0.02em; color: inherit; }
.band .quad p { color: var(--color-on-ink-muted); }
.quad--paper li { border-top-color: var(--color-rule); }
.quad--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-3xl); }
.quad--wide h3 { font-size: var(--text-section); line-height: 1; }
.quad--wide p { font-size: var(--text-lead); max-width: 34ch; }
.band--near { margin-top: 0; padding-top: var(--space-2xl); }
.quad--paper p { color: var(--color-ink-2); }

/* about page */
.bios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4xl); }
.bio { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: start; }
.bio__photo { grid-column: 1 / span 5; margin: 0; }
.bio__text { grid-column: 6 / -1; display: grid; gap: var(--space-md); }
.bio__text h3 { font-size: var(--text-section); line-height: 1; }
.bio__role { font-weight: 600; color: var(--color-muted); }
details summary { cursor: pointer; font-weight: 600; width: fit-content; text-decoration: underline; text-decoration-color: var(--color-rule); text-decoration-thickness: 2px; text-underline-offset: 0.22em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
details summary:hover { text-decoration-color: var(--color-accent); }
details summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
details p { margin-top: var(--space-md); color: var(--color-ink-2); }
.more-points > :not(summary) { margin-top: var(--space-lg); }
details:not([open]) > :not(summary) { display: none; }

/* contact and 404 */
.contact--page { padding-block: var(--space-2xl) var(--section-gap-s); }
.contact--page .page-hero__title { margin-bottom: var(--space-2xl); }
.contact__facts { margin: var(--space-3xl) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.contact__facts div { padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.contact__facts dt { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.contact__facts dd { margin: var(--space-2xs) 0 0; font-size: var(--text-lead); }
.lost { min-height: calc(100svh - var(--nav-h)); display: grid; align-content: center; gap: var(--space-xl); padding-block: var(--space-2xl); }
.lost__fig { display: block; margin-bottom: var(--space-lg); font-size: var(--text-poster); font-weight: 900; letter-spacing: -0.045em; line-height: 0.85; --strike: 0.09em; }
.lost .strike::after { animation: draw 700ms var(--ease-out) 350ms both; }
@media (prefers-reduced-motion: reduce) { .lost .strike::after { animation: none; } }

@media (max-width: 60rem) {
  .nav__links { gap: var(--space-sm); font-size: var(--text-sm); }
  .ledger__head, .ledger__list, .service-block__head, .service-block__body, .step__word, .step__body, .bio__text { grid-column: 1 / -1; }
  .bio__photo { grid-column: 1 / span 8; }
  .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact__facts { grid-template-columns: minmax(0, 1fr); }
  .outcomes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .quad { grid-template-columns: minmax(0, 1fr); }
}