/*
  RN Civil Construction, LLC — visual world

  THESIS:   When a Colorado municipality opens bids the result is a bid
            tabulation: a wide public table with the engineer's estimate and
            every bidder beside it, one row per pay item. It is the document that
            decides who gets the job and the only place in this trade where
            prices are genuinely public. A contractor whose position is "we
            self-perform and we will be compared line by line" should be built
            out of the document that does the comparing. It refuses the
            category's two arrangements: the excavator at golden hour over a blue
            gradient with three icon cards, and the stark minimal white page in
            thin grey sans with one teal accent.
  OWN-WORLD:The colour is specified, not chosen. The APWA uniform colour code
            governs how every underground utility is marked before anyone digs:
            blue is potable water, green is sewer, and white marks proposed
            excavation. So the page ground is white — the colour that means "we
            are about to dig here" — and a row's band says what is in the pipe.
            Zero radius. Components are named from the sheet: .tab .locate .util
            .flag .fig .span .nap
  STORY:    A public works director sees a contractor who publishes unit prices
            in the format they already read, understands that the plant keeps
            running through the retrofit, sees that the crews are the
            contractor's own, and telephones with a project that is not designed
            yet.
  FIRST VIEWPORT: The tabulation. The h1 and the telephone flag to the left, and
            to the right a real bid tab with water rows banded blue and sewer
            rows banded green, unit prices in mono. The telephone is the primary
            action in the bar above, in the hero and in every closing band.
  FORM:     The bid tabulation, candidate 4 of seven grounded directions
            (seed 2a5611f4, direction scope, persuade). Staging is the tab's own
            row order: every scope of work is a pay item.
  MOTION:   One authored moment — the locate line under the hero paints itself
            across once, left to right, 700ms, the way a locate crew walks it.
            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 and leaves the line painted.
  ORDER:    Mobile-first. The base rules are the phone composition and every
            media query is min-width.
*/

/* ==================================================================
   1. Fonts — self-hosted, latin subset, no external requests
   ================================================================== */
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/public-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("/fonts/spline-sans-mono-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/spline-sans-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ==================================================================
   2. Tokens
   ================================================================== */
:root {
  /* asphalt ink */
  --ink-950: #14171a;
  --ink-900: #1b1f23;
  --ink-800: #262c31;  /* body text on the page, 13.17:1 */
  --ink-700: #343b42;
  --ink-600: #4a535b;
  --ink-500: #5e6971;  /* muted on light only: 5.24:1 page, 4.83:1 tinted */
  --ink-400: #8b959c;  /* muted on dark only: 5.43:1 on --ink-900 */

  /* white = proposed excavation. Not an absence; a marking colour. */
  --paper-050: #f6f7f8;
  --paper-100: #eceef0;
  --paper-200: #dde0e3;
  --paper-300: #c4c9ce;

  /* APWA safety precaution blue — potable water, and nothing else */
  --water-800: #003a63;
  --water-700: #005187;  /* 7.75:1 on --paper-050 — water text on light */
  --water-600: #0067a5;  /* the band. White on it measures 5.62:1 and is allowed */
  --water-400: #4d9bc9;  /* 5.41:1 on --ink-900 — water text on dark */
  --water-100: #dceaf4;

  /* APWA safety green — sewer and drain, and nothing else */
  --sewer-800: #00542a;
  --sewer-700: #006b36;  /* 6.20:1 on --paper-050 — sewer text on light */
  --sewer-500: #00a651;  /* the band. Text on it is --ink-950 at 5.63:1, never white */
  --sewer-400: #4fbe85;  /* 7.13:1 on --ink-900 — sewer text on dark */
  --sewer-100: #daf0e4;

  /* the engineer's red pen — a marked item, and nothing else */
  --mark-600: #c8102e;   /* 5.48:1 on --paper-050 */
  --mark-300: #f08a96;

  /* set per row / per scope, so every rule below is written once against --util */
  --util: var(--ink-700);
  --util-band: var(--paper-200);
  --util-text: var(--ink-800);

  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--2: 0.6875rem;
  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: 1.1875rem;
  --step-2: 1.4375rem;
  --step-3: clamp(1.55rem, 1.3rem + 1.3vw, 2.15rem);
  --step-4: clamp(1.9rem, 1.45rem + 2.2vw, 2.9rem);
  --step-5: clamp(2.2rem, 1.4rem + 3.9vw, 3.8rem);

  --measure: 70ch;
  --wrap: 80rem;   /* wider than usual: a tabulation is wide */

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3.5rem;
  --sp-9: 5rem;

  /* A tabulation is ruled, not rounded. */
  --radius: 0;
}

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

/* ==================================================================
   3. Base
   ================================================================== */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--paper-050);
  color: var(--ink-800);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink-950);
}
h1 { font-size: var(--step-5); font-weight: 800; line-height: 1.05; letter-spacing: -0.026em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); font-weight: 700; line-height: 1.2; }
h4 { font-size: var(--step-1); font-weight: 700; }

p, ul, ol, dl, table, figure { margin: 0; }

a { color: var(--ink-900); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--water-700); }

/* One focus treatment site-wide. The engineer's red is the single sanctioned
   non-state use of that colour: a focus ring must be one fixed colour. */
:focus-visible { outline: 2px solid var(--mark-600); outline-offset: 2px; }
.sec-ink :focus-visible, .foot :focus-visible,
.idbar :focus-visible, .cta :focus-visible { outline-color: var(--mark-300); }

