/* Hallmark · shape: Proof-first studio page (the rebuilt site, its address, the price, who checks it) · genre: modern-minimal · theme: custom · job: hire · idea: "You see your finished website before you pay a penny, so the page shows the rebuild, the address it lives at and the written price" · vibe: "precise, plain-spoken, a workshop you can check"
 * paper: oklch(97.2% 0.006 200) · accent: oklch(84% 0.16 80) hi-vis amber, a nod to the yards and trades Rebuildery serves · field: oklch(25% 0.045 224) petrol · display: Rethink Sans 700, self-hosted · body: Onest 400/600, self-hosted · outlier: Times New Roman, the before-site's face only · hero: Stage, head on columns 1 to 5, the before and after rebuild built live on 6 to 12 · nav: wordmark, three links, the email address as the action · footer: a petrol close, the email set huge over two short link lists · imagery: the product built (a sample rebuild of a made-up skip firm) and Reece's own headshot, retouched in Photocraft · signature: the before and after switch in the hero, then the preview address that forms as you type your business name
 * axes: light/grotesk-sans/chromatic-amber · posture: Committed (petrol field carries the price band and the close, about 30% of the page) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V4 · weakest: H, the price band and the honesty table competed; set the price as the head itself and kept the table to three rows */
/* Hallmark · waive 47c · the sample rebuild is styled divs inside data-slot="rebuild" · the rebuild is the product Rebuildery sells and no client site exists to capture yet */
/* Hallmark · dismissed 58 · terms.html and privacy.html are Long Document legal pages read as prose, not screens · the word budget is for the marketing pages */
/* Hallmark · dismissed 77 · pricing.html and contact.html are four and three section subpages; the home page carries the full run of sections · a pricing page padded to six sections would repeat the home page */
/* Hallmark · waive 78 · terms.html and privacy.html are Long Document legal pages with numbered inline heads · clause headings in a contract read as annotation, not section heads */
/* Hallmark · waive 37 · three families: Rethink Sans, Onest, and Times only inside the before-site sample · the dated face is the point of the before view */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- Chrome ---------- */
.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); }

.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--color-paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.nav.is-scrolled { border-bottom-color: var(--color-rule); }
.nav__in { display: flex; align-items: center; gap: var(--space-xl); min-height: 72px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); font: 700 1.375rem/1 var(--font-display); letter-spacing: -0.025em; color: var(--color-ink); text-decoration: none; border-radius: var(--space-2xs); }
.wordmark svg { width: 28px; height: 28px; flex-shrink: 0; }
.mark__fill { fill: var(--color-accent); }
.mark__line { fill: none; stroke: currentColor; stroke-width: 2.5; }
.nav__links { display: flex; gap: var(--space-lg); margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav__links a, .nav__mail { font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; padding-block: var(--space-xs); border-radius: var(--space-2xs); transition: color var(--dur-short) var(--ease-out); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.nav__mail { color: var(--color-ink); font-weight: 600; padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); }
.nav__mail:hover { border-color: var(--color-ink); }
.nav__menu { display: none; }
@media (max-width: 60rem) {
  .nav__links { display: none; }
  .nav__mail { margin-left: auto; }
  .nav__menu { display: block; position: relative; }
  .nav__menu summary { list-style: none; cursor: pointer; font-size: var(--text-md); padding: var(--space-xs) var(--space-sm); border-radius: var(--space-2xs); min-height: 44px; display: flex; align-items: center; }
  .nav__menu summary::-webkit-details-marker { display: none; }
  .nav__menu summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .nav__menu ul { position: absolute; right: 0; top: calc(100% + var(--space-xs)); z-index: var(--z-dropdown); margin: 0; padding: var(--space-xs); list-style: none; min-width: 12rem; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-input); }
  .nav__menu a { display: block; padding: var(--space-sm) var(--space-md); text-decoration: none; border-radius: var(--space-2xs); }
  .nav__menu a:hover { background: var(--color-paper-2); }
}
@media (max-width: 30rem) { .nav__mail { display: none; } .nav__menu { margin-left: auto; } }

