/* ============================================================
   styles.css — Draper Construction, Inc.
   Consumes ONLY tokens.css. No colour / radius / spacing / timing
   literals live in this file (direction decisions 3, 5, 8).
   ============================================================ */

@font-face {
  font-family: "Zilla Slab";
  src: url("assets/zillaslab-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("assets/sourcesans3-var.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: optional;
}

/* ---------------- reset / base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

/* gypsum grain over the plaster ground (decision 5) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--tex-grain);
  opacity: var(--tex-grain-opacity);
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; text-wrap: pretty; }
img, svg { max-width: 100%; }
code { font-family: var(--font-mono); font-size: 0.94em; }

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

a { color: var(--color-accent); text-underline-offset: 0.18em; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--border-rule) solid var(--color-accent);
  outline-offset: var(--space-1);
}

.skip {
  position: absolute; left: -9999px;
  background: var(--color-accent); color: var(--color-accent-ink);
  padding: var(--space-2) var(--space-3); z-index: 99;
}
.skip:focus { left: var(--space-3); top: var(--space-3); }

/* ---------------- layout ---------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Narrow sections keep the reading measure but stay on the page's left edge.
   Centring them broke the left alignment every other section shares
   (direction decision 4) — a 240px jog at 1440px. */
.wrap--narrow { max-width: var(--maxw); }
.wrap--narrow > * { max-width: var(--maxw-narrow); }

.sec { padding-block: var(--space-7); }
.sec--tight { padding-block: var(--space-6); }

.sec__head { margin-bottom: var(--space-5); max-width: var(--measure); }
.h2 { font-size: var(--step-3); }
.sec__intro { margin-top: var(--space-3); color: var(--color-ink-soft); max-width: var(--measure); }

.kicker {
  margin: 0 0 var(--space-2);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
}
.lede { margin-top: var(--space-3); font-size: var(--step-1); color: var(--color-ink-soft); max-width: var(--measure); }

.note {
  margin-top: var(--space-4);
  font-size: var(--step--1);
  color: var(--color-ink-soft);
  max-width: var(--measure);
  padding-left: var(--space-3);
  border-left: var(--border-rule) solid var(--color-rule-strong);
}
.note--inline { margin-top: var(--space-3); }

/* fixed ink bands — theme-INDEPENDENT tokens only */
.band {
  background: var(--color-band);
  color: var(--color-on-band);
  position: relative;
  overflow: hidden;
}
.band::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--tex-grain);
  opacity: var(--tex-grain-opacity-band);
  pointer-events: none;
}
.band > * { position: relative; }
.kicker--band { color: var(--color-accent-on-band); }
.sec__intro--band, .note--band { color: var(--color-on-band-muted); }
.note--band { border-left-color: var(--color-rule-on-band); }
.band .h2 { color: var(--color-on-band); }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border: var(--border-rule) solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-quick) var(--ease-standard),
              background-color var(--dur-quick) var(--ease-standard),
              border-color var(--dur-quick) var(--ease-standard);
}
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule-strong); }
.btn--onband { background: var(--color-accent-on-band); color: var(--color-on-accent-band); border-color: var(--color-accent-on-band); }
.btn--ghostband { background: transparent; color: var(--color-on-band); border-color: var(--color-rule-on-band); }
.btn--full { width: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-2px); }
}
.btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn--ghostband:hover { border-color: var(--color-accent-on-band); color: var(--color-accent-on-band); }

/* ---------------- nav ---------------- */
.nav {
  border-bottom: var(--border-hair) solid var(--color-rule);
  background: var(--color-ground);
  position: sticky;
  top: 0;
  z-index: 20;
}
.nav__in {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 4.25rem;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--color-ink); margin-right: auto; }
.brand__mark { width: 2rem; height: 2rem; color: var(--color-accent); flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: var(--leading-tight); }
.brand__text strong { font-family: var(--font-display); font-size: var(--step-0); letter-spacing: var(--tracking-display); }
.brand__sub { font-size: var(--step--1); color: var(--color-ink-soft); }

