/*
  Blue Mountain Construction Services Inc — visual world

  THESIS:   A remodel is won or lost at layout — the measuring, marking and
            dimensioning done before anything is cut. This site is built as that
            layout, so "we document the work" is demonstrated, not asserted. It
            refuses the category's two defaults: the photo hero of a white shaker
            kitchen with a badge row, and the hairline-minimal architecture studio.
  OWN-WORLD:The instruments of layout. Graphite/slate carries steel; warm
            sand-stone carries boxwood, fir and joint compound; one accent,
            layout-chalk blue, appears only where something is being marked.
            Square corners, hairline rules, and one recurring texture — a
            graduated scale with a three-length tick rhythm. Components are named
            from the trade: .rule .sheet .dim .keynote .score .ledger .nap
  STORY:    A homeowner comparing three bids sees a named, addressed California
            company that draws and documents work before demolishing anything,
            reads the scope of their own category in specifics, sees the sequence
            with its inspection hold points, and requests an estimate or calls.
  MOTION:   One authored moment — the hero plan draws itself once (dimension
            strings and chalk centreline, 700ms). Everything else is a single
            200ms fade-and-rise on first scroll into view. Content is visible by
            default; prefers-reduced-motion removes all of it.
*/

/* ==================================================================
   1. Fonts — self-hosted, latin subset, no external requests
   ================================================================== */
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-var.woff2") format("woff2-variations"),
       url("/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/atkinson-hyperlegible-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Digits and the colon come from Archivo everywhere, including inside body prose.
   Atkinson draws a slashed zero, which is a legibility feature in running text
   but makes a phone number or a ZIP look struck through at small sizes. This
   family is declared first in --text, so the browser takes 0-9 and ":" from here
   and every letter from Atkinson. Same file, no extra download. */
@font-face {
  font-family: "Archivo Digits";
  src: url("/fonts/archivo-latin-var.woff2") format("woff2-variations"),
       url("/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039, U+003A;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/atkinson-hyperlegible-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==================================================================
   2. Tokens
   ================================================================== */
:root {
  /* graphite / slate — steel, graphite, cast iron */
  --slate-950: #0f1316;
  --slate-900: #161b1f;
  --slate-800: #1f262b;
  --slate-700: #2d353c;
  --slate-600: #414b53;
  --slate-500: #4c5560;

  /* warm sand-stone — boxwood, kiln-dried fir, joint compound, honed limestone */
  --sand-050: #fbf8f3;
  --sand-100: #f2ece3;
  --sand-200: #e7dfd3;
  --sand-300: #d7ccbc;
  --sand-400: #b9ac98;
  --sand-500: #8c8272;

  /* accent — layout-chalk blue. Only where something is marked. */
  --chalk-800: #14315a;
  --chalk-700: #1b3e6f;
  --chalk-600: #22518f;
  --chalk-400: #5b8ac4;
  --chalk-300: #7fa5d4;
  --chalk-100: #dce7f5;

  /* type */
  --display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --text: "Archivo Digits", "Atkinson Hyperlegible", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --step--2: 0.75rem;
  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: 1.1875rem;
  --step-2: 1.4375rem;
  --step-3: clamp(1.65rem, 1.35rem + 1.3vw, 2.1rem);
  --step-4: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  --step-5: clamp(2.5rem, 1.6rem + 4.2vw, 4.25rem);

  --measure: 72ch;

  /* space — 4px base */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --radius: 2px;
  --shadow: 0 14px 30px -22px rgba(15, 19, 22, 0.55), 0 2px 5px -3px rgba(15, 19, 22, 0.18);
  --shadow-lift: 0 22px 44px -26px rgba(15, 19, 22, 0.6), 0 3px 7px -3px rgba(15, 19, 22, 0.2);

  /* drawing ink, re-declared on dark grounds */
  --dwg-ink: #8c8272;
  --dwg-face: rgba(185, 172, 152, 0.16);
  --dwg-ground: var(--sand-050);
  --dwg-num: var(--slate-600);
  --dwg-cl: var(--chalk-600);
}

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

/* ==================================================================
   3. Base
   ================================================================== */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sand-100);
  color: var(--slate-800);
  font-family: var(--text);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); letter-spacing: -0.015em; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--chalk-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--chalk-700);
  outline-offset: 2px;
  border-radius: 1px;
}

.wrap { width: min(1200px, 92vw); margin-inline: auto; }
.measure { max-width: var(--measure); }

.skip {
  position: absolute;
  left: var(--sp-4);
  top: -100%;
  z-index: 100;
  background: var(--slate-950);
  color: var(--sand-050);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--display);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}
.skip:focus { top: var(--sp-4); }

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

/* Technical label. One named system element, used in one consistent position —
   not an eyebrow above every heading. */
.tlabel {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--slate-500);
}