strong, b { font-weight: 700; }
code, kbd, samp { font-family: var(--mono); font-size: 0.88em; font-weight: 500; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--ink-950); color: var(--paper-050);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--mono); font-size: var(--step--1); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.skip:focus { left: var(--sp-4); top: var(--sp-4); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-4); }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Grid and flex items default to min-width:auto, which lets a wide table push a
   whole column past the viewport. Everything that can hold one opts out. */
.split > *, .hero-in > *, .cta-in > *, .foot-in > *, .head-in > *, .panel > * { min-width: 0; }
.panel, .nap, .tab-scroll { min-width: 0; max-width: 100%; }

/* ==================================================================
   4. The locate line — the recurring texture
   ------------------------------------------------------------------
   What a locate crew paints on the asphalt before anybody digs: a heavy dashed
   line in the utility colour, carrying its stencilled code. Full-bleed, 12px,
   and the system's only ornament.
   ================================================================== */
.locate {
  position: relative;
  height: 12px;
  width: 100%;
  background-image: repeating-linear-gradient(
    90deg, var(--util) 0 34px, transparent 34px 52px);
  background-repeat: repeat-x;
}
.locate-water { --util: var(--water-600); }
.locate-sewer { --util: var(--sewer-500); }
.locate-mark  { --util: var(--mark-600); }
.locate-code {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  padding-right: var(--sp-3);
  background: var(--paper-050);
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--util);
}
.sec-ink + .locate .locate-code, .locate-on-ink .locate-code { background: var(--ink-900); }

/* ==================================================================
   5. Labels — the sheet reference strip
   ================================================================== */
.plabel {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 var(--sp-4);
}
.plabel-d { color: var(--paper-300); }
.sec-ink .plabel, .cta .plabel, .foot .plabel { color: var(--ink-400); }
.sec-ink .plabel-d, .cta .plabel-d, .foot .plabel-d { color: var(--ink-700); }

/* ==================================================================
   6. Flags — every button on this site is a locate flag
   ------------------------------------------------------------------
   A hard rectangle with a 3px bar along the left edge in the utility colour of
   whatever it leads to.
   ================================================================== */
.flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--ink-950);
  border-left: 4px solid var(--util);
  border-radius: 0;
  background: var(--ink-950);
  color: var(--paper-050);
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease;
}
.flag-lbl { display: block; }
.flag-water { --util: var(--water-600); }
.flag-sewer { --util: var(--sewer-500); }
.flag-pri:hover { background: var(--water-700); border-color: var(--water-700); border-left-color: var(--util); }
.flag-gho {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-700);
}
.flag-gho:hover { background: var(--ink-900); border-color: var(--ink-900); color: var(--paper-050); }
.flag-blk { display: flex; width: 100%; }

.sec-ink .flag-pri, .cta .flag-pri, .foot .flag-pri {
  background: var(--paper-050); border-color: var(--paper-050); color: var(--ink-950);
}
.sec-ink .flag-pri:hover, .cta .flag-pri:hover, .foot .flag-pri:hover {
  background: var(--water-400); border-color: var(--water-400); color: var(--ink-950);
}
.sec-ink .flag-gho, .cta .flag-gho, .foot .flag-gho { color: var(--paper-100); border-color: var(--ink-600); }
.sec-ink .flag-gho:hover, .cta .flag-gho:hover, .foot .flag-gho:hover {
  background: var(--paper-050); border-color: var(--paper-050); color: var(--ink-950);
}

/* ==================================================================
   7. Figures, utility tags, spans
   ================================================================== */
.fig {
  font-family: var(--mono);
  font-size: 0.95em;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink-950);
  white-space: nowrap;
}
.fig-u {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
}
.fig-mark  { color: var(--mark-600); }
.fig-water { color: var(--water-700); }
.fig-sewer { color: var(--sewer-700); }
.sec-ink .fig, .cta .fig { color: var(--paper-050); }
.sec-ink .fig-u, .cta .fig-u { color: var(--ink-400); }
.sec-ink .fig-mark, .cta .fig-mark { color: var(--mark-300); }
.sec-ink .fig-water, .cta .fig-water { color: var(--water-400); }
.sec-ink .fig-sewer, .cta .fig-sewer { color: var(--sewer-400); }

/* the APWA locate code — the only thing on the site that decides a colour */
.util {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  padding: 2px var(--sp-2);
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
}
.util-water { color: var(--water-700); }
.util-sewer { color: var(--sewer-700); }
.util-both  { color: var(--ink-700); }
.sec-ink .util-water, .cta .util-water { color: var(--water-400); }
.sec-ink .util-sewer, .cta .util-sewer { color: var(--sewer-400); }
.sec-ink .util-both,  .cta .util-both  { color: var(--ink-400); }

.span { display: inline-flex; align-items: center; gap: var(--sp-2); width: 100%; min-width: 0; }
.span-line { flex: 1 1 auto; height: 1px; min-width: var(--sp-3); background: var(--paper-300); }
.span-v {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}
.sec-ink .span-line, .cta .span-line { background: var(--ink-700); }
.sec-ink .span-v, .cta .span-v { color: var(--paper-200); }

/* ==================================================================
   8. Panel — the plain container
   ================================================================== */