/* ---------- Type ---------- */
.display { font-weight: 700; font-size: var(--text-display); line-height: 1.0; letter-spacing: var(--tracking-display); max-width: 13ch; }
.h2 { font-weight: 700; font-size: var(--text-section); line-height: 1.04; letter-spacing: -0.025em; max-width: 22ch; }
.h3 { font-weight: 700; font-size: var(--text-title); line-height: 1.15; letter-spacing: -0.015em; }
.lead { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); max-width: 40ch; }
.small { font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-pill); 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), 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; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
.btn--quiet:hover { background: var(--color-paper-2); border-color: var(--color-ink-2); }
.btn--amber { background: transparent; color: var(--color-on-field); border-color: var(--color-accent); }
.btn--amber:hover { background: var(--color-field-2); }
.btn--amber:focus-visible { outline-color: var(--color-focus-on-field); }
.textlink { font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.22em; border-radius: var(--space-3xs); transition: text-decoration-color var(--dur-short) var(--ease-out); }
.textlink:hover { text-decoration-color: currentColor; }
.textlink:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } .btn:active { transform: none; } }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-2xl) var(--space-3xl); }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; min-height: min(720px, calc(100dvh - 72px - var(--space-2xl) - var(--space-3xl))); }
.hero__text { grid-column: 1 / span 5; display: grid; gap: var(--space-lg); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
.hero__stage { grid-column: 6 / span 7; display: grid; gap: var(--space-sm); }
@media (max-width: 60rem) { .hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--space-2xl); } .hero__text, .hero__stage { grid-column: 1 / -1; } .rebuild { min-height: 560px; aspect-ratio: auto; } }

/* the before / after switch */
.switch { display: inline-flex; align-self: start; justify-self: start; padding: var(--space-3xs); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); }
.switch legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.switch label:hover { color: var(--color-ink); }
.switch input:checked + label { background: var(--color-ink); color: var(--color-paper); }
.switch input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.switch input:disabled + label { opacity: 0.55; cursor: not-allowed; }
.switch label:active { transform: translateY(1px); }