.nav__links { display: none; gap: var(--space-4); }
.nav__links a { color: var(--color-ink); text-decoration: none; font-size: var(--step--1); font-weight: var(--weight-medium); padding-block: var(--space-2); }
.nav__links a:hover { color: var(--color-accent); }

.nav__act { display: flex; align-items: center; gap: var(--space-2); }
.tbtn {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: transparent;
  border: var(--border-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  cursor: pointer;
}
.tbtn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.nav__cta { font-variant-numeric: tabular-nums; }

/* hamburger — shown only where the desktop nav collapses (< 62rem) */
.navtog {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: transparent;
  border: var(--border-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  cursor: pointer;
}
.navtog:hover { border-color: var(--color-accent); color: var(--color-accent); }
.navtog__bars { position: relative; width: 20px; height: 14px; }
.navtog__bars span {
  position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px;
}
.navtog__bars span:nth-child(1) { top: 0; }
.navtog__bars span:nth-child(2) { top: 6px; }
.navtog__bars span:nth-child(3) { top: 12px; }
/* bars positioned with `top`, morphed with `transform` — a clean ×, not a lopsided > */
.navtog[aria-expanded="true"] .navtog__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.navtog[aria-expanded="true"] .navtog__bars span:nth-child(2) { opacity: 0; }
.navtog[aria-expanded="true"] .navtog__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) {
  .navtog__bars span { transition: top var(--dur-quick) var(--ease-standard), transform var(--dur-quick) var(--ease-standard), opacity var(--dur-quick) var(--ease-standard); }
}

@media (min-width: 62rem) {
  .nav__links { display: flex; }
  .navtog { display: none; }
}

/* mobile: the nav collapses to an accessible dropdown panel */
@media (max-width: 61.99rem) {
  .nav { position: relative; }
  .nav__links {
    position: absolute; top: calc(100% + var(--border-hair)); right: 0; left: 0;
    flex-direction: column; gap: 0;
    background: var(--color-surface);
    border-block: var(--border-hair) solid var(--color-rule);
    padding: var(--space-2) var(--space-4);
    z-index: 50;
  }
  .nav__links.open { display: flex; }
  .nav__links a { padding-block: var(--space-3); border-bottom: var(--border-hair) solid var(--color-rule); }
  .nav__links a:last-child { border-bottom: none; }
}

/* ---------------- hero (statement-split 7/5) ---------------- */
.hero { padding-top: var(--space-6); position: relative; }
.hero__in {
  display: grid;
  gap: var(--space-5);
  align-items: start;
  padding-bottom: var(--space-6);
}
.hero__h1 { font-size: var(--step-5); }
.hero__act { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* Carries the page's single headline fact (direction.md decision 1), so it keeps
   its weight — but as a loaded top rule over hairlines, not a uniform box. The
   old 2px-ink outline was the same treatment .form uses, which made a static
   proof read as an input surface; it also rhymes with .proof2's top rule below,
   so the right column reads as two register blocks, heaviest first. */
.proof {
  border: var(--border-hair) solid var(--color-rule);
  border-top: var(--border-heavy) solid var(--color-ink);
  background: var(--color-surface);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}
.proof__label {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  font-weight: var(--weight-medium);
}
.proof__num {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-1);
}
.proof__sub { margin-top: var(--space-2); font-size: var(--step-0); }
.proof__src { margin-top: var(--space-3); font-size: var(--step--1); color: var(--color-ink-soft); border-top: var(--border-hair) solid var(--color-rule); padding-top: var(--space-2); }

/* second, quieter proof — fills the right column and carries a real verified fact */
.hero__aside { display: grid; gap: var(--space-4); align-content: start; }
.proof2 { border-top: var(--border-rule) solid var(--color-rule-strong); padding-top: var(--space-3); }
.proof2__label {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--color-ink-soft);
}
/* Years are data, not navigation. Accent blue is reserved for things that
   actually click, so these sit in ink and are separated by the page's own
   hairline rule rather than by nav-like gaps. */