/* NAP and other precision text is set in the display face, not the body face.
   Atkinson Hyperlegible draws a slashed zero by design — excellent for
   disambiguation in prose, but in a street number, a ZIP or an hours range it
   reads at a glance like a struck-through line, and the address block is the one
   place on this site that has to look exact. Archivo's tabular figures are also
   what the drawings and dimension strings use, so this is the same decision the
   rest of the world already makes. */
.idbar-meta,
.hero-fine,
.nap-addr,
.nap-rows dd,
.cta-id,
.cta-hrs,
.foot-legal {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
}

/* ==================================================================
   4. The graduated scale — the recurring texture
   ================================================================== */
.rule {
  height: 15px;
  background-repeat: repeat-x;
  background-position: left bottom, left bottom, left bottom;
  background-image:
    repeating-linear-gradient(to right, var(--slate-500) 0 1.5px, transparent 1.5px 128px),
    repeating-linear-gradient(to right, var(--sand-500) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(to right, var(--sand-400) 0 1px, transparent 1px 8px);
  background-size: 100% 15px, 100% 9px, 100% 5px;
  border-bottom: 1px solid var(--sand-300);
}
.rule-dark {
  background-image:
    repeating-linear-gradient(to right, var(--sand-400) 0 1.5px, transparent 1.5px 128px),
    repeating-linear-gradient(to right, var(--slate-600) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(to right, var(--slate-700) 0 1px, transparent 1px 8px);
  border-bottom-color: var(--slate-700);
}
.rule-light { border-bottom-color: var(--sand-300); }

/* ==================================================================
   5. Dimension string
   ================================================================== */
.dim {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 8rem;
}
.dim::before, .dim::after {
  content: "";
  flex: 0 0 1px;
  width: 1px;
  height: 12px;
  background: var(--slate-500);
}
.dim-line { flex: 1 1 auto; min-width: 10px; height: 1px; background: var(--sand-400); }
.dim-v {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--slate-700);
}
.dim-l { flex: 0 0 100%; font-size: var(--step--2); color: var(--slate-500); }

/* ==================================================================
   6. Sheet — the card, with corner registration ticks
   ================================================================== */
.sheet {
  position: relative;
  background: var(--sand-050);
  border: 1px solid var(--sand-300);
  border-radius: var(--radius);
  padding: var(--sp-6);
  box-shadow: var(--shadow);
}
.sheet::before {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--sand-400), var(--sand-400)), linear-gradient(var(--sand-400), var(--sand-400)),
    linear-gradient(var(--sand-400), var(--sand-400)), linear-gradient(var(--sand-400), var(--sand-400)),
    linear-gradient(var(--sand-400), var(--sand-400)), linear-gradient(var(--sand-400), var(--sand-400)),
    linear-gradient(var(--sand-400), var(--sand-400)), linear-gradient(var(--sand-400), var(--sand-400));
  background-size: 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}
.sheet > * { position: relative; }

/* ==================================================================
   7. Buttons
   ================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: 0.01em;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.btn-pri { background: var(--chalk-700); color: var(--sand-050); box-shadow: var(--shadow); }
.btn-pri:hover { background: var(--chalk-800); box-shadow: var(--shadow-lift); }
.btn-gho { background: transparent; color: var(--slate-800); border-color: var(--slate-600); }
.btn-gho:hover { background: var(--slate-800); color: var(--sand-050); border-color: var(--slate-800); }
.btn-sm { padding: 0.6rem 1.1rem; font-size: var(--step--1); letter-spacing: 0.04em; text-transform: uppercase; }
.btn-blk { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* On graphite grounds the border is the button's only boundary, so it has to
   clear 3:1 as a UI component (WCAG 1.4.11). slate-600 measures 2.09:1 against
   slate-950; sand-500 measures 4.93:1. */
.on-dark .btn-gho, .cta .btn-gho, .hero .btn-gho {
  color: var(--sand-100);
  border-color: var(--sand-500);
}
.on-dark .btn-gho:hover, .cta .btn-gho:hover, .hero .btn-gho:hover {
  background: var(--sand-100);
  color: var(--slate-950);
  border-color: var(--sand-100);
}

/* ==================================================================
   8. Identification bar
   ================================================================== */
.idbar {
  background: var(--slate-950);
  color: var(--sand-300);
  font-size: var(--step--1);
}
.idbar-in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-5);
  padding: 0.55rem 0;
}
.idbar-name {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sand-050);
}
.idbar-meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); color: var(--sand-500); }
.idbar-meta span { position: relative; }
.idbar-meta span + span::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-2) * -1 - 1px);
  top: 0.35em;
  bottom: 0.25em;
  width: 1px;
  background: var(--slate-700);
}

/* ==================================================================
   9. Header
   ================================================================== */
.head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(242, 236, 227, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 0;
  transition: box-shadow 0.2s ease;
}
.head.is-stuck { box-shadow: 0 10px 24px -20px rgba(15, 19, 22, 0.5); }

.head-in {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: 0.7rem 0;
}

.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; flex: 0 0 auto; }
.brand-mark { width: 40px; height: 40px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand-a {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--slate-900);
}
.brand-b {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-500);
}