.rebuild { width: 100%; aspect-ratio: 7 / 5; min-height: 460px; border-radius: var(--radius-card); outline: 1px solid color-mix(in oklab, var(--color-ink) 10%, transparent); outline-offset: -1px; background: var(--color-paper-2); }
.rebuild__view { position: absolute; inset: 0; transition: opacity var(--dur-long) var(--ease-out), visibility var(--dur-long) var(--ease-out); }
.rebuild__view[data-view="before"] { opacity: 0; visibility: hidden; }
.hero__stage:has(#v-before:checked) .rebuild__view[data-view="before"] { opacity: 1; visibility: visible; }
.hero__stage:has(#v-before:checked) .rebuild__view[data-view="after"] { opacity: 0; visibility: hidden; }
.rebuild__caption { font-size: var(--text-sm); color: var(--color-muted); }

/* after: the sample rebuild, a made-up firm */
.ex { height: 100%; display: grid; grid-template-rows: auto 1fr; background: var(--color-ex-paper); color: var(--color-ex-ink); font-family: var(--font-body); container-type: inline-size; }
.ex__bar { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-lg); border-bottom: 1px solid var(--color-ex-tint); font-size: var(--text-xs); }
.ex__logo { font: 700 0.9375rem/1 var(--font-display); letter-spacing: -0.02em; margin-right: auto; }
.ex__call { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-ex-field); color: var(--color-ex-paper); font-weight: 600; }
.ex__hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-lg); align-items: center; padding: var(--space-lg); background: var(--color-ex-field); color: var(--color-ex-paper); }
.ex__h { font: 700 clamp(1.25rem, 4.6cqi, 2.125rem)/1.02 var(--font-display); letter-spacing: -0.03em; }
.ex__p { margin-top: var(--space-xs); font-size: var(--text-xs); opacity: 0.85; max-width: 32ch; }
.ex__btns { display: flex; gap: var(--space-xs); margin-top: var(--space-md); font-size: var(--text-xs); font-weight: 600; }
.ex__btns span { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); border: 1px solid color-mix(in oklab, var(--color-ex-paper) 40%, transparent); }
.ex__btns span:first-child { background: var(--color-ex-accent); color: var(--color-ex-ink); border-color: var(--color-ex-accent); }
.ex__quote { display: grid; gap: var(--space-xs); padding: var(--space-md); border-radius: var(--radius-input); background: var(--color-ex-paper); color: var(--color-ex-ink); font-size: var(--text-xs); }
.ex__quote b { font-family: var(--font-display); font-size: var(--text-md); letter-spacing: -0.01em; }
.ex__field { padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-ex-tint); border-radius: var(--space-2xs); color: var(--color-ex-ink); }
.ex__go { padding: var(--space-xs); border-radius: var(--space-2xs); background: var(--color-ex-field); color: var(--color-ex-paper); text-align: center; font-weight: 600; }
.ex__trust { display: flex; flex-wrap: wrap; gap: var(--space-md); padding: 0 var(--space-lg) var(--space-md); font-size: var(--text-xs); color: var(--color-ex-ink); }
.ex__trust span { padding-left: var(--space-sm); border-left: 2px solid var(--color-ex-field); }
.ex__sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); padding: var(--space-md) var(--space-lg) var(--space-lg); align-content: start; }
.ex__sizes div { padding: var(--space-sm); border-radius: var(--space-xs); background: var(--color-ex-tint); font-size: var(--text-xs); }
.ex__sizes b { display: block; font: 700 var(--text-lg)/1.1 var(--font-display); letter-spacing: -0.02em; }
.ex__foot { display: flex; gap: var(--space-md); padding: var(--space-sm) var(--space-lg); border-top: 1px solid var(--color-ex-tint); font-size: var(--text-xs); color: var(--color-ex-ink); }
@container (max-width: 34rem) { .ex__bar > span:not(.ex__logo):not(.ex__call) { display: none; } .ex__call { white-space: nowrap; } .ex__hero { grid-template-columns: minmax(0, 1fr); } .ex__quote { display: none; } .ex__sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* before: the tired original */
.old { height: 100%; padding: var(--space-md); background: var(--color-old-bg); color: var(--color-old-ink); font-family: var(--font-outlier); font-size: var(--text-sm); }
.old table { width: 100%; border-collapse: separate; border-spacing: var(--space-2xs); background: var(--color-old-panel); border: 2px solid var(--color-old-bar); }
.old td { vertical-align: top; padding: var(--space-xs); }
.old__title { text-align: center; color: var(--color-old-head); font-size: 1.625rem; font-weight: 700; padding: var(--space-sm); }
.old__menu { width: 26%; background: var(--color-old-bar); color: var(--color-old-panel); }
.old__menu a { display: block; color: var(--color-old-panel); padding-block: var(--space-2xs); }
.old a { color: var(--color-old-link); }
.old .old__menu a { color: var(--color-old-panel); }
.old__body p + p { margin-top: var(--space-xs); }
.old__body b { color: var(--color-old-head); }
.old__foot { text-align: center; font-size: var(--text-xs); }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-gap); }
.section--well { background: var(--color-paper-2); }
.section--field { background: var(--color-field); color: var(--color-on-field); --color-focus: var(--color-focus-on-field); }
.section--field .lead, .section--field .small { color: var(--color-on-field-2); }
.section--field .textlink { color: var(--color-on-field); }
.head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }

/* the preview address */
.address { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.address__try { grid-column: 1 / span 7; display: grid; gap: var(--space-lg); }
.address__steps { grid-column: 9 / span 4; }
@media (max-width: 60rem) { .address__try, .address__steps { grid-column: 1 / -1; } }
.field label { display: block; margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: 600; }
.field input { width: 100%; min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-lg); outline: 2px solid transparent; outline-offset: -3px; }
.field input:hover { border-color: var(--color-ink-2); }
.field input:focus-visible { outline-color: var(--color-focus); }
.field input:disabled { opacity: 0.55; cursor: not-allowed; }
.url { padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-card); background: var(--color-field); color: var(--color-on-field); }
.url__line { font: 700 clamp(1.25rem, 2.6vw, 2.25rem)/1.15 var(--font-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.url__host { color: var(--color-on-field-2); }
.url__slug { color: var(--color-accent); }
.url__note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-on-field-2); }
.url__ask { margin-top: var(--space-lg); }
.url .btn--amber:focus-visible { outline-color: var(--color-focus-on-field); }