.panel {
  background: var(--paper-050);
  border: 1px solid var(--paper-300);
  border-top: 2px solid var(--ink-900);
  border-radius: 0;
  padding: var(--sp-5);
}
.panel-water { border-top-color: var(--water-600); }
.panel-sewer { border-top-color: var(--sewer-500); }
.panel > * + * { margin-top: var(--sp-4); }
.panel-note { font-size: var(--step--1); color: var(--ink-500); line-height: 1.6; }
.sec-ink .panel {
  background: var(--ink-800);
  border-color: var(--ink-700);
  border-top-color: var(--paper-300);
  color: var(--paper-100);
}
.sec-ink .panel-note { color: var(--ink-400); }
.sec-ink .panel h2, .sec-ink .panel h3 { color: var(--paper-050); }
.sec-tint .panel { background: var(--paper-050); }

/* ==================================================================
   9. Identification bar
   ================================================================== */
.idbar { background: var(--ink-950); color: var(--paper-200); }
.idbar-in { display: flex; flex-direction: column; gap: var(--sp-1); padding-block: var(--sp-3); }
.idbar-name {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--paper-050);
}
.idbar-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-size: var(--step--1); line-height: 1.5; color: var(--ink-400);
}
.idbar-meta span { position: relative; }
.idbar-meta span:not(:last-child)::after {
  content: ""; position: absolute;
  right: calc(var(--sp-2) * -1 - 1px); top: 0.45em; bottom: 0.3em;
  width: 1px; background: var(--ink-600);
}

/* ==================================================================
   10. Header
   ================================================================== */
.head {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper-050);
  border-bottom: 1px solid var(--paper-300);
  transition: box-shadow 160ms ease;
}
.head.is-stuck { box-shadow: 0 1px 0 var(--paper-300), 0 10px 22px -20px rgba(20, 23, 26, 0.45); }
.head-in {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: var(--sp-4); padding-block: var(--sp-3);
}

.brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; }
.brand-mark { flex: 0 0 auto; width: 42px; height: 42px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.06; min-width: 0; }
.brand-a { font-size: var(--step-1); font-weight: 800; letter-spacing: -0.024em; color: var(--ink-950); }
.brand-b {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-500);
}

.head-act { display: flex; align-items: center; gap: var(--sp-3); }
.head-tel { display: none; flex-direction: column; line-height: 1.14; text-decoration: none; text-align: right; }
.head-tel-k {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500);
}
.head-tel-n {
  font-family: var(--mono); font-size: var(--step-0); font-weight: 700;
  color: var(--ink-950); font-variant-numeric: tabular-nums;
}
.head-tel:hover .head-tel-n { color: var(--water-700); }

.menu-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: var(--sp-2) var(--sp-3);
  background: transparent; border: 1px solid var(--paper-300); border-radius: 0;
  color: var(--ink-900);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 650;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.menu-bars { display: flex; flex-direction: column; gap: 3px; width: 15px; }
.menu-bars i { display: block; height: 2px; background: currentColor; }

.nav { grid-column: 1 / -1; display: none; }
.nav.is-open { display: block; }
.nav-list { list-style: none; margin: 0; padding: 0 0 var(--sp-3); }
.nav-item { border-top: 1px solid var(--paper-200); }
.nav-lnk {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3) 0;
  font-family: var(--mono); font-size: var(--step--2); font-weight: 650;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--ink-900);
}
.nav-lnk.is-on { color: var(--water-700); }
.nav-caret {
  width: 6px; height: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); opacity: 0.6;
}
.nav-sub { list-style: none; margin: 0 0 var(--sp-3); padding: 0 0 0 var(--sp-4); }
.nav-sub-lnk {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-3);
  text-decoration: none; border-left: 2px solid var(--paper-200);
}
.nav-sub-lnk:hover { border-left-color: var(--water-600); }
.nav-sub-txt { display: block; min-width: 0; }
.nav-sub-n { display: block; font-size: var(--step-0); font-weight: 700; color: var(--ink-900); line-height: 1.3; }
.nav-sub-s {
  display: block; font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.04em; color: var(--ink-500); line-height: 1.5; margin-top: 3px;
}

/* ==================================================================
   11. Hero
   ================================================================== */
.hero { background: var(--paper-050); padding-block: var(--sp-7) var(--sp-8); }
.hero-in { display: grid; gap: var(--sp-7); }
.hero-h1 { margin-bottom: var(--sp-5); }
.hero-h1 em { font-style: normal; color: var(--water-700); }
.hero-lead { font-size: var(--step-1); line-height: 1.58; max-width: 56ch; color: var(--ink-800); }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); }
.hero-fine {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--paper-300);
  font-family: var(--mono); font-size: var(--step--2);
  line-height: 1.75; letter-spacing: 0.04em; color: var(--ink-500);
}

/* the self-perform figure, the site's one headline number */
.sp {
  display: grid; gap: var(--sp-2);
  margin-top: var(--sp-6); padding: var(--sp-5);
  background: var(--paper-050);
  border: 1px solid var(--paper-300);
  border-top: 2px solid var(--ink-900);
}
.sp-v {
  font-family: var(--mono);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink-950);
  font-variant-numeric: tabular-nums;
}
.sp-k {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 650;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500);
}
.sp-s { font-size: var(--step--1); line-height: 1.6; color: var(--ink-600); }

/* ==================================================================
   12. Sections
   ================================================================== */