.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-lnk {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate-700);
  text-decoration: none;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius);
}
.nav-lnk:hover { background: var(--sand-200); color: var(--slate-950); }
.nav-lnk.is-on { color: var(--chalk-700); box-shadow: inset 0 -2px 0 var(--chalk-700); }
.nav-caret { width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-1px); }

/* submenu opens on hover and on focus-within — keyboard reachable with no JS */
.nav-sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 22rem;
  list-style: none;
  margin: 0;
  padding: var(--sp-2);
  background: var(--sand-050);
  border: 1px solid var(--sand-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.nav-item-group:hover .nav-sub,
.nav-item-group:focus-within .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-sub-lnk { display: block; padding: 0.55rem 0.7rem; text-decoration: none; border-radius: var(--radius); }
.nav-sub-lnk:hover { background: var(--sand-200); }
.nav-sub-lnk.is-on { background: var(--chalk-100); }
.nav-sub-n { display: block; font-family: var(--display); font-weight: 600; font-size: var(--step-0); color: var(--slate-900); letter-spacing: -0.01em; }
.nav-sub-s { display: block; font-size: var(--step--2); color: var(--slate-500); font-variant-numeric: tabular-nums; }

.head-act { display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; }
.tel { display: flex; flex-direction: column; text-decoration: none; line-height: 1.15; }
.tel-k { font-family: var(--display); font-weight: 600; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-500); }
.tel-n {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--slate-950);
}
.tel:hover .tel-n { color: var(--chalk-700); }

.menu-btn {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--slate-600);
  border-radius: var(--radius);
  padding: 0.5rem 0.8rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-800);
  cursor: pointer;
}
.menu-bars { display: grid; gap: 3px; }
.menu-bars i { display: block; width: 16px; height: 1.5px; background: currentColor; }
.nav-item-mob { display: none; }

/* ==================================================================
   10. Drawings
   ================================================================== */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.dwg { width: 100%; height: auto; color: var(--dwg-ink); overflow: visible; }
.dwg text { font-family: var(--display); font-variant-numeric: tabular-nums; }

.dwg-wall rect, .dwg-wall path { stroke: var(--dwg-ink); }
.dwg-void { fill: var(--dwg-ground); }
.dwg-open line, .dwg-open path { stroke: var(--dwg-ink); }

.dwg-cab rect { fill: var(--dwg-face); stroke: var(--dwg-ink); stroke-width: 1.3; }
.dwg-fix rect { fill: none; stroke: var(--dwg-ink); stroke-width: 1.3; }
.dwg-fix circle { fill: none; stroke: var(--dwg-ink); stroke-width: 1.1; }
.dwg-appl rect { fill: none; stroke: var(--dwg-ink); stroke-width: 1.1; }

.dwg-clear line, .dwg-clear path { stroke: var(--dwg-cl); stroke-width: 1.2; fill: none; }
.dwg-clear text { fill: var(--dwg-cl); font-size: 15px; font-weight: 600; }

.dwg-cl line { stroke: var(--dwg-cl); stroke-width: 1.2; }
.dwg-cl-t { fill: var(--dwg-cl); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }

.dwg-dim line { stroke: var(--dwg-ink); stroke-width: 1; }
.dwg-dim .dwg-tick { stroke: var(--dwg-num); stroke-width: 1.4; }
.dwg-gap { fill: var(--dwg-ground); }
.dwg-num { fill: var(--dwg-num); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }

.dwg-kn rect { fill: var(--dwg-ground); stroke: var(--dwg-num); stroke-width: 1.4; }
.dwg-kn text { fill: var(--dwg-num); font-size: 15px; font-weight: 700; }

.dwg-tb rect { fill: none; stroke: var(--dwg-num); stroke-width: 1.2; }
.dwg-tb line { stroke: var(--dwg-num); stroke-width: 1; }
.dwg-tb-n { fill: var(--dwg-num); font-size: 13px; font-weight: 700; letter-spacing: 0.01em; }
.dwg-tb-s { fill: var(--dwg-ink); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; }

.dwg-asm rect { fill: var(--dwg-face); stroke: var(--dwg-ink); stroke-width: 1; }
.dwg-asm .dwg-memb { fill: var(--dwg-cl); opacity: 0.55; stroke: none; }
.dwg-asm .dwg-tile { fill: var(--sand-300); stroke: var(--dwg-ink); stroke-width: 1; }
.dwg-slope { fill: var(--dwg-face); stroke: var(--dwg-ink); stroke-width: 1.2; }
.dwg-memb-l { stroke: var(--dwg-cl); }