.proof2__yrs {
  list-style: none; margin: var(--space-2) 0 0; padding: 0;
  display: flex; flex-wrap: wrap;
  column-gap: 0; row-gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
.proof2__yrs li + li {
  margin-left: var(--space-3);
  padding-left: var(--space-3);
  border-left: var(--border-hair) solid var(--color-rule);
}
.proof2__src { margin-top: var(--space-2); font-size: var(--step--1); color: var(--color-ink-soft); }

@media (min-width: 62rem) {
  /* stretch so the aside spans the full statement height, then distribute its
     two blocks — otherwise the right column dies halfway and leaves a void
     under the registration list while the left column runs on to the buttons */
  .hero__in { grid-template-columns: 7fr 5fr; gap: var(--space-6); align-items: stretch; }
  /* licensed break (b): the proof card bleeds toward the right edge */
  .hero__aside { margin-right: calc(var(--gutter) * -1); align-content: space-between; }
}

/* Signature moment — the chalk line snaps (decision 2).
   Driven by an IntersectionObserver rather than `animation-timeline: view()`:
   the seam sits ~790px down, so a scroll-timeline range either completed
   before the user could see it or never advanced at all. Default state is
   DRAWN, so no-JS and reduced-motion users see a finished line — the
   no-JS reveal trap, never an invisible element. */
.snapline { height: var(--border-heavy); background: var(--color-rule); overflow: hidden; }
.snapline span {
  display: block;
  height: 100%;
  background: var(--color-accent);
  transform: scaleX(1);
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  /* `.armed` is applied by app.js itself, not by the `html.js` flag: if the
     script fails to load the line simply stays drawn instead of vanishing. */
  /* `.armed` hides the line with NO transition (so a seam already on-screen
     doesn't visibly retract first); the draw transition lives on `.in`. */
  .snapline span.armed { transform: scaleX(0); }
  .snapline span.armed.in {
    transform: scaleX(1);
    transition: transform var(--dur-snap) var(--ease-snap);
  }
}

/* ---------------- work plates (bespoke motifs, no photography) ---------------- */
.plates { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.plate { border: var(--border-hair) solid var(--color-rule); background: var(--color-surface); }
.plate__art {
  margin: 0;
  aspect-ratio: 3 / 2;
  background: var(--color-sunken);
  overflow: hidden;
  border-bottom: var(--border-hair) solid var(--color-rule);
}
.plate__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plate__cap { padding: var(--space-3); }
.plate__t { font-size: var(--step-1); margin-top: var(--space-2); }
.plate__d { font-size: var(--step--1); color: var(--color-ink-soft); margin-top: var(--space-1); }

.chip {
  display: inline-block;
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  border: var(--border-hair) solid var(--color-accent);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
}

/* featured lead tile breaks the uniform grid (direction decision 4) */
@media (min-width: 40rem) { .plates { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) {
  .plates { grid-template-columns: repeat(3, 1fr); }
  .plate--lead { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
  .plate--lead .plate__art { aspect-ratio: auto; flex: 1; min-height: 22rem; }
  .plate--lead .plate__t { font-size: var(--step-2); }
}

/* ---------------- ledger (table-like rows, not cards) ---------------- */
.ledger { list-style: none; margin: 0; padding: 0; border-top: var(--border-hair) solid var(--color-rule-on-band); }
.ledger__row {
  display: grid;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3);
  border-bottom: var(--border-hair) solid var(--color-rule-on-band);
  align-items: baseline;
  transition: background-color var(--dur-quick) var(--ease-standard);
}
.ledger__yr {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--step-2);
  color: var(--color-accent-on-band);
  font-variant-numeric: tabular-nums;
}
.ledger__what { color: var(--color-on-band); }
.ledger__src { font-size: var(--step--1); color: var(--color-on-band-muted); }

@media (min-width: 48rem) {
  .ledger__row { grid-template-columns: 7rem 1fr auto; }
}

/* Closing tenure line. Deliberately NOT a ledger row: prose, no year column,
   no rule, no hover — the ledger holds city registrations only, and the
   forty-years fact reads as the separate BBB-sourced statement it is. */
.tally {
  margin-top: var(--space-4);
  max-width: 44ch;
  color: var(--color-on-band);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}
.tally__lead {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-accent-on-band);
}

/* ---------------- running list (not a card grid — decision 4) ---------------- */
.rlist { list-style: none; margin: 0; padding: 0; border-top: var(--border-rule) solid var(--color-ink); }
.rlist__i {
  display: grid;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-4);
  border-bottom: var(--border-hair) solid var(--color-rule);
  align-items: baseline;
  transition: padding-left var(--dur-quick) var(--ease-standard);
}
.rlist__n {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-accent);
  letter-spacing: var(--tracking-label);
}
.rlist__t { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-2); }
.rlist__d { color: var(--color-ink-soft); }