.sec { padding-block: var(--sp-8); }
.sec-tint { background: var(--paper-100); }
.sec-ink { background: var(--ink-900); color: var(--paper-100); }
.sec-ink h1, .sec-ink h2, .sec-ink h3, .sec-ink h4 { color: var(--paper-050); }
.sec-ink a { color: var(--paper-050); }
.sec-ink a:hover { color: var(--water-400); }

.sec-hd { margin-bottom: var(--sp-6); max-width: var(--measure); }
.sec-hd h2 { margin-bottom: var(--sp-4); }
.sec-hd > p:not(.plabel) { font-size: var(--step-1); line-height: 1.6; color: var(--ink-700); }
.sec-ink .sec-hd > p:not(.plabel) { color: var(--paper-200); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose > h2 { margin-top: var(--sp-7); margin-bottom: var(--sp-4); }
.prose > h3 { margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.prose > ul, .prose > ol { padding-left: var(--sp-5); }
.prose li + li { margin-top: var(--sp-2); }
.prose .lead { font-size: var(--step-1); line-height: 1.58; color: var(--ink-700); }
.sec-ink .prose, .sec-ink .prose .lead { color: var(--paper-100); }

.split { display: grid; gap: var(--sp-7); }

/* ==================================================================
   13. The tabulation — the signature component
   ------------------------------------------------------------------
   A real table with a caption, a header row and row headers. Each row carries a
   4px left band in its utility colour, so a reader scanning the sheet sees at a
   glance which items are water and which are sewer.
   ================================================================== */
.tab-scroll {
  overflow-x: auto;
  border: 1px solid var(--ink-900);
  background: var(--paper-050);
  -webkit-overflow-scrolling: touch;
}
.tab-scroll:focus-visible { outline-offset: -3px; }
/* min-width so a pay item does not wrap to four lines on a phone. The sheet
   scrolls sideways inside .tab-scroll instead, which is what a wide bid tab
   does on paper too. */
.tab {
  width: 100%; min-width: 36rem;
  border-collapse: collapse; font-size: var(--step--1); line-height: 1.5;
}
.tab caption {
  caption-side: top; text-align: left;
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper-100);
  border-bottom: 1px solid var(--ink-900);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 650;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-700);
}
.tab thead th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left; vertical-align: bottom;
  background: var(--ink-900); color: var(--paper-050);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.tab tbody th, .tab tbody td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--paper-200);
}
.tab tbody th { font-weight: 650; font-size: var(--step-0); color: var(--ink-950); }
/* the locate band: what is in this pipe */
.tab tbody tr { border-left: 4px solid var(--paper-300); }
.tab tbody tr.r-water { border-left-color: var(--water-600); }
.tab tbody tr.r-sewer { border-left-color: var(--sewer-500); }
.tab tbody tr:hover { background: var(--paper-100); }
.tab tbody tr:last-child th, .tab tbody tr:last-child td { border-bottom: 0; }
.tab .num {
  font-family: var(--mono); font-weight: 650;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-950);
}
.tab .num-mark { color: var(--mark-600); }
.tab .unit {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap;
}
.tab .tab-sub {
  display: block; margin-top: 3px;
  font-family: var(--sans); font-size: var(--step--1); font-weight: 400;
  color: var(--ink-500); line-height: 1.5; white-space: normal;
}
.tab-note { margin-top: var(--sp-3); font-size: var(--step--1); line-height: 1.6; color: var(--ink-500); }
.sec-ink .tab-note { color: var(--ink-400); }

/* THE SHEET RULE — the tabulation is always a white sheet, even on the dark band.
   A bid tab is a printed document. Inverting it on ink would make it a second
   component with a second set of contrast ratios and a second pair of locate
   tones to keep honest; keeping it light means the sheet reads identically
   everywhere and the APWA bands keep the ratios measured for the page ground.
   So on ink the sheet simply sits on the dark section like paper on a table. */
.sec-ink .tab-scroll { background: var(--paper-050); border-color: var(--paper-300); }
.sec-ink .tab caption { background: var(--paper-100); color: var(--ink-700); }
.sec-ink .tab thead th { background: var(--ink-900); color: var(--paper-050); }
.sec-ink .tab tbody th { color: var(--ink-950); }
.sec-ink .tab tbody td { color: var(--ink-800); }
.sec-ink .tab .num { color: var(--ink-950); }
.sec-ink .tab .num-mark { color: var(--mark-600); }
.sec-ink .tab .unit, .sec-ink .tab .tab-sub { color: var(--ink-500); }
.sec-ink .tab a { color: var(--water-700); }

/* ==================================================================
   14. Scope rows
   ================================================================== */