.dwg-axis { stroke: var(--dwg-num); stroke-width: 1.6; }
.dwg-bar line { stroke: var(--dwg-ink); stroke-width: 1.4; }
.dwg-bar .dwg-lbl, .dwg-brk .dwg-lbl { fill: var(--slate-800); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.dwg-brk path { stroke: var(--dwg-cl); stroke-width: 1.4; }

/* hero drawing sits on graphite, so the ink is lifted to read at 1x */
.hero .dwg {
  --dwg-ink: #8a97a1;
  --dwg-face: rgba(226, 215, 199, 0.09);
  --dwg-ground: var(--slate-950);
  --dwg-num: #dccfba;
  --dwg-cl: var(--chalk-400);
}

/* keynote legend */
.knlist { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.knlist li { display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--sp-3); align-items: start; }
.knlist-n {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
.knlist-t { font-size: var(--step--1); line-height: 1.5; }

/* ==================================================================
   11. Hero
   ================================================================== */
.hero {
  background: var(--slate-950);
  color: var(--sand-100);
  position: relative;
}
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--sp-8);
  align-items: center;
  padding: var(--sp-9) 0 var(--sp-8);
}
.hero .tlabel { color: var(--sand-500); margin-bottom: var(--sp-5); }
.hero-h1 {
  font-size: var(--step-5);
  letter-spacing: -0.035em;
  color: var(--sand-050);
  margin-bottom: var(--sp-5);
}
.hero-h1 em { font-style: normal; color: var(--chalk-300); }
.hero-lead { font-size: var(--step-1); color: var(--sand-300); max-width: 46ch; margin-bottom: var(--sp-6); }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
.hero-tel { display: flex; flex-direction: column; text-decoration: none; }
.hero-tel .tel-k { color: var(--sand-500); }
.hero-tel .tel-n { color: var(--sand-050); font-size: 1.375rem; }
.hero-tel:hover .tel-n { color: var(--chalk-300); }
.hero-fine { margin-top: var(--sp-6); font-size: var(--step--1); color: var(--sand-500); max-width: 52ch; }
.hero-fine a { color: var(--chalk-300); }

.hero-dwg { position: relative; }
.hero-dwg .knlist { color: var(--sand-500); border-top: 1px solid var(--slate-700); padding-top: var(--sp-5); }
.hero-dwg .knlist-t { color: var(--sand-300); }
.hero-dwg .knlist-n { color: var(--sand-400); }

/* ==================================================================
   12. Sections
   ================================================================== */
.sec { padding: var(--sp-9) 0; }
.sec-sand { background: var(--sand-200); }
.sec-dark { background: var(--slate-900); color: var(--sand-100); }
.sec-dark h2, .sec-dark h3 { color: var(--sand-050); }
.sec-dark .tlabel { color: var(--sand-500); }
.sec-dark a { color: var(--chalk-300); }

.sec-hd { max-width: 62ch; margin-bottom: var(--sp-7); }
.sec-hd .tlabel { margin-bottom: var(--sp-3); }
.sec-hd h2 { margin-bottom: var(--sp-4); }
.sec-hd p { color: var(--slate-500); font-size: var(--step-1); }
.sec-dark .sec-hd p { color: var(--sand-300); }

.prose { max-width: var(--measure); }
.prose h2 { margin: var(--sp-8) 0 var(--sp-4); }
.prose h3 { margin: var(--sp-7) 0 var(--sp-3); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 var(--sp-5); padding-left: 0; list-style: none; }
.prose li { position: relative; padding-left: var(--sp-6); margin-bottom: var(--sp-3); }
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 14px;
  height: 1px;
  background: var(--sand-400);
}
.prose li::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.72em - 4px);
  width: 1px;
  height: 9px;
  background: var(--slate-500);
}
.lead { font-size: var(--step-1); color: var(--slate-600); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--sp-8); align-items: start; }
.split-wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }

/* ==================================================================
   13. Ledger — the schedule of work
   ================================================================== */
.ledger { border-top: 1px solid var(--sand-300); }
.ledger-hd,
.ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr) 11rem;
  gap: var(--sp-5);
  align-items: start;
}
.ledger-hd {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--sand-300);
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.ledger-row { padding: var(--sp-6) 0; border-bottom: 1px solid var(--sand-300); }
.ledger-a { display: flex; gap: var(--sp-4); align-items: baseline; }
.ledger-ref {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--sand-500);
  letter-spacing: 0.06em;
}
.ledger-n { font-size: var(--step-2); }
.ledger-n a { color: var(--slate-900); text-decoration: none; }
.ledger-n a:hover { color: var(--chalk-700); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.ledger-b p { color: var(--slate-600); }
.ledger-c { padding-top: 0.35rem; }
.ledger-note { margin: var(--sp-5) 0 0; font-size: var(--step--1); color: var(--slate-500); max-width: 68ch; }

/* ==================================================================
   14. Score — the ruled process line
   ================================================================== */
.score { position: relative; list-style: none; margin: 0; padding: 0; }
.score::before {
  content: "";
  position: absolute;
  left: 7.5rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--sand-400);
}
.score-m {
  position: relative;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0 var(--sp-7);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--sand-300);
}
.score-m:last-child { border-bottom: 1px solid var(--sand-300); }
/* the bar line: a chalk mark on the stave.
   It grows via scaleY from a top origin rather than by animating height, so the
   mark is composited instead of triggering layout on every scroll step. */