@media (prefers-reduced-motion: no-preference) {
  .rlist__i:hover { padding-left: var(--space-2); }
}
@media (min-width: 48rem) {
  .rlist__i { grid-template-columns: 3rem minmax(14rem, 22rem) 1fr; }
}

/* ---------------- service area + map ---------------- */
.area { display: grid; gap: var(--space-5); }

.towns {
  list-style: none; margin: var(--space-5) 0 0; padding: 0;
  display: grid; gap: 0;
  border-top: var(--border-hair) solid var(--color-rule);
  align-content: start;
}
.towns li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: var(--border-hair) solid var(--color-rule);
}
.towns__n { flex: 1; font-weight: var(--weight-medium); }
.towns__m {
  font-size: var(--step--1); color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-label);
  text-transform: uppercase; white-space: nowrap;
}

/* the map itself */
.map { margin: 0; }
/* Names the figure for anyone scanning the column, using the same uppercase
   label idiom as the hero's registration block. */
.map__label {
  margin: 0 0 var(--space-2);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--color-ink-soft);
}
.map__svg {
  display: block; width: 100%; height: auto;
  background: var(--color-surface);
  border: var(--border-rule) solid var(--color-ink);
}
/* road network: real OpenStreetMap geometry, three-step hierarchy */
.map__rd { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map__rd--lane  { stroke: var(--color-rule-strong); stroke-opacity: 0.42; stroke-width: 0.9; }
.map__rd--minor { stroke: var(--color-rule-strong); stroke-opacity: 0.7;  stroke-width: 1.5; }
.map__rd--mid   { stroke: var(--color-rule-strong); stroke-opacity: 0.9;  stroke-width: 2.2; }
.map__rd--major { stroke: var(--color-ink-soft);    stroke-opacity: 0.8;  stroke-width: 3.2; }

/* waterways: real OpenStreetMap geometry */
.map__river {
  fill: none; stroke: var(--color-accent); stroke-opacity: 0.55;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.map__lake {
  fill: var(--color-accent); fill-opacity: 0.28;
  stroke: var(--color-accent); stroke-opacity: 0.45; stroke-width: 1;
}

/* halo keeps town markers legible over contour + water linework */
.map__halo { fill: var(--color-surface); fill-opacity: 0.92; }
.map__plate { fill: var(--color-surface); fill-opacity: 0.86; }

.map__area {
  fill: var(--color-accent); fill-opacity: 0.06;
  stroke: var(--color-accent); stroke-width: 2; stroke-dasharray: 7 6;
}
.map__ring2 {
  fill: none; stroke: var(--color-accent); stroke-opacity: 0.4;
  stroke-width: 1.5; stroke-dasharray: 4 6;
}
.map__rlab {
  fill: var(--color-accent); font-family: var(--font-body);
  font-size: 15px; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.map__dot { fill: var(--color-ink); }
.map__dot--base { fill: var(--color-accent); }
.map__hub { fill: none; stroke: var(--color-accent); stroke-width: 2; }
/* paint-order halo keeps every label readable where it crosses
   contour lines or a river (Wabash and Somerset both sit on water) */
.map__label, .map__rlab, .map__scale text, .map__n text {
  paint-order: stroke fill;
  stroke: var(--color-surface);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.map__label {
  fill: var(--color-ink); font-family: var(--font-body);
  font-size: 19px; font-weight: var(--weight-medium);
}
.map__label--base {
  fill: var(--color-accent); font-family: var(--font-display);
  font-weight: var(--weight-display); font-size: 24px;
  stroke-width: 5px;
}
.map__scale line { stroke: var(--color-ink-soft); stroke-width: 2; }
.map__scale text,
.map__n text {
  fill: var(--color-ink-soft); font-family: var(--font-body);
  font-size: 16px; letter-spacing: var(--tracking-label);
}
.map__n path { fill: var(--color-ink-soft); }
.map__cap {
  margin-top: var(--space-3);
  font-size: var(--step--1); color: var(--color-ink-soft);
}
.map__attr {
  display: block; margin-top: var(--space-2);
  font-size: var(--step--1); color: var(--color-ink-soft); opacity: 0.85;
}

/* Two label layers so town NAMES are present at every size: the small map
   (~335px wide) renders a 19px label near 8px, so it gets its own larger,
   selectively-abbreviated set with placement re-solved at that size. */
.map__lab--sm { display: none; }

@media (max-width: 61.99rem) {
  .map__lab--lg { display: none; }
  .map__lab--sm { display: block; }
  .map__rlab { font-size: 24px; }
  .map__scale text, .map__n text { font-size: 24px; }
}

@media (min-width: 62rem) {
  .area { grid-template-columns: 7fr 5fr; align-items: start; gap: var(--space-6); }
  /* Eight ruled rows in one column ran ~400px past the map and stranded the
     right side. Two columns of four lands both sides together. Column flow
     keeps 1-4 above 5-8 rather than interleaving them left-to-right. */
  .towns {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    column-gap: var(--space-5);
  }
  /* Spans both columns so it closes the trailing space under whichever column
     runs short, instead of hanging off the end of the map. The grid row gap
     supplies its spacing, so it drops its own top margin. */
}

/* ---------------- empty proof state ---------------- */
.empty { border: var(--border-rule) dashed var(--color-rule-strong); padding: var(--space-5); background: var(--color-surface); }
.empty__lead { font-size: var(--step-1); }
.empty__body { margin-top: var(--space-3); color: var(--color-ink-soft); max-width: var(--measure); }
.empty__slots { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.slot { border: var(--border-hair) solid var(--color-rule); padding: var(--space-3); background: var(--color-ground); }
.slot p { margin-top: var(--space-2); color: var(--color-ink-soft); font-style: italic; }
@media (min-width: 48rem) { .empty__slots { grid-template-columns: repeat(3, 1fr); } }

/* ---------------- builder ---------------- */
.builder { display: grid; gap: var(--space-5); }
.builder__ph {
  border: var(--border-rule) dashed var(--color-rule-strong);
  padding: var(--space-4);
  display: grid; gap: var(--space-3); justify-items: start;
  color: var(--color-rule-strong);
  background: var(--color-surface);
}
.builder__ph svg { width: 100%; max-width: 12rem; }
@media (min-width: 62rem) { .builder { grid-template-columns: 7fr 4fr; gap: var(--space-6); align-items: start; } }

/* ---------------- Q&A ---------------- */
.qa { margin: 0; border-top: var(--border-rule) solid var(--color-ink); }
.qa__i { padding-block: var(--space-4); border-bottom: var(--border-hair) solid var(--color-rule); }
.qa dt { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-1); }
.qa dd { margin: var(--space-2) 0 0; color: var(--color-ink-soft); max-width: var(--measure); }
/* Editorial "we could not verify this, confirm at intake" marker. It must NOT
   read as a link: accent + underline is this page's link signature (direction
   decision 8 lists link underlines as accent's territory), and these are not
   interactive. Muted ink in brackets instead — an annotation, not an affordance.
   Bracketed rather than boxed so it stays distinct from .chip. */
.tag {
  display: inline-block;
  margin-left: var(--space-2);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-soft);
  white-space: nowrap;
}
.tag::before { content: "["; }
.tag::after  { content: "]"; }

/* ---------------- contact + form ---------------- */
.contact { display: grid; gap: var(--space-5); }
.dl { margin: var(--space-4) 0 0; }
.dl__r { display: grid; gap: var(--space-1); padding-block: var(--space-3); border-bottom: var(--border-hair) solid var(--color-rule); }
.dl dt { font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-ink-soft); font-weight: var(--weight-medium); }
.dl dd { margin: 0; }
.muted { color: var(--color-ink-soft); }
@media (min-width: 40rem) { .dl__r { grid-template-columns: 8rem 1fr; align-items: baseline; } }
@media (min-width: 62rem) { .contact { grid-template-columns: 5fr 6fr; gap: var(--space-6); align-items: start; } }

.form { border: var(--border-rule) solid var(--color-ink); background: var(--color-surface); padding: var(--space-4); }
.form__t { font-size: var(--step-2); margin-bottom: var(--space-4); }
.field { margin-bottom: var(--space-3); }
.field label { display: block; font-size: var(--step--1); font-weight: var(--weight-medium); margin-bottom: var(--space-1); }
.opt { color: var(--color-ink-soft); font-weight: var(--weight-body); }

/* one shared field rule — select normalised so heights match (Recurring craft traps) */
.field input,
.field select,
.field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  line-height: var(--leading-snug);
  color: var(--color-ink);
  background: var(--color-ground);
  border: var(--border-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
}
.field textarea { resize: vertical; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: var(--space-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2315628f' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 1.1rem;
}
:root[data-theme="dark"] .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%236fc0ee' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%236fc0ee' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: var(--color-accent); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { margin-top: var(--space-2); font-size: var(--step--1); color: var(--color-ink-soft); }
.form__ok:not(:empty) {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: var(--border-rule) solid var(--color-accent);
  background: var(--color-accent-wash);
  font-weight: var(--weight-medium);
}

/* ---------------- pitch transition ---------------- */
.transition {
  background: var(--color-band-2);
  color: var(--color-on-band);
  padding-block: var(--space-6);
  border-block: var(--border-heavy) solid var(--color-accent-on-band);
}
.h2--band { color: var(--color-on-band); font-size: var(--step-2); margin-top: var(--space-2); }
.transition__p { margin-top: var(--space-3); color: var(--color-on-band-muted); }
.transition__p a { color: var(--color-accent-on-band); }

/* ---------------- the case ---------------- */
.case { display: grid; gap: var(--space-5); }
.case__lead { font-size: var(--step-1); }
.case__main p + p { margin-top: var(--space-3); color: var(--color-ink-soft); }
.case__main { max-width: var(--measure); }
.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); align-content: start; }
.stat { border-left: var(--border-heavy) solid var(--color-accent); padding-left: var(--space-3); }
.stat__n {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--step-3);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}
.stat__d { margin-top: var(--space-1); }
.stat__s { margin-top: var(--space-2); font-size: var(--step--1); color: var(--color-ink-soft); }
@media (min-width: 62rem) { .case { grid-template-columns: 7fr 5fr; gap: var(--space-6); } }