.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-2xs) var(--space-sm); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li::before { content: counter(step); grid-row: span 2; font: 700 var(--text-xl)/1 var(--font-display); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.steps b { font-weight: 600; }
.steps span { color: var(--color-ink-2); }

/* the price */
.price { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.price__figure { grid-column: 1 / span 7; }
.price__big { font: 700 clamp(4rem, 11vw, 9rem)/0.92 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.price__then { margin-top: var(--space-md); font: 700 var(--text-section)/1.05 var(--font-display); letter-spacing: -0.025em; color: var(--color-on-field); }
.price__list { grid-column: 9 / span 4; margin: 0; display: grid; }
.price__list div { padding-block: var(--space-md); border-top: 1px solid var(--color-field-rule); }
.price__list div:first-child { border-top: 0; padding-top: 0; }
.price__list dt { font-weight: 600; }
.price__list dd { margin: var(--space-3xs) 0 0; color: var(--color-on-field-2); }
.price__more { grid-column: 1 / -1; margin-top: var(--space-xl); }
@media (max-width: 60rem) { .price__figure, .price__list { grid-column: 1 / -1; } }

/* who does what */
.split { width: 100%; border-collapse: collapse; }
.split th { text-align: left; font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); padding: 0 var(--space-lg) var(--space-md) 0; white-space: nowrap; border-bottom: 1px solid var(--color-ink); }
.split td { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); vertical-align: top; font-size: var(--text-lead); width: 50%; }
.split td:last-child, .split th:last-child { padding-right: 0; }
.split td:last-child { font-weight: 600; }
@media (max-width: 40rem) { .split thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .split tr { display: grid; padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); } .split td { display: block; width: auto; padding: 0; border: 0; } .split td::before { content: attr(data-label); display: block; font-size: var(--text-sm); color: var(--color-muted); font-weight: 400; } .split td + td { margin-top: var(--space-sm); } }

/* never asked */
.never { margin: 0; padding: 0; list-style: none; }
.never li { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.never li:last-child { border-bottom: 1px solid var(--color-rule); }
.never b { font: 700 var(--text-display-s)/1.02 var(--font-display); letter-spacing: -0.03em; }
.never span { color: var(--color-ink-2); max-width: 40ch; }
@media (max-width: 60rem) { .never li { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); } }

/* hello */
.hello { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.hello__h { grid-column: 1 / span 5; }
.hello__body { grid-column: 7 / span 6; display: grid; gap: var(--space-xl); justify-items: start; }
.hello__facts { width: 100%; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-ink); }
.hello__facts div { padding: var(--space-md) var(--space-md) 0 0; }
.hello__facts dt { font-size: var(--text-sm); color: var(--color-muted); }
.hello__facts dd { margin: var(--space-3xs) 0 0; font-weight: 600; }
@media (max-width: 40rem) { .hello__facts { grid-template-columns: minmax(0, 1fr); } }
.hello__body p { font-size: var(--text-lead); }
@media (max-width: 60rem) { .hello__h, .hello__body { grid-column: 1 / -1; } }

/* ---------- Footer ---------- */
.foot { background: var(--color-field); color: var(--color-on-field); padding-block: var(--section-gap) var(--space-xl); --color-focus: var(--color-focus-on-field); }
.foot__ask { display: grid; gap: var(--space-lg); padding-bottom: var(--space-3xl); }
.foot__mail { font: 700 clamp(1.25rem, 6.2vw, 5.5rem)/1 var(--font-display); letter-spacing: -0.035em; color: var(--color-on-field); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; overflow-wrap: anywhere; border-radius: var(--space-2xs); transition: color var(--dur-short) var(--ease-out); }
.foot__mail:hover { color: var(--color-accent); }
.foot__mail:focus-visible { outline: 2px solid var(--color-focus-on-field); outline-offset: 4px; }
.foot__lede { color: var(--color-on-field-2); font-size: var(--text-lead); max-width: 44ch; }
.foot__base { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); padding-top: var(--space-xl); border-top: 1px solid var(--color-field-rule); font-size: var(--text-sm); color: var(--color-on-field-2); }
.foot__brand { grid-column: 1 / span 5; display: grid; gap: var(--space-sm); align-content: start; }
.foot__brand .wordmark { color: var(--color-on-field); }
.foot__list { grid-column: span 2; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); align-content: start; }
.foot__list a { color: var(--color-on-field); text-decoration: none; border-radius: var(--space-3xs); }
.foot__list a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.foot__list a:focus-visible, .foot__brand a:focus-visible { outline: 2px solid var(--color-focus-on-field); outline-offset: 2px; }
.foot__list li:first-child { color: var(--color-on-field-2); }
@media (max-width: 60rem) { .foot__brand { grid-column: 1 / -1; } .foot__list { grid-column: span 6; } }