.score-m::after {
  content: "";
  position: absolute;
  left: calc(7.5rem - 1px);
  top: calc(var(--sp-6) + 0.35rem);
  width: 3px;
  height: 26px;
  background: var(--sand-500);
  transform: scaleY(0.54);
  transform-origin: top center;
  transition: background-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.score-m.is-now::after { background: var(--chalk-700); transform: none; }
.score-a { text-align: right; padding-right: var(--sp-4); }
.score-ref {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--sand-500);
  transition: color 0.25s ease;
}
.score-m.is-now .score-ref { color: var(--chalk-700); }
.score-span { display: block; font-size: var(--step--2); color: var(--slate-500); }
.score-n { font-size: var(--step-2); margin-bottom: var(--sp-2); }
.score-b { color: var(--slate-600); max-width: 68ch; margin: 0; }
.sec-dark .score::before { background: var(--slate-600); }
.sec-dark .score-m { border-top-color: var(--slate-700); }
.sec-dark .score-m:last-child { border-bottom-color: var(--slate-700); }
.sec-dark .score-m::after { background: var(--slate-600); }
.sec-dark .score-m.is-now::after { background: var(--chalk-400); }
.sec-dark .score-ref { color: var(--sand-500); }
.sec-dark .score-m.is-now .score-ref { color: var(--chalk-300); }
.sec-dark .score-span { color: var(--sand-500); }
.sec-dark .score-b { color: var(--sand-300); }

/* ==================================================================
   15. NAP title block
   ================================================================== */
.nap { border: 1px solid var(--sand-300); border-radius: var(--radius); background: var(--sand-050); }
.nap-hd {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0.5rem var(--sp-5);
  border-bottom: 1px solid var(--sand-300);
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.nap-name {
  margin: 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--slate-950);
}
.nap-addr { padding: 0 var(--sp-5) var(--sp-4); font-style: normal; display: grid; gap: 0.1rem; }
.nap-addr span { color: var(--slate-700); }
.nap-rows {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  border-top: 1px solid var(--sand-300);
}
.nap-rows dt {
  padding: 0.6rem var(--sp-5);
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
  border-bottom: 1px solid var(--sand-200);
}
.nap-rows dd {
  margin: 0;
  padding: 0.6rem var(--sp-5) 0.6rem 0;
  font-size: var(--step--1);
  border-bottom: 1px solid var(--sand-200);
  color: var(--slate-800);
}
.nap-rows dt:last-of-type, .nap-rows dd:last-of-type { border-bottom: 0; }
.nap-tz { color: var(--slate-500); font-size: var(--step--2); }
.nap-lic { margin: 0; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--sand-300); font-size: var(--step--2); color: var(--slate-600); }

/* footer variant sits on graphite */
.nap-foot { background: transparent; border-color: var(--slate-700); }
.nap-foot .nap-hd { border-bottom-color: var(--slate-700); color: var(--sand-500); }
.nap-foot .nap-name { color: var(--sand-050); }
.nap-foot .nap-addr span { color: var(--sand-300); }
.nap-foot .nap-rows { border-top-color: var(--slate-700); }
.nap-foot .nap-rows dt { color: var(--sand-500); border-bottom-color: var(--slate-800); }
.nap-foot .nap-rows dd { color: var(--sand-200); border-bottom-color: var(--slate-800); }
.nap-foot .nap-rows dd a { color: var(--chalk-300); }
.nap-foot .nap-tz { color: var(--sand-500); }
.nap-foot .nap-lic { border-top-color: var(--slate-700); color: var(--sand-300); }

/* ==================================================================
   16. Page masthead + breadcrumbs
   ================================================================== */
.phead { background: var(--sand-200); }
.phead .wrap { padding: var(--sp-6) 0 var(--sp-8); }
.crumbs { margin-bottom: var(--sp-6); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); list-style: none; margin: 0; padding: 0; }
.crumbs li { position: relative; font-family: var(--display); font-weight: 600; font-size: var(--step--1); letter-spacing: 0.04em; }
.crumbs li + li::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-4) / -2 - 1px);
  top: 0.35em;
  bottom: 0.3em;
  width: 1px;
  background: var(--sand-400);
}
.crumbs a { color: var(--slate-600); text-decoration: none; }
.crumbs a:hover { color: var(--chalk-700); text-decoration: underline; }
.crumbs [aria-current] { color: var(--slate-950); }

.phead-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-7);
}
.phead-top .crumbs { margin-bottom: 0; }
.phead-h1 { font-size: var(--step-4); margin-bottom: var(--sp-4); max-width: 34ch; }
.phead-lead { font-size: var(--step-1); color: var(--slate-600); max-width: 60ch; margin: 0; }
.phead-ref { margin: 0; }
.phead-ref span {
  display: inline-block;
  border: 1px solid var(--sand-400);
  border-radius: var(--radius);
  padding: 0.4rem 0.8rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-600);
  font-variant-numeric: tabular-nums;
}