/* ---------------- proposal ---------------- */
.plans { display: grid; gap: var(--space-4); }
.plan { border: var(--border-hair) solid var(--color-rule-strong); background: var(--color-surface); padding: var(--space-4); display: flex; flex-direction: column; }
.plan--lead { border: var(--border-rule) solid var(--color-accent); }
.plan__tag {
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-weight: var(--weight-medium); color: var(--color-accent); margin-bottom: var(--space-2);
}
/* reserved slot so both plan headings sit on the same baseline */
.plan__tag--empty { color: transparent; }
.plan__t { font-size: var(--step-2); }
.plan__price { margin-top: var(--space-3); display: flex; align-items: baseline; gap: var(--space-1); }
.plan__amt { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-4); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.plan__per { color: var(--color-ink-soft); }
.plan__zero { color: var(--color-ink-soft); font-size: var(--step--1); }
.plan__list { list-style: none; margin: var(--space-4) 0; padding: 0; display: grid; gap: var(--space-2); }
.plan__list li { padding-left: var(--space-4); position: relative; }
.plan__list li::before { content: "\2192"; position: absolute; left: 0; color: var(--color-accent); }
.plan .btn { margin-top: auto; }
@media (min-width: 48rem) { .plans { grid-template-columns: repeat(2, 1fr); } }