.scopes { border-top: 2px solid var(--ink-950); }
.scope-hd {
  display: none;
  font-family: var(--mono); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500);
  padding-block: var(--sp-3); border-bottom: 1px solid var(--paper-300);
}
.scope {
  display: grid; gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--paper-200);
  border-left: 4px solid var(--util-band);
  padding-left: var(--sp-4);
}
.scope-water { --util-band: var(--water-600); }
.scope-sewer { --util-band: var(--sewer-500); }
.scope-both  { --util-band: var(--ink-700); }
.scope-a { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.scope-ref {
  font-family: var(--mono); font-size: var(--step--1); font-weight: 700;
  color: var(--paper-050); background: var(--ink-950); padding: 2px var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.scope-n { font-size: var(--step-2); }
.scope-n a:hover { color: var(--water-700); }
.scope-b { max-width: 62ch; line-height: 1.62; }
.scope-c { min-width: 0; }
.scope-doc {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--paper-200);
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4);
  font-size: var(--step--1); line-height: 1.5;
}
.scope-doc dt {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 650;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); padding-top: 0.2em;
}
.scope-doc dd { margin: 0; color: var(--ink-700); }
.sec-ink .scope { border-bottom-color: var(--ink-700); }
.sec-ink .scope-doc { border-top-color: var(--ink-700); }
.sec-ink .scope-doc dd { color: var(--paper-100); }
.sec-ink .scope-ref { background: var(--paper-050); color: var(--ink-950); }

/* ==================================================================
   15. Sequence — the project stages
   ================================================================== */
.sequence { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink-950); }
.seq-m {
  display: grid; gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--paper-200);
  transition: background-color 180ms ease;
}
.seq-m.is-now { background: var(--paper-100); }
.sec-ink .sequence { border-top-color: var(--paper-300); }
.sec-ink .seq-m { border-bottom-color: var(--ink-700); }
.sec-ink .seq-m.is-now { background: var(--ink-800); }
.seq-a { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.seq-ref {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.06em; color: var(--paper-050); background: var(--ink-950); padding: 3px var(--sp-2);
}
.sec-ink .seq-ref { background: var(--paper-050); color: var(--ink-950); }
.seq-hold {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 650;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mark-600); border: 1px solid var(--mark-600); padding: 2px var(--sp-2);
}
.sec-ink .seq-hold { color: var(--mark-300); border-color: var(--mark-300); }
.seq-n { font-size: var(--step-2); }
.seq-b { max-width: 62ch; line-height: 1.62; }
.seq-more { margin-top: var(--sp-5); }
.seq-more a {
  font-family: var(--mono); font-size: var(--step--1); font-weight: 650;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ==================================================================
   16. Identification block
   ================================================================== */
.nap {
  background: var(--paper-050);
  border: 1px solid var(--paper-300);
  border-top: 2px solid var(--ink-900);
  padding: var(--sp-5);
}
.nap-hd {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--paper-300);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 650;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.nap-hd-k { color: var(--ink-900); }
.nap-hd-v { color: var(--ink-500); }
.nap-hd-v abbr { text-decoration: none; border-bottom: 1px dotted var(--ink-500); }
.nap-name { font-size: var(--step-1); font-weight: 800; letter-spacing: -0.022em; line-height: 1.22; color: var(--ink-950); margin-bottom: var(--sp-2); }
.nap-addr { font-style: normal; line-height: 1.5; margin-bottom: var(--sp-4); }
.nap-st, .nap-city { display: block; }
.nap-rows {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4);
  font-size: var(--step--1); line-height: 1.5;
  padding-top: var(--sp-4); border-top: 1px solid var(--paper-200);
}
.nap-rows dt {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 650;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); padding-top: 0.2em;
}
.nap-rows dd { margin: 0; color: var(--ink-800); }
.nap-tz { color: var(--ink-500); }
.nap-rows .tel { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.nap-rows .mail { font-family: var(--mono); font-weight: 600; word-break: break-all; }
.mail { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

.foot .nap, .sec-ink .nap, .cta .nap {
  background: var(--ink-800); border-color: var(--ink-700); border-top-color: var(--paper-300);
}
.foot .nap-hd, .sec-ink .nap-hd, .cta .nap-hd { border-bottom-color: var(--ink-700); }
.foot .nap-hd-k, .sec-ink .nap-hd-k, .cta .nap-hd-k { color: var(--paper-100); }
.foot .nap-hd-v, .sec-ink .nap-hd-v, .cta .nap-hd-v { color: var(--ink-400); }
.foot .nap-name, .sec-ink .nap-name, .cta .nap-name { color: var(--paper-050); }
.foot .nap-addr, .sec-ink .nap-addr, .cta .nap-addr { color: var(--paper-200); }
.foot .nap-rows, .sec-ink .nap-rows, .cta .nap-rows { border-top-color: var(--ink-700); }
.foot .nap-rows dt, .sec-ink .nap-rows dt, .cta .nap-rows dt { color: var(--ink-400); }
.foot .nap-rows dd, .sec-ink .nap-rows dd, .cta .nap-rows dd { color: var(--paper-100); }
.foot .nap-rows dd a, .sec-ink .nap-rows dd a { color: var(--paper-050); }
.foot .nap-tz, .sec-ink .nap-tz { color: var(--ink-400); }

/* ==================================================================
   17. Page masthead + breadcrumbs
   ================================================================== */
.phead { background: var(--paper-050); padding-top: var(--sp-6); }
.phead-top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); padding-bottom: var(--sp-5);
}
.crumbs { font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; }
.crumbs li { display: flex; align-items: center; gap: var(--sp-2); }
.crumbs li + li::before { content: "/"; color: var(--paper-300); }
.crumbs a { color: var(--ink-500); text-decoration: none; }
.crumbs a:hover { color: var(--ink-900); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink-900); font-weight: 700; }
.phead-ref {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500);
}
.phead-body { padding-bottom: var(--sp-7); max-width: 64ch; }
.phead-h1 { margin-bottom: var(--sp-4); }
.phead-lead { font-size: var(--step-1); line-height: 1.58; color: var(--ink-700); }