/* ==================================================================
   17. FAQ — native details/summary, works with JS off
   ================================================================== */
.faq { border-top: 1px solid var(--sand-300); max-width: 88ch; }
.faq-i { border-bottom: 1px solid var(--sand-300); }
.faq-i summary {
  display: grid;
  grid-template-columns: 1fr 1.5rem;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5) 0;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  color: var(--slate-900);
  list-style: none;
}
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary:hover { color: var(--chalk-700); }
.faq-sign { position: relative; width: 1.5rem; height: 1.5rem; justify-self: end; }
.faq-sign::before, .faq-sign::after {
  content: "";
  position: absolute;
  background: var(--slate-600);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.faq-sign::before { left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; }
.faq-sign::after { top: 0; bottom: 0; left: 50%; width: 1.5px; margin-left: -0.75px; }
.faq-i[open] .faq-sign::after { transform: scaleY(0); opacity: 0; }
.faq-i[open] .faq-sign::before { background: var(--chalk-700); }
.faq-a { padding: 0 0 var(--sp-6); max-width: var(--measure); }
.faq-a p { color: var(--slate-600); margin: 0; }

/* ==================================================================
   18. Areas
   ================================================================== */
.areas { border-top: 1px solid var(--sand-300); }
.area-row { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--sp-5); padding: var(--sp-5) 0; border-bottom: 1px solid var(--sand-300); }
.area-n { font-size: var(--step-2); }
.area-k { display: block; font-family: var(--display); font-weight: 600; font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-500); }
.area-row p { color: var(--slate-600); margin: 0; max-width: 68ch; }

/* ==================================================================
   19. Forms
   ================================================================== */
.form { display: grid; gap: var(--sp-5); }
.field { display: grid; gap: var(--sp-2); }
.field > label {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-700);
}
.field-req { color: var(--chalk-700); }
.field-hint { font-size: var(--step--2); color: var(--slate-500); }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--step-0);
  color: var(--slate-900);
  background: var(--sand-050);
  border: 1px solid var(--slate-500);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--slate-500); opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--chalk-700);
  outline-offset: 1px;
  border-color: var(--chalk-700);
}
/* :user-invalid only — it fires after the visitor has actually interacted.
   The older `:invalid:not(:placeholder-shown)` idiom is wrong for these fields:
   they carry no placeholder attribute, so :placeholder-shown never matches, the
   negation is always true, and every required field would render in the error
   colour on first paint. Browsers without :user-invalid simply show no custom
   error colour and fall back to their native validation message. */
.field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid {
  border-color: #8c2f2f;
  outline-color: #8c2f2f;
}
.field-err { font-size: var(--step--2); color: #8c2f2f; }
.check { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--sp-3); align-items: start; }
.check input { width: 1.25rem; height: 1.25rem; margin: 0.2rem 0 0; accent-color: var(--chalk-700); }
.check label { font-size: var(--step--1); color: var(--slate-600); }
.form-note { font-size: var(--step--2); color: var(--slate-500); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==================================================================
   20. Closing action band
   ================================================================== */
.cta { background: var(--slate-950); color: var(--sand-100); }
.cta-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-8); align-items: center; padding: var(--sp-8) 0; }
.cta-h { font-size: var(--step-4); color: var(--sand-050); margin-bottom: var(--sp-4); }
.cta-in p { color: var(--sand-300); max-width: 56ch; }
.cta-id { font-size: var(--step--1); color: var(--sand-500); margin: var(--sp-4) 0 0; }
.cta-act { display: grid; gap: var(--sp-3); justify-items: stretch; min-width: 17rem; }
.cta-hrs { font-size: var(--step--2); color: var(--sand-500); margin: 0; text-align: center; }

/* ==================================================================
   21. Footer
   ================================================================== */
.foot { background: var(--slate-950); color: var(--sand-300); }
.foot-in { padding: var(--sp-8) 0 var(--sp-6); display: grid; gap: var(--sp-8); }
.foot-id { display: grid; gap: var(--sp-5); max-width: 30rem; }
.brand-foot .brand-a { color: var(--sand-050); }
.brand-foot .brand-b { color: var(--sand-500); }
.foot-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
.foot-h {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sand-500);
  margin-bottom: var(--sp-4);
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.foot-col a { color: var(--sand-200); text-decoration: none; font-size: var(--step--1); }
.foot-col a:hover { color: var(--sand-050); text-decoration: underline; }
.foot-areas li { color: var(--sand-300); font-size: var(--step--1); }
.foot-btm { border-top: 1px solid var(--slate-800); padding-top: var(--sp-5); display: grid; gap: var(--sp-2); }
.foot-legal { margin: 0; font-size: var(--step--1); color: var(--sand-200); }
.foot-legal a { color: var(--sand-200); }
.foot-note { margin: 0; font-size: var(--step--2); color: var(--sand-500); }
.foot abbr { text-decoration: none; border-bottom: 1px dotted currentColor; cursor: help; }