.anchor { margin-top: var(--space-6); }
.anchor__t { font-size: var(--step-1); margin-bottom: var(--space-3); }
.anchor__list { list-style: none; margin: 0; padding: 0; border-top: var(--border-hair) solid var(--color-rule); }
.anchor__list li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2);
  padding-block: var(--space-3); border-bottom: var(--border-hair) solid var(--color-rule);
  color: var(--color-ink-soft);
}
.anchor__list li span:last-child { font-variant-numeric: tabular-nums; color: var(--color-ink); font-weight: var(--weight-medium); }

.domains { margin-top: var(--space-6); }
.dom { list-style: none; margin: var(--space-4) 0 0; padding: 0; border-top: var(--border-hair) solid var(--color-rule); }
.dom__i {
  display: grid; gap: var(--space-1) var(--space-3);
  padding-block: var(--space-3);
  border-bottom: var(--border-hair) solid var(--color-rule);
  align-items: baseline;
}
.dom__i code { font-size: var(--step-0); word-break: break-word; }
.dom__s {
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-weight: var(--weight-medium); color: var(--color-ink-soft);
}
.dom__s--ok { color: var(--color-accent); }
.dom__w { font-size: var(--step--1); color: var(--color-ink-soft); }
.dom__i--taken code { color: var(--color-ink-soft); text-decoration: line-through; }
@media (min-width: 48rem) { .dom__i { grid-template-columns: 20rem 8rem 1fr; } }