/* ==================================================================
   18. FAQ — native details/summary, works with JS off
   ================================================================== */
.faq { border-top: 2px solid var(--ink-950); }
.faq-i { border-bottom: 1px solid var(--paper-200); }
.faq-i summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-4); cursor: pointer; list-style: none;
  font-size: var(--step-1); font-weight: 700; line-height: 1.34;
  letter-spacing: -0.014em; color: var(--ink-950);
}
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary:hover { color: var(--water-700); }
.faq-sign { flex: 0 0 auto; position: relative; width: 14px; height: 14px; margin-top: 0.4em; }
.faq-sign::before, .faq-sign::after { content: ""; position: absolute; background: var(--water-700); }
.faq-sign::before { left: 0; right: 0; top: 6px; height: 2px; }
.faq-sign::after { top: 0; bottom: 0; left: 6px; width: 2px; transition: opacity 140ms ease; }
.faq-i[open] .faq-sign::after { opacity: 0; }
.faq-a { padding-bottom: var(--sp-5); max-width: var(--measure); }
.faq-a > * + * { margin-top: var(--sp-3); }
.faq-a p { line-height: 1.68; }

/* ==================================================================
   19. Forms
   ================================================================== */
.form { display: grid; gap: var(--sp-5); }
.field { display: grid; gap: var(--sp-2); }
.field label, .check label {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 650;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-900);
}
.field-req { font-weight: 600; letter-spacing: 0.08em; color: var(--mark-600); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: var(--sp-3);
  background: var(--paper-050); border: 1px solid var(--paper-300); border-radius: 0;
  color: var(--ink-950); font-family: var(--sans); font-size: var(--step-0); line-height: 1.5;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink-700); }
.field-hint { font-size: var(--step--1); line-height: 1.6; color: var(--ink-500); }
.field-err {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 650;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mark-600);
}
.field.is-err input, .field.is-err select, .field.is-err textarea { border-color: var(--mark-600); }
.grid-2 { display: grid; gap: var(--sp-5); }
.check { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; }
.check input { width: 20px; height: 20px; margin-top: 0.2em; accent-color: var(--water-700); }
.check label { text-transform: none; letter-spacing: 0.01em; font-family: var(--sans); font-size: var(--step--1); line-height: 1.6; font-weight: 400; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--step--1); line-height: 1.62; color: var(--ink-500); }
.form-err {
  padding: var(--sp-4);
  border: 1px solid var(--mark-600); border-top: 3px solid var(--mark-600);
  background: var(--paper-100); color: var(--mark-600);
  font-size: var(--step--1); line-height: 1.6;
}
.form-err ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }

/* ==================================================================
   20. Closing action band
   ================================================================== */
.cta { background: var(--ink-950); color: var(--paper-100); }
.cta-in { padding-block: var(--sp-8); display: grid; gap: var(--sp-6); }
.cta-h { color: var(--paper-050); margin-bottom: var(--sp-4); }
.cta-copy > p { line-height: 1.65; max-width: 58ch; color: var(--paper-200); }
.cta-id {
  margin-top: var(--sp-4);
  font-family: var(--mono); font-size: var(--step--2);
  line-height: 1.75; letter-spacing: 0.04em; color: var(--ink-400);
}
.cta-act { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.cta-hrs {
  margin-top: var(--sp-4);
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-400);
}

/* ==================================================================
   21. Footer
   ================================================================== */
.foot { background: var(--ink-950); color: var(--paper-200); }
.foot-in { padding-block: var(--sp-8) var(--sp-6); display: grid; gap: var(--sp-7); }
.foot .brand-a { color: var(--paper-050); }
.foot .brand-b { color: var(--ink-400); }
.foot-id { display: grid; gap: var(--sp-5); }
.foot-cta { margin: 0; }
.foot-nav { display: grid; gap: var(--sp-6); }
.foot-h {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-400);
  margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--ink-700);
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li + li { margin-top: var(--sp-2); }
.foot-col a { color: var(--paper-200); text-decoration: none; font-size: var(--step--1); line-height: 1.5; }
.foot-col a:hover { color: var(--water-400); text-decoration: underline; }
.foot-btm { display: grid; gap: var(--sp-2); padding-top: var(--sp-5); border-top: 1px solid var(--ink-700); }
.foot-legal, .foot-note {
  font-family: var(--mono); font-size: var(--step--2);
  line-height: 1.75; letter-spacing: 0.03em; color: var(--ink-400);
}
.foot-legal a, .foot-note a { color: var(--paper-200); }

/* ==================================================================
   22. Content components
   ================================================================== */
.doclist { display: grid; gap: var(--sp-4); }
.doclist dt { font-size: var(--step-1); font-weight: 750; letter-spacing: -0.018em; color: var(--ink-950); line-height: 1.28; }
.sec-ink .doclist dt { color: var(--paper-050); }
.doclist dd {
  margin: var(--sp-1) 0 0; padding-left: var(--sp-4);
  border-left: 2px solid var(--paper-300);
  font-size: var(--step--1); line-height: 1.62; color: var(--ink-500);
}
.sec-ink .doclist dd { border-left-color: var(--ink-700); color: var(--ink-400); }