/* ==================================================================
   22. Placeholder region — never filled with invented material
   ================================================================== */
.pending {
  border: 1px dashed var(--sand-400);
  border-radius: var(--radius);
  padding: var(--sp-6);
  background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(185, 172, 152, 0.14) 9px 10px);
}
.pending-k {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-600);
  border: 1px solid var(--sand-400);
  border-radius: var(--radius);
  padding: 0.2rem 0.5rem;
  margin-bottom: var(--sp-4);
  background: var(--sand-050);
}
.pending p { color: var(--slate-600); max-width: 64ch; }
.pending code {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9em;
  letter-spacing: 0.02em;
  background: var(--sand-050);
  border: 1px solid var(--sand-300);
  border-radius: var(--radius);
  padding: 0.05em 0.35em;
}

/* ==================================================================
   23. Thank-you / 404
   ================================================================== */
.plain { padding: var(--sp-9) 0; }
.plain-in { max-width: 60ch; }
.plain h1 { font-size: var(--step-4); margin-bottom: var(--sp-5); }
.plain-act { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ==================================================================
   23b. Content components inside sheets and prose
   ================================================================== */

/* document lists — the four documents, the closeout package */
.doclist { margin: 0; display: grid; }
.doclist dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  color: var(--slate-900);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--sand-300);
}
.doclist dt:first-of-type { padding-top: var(--sp-3); border-top: 0; }
.doclist dd { margin: var(--sp-1) 0 var(--sp-4); font-size: var(--step--1); color: var(--slate-600); }
.doclist dd:last-of-type { margin-bottom: 0; }

/* scope list inside a service sheet */
.scopelist { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.scopelist li { position: relative; padding-left: var(--sp-6); font-size: var(--step--1); color: var(--slate-700); line-height: 1.55; }
.scopelist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 14px;
  height: 1px;
  background: var(--sand-400);
}
.scopelist li::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.62em - 4px);
  width: 1px;
  height: 9px;
  background: var(--chalk-700);
}

.nextlist { list-style: none; counter-reset: nx; margin: var(--sp-4) 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-3); }
.nextlist li { counter-increment: nx; position: relative; padding-left: 2.25rem; font-size: var(--step--1); color: var(--slate-700); }
.nextlist li::before {
  content: counter(nx);
  position: absolute;
  left: 0;
  top: 0.05em;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--sand-400);
  border-radius: var(--radius);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--slate-600);
}

.sheet-note { margin: var(--sp-4) 0 0; font-size: var(--step--2); color: var(--slate-500); line-height: 1.5; }
.sheet .dwg { margin: var(--sp-4) 0; }
.sheet .tlabel { margin-bottom: var(--sp-4); }

.about-side, .contact-side { display: grid; gap: var(--sp-5); align-content: start; }
.ppl-n { margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--step-2); letter-spacing: -0.02em; color: var(--slate-950); }
.ppl-r { margin: var(--sp-1) 0 0; font-size: var(--step--1); color: var(--slate-500); }

.score-b-wrap { min-width: 0; }
.score-more { margin: var(--sp-6) 0 0; }

/* compact score: names and spans only, used on the home page so the full
   description of each measure lives on one page rather than two */
.score-brief .score-m { padding: var(--sp-4) 0; }
.score-brief .score-m::after { top: calc(var(--sp-4) + 0.3rem); }
.score-brief .score-b-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-6);
}
.score-brief .score-n { margin: 0; font-size: var(--step-1); }
.score-brief .dim { flex: 0 0 11rem; }
.sec-dark .score-brief .dim-line { background: var(--slate-600); }
.sec-dark .score-brief .dim::before, .sec-dark .score-brief .dim::after { background: var(--sand-500); }
.sec-dark .score-brief .dim-v { color: var(--sand-300); }
@media (max-width: 700px) {
  .score-brief .score-b-wrap { display: block; }
  .score-brief .dim { margin-top: var(--sp-2); }
}

.notfound-nav { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-3); }
.notfound-nav li { font-size: var(--step--1); color: var(--slate-600); }
.notfound-nav a { font-family: var(--display); font-weight: 600; font-size: var(--step-0); }

.form-pair { gap: var(--sp-5); }
.faq-page { max-width: 92ch; }

/* search */
.searchform { max-width: 34rem; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.searchform .field { min-width: 0; }
.searchhint { max-width: var(--measure); margin-top: var(--sp-6); }
.searchempty { max-width: var(--measure); margin-top: var(--sp-7); }
.searchempty h2 { font-size: var(--step-2); margin-bottom: var(--sp-4); }
.searchcount { margin: var(--sp-7) 0 var(--sp-4); }
.searchlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sand-300); max-width: 88ch; }
.searchlist li { padding: var(--sp-5) 0; border-bottom: 1px solid var(--sand-300); }
.searchlist h2 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.searchlist h2 a { color: var(--chalk-700); }
.searchlist p { margin: 0 0 var(--sp-2); color: var(--slate-600); font-size: var(--step--1); max-width: 72ch; }
.searchurl { font-family: var(--display); font-weight: 600; font-size: var(--step--2); letter-spacing: 0.02em; color: var(--slate-500); }