/* ---------------- growth ---------------- */
.grow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.grow__i { border-top: var(--border-rule) solid var(--color-rule-strong); padding-top: var(--space-3); }
.grow__i h3 { font-size: var(--step-1); }
.grow__i p { margin-top: var(--space-2); color: var(--color-ink-soft); font-size: var(--step--1); }
@media (min-width: 48rem) { .grow { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-5); } }
@media (min-width: 62rem) { .grow { grid-template-columns: repeat(4, 1fr); } }

/* ---------------- timeline ---------------- */
.tl { list-style: none; margin: 0; padding: 0; border-top: var(--border-hair) solid var(--color-rule-on-band); }
.tl__i {
  display: grid; gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  border-bottom: var(--border-hair) solid var(--color-rule-on-band);
}
.tl__n {
  font-family: var(--font-mono); font-size: var(--step-0);
  color: var(--color-accent-on-band); letter-spacing: var(--tracking-label);
}
.tl__b h3 { font-size: var(--step-1); color: var(--color-on-band); }
.tl__b p { margin-top: var(--space-2); color: var(--color-on-band-muted); max-width: var(--measure); }
.tl__dep { font-size: var(--step--1); color: var(--color-accent-on-band); }
@media (min-width: 48rem) { .tl__i { grid-template-columns: 4rem 1fr; } }