.nextlist { counter-reset: n; list-style: none; margin: 0; padding: 0; }
/* A hanging indent rather than a grid. A grid list item splits its inline
   content into anonymous items at every element boundary, so an item written
   as `<strong>Label.</strong> followed by text` lands in two different
   columns and the second one collapses to almost nothing. Absolute
   positioning for the counter cannot do that. */
.nextlist li {
  counter-increment: n; position: relative;
  padding-left: 2.60rem; line-height: 1.6;
}
.nextlist li + li { margin-top: var(--sp-3); }
.nextlist li::before {
  content: counter(n);
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: var(--step--2); font-weight: 700;
  color: var(--paper-050); background: var(--ink-950);
  width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
}

.policy-lead { font-size: var(--step-0); line-height: 1.62; color: var(--ink-500); }
.policy-grid { display: grid; gap: var(--sp-3); }
.policy-btn {
  display: grid; gap: 3px; padding: var(--sp-4);
  border: 1px solid var(--paper-300); border-top: 2px solid var(--ink-900);
  background: var(--paper-050); text-decoration: none;
  transition: border-color 130ms ease, background-color 130ms ease;
}
.policy-btn:hover { border-top-color: var(--water-600); background: var(--paper-100); }
.policy-btn-n { font-size: var(--step-0); font-weight: 750; letter-spacing: -0.018em; color: var(--ink-950); line-height: 1.28; }
.policy-btn-s { font-size: var(--step--1); line-height: 1.55; color: var(--ink-500); }

.sheet-note { font-size: var(--step--1); line-height: 1.62; color: var(--ink-500); padding-top: var(--sp-3); border-top: 1px solid var(--paper-200); }
.sec-ink .sheet-note { color: var(--ink-400); border-top-color: var(--ink-700); }

.price-basis {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--paper-200);
  max-width: var(--measure);
  font-size: var(--step--1); line-height: 1.62; color: var(--ink-500);
}
.sec-ink .price-basis { color: var(--ink-400); border-top-color: var(--ink-700); }

.areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.areas li {
  font-family: var(--mono); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.03em; padding-block: var(--sp-2); border-bottom: 1px solid var(--paper-200);
}
.sec-ink .areas li { border-bottom-color: var(--ink-700); }

/* a marked state — the engineer's red, and nothing else */
.mark {
  display: grid; gap: var(--sp-2); padding: var(--sp-4);
  background: var(--paper-100);
  border: 1px solid var(--mark-600); border-top: 3px solid var(--mark-600);
}
.mark-k { font-family: var(--mono); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mark-600); }
.mark p { font-size: var(--step--1); line-height: 1.62; color: var(--ink-800); }
.sec-ink .mark { background: var(--ink-800); border-color: var(--mark-300); border-top-color: var(--mark-300); }
.sec-ink .mark-k { color: var(--mark-300); }
.sec-ink .mark p { color: var(--paper-100); }

.results { border-top: 2px solid var(--ink-950); }
.result { padding-block: var(--sp-5); border-bottom: 1px solid var(--paper-200); }
.result-n { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.result-u { font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.04em; color: var(--ink-500); margin-bottom: var(--sp-2); }
.result p { font-size: var(--step--1); line-height: 1.6; color: var(--ink-500); }

/* ==================================================================
   23. Drawings — the plan and profile plate
   ================================================================== */
.plate {
  background: var(--paper-050);
  border: 1px solid var(--paper-300);
  border-top: 2px solid var(--ink-900);
  padding: var(--sp-5) var(--sp-4);
}
.plate-cap {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--paper-200);
  font-size: var(--step--1); line-height: 1.6; color: var(--ink-500);
}
.dwg { width: 100%; height: auto; }
.dwg-fig { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; fill: var(--ink-500); font-family: var(--mono); }
.dwg-lbl { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; fill: var(--ink-950); font-family: var(--sans); }
.dwg-rule { stroke: var(--ink-700); stroke-width: 1; }
.dwg-grid { stroke: var(--paper-200); stroke-width: 0.6; }
.dwg-leader { stroke: var(--ink-500); stroke-width: 1; }
.dwg-water { stroke: var(--water-600); fill: none; stroke-width: 3; }
.dwg-sewer { stroke: var(--sewer-500); fill: none; stroke-width: 3; }
.dwg-ground { stroke: var(--ink-800); fill: none; stroke-width: 1.6; }
.dwg-struct { fill: none; stroke: var(--ink-800); stroke-width: 1.4; }
.dwg-kn rect { fill: var(--paper-050); stroke: var(--ink-900); stroke-width: 1.2; }
.dwg-kn text { font-size: 11px; font-weight: 700; fill: var(--ink-950); font-family: var(--mono); }
.dwg-tb rect { fill: none; stroke: var(--ink-900); stroke-width: 1.2; }
.dwg-tb line { stroke: var(--ink-900); stroke-width: 1; }

.knlist { list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--paper-200); }
.knlist li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--sp-3); align-items: start; }
.knlist li + li { margin-top: var(--sp-3); }
.knlist-n {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 700;
  color: var(--paper-050); background: var(--ink-950);
  width: 1.3rem; height: 1.3rem; display: grid; place-items: center;
}
.knlist-t { font-size: var(--step--1); line-height: 1.6; color: var(--ink-500); }

/* ==================================================================
   24. Motion — one authored moment, then a single reveal
   ================================================================== */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity 200ms ease-out, transform 200ms ease-out; }