@media (max-width: 700px) {
  .searchform { grid-template-columns: 1fr; }
  .form-pair { grid-template-columns: 1fr; }
}

/* ==================================================================
   24. Motion — one authored moment, then a single reveal
   ================================================================== */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* the authored moment: the hero plan draws itself once */
.js .hero-dwg .dwg-dim line,
.js .hero-dwg .dwg-cl line {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: bmDraw 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.js .hero-dwg .dwg-cl line { animation-delay: 0.12s; }
@keyframes bmDraw { to { stroke-dashoffset: 0; } }

.js .hero-dwg .dwg-num, .js .hero-dwg .dwg-gap, .js .hero-dwg .dwg-kn, .js .hero-dwg .dwg-tb {
  animation: bmFade 0.5s ease 0.45s both;
}
@keyframes bmFade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .hero-dwg .dwg-dim line, .js .hero-dwg .dwg-cl line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .head { transition: none; }
}

/* ==================================================================
   25. Responsive — mobile-first overrides live here because the base
       layout above is the wide composition, matching the repository's
       existing desktop-first stylesheet convention.
   ================================================================== */
@media (max-width: 1100px) {
  .hero-in { grid-template-columns: 1fr; gap: var(--sp-7); padding: var(--sp-8) 0; }
  .hero-lead { max-width: 60ch; }
  .split, .split-wide { grid-template-columns: 1fr; gap: var(--sp-7); }
  .cta-in { grid-template-columns: 1fr; gap: var(--sp-6); }
  .cta-act { min-width: 0; }
  .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .foot-id { max-width: none; }
}

@media (max-width: 900px) {
  .head-in { gap: var(--sp-3); }
  .menu-btn { display: inline-flex; order: 3; }
  .head-act { order: 2; margin-left: auto; }
  .head-cta { display: none; }
  .nav {
    order: 4;
    flex: 0 0 100%;
    margin-left: 0;
    display: none;
    border-top: 1px solid var(--sand-300);
    padding: var(--sp-3) 0 var(--sp-4);
    max-height: min(70vh, 34rem);
    overflow-y: auto;
  }
  .nav.is-open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-lnk { padding: 0.8rem 0.2rem; font-size: var(--step-0); letter-spacing: 0.04em; }
  .nav-lnk.is-on { box-shadow: none; }
  .nav-caret { display: none; }
  .nav-sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    box-shadow: none;
    border: 0;
    border-left: 1px solid var(--sand-300);
    border-radius: 0;
    background: transparent;
    margin: 0 0 var(--sp-3) 0.2rem;
    padding: 0 0 0 var(--sp-4);
  }
  .nav-item-mob { display: block; }
  .ledger-hd { display: none; }
  .ledger-row { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-5) 0; }
  .ledger-c { padding-top: 0; }
  .dim { min-width: 0; max-width: 14rem; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phead-top { margin-bottom: var(--sp-6); }
  .phead-h1 { max-width: none; }
  .area-row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .sec { padding: var(--sp-8) 0; }
}

@media (max-width: 700px) {
  :root { --sp-9: 3.5rem; --sp-8: 2.5rem; }
  .idbar-in { padding: 0.5rem 0; }
  .idbar-name { font-size: var(--step--1); }
  .idbar-meta { font-size: var(--step--2); }
  .tel-k { display: none; }
  .tel-n { font-size: 1rem; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .score::before { left: 0; }
  .score-m { grid-template-columns: 1fr; gap: var(--sp-2); padding-left: var(--sp-5); }
  .score-m::after { left: -1px; top: calc(var(--sp-6) + 0.4rem); }
  .score-a { display: flex; align-items: baseline; gap: var(--sp-3); text-align: left; padding-right: 0; }
  .score-ref { font-size: var(--step-1); }
  .foot-nav { grid-template-columns: 1fr; gap: var(--sp-5); }
  .nap-rows { grid-template-columns: 4.5rem 1fr; }
  .nap-rows dt, .nap-rows dd { padding-left: var(--sp-4); font-size: var(--step--2); }
  .sheet { padding: var(--sp-5); }
  .hero-act { gap: var(--sp-4); }
  .hero-act .btn { width: 100%; }
  .knlist { gap: var(--sp-4); }
}

@media (max-width: 380px) {
  .brand-b { display: none; }
  .brand-mark { width: 34px; height: 34px; }
}

@media (min-width: 1600px) {
  :root { --sp-9: 7.5rem; }
  .wrap { width: min(1320px, 88vw); }
  .hero-in { padding: var(--sp-10) 0 var(--sp-9); }
}

@media print {
  .idbar, .head, .cta, .skip, .rule { display: none; }
  body { background: #fff; color: #000; }
  .sheet, .nap { box-shadow: none; }
  a { text-decoration: underline; }
}