.next {
  margin-top: var(--space-6);
  border: var(--border-rule) solid var(--color-accent-on-band);
  padding: var(--space-5);
}
.next__t { font-size: var(--step-2); color: var(--color-on-band); }
.next__p { margin-top: var(--space-3); color: var(--color-on-band-muted); max-width: var(--measure); }
.next__p strong { color: var(--color-on-band); }
.next__act { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

/* ---------------- design reference ---------------- */
.tile { display: grid; gap: var(--space-4); }
.tile__b { border: var(--border-hair) solid var(--color-rule); background: var(--color-surface); padding: var(--space-4); }
.tile__b h3 { font-size: var(--step-1); }
.tile__why { margin-top: var(--space-2); color: var(--color-ink-soft); font-size: var(--step--1); }
.sw { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.sw li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--step--1); }
.sw__c { width: 2rem; height: 2rem; border: var(--border-hair) solid var(--color-rule-strong); flex: none; border-radius: var(--radius-sm); }
.sw__n { flex: 1; }
.sw code { color: var(--color-ink-soft); }

.tspec { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.tspec__f { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-3); letter-spacing: var(--tracking-display); }
.tspec__f--body { font-family: var(--font-body); font-weight: var(--weight-medium); }
.tspec__m { font-size: var(--step--1); color: var(--color-ink-soft); letter-spacing: var(--tracking-label); text-transform: uppercase; }

.mark { margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-3); }
.mark svg { width: 4.5rem; height: 4.5rem; color: var(--color-accent); flex: none; }
.mark__w { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-1); display: flex; flex-direction: column; letter-spacing: var(--tracking-display); }
.mark__w span { font-family: var(--font-body); font-weight: var(--weight-body); font-size: var(--step--1); color: var(--color-ink-soft); letter-spacing: normal; }

.voice { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.voice__l { font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-label); font-weight: var(--weight-medium); }
.voice--yes { color: var(--color-ink); }
.voice--yes .voice__l { color: var(--color-accent); }
.voice--no { color: var(--color-ink-soft); }
.voice--no .voice__l { color: var(--color-ink-soft); }

@media (min-width: 48rem) { .tile { grid-template-columns: repeat(2, 1fr); } }

/* ---------------- about IV ---------------- */
.aboutiv__p { margin-top: var(--space-3); color: var(--color-ink-soft); }
.dl--iv { margin-top: var(--space-5); }

/* ---------------- footer as destination (decision 13) ---------------- */
.foot { background: var(--color-band); color: var(--color-on-band); margin-top: var(--space-7); position: relative; }
.studs {
  height: var(--space-5);
  border-bottom: var(--border-hair) solid var(--color-rule-on-band);
  background-image: repeating-linear-gradient(
    to right,
    var(--color-rule-on-band) 0 var(--border-hair),
    transparent var(--border-hair) var(--stud-gap)
  );
}
.foot__in { padding-block: var(--space-6); }
.foot__sign { padding-bottom: var(--space-5); border-bottom: var(--border-hair) solid var(--color-rule-on-band); }
.foot__line { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-3); letter-spacing: var(--tracking-display); }
/* Second half of the sign-off couplet, not a link. It previously carried the
   only accent in the footer while the ten real links below sat in plain ink —
   the affordance language exactly inverted. Accent here is reserved for the
   link hover state. */
.foot__sub { margin-top: var(--space-2); color: var(--color-on-band); font-size: var(--step-1); }

.foot__cols { display: grid; gap: var(--space-5); padding-block: var(--space-5); }
.foot__h { font-family: var(--font-display); font-size: var(--step-0); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-on-band-muted); }
.foot__col ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.foot__col a { color: var(--color-on-band); text-decoration: none; }
.foot__col a:hover { color: var(--color-accent-on-band); text-decoration: underline; }
.foot__fine { font-size: var(--step--1); color: var(--color-on-band-muted); border-top: var(--border-hair) solid var(--color-rule-on-band); padding-top: var(--space-4); max-width: var(--measure); }
.foot__fine a { color: var(--color-accent-on-band); }
@media (min-width: 48rem) { .foot__cols { grid-template-columns: repeat(3, 1fr); } }

/* ---------------- shared hover language (decision 13) ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .plate, .towns li, .tile__b {
    transition: transform var(--dur-quick) var(--ease-standard);
  }
  .plate:hover, .towns li:hover, .tile__b:hover { transform: translateY(-2px); }
}
.ledger__row:hover { background: var(--color-band-2); }