/* ---------- Inner pages ---------- */
.page-head { padding-block: var(--space-3xl) var(--section-gap-s); }
.page-head .display { max-width: 16ch; }
.page-head .lead { margin-top: var(--space-lg); }
.doc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); padding-bottom: var(--section-gap); }
.doc__toc { grid-column: 1 / span 3; position: sticky; top: var(--space-3xl); align-self: start; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); font-size: var(--text-sm); }
.doc__toc a { color: var(--color-ink-2); text-decoration: none; border-radius: var(--space-3xs); }
.doc__toc a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.doc__body { grid-column: 5 / span 7; }
.doc__body h2 { font-weight: 700; font-size: var(--text-xl); line-height: 1.2; letter-spacing: -0.015em; margin: var(--space-2xl) 0 var(--space-md); }
.doc__body h2:first-child { margin-top: 0; }
.doc__body p, .doc__body li { max-width: 68ch; line-height: 1.7; color: var(--color-ink-2); }
.doc__body p + p, .doc__body p + ul, .doc__body ul + p { margin-top: var(--space-md); }
.doc__body ul { padding-left: var(--space-lg); margin: var(--space-md) 0 0; display: grid; gap: var(--space-xs); }
.doc__body strong { color: var(--color-ink); }
.doc__body a { text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; border-radius: var(--space-3xs); }
@media (max-width: 60rem) { .doc__toc { display: none; } .doc__body { grid-column: 1 / -1; } }

.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* pricing page */
.offer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.offer__fig { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin-bottom: var(--space-3xl); }
.offer__row { padding-top: var(--space-lg); border-top: 1px solid var(--color-ink); }
.offer__row b { display: block; font: 700 clamp(3.25rem, 7vw, 6rem)/0.95 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.offer__row span { display: block; margin-top: var(--space-xs); color: var(--color-ink-2); }
.offer__table { grid-column: 1 / -1; }
@media (max-width: 60rem) { .offer__table { grid-column: 1 / -1; } }
@media (max-width: 40rem) { .offer__fig { grid-template-columns: minmax(0, 1fr); } }
.incl { width: 100%; border-collapse: collapse; }
.incl caption { text-align: left; font-weight: 700; font-size: var(--text-title); font-family: var(--font-display); letter-spacing: -0.015em; padding-bottom: var(--space-md); }
.incl th, .incl td { text-align: left; padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: 1px solid var(--color-rule); vertical-align: top; }
.incl th { font-weight: 600; width: 38%; }
.incl td { color: var(--color-ink-2); padding-right: 0; }
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.faq__h { grid-column: 1 / span 4; }
.faq__list { grid-column: 6 / span 7; }
@media (max-width: 60rem) { .faq__h, .faq__list { grid-column: 1 / -1; } }
.faq details { border-top: 1px solid var(--color-rule); }
.faq details:last-child { border-bottom: 1px solid var(--color-rule); }
.faq summary { display: flex; justify-content: space-between; gap: var(--space-md); align-items: center; min-height: 64px; padding-block: var(--space-md); cursor: pointer; list-style: none; font-weight: 600; font-size: var(--text-lg); border-radius: var(--space-2xs); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; font: 400 var(--text-xl)/1 var(--font-body); color: var(--color-ink-2); transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-ink-2); }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); max-width: 60ch; }

/* about + contact */
.story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); padding-bottom: var(--section-gap); }
.story__body { grid-column: 1 / span 7; display: grid; gap: var(--space-lg); align-content: start; }
.story__body p { font-size: var(--text-lead); line-height: 1.6; max-width: 46ch; }
.story__facts { grid-column: 9 / span 4; margin: 0; display: grid; }
.story__facts div { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.story__facts div:first-child { border-top: 1px solid var(--color-ink); }
.story__facts dt { font-size: var(--text-sm); color: var(--color-muted); }
.story__facts dd { margin: var(--space-3xs) 0 0; font-weight: 600; }
@media (max-width: 60rem) { .story__body, .story__facts { grid-column: 1 / -1; } }
.mailbig { display: inline-block; font: 700 clamp(1.25rem, 6vw, 4.5rem)/1.05 var(--font-display); white-space: nowrap; letter-spacing: -0.035em; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 0.07em; text-underline-offset: 0.12em; overflow-wrap: anywhere; border-radius: var(--space-2xs); transition: text-decoration-color var(--dur-short) var(--ease-out); }
.mailbig:hover { text-decoration-color: var(--color-ink); }
.mailbig:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* ---------- One reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .rebuild__view, .faq summary::after, .switch label { transition: none; }
}