.js .reveal.is-in { opacity: 1; transform: none; }

/* The authored moment: the locate line under the hero paints itself across once,
   left to right, the way a locate crew walks it. */
.js .locate-paint { --paint: 0; }
.js .locate-paint::after {
  content: "";
  position: absolute; inset: 0 0 0 0;
  background: var(--paper-050);
  transform-origin: right center;
  animation: paint 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 150ms both;
}
@keyframes paint { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .locate-paint::after { display: none; }
}

/* ==================================================================
   25. Responsive — mobile-first, min-width only
   ================================================================== */
@media (min-width: 34em) {
  .wrap { padding-inline: var(--sp-5); }
  .idbar-in { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
  .scope { grid-template-columns: 1fr 12rem; align-items: start; gap: var(--sp-4) var(--sp-5); }
  .scope-a, .scope-b, .scope-doc { grid-column: 1; }
  .scope-c { grid-column: 2; grid-row: 1 / span 2; }
  .seq-m { grid-template-columns: 1fr 12rem; align-items: center; gap: var(--sp-4) var(--sp-5); }
  .seq-a, .seq-b { grid-column: 1; }
  .seq-c { grid-column: 2; grid-row: 1 / span 2; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .policy-grid { grid-template-columns: 1fr 1fr; }
  .areas { grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); }
  .sp { grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-2) var(--sp-5); }
  .sp-v { grid-row: 1 / span 2; }
}

@media (min-width: 48em) {
  .sec { padding-block: var(--sp-9); }
  .hero { padding-block: var(--sp-8) var(--sp-9); }
  .panel, .nap { padding: var(--sp-6); }
  .foot-nav { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--sp-6); }
  .foot-btm { grid-template-columns: 1fr auto; align-items: baseline; gap: var(--sp-4); }
  .cta-in { grid-template-columns: 1fr auto; align-items: end; gap: var(--sp-7); }
  .cta-act { flex-direction: column; align-items: stretch; }
}

@media (min-width: 64em) {
  .head-in { grid-template-columns: auto 1fr auto; gap: var(--sp-5); }
  .brand { grid-column: 1; grid-row: 1; }
  .nav { grid-column: 2; grid-row: 1; display: block; }
  .head-act { grid-column: 3; grid-row: 1; }
  .head-tel { display: flex; }
  .menu-btn { display: none; }

  .nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); padding: 0; }
  .nav-item { border-top: 0; position: relative; }
  .nav-lnk { padding: var(--sp-3); }
  .nav-lnk.is-on { color: var(--ink-950); box-shadow: inset 0 -2px 0 var(--ink-950); }
  .nav-lnk:hover { color: var(--water-700); }

  .nav-sub {
    position: absolute; top: 100%; left: 0; z-index: 30;
    min-width: 24rem; margin: 0; padding: var(--sp-3);
    background: var(--paper-050);
    border: 1px solid var(--paper-300); border-top: 2px solid var(--ink-900);
    box-shadow: 0 18px 36px -28px rgba(20, 23, 26, 0.6);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
  }
  .nav-item-group:hover .nav-sub, .nav-item-group:focus-within .nav-sub {
    opacity: 1; visibility: visible; transform: none;
  }
  .nav-sub-lnk { padding-block: var(--sp-3); }

  .hero-in { grid-template-columns: 0.92fr 1.08fr; align-items: start; gap: var(--sp-8); }
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .split-wide { grid-template-columns: 1.25fr 0.75fr; }
  .foot-in { grid-template-columns: 21rem 1fr; gap: var(--sp-8); }
  .foot-nav { grid-template-columns: repeat(4, 1fr); }
  .foot-btm { grid-column: 1 / -1; }
  .scope-hd { display: grid; grid-template-columns: 1fr 13rem; gap: var(--sp-5); padding-left: calc(var(--sp-4) + 4px); }
  .scope { grid-template-columns: 1fr 13rem; }
  .seq-m { grid-template-columns: 1fr 13rem; }
  .tab { font-size: var(--step-0); }
  .phead-body { padding-bottom: var(--sp-8); }
}

@media (min-width: 86em) { :root { --wrap: 86rem; } }

@media (max-width: 23.5em) {
  :root { --step-5: 1.95rem; }
  .head-in { gap: var(--sp-3); }
  .brand-mark { width: 34px; height: 34px; }
}

/* ==================================================================
   26. Print — a unit-price sheet is a thing people print
   ================================================================== */
@media print {
  .idbar, .head, .foot-nav, .cta, .menu-btn, .skip, .locate { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; }
  .sec, .hero { padding-block: 12pt; }
  .sec-ink, .cta, .foot { background: #fff !important; color: #000 !important; }
  .sec-ink h1, .sec-ink h2, .sec-ink h3 { color: #000 !important; }
  .panel, .nap, .tab-scroll, .sp, .plate { border-color: #999; break-inside: avoid; }
  .scope, .seq-m, .faq-i { break-inside: avoid; }
  .faq-a { display: block !important; }
  a { text-decoration: underline; }
  .tab thead th, .seq-ref, .scope-ref, .nextlist li::before {
    background: none !important; color: #000 !important; box-shadow: inset 0 0 0 1px #000;
  }
  .tab tbody tr:hover { background: none; }
  /* the locate band survives print as a rule, because it carries meaning */
  .tab tbody tr { border-left-width: 3px; }
}