/* about: where AI fits */
.fits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.fits > div { display: grid; gap: var(--space-md); align-content: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-field-rule); }
.fits ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); font-size: var(--text-lead); }
.fits h3 { color: var(--color-on-field-2); font-size: var(--text-md); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
@media (max-width: 40rem) { .fits { grid-template-columns: minmax(0, 1fr); } }
.section--flush { padding-top: 0; }
.offer__not { margin-top: var(--space-lg); }
.next { margin: var(--space-3xl) 0 0; padding: 0; list-style: none; counter-reset: next; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); grid-column: 1 / -1; }
.next li { counter-increment: next; display: grid; gap: var(--space-xs); padding-top: var(--space-lg); border-top: 1px solid var(--color-ink); }
.next li::before { content: counter(next); font: 700 var(--text-3xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.next b { font-family: var(--font-display); font-size: var(--text-title); font-weight: 700; letter-spacing: -0.015em; }
.next span { color: var(--color-ink-2); }
@media (max-width: 40rem) { .next { grid-template-columns: minmax(0, 1fr); } }
.faq details:not([open]) > p { display: none; }
.offer { padding-bottom: var(--space-2xl); }
.section .story { padding-bottom: 0; }
.foot--slim { padding-top: var(--space-2xl); }
.foot--slim .foot__base { border-top: 0; padding-top: 0; }

/* the portrait */
.portrait { margin: 0; aspect-ratio: 4 / 5; width: 100%; border-radius: var(--radius-card); outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hello { align-items: center; }
.hello__body .h2 { margin-bottom: var(--space-sm); }
.story__side { grid-column: 9 / span 4; display: grid; gap: var(--space-xl); align-content: start; }
.story__side .story__facts { grid-column: auto; }
.story__side .portrait { max-width: 360px; }
@media (max-width: 60rem) { .story__side { grid-column: 1 / -1; } .hello__h .portrait { max-width: 420px; } }
.phone { font-size: var(--text-lead); }
.foot__brand a[href^="tel"] { color: var(--color-on-field); border-radius: var(--space-3xs); }
.about__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-md); max-width: 40rem; }
.about__facts div { padding-bottom: var(--space-md); }
.story__side { justify-items: end; }
@media (max-width: 60rem) { .story__side { justify-items: start; } }

/* what goes into a rebuild */
.work { margin: 0; padding: 0; list-style: none; counter-reset: work; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-columns); }
.work li { counter-increment: work; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-2xs) var(--space-sm); padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.work li::before { content: counter(work, decimal-leading-zero); grid-row: span 2; font: 700 var(--text-lg)/1.2 var(--font-display); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.work b { font: 700 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.015em; }
.work span { color: var(--color-ink-2); }
.work--field li { border-top-color: var(--color-field-rule); }
.work--field li::before { color: var(--color-accent); }
.work--field span { color: var(--color-on-field-2); }
@media (max-width: 40rem) { .work { grid-template-columns: minmax(0, 1fr); } }

/* contact form */
.ask { display: grid; gap: var(--space-xl); }
.ask__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
.ask__wide { grid-column: 1 / -1; }
.ask__opt { font-weight: 400; color: var(--color-muted); }
.ask__trap { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.field textarea { width: 100%; min-height: 8rem; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); resize: vertical; outline: 2px solid transparent; outline-offset: -3px; }
.field textarea:hover { border-color: var(--color-ink-2); }
.field textarea:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid], .field textarea[aria-invalid] { border-color: var(--color-error); }
.ask .field input { font-size: var(--text-md); }
.ask__send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.ask__help { min-height: 1lh; color: var(--color-ink-2); }
@media (max-width: 40rem) { .ask__grid { grid-template-columns: minmax(0, 1fr); } }

/* copy buttons */
.copy--inline { margin-left: var(--space-xs); min-height: 44px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out); }
.copy--inline:hover { border-color: var(--color-ink); }
.copy--inline:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.copy--inline:active { transform: translateY(1px); }
.foot__mailrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
.story__facts { align-content: start; }