/* =====================================================================
   T-Bone Construction, Inc.
   =====================================================================

   THESIS:   The certified schedule of values. When a commercial building
             is paid for, the document that does it is a schedule of
             values — the project broken into numbered divisions, each
             with a description and a sum, certified and signed. It is the
             one piece of paper on a commercial project everybody trusts,
             so the site is one.

   OWN-WORLD:Warm near-white paper, black ink, one seal red. A text serif
             for everything read and a square mono for everything counted.
             A ledger margin down the left of every section holding the
             division number. An architect's seal, once per page, in the
             corner where it belongs on a drawing.

   STORY:    You arrive at a document, not a brochure. The budget is a
             schedule of values. The services are divisions. The claim —
             the architect works here — is stamped rather than asserted.

   FIRST VIEWPORT: The claim in a serif, and a schedule of values beside
             it with real per-square-foot ranges by building type.

   FORM:     Zero radius everywhere except the seal, which is a circle
             because seals are circles. Heavy rules, never hairlines:
             1px table strokes, 2px division rules, 3px section rules.
             Roman display, never italic.

   MOTION:   One authored moment: the seal inks on — a 620ms fade and a
             1.5-degree settle, once, the way a stamp lands. Nothing
             loops. Reduced motion removes it and the seal is simply there.

   ORDER:    Mobile-first. The base rules are the phone composition and
             every media query is min-width.
*/

/* ==================================================================
   1. Fonts — self-hosted, SIL OFL, licences in /fonts
   ================================================================== */
@font-face {
  font-family: "Faustina";
  src: url("/fonts/faustina-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/faustina-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Mono";
  src: url("/fonts/red-hat-mono-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/red-hat-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ==================================================================
   2. Tokens
   ================================================================== */
:root {
  /* ink — measured against the page ground, not guessed */
  --ink-950: #17161a;
  --ink-900: #1e1d21;
  --ink-800: #2a282e;  /* body text: 13.95:1 on paper, 12.90:1 on tint */
  --ink-700: #3b393f;
  --ink-600: #4e4c53;
  --ink-500: #5c5a61;  /* muted on light only: 6.51:1 paper, 6.02:1 tint */
  --ink-400: #8e8c93;  /* muted on dark only: 5.05:1 on --ink-900 */

  /* paper — warm near-white, the colour of a printed document */
  --paper-000: #ffffff;
  --paper-050: #fafaf9;
  --paper-100: #f2f1ee;
  --paper-200: #e4e2dd;  /* division rules */
  --paper-300: #c9c6bf;  /* the ledger margin rule */

  /* THE ONE RED. Certified, required, or not yet priced. Nothing else.
     7.16:1 on paper, and paper on it is 7.16:1 too, so it reads either
     way round and needs no special-casing. */
  --seal-700: #8a1728;
  --seal-600: #a51c30;
  --seal-300: #e8808e;   /* on --ink-900 only: 6.31:1 */

  --serif: Faustina, Georgia, "Times New Roman", serif;
  --mono: "Red Hat Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--2: 0.6875rem;
  --step--1: 0.875rem;
  --step-0:  1.125rem;   /* larger than the siblings: a serif at reading size */
  --step-1:  1.25rem;
  --step-2:  1.5rem;
  --step-3:  clamp(1.6rem, 1.35rem + 1.3vw, 2.1rem);
  --step-4:  clamp(1.85rem, 1.4rem + 2.2vw, 2.75rem);
  --step-5:  clamp(2.1rem, 1.3rem + 3.6vw, 3.5rem);
  --step-fig: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);

  --measure: 68ch;
  --wrap: 72rem;    /* narrower than the siblings: a portrait document */
  --ledger: 5.5rem; /* the margin that holds the division number */

  --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: 4.5rem;
}

/* ==================================================================
   3. Reset
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-family: var(--serif);
  font-size: 100%;
}
@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-size: var(--step-0);
  line-height: 1.66;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* THE ROMAN RULE: display type is roman. Italic is for a legal note inside
   body copy and nothing else. */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink-950);
  font-family: var(--serif);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.014em;
  line-height: 1.16;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); line-height: 1.1; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); letter-spacing: -0.01em; }
h4 { font-size: var(--step-1); letter-spacing: -0.008em; }

p, ul, ol, dl, figure, table { margin: 0; }
img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--ink-950); text-decoration-thickness: 1px; text-underline-offset: 0.17em; }
a:hover { color: var(--seal-600); }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--seal-600);
  outline-offset: 2px;
}
.sec-ink :focus-visible, .foot :focus-visible, .idbar :focus-visible, .cta :focus-visible {
  outline-color: var(--seal-300);
}

.skip {
  position: absolute; left: -9999px; z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-950); color: var(--paper-050);
  font-family: var(--mono); font-size: var(--step--1);
}
.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 children default to min-width:auto, which lets a wide
   schedule of values push past the viewport. This is the fix. */
.split > *, .hero-in > *, .cta-in > *, .foot-in > *, .head-in > *, .sheet > * { min-width: 0; }
.sheet, .nap, .sov-scroll { min-width: 0; max-width: 100%; }

/* ==================================================================
   4. The ledger margin — the page's structural signature
   ------------------------------------------------------------------
   A fixed column down the left of every section holding the division
   number, separated by a rule that runs the full height of the section.
   It is what makes an ordinary page read as a sheet from a set. Below
   62em it collapses, because 5.5rem on a phone is a quarter of the
   screen spent on a number.
   ================================================================== */
.divn {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-family: var(--mono);
}
.divn-n {
  font-size: var(--step--1); font-weight: 700; letter-spacing: 0.06em;
  color: var(--ink-950);
  padding: 2px 7px;
  border: 1px solid var(--ink-950);
}
.divn-t {
  font-size: var(--step--2); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-500);
}
.sec-ink .divn-n { color: var(--paper-050); border-color: var(--paper-300); }
.sec-ink .divn-t { color: var(--ink-400); }

/* ==================================================================
   5. Section labels
   ================================================================== */
.plabel {
  margin: 0 0 var(--sp-3);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500);
}
.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-600); }

/* ==================================================================
   6. Buttons
   ================================================================== */
.btn {
  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-radius: 0;
  background: var(--ink-950);
  color: var(--paper-050);
  font-family: var(--mono); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease;
}
.btn-lbl { display: block; }
.btn-pri:hover { background: var(--seal-600); border-color: var(--seal-600); }
.btn-gho { background: transparent; color: var(--ink-900); border-color: var(--ink-600); }
.btn-gho:hover { background: var(--ink-950); border-color: var(--ink-950); color: var(--paper-050); }
.btn-blk { display: flex; width: 100%; }

.sec-ink .btn-pri, .cta .btn-pri, .foot .btn-pri {
  background: var(--paper-050); border-color: var(--paper-050); color: var(--ink-950);
}
.sec-ink .btn-pri:hover, .cta .btn-pri:hover, .foot .btn-pri:hover {
  background: var(--seal-300); border-color: var(--seal-300); color: var(--ink-950);
}
.sec-ink .btn-gho, .cta .btn-gho, .foot .btn-gho { color: var(--paper-050); border-color: var(--ink-600); }
.sec-ink .btn-gho:hover, .cta .btn-gho:hover, .foot .btn-gho:hover {
  background: var(--paper-050); border-color: var(--paper-050); color: var(--ink-950);
}

/* ==================================================================
   7. Figures
   ================================================================== */
.fig {
  font-family: var(--mono); font-size: 0.93em; font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -0.005em;
  color: var(--ink-950); white-space: nowrap;
}
.fig-u {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500);
  white-space: nowrap;
}
.fig-seal { color: var(--seal-600); }
.sec-ink .fig, .cta .fig { color: var(--paper-050); }
.sec-ink .fig-u, .cta .fig-u { color: var(--ink-400); }
.sec-ink .fig-seal, .cta .fig-seal { color: var(--seal-300); }

/* ==================================================================
   8. THE SEAL — the one circle in a zero-radius system
   ------------------------------------------------------------------
   A device referring to the practice of certifying a drawing, and the
   visual mark of this firm's one genuine differentiator. It is NOT a
   credential: it never carries a licence number and never asserts that
   the company is licensed as an architect. aria-hidden, once per page.
   ================================================================== */
.seal {
  display: block; width: 120px; height: 120px;
  color: var(--seal-600);
  margin-top: var(--sp-6);
}
.seal-svg { width: 120px; height: 120px; display: block; }
.seal-ring {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.22em; fill: currentColor;
}
.seal-mid {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; fill: currentColor;
}
.seal-ref {
  font-family: var(--mono); font-size: 8.5px; font-weight: 500;
  letter-spacing: 0.12em; fill: currentColor;
}
.sec-ink .seal, .cta .seal, .foot .seal { color: var(--seal-300); }

/* ==================================================================
   9. THE SCHEDULE OF VALUES — the signature component
   ================================================================== */
.sov-scroll {
  overflow-x: auto;
  border: 1px solid var(--ink-950);
  border-top-width: 2px;
  background: var(--paper-000);
  -webkit-overflow-scrolling: touch;
}
.sov-scroll:focus-visible { outline-offset: -3px; }

.sov {
  /* min-width so a line item does not wrap to four lines on a phone; the sheet
     scrolls sideways inside .sov-scroll instead, which is what a wide schedule
     of values does on paper too. Kept at 30rem rather than wider so the hero's
     schedule fits its column on a desktop without scrolling. */
  width: 100%; min-width: 30rem;
  border-collapse: collapse;
  font-size: var(--step--1); line-height: 1.5;
}
.sov caption {
  caption-side: top; text-align: left;
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper-100);
  border-bottom: 2px solid var(--ink-950);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-700);
}
/* column heads: a ledger head, not an editorial label */
.sov thead th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left; vertical-align: bottom;
  background: var(--ink-950); color: var(--paper-050);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.sov thead th:last-child, .sov td.num { text-align: right; }
.sov thead th:last-child { width: 1%; }
.sov tbody th, .sov tbody td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--paper-200);
}
.sov tbody th.sov-d {
  font-family: var(--mono); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.06em; color: var(--ink-950); white-space: nowrap;
  width: 1%;
}
.sov tbody tr:hover { background: var(--paper-050); }
.sov tbody tr:last-child th, .sov tbody tr:last-child td { border-bottom: 0; }
.sov .num {
  font-family: var(--mono); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-950);
}
/* THE CERTIFICATION RULE: red means not yet priced, and carries a word */
.sov .num-seal { color: var(--seal-600); }
.sov .unit {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap;
}
.sov .sov-sub {
  display: block; margin-top: 3px;
  font-family: var(--serif); font-size: var(--step--1); font-weight: 400;
  color: var(--ink-500); line-height: 1.5; white-space: normal;
}
/* a subtotal takes a 2px rule above; a total takes 2px above and 3px below */
.sov tr.sov-sub-row th, .sov tr.sov-sub-row td { border-top: 2px solid var(--ink-950); }
.sov tr.sov-tot th, .sov tr.sov-tot td {
  border-top: 2px solid var(--ink-950);
  border-bottom: 3px solid var(--ink-950);
  font-weight: 700; color: var(--ink-950);
}
.sov-note { margin-top: var(--sp-3); font-size: var(--step--1); line-height: 1.6; color: var(--ink-500); }
.sec-ink .sov-note { color: var(--ink-400); }

/* THE SHEET RULE — the schedule stays a white sheet even on the dark band,
   so it needs no second set of contrast ratios. */
.sec-ink .sov-scroll { background: var(--paper-000); border-color: var(--paper-300); }
.sec-ink .sov caption { background: var(--paper-100); color: var(--ink-700); }
.sec-ink .sov thead th { background: var(--ink-950); color: var(--paper-050); }
.sec-ink .sov tbody th, .sec-ink .sov tbody td { color: var(--ink-800); }
.sec-ink .sov tbody th.sov-d, .sec-ink .sov .num { color: var(--ink-950); }
.sec-ink .sov .num-seal { color: var(--seal-600); }
.sec-ink .sov .unit, .sec-ink .sov .sov-sub { color: var(--ink-500); }
.sec-ink .sov a { color: var(--seal-700); }

/* ==================================================================
   10. Sheets (the card, which is a sheet of paper)
   ================================================================== */
.sheet {
  background: var(--paper-000);
  border: 1px solid var(--paper-200);
  border-top: 2px solid var(--ink-950);
  border-radius: 0;
  padding: var(--sp-5);
}
.sheet-certified { border-top-color: var(--seal-600); }
.sheet > * + * { margin-top: var(--sp-4); }
.sheet-note { font-size: var(--step--1); color: var(--ink-500); line-height: 1.6; }
.sec-ink .sheet {
  background: var(--ink-800); border-color: var(--ink-700);
  border-top-color: var(--paper-300); color: var(--paper-050);
}
.sec-ink .sheet-note { color: var(--ink-400); }
.sec-ink .sheet h2, .sec-ink .sheet h3 { color: var(--paper-050); }
.sec-tint .sheet { background: var(--paper-000); }

/* ==================================================================
   11. Identification bar
   ================================================================== */
.idbar { background: var(--ink-950); color: var(--paper-050); }
.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.12em; 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); color: var(--ink-400);
}
.idbar-meta span { position: relative; }
/* The separator only exists while the bar is a single row. Stacked on a phone,
   each item is already on its own line, and a trailing em dash there reads as a
   broken hyphen rather than as a divider. */
@media (min-width: 34em) {
  .idbar-meta span:not(:last-child)::after {
    content: "\2014"; position: absolute; right: calc(var(--sp-2) * -1 - 4px);
    color: var(--ink-600);
  }
}

/* ==================================================================
   12. Header
   ================================================================== */
.head {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper-050);
  border-bottom: 2px solid var(--ink-950);
  transition: box-shadow 160ms ease;
}
.head.is-stuck { box-shadow: 0 1px 0 var(--paper-200), 0 10px 22px -20px rgba(23, 22, 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 { grid-row: 1; 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.04; min-width: 0; }
.brand-a { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.016em; color: var(--ink-950); }
.brand-b {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500);
}
.head-act { grid-row: 1; display: flex; align-items: center; gap: var(--sp-3); }
.head-tel { display: none; flex-direction: column; line-height: 1.12; 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-1); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink-950);
}
.head-tel:hover .head-tel-n { color: var(--seal-600); }

.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(--ink-600); border-radius: 0;
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  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; grid-row: 2; 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-3);
  min-height: 48px; padding-block: var(--sp-3);
  font-family: var(--mono); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--ink-900);
}
.nav-lnk.is-on { color: var(--seal-600); }
.nav-caret {
  flex: 0 0 auto; width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.nav-sub { list-style: none; margin: 0 0 var(--sp-3); padding: 0 0 0 var(--sp-4); }
.nav-sub-lnk {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border-left: 1px solid var(--paper-200); text-decoration: none;
}
.nav-sub-lnk:hover { border-left-color: var(--seal-600); }
.nav-sub-d {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.06em; color: var(--ink-500);
  padding: 1px 5px; border: 1px solid var(--paper-300);
}
.nav-sub-txt { display: block; min-width: 0; }
.nav-sub-n { display: block; font-size: var(--step-0); font-weight: 600; color: var(--ink-950); line-height: 1.26; }
.nav-sub-s {
  display: block; margin-top: 2px; font-size: var(--step--1);
  color: var(--ink-500); line-height: 1.45;
}

/* ==================================================================
   13. 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(--seal-600); }
.hero-lead { font-size: var(--step-1); line-height: 1.6; max-width: 54ch; color: var(--ink-700); }
.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); font-family: var(--mono); font-size: var(--step--2);
  line-height: 1.75; letter-spacing: 0.04em; color: var(--ink-500);
}

/* the headline figure block */
.sp {
  display: grid; gap: var(--sp-2);
  margin-top: var(--sp-6); padding: var(--sp-5);
  background: var(--paper-000);
  border: 1px solid var(--paper-200);
  border-top: 2px solid var(--seal-600);
}
.sp-v {
  font-family: var(--mono); font-size: var(--step-fig); font-weight: 600;
  letter-spacing: -0.02em; 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: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500);
}
.sp-s { font-size: var(--step--1); line-height: 1.62; color: var(--ink-600); }

/* ==================================================================
   14. Sections
   ================================================================== */
.sec { padding-block: var(--sp-8); }
.sec-tint { background: var(--paper-100); }
.sec-ink { background: var(--ink-900); color: var(--paper-050); }
.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(--seal-300); }

.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-050); }

.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.6; color: var(--ink-700); }
.prose em { font-style: italic; }   /* the one sanctioned italic: a note in body copy */
.sec-ink .prose, .sec-ink .prose .lead { color: var(--paper-050); }

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

/* ==================================================================
   15. Division list (the scopes, as a schedule)
   ================================================================== */
.divs { border-top: 3px solid var(--ink-950); }
.div-hd {
  display: none; padding-block: var(--sp-2);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500);
  border-bottom: 1px solid var(--paper-200);
}
.div-row {
  display: grid; gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-bottom: 2px solid var(--paper-200);
}
.div-a { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.div-ref {
  font-family: var(--mono); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.06em; padding: 2px 7px;
  background: var(--ink-950); color: var(--paper-050);
}
.div-n { font-size: var(--step-2); }
.div-n a:hover { color: var(--seal-600); }
.div-b { max-width: 60ch; line-height: 1.6; }
.div-c { min-width: 0; }
.div-doc {
  display: grid; gap: var(--sp-1);
  padding-top: var(--sp-3); border-top: 1px solid var(--paper-200);
  font-size: var(--step--1); line-height: 1.5;
}
.div-doc dt {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500);
}
.div-doc dd { margin: 0; color: var(--ink-700); }
.sec-ink .divs { border-top-color: var(--paper-300); }
.sec-ink .div-row { border-bottom-color: var(--ink-700); }
.sec-ink .div-doc { border-top-color: var(--ink-700); }
.sec-ink .div-doc dd { color: var(--paper-050); }
.sec-ink .div-ref { background: var(--paper-050); color: var(--ink-950); }

/* the span callout */
.span { display: inline-flex; align-items: center; gap: var(--sp-3); 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--1); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--ink-700);
  white-space: nowrap;
}
.sec-ink .span-line, .cta .span-line { background: var(--ink-600); }
.sec-ink .span-v, .cta .span-v { color: var(--paper-050); }

/* ==================================================================
   16. Identification block
   ================================================================== */
.nap {
  background: var(--paper-000);
  border: 1px solid var(--paper-200);
  border-top: 2px solid var(--ink-950);
  padding: var(--sp-5);
}
.nap-hd {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-4);
  border-bottom: 2px solid var(--paper-200);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.nap-hd-k { color: var(--ink-950); }
.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: 700; letter-spacing: -0.014em; 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: 8.5rem 1fr; gap: var(--sp-2) var(--sp-4);
  padding-top: var(--sp-4); border-top: 1px solid var(--paper-200);
  font-size: var(--step--1); line-height: 1.5;
}
.nap-rows dt {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500);
}
.nap-rows dd { margin: 0; color: var(--ink-800); }
.nap-tz { color: var(--ink-500); }
.nap-rows .tel { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.nap-rows .mail { font-family: var(--mono); font-weight: 500; 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-050); }
.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-050); }
.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-050); }
.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 head
   ================================================================== */
.phead { background: var(--paper-050); padding-top: var(--sp-6); }
.phead-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3);
  padding-bottom: var(--sp-5);
}
.crumbs { font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
          letter-spacing: 0.1em; 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-950); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink-950); }
.phead-ref {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500);
}
.phead-body { padding-bottom: var(--sp-7); max-width: 60ch; }
.phead-h1 { margin-bottom: var(--sp-4); }
.phead-lead { font-size: var(--step-1); line-height: 1.6; color: var(--ink-700); }

/* ==================================================================
   18. FAQ
   ================================================================== */
.faq { border-top: 3px 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; letter-spacing: -0.01em;
  line-height: 1.38; color: var(--ink-950);
}
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary:hover { color: var(--seal-600); }
.faq-sign { flex: 0 0 auto; position: relative; width: 14px; height: 14px; margin-top: 0.44em; }
.faq-sign::before, .faq-sign::after { content: ""; position: absolute; background: var(--seal-600); }
.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.66; }

/* ==================================================================
   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: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-700);
}
.field-req { font-weight: 700; letter-spacing: 0.1em; color: var(--seal-600); }
.field input, .field select, .field textarea {
  min-height: 46px; padding: var(--sp-3);
  background: var(--paper-000); color: var(--ink-950);
  border: 1px solid var(--paper-300); border-radius: 0;
  font: inherit; font-size: var(--step-0);
}
.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--1); font-weight: 600;
  color: var(--seal-600);
}
.field.is-err input, .field.is-err select, .field.is-err textarea { border-color: var(--seal-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(--seal-600); }
.check label { text-transform: none; letter-spacing: 0.01em; font-family: var(--serif);
               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); margin-bottom: var(--sp-5);
  border: 1px solid var(--seal-600); border-top-width: 2px;
  background: var(--paper-000); font-size: var(--step--1); line-height: 1.6;
}
.form-err ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }

/* ==================================================================
   20. CTA and footer
   ================================================================== */
.cta { background: var(--ink-950); color: var(--paper-050); }
.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.64; max-width: 56ch; color: var(--paper-050); }
.cta-id {
  margin-top: var(--sp-5); font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.06em; color: var(--ink-400);
}
.cta-act { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.cta-hrs {
  width: 100%; font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-400);
}

.foot { background: var(--ink-950); color: var(--paper-050); }
.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 {
  margin-bottom: var(--sp-3); font-family: var(--mono); font-size: var(--step--2);
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-400);
}
.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-050); text-decoration: none; font-size: var(--step--1); line-height: 1.5; }
.foot-col a:hover { color: var(--seal-300); 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.04em; color: var(--ink-400);
}
.foot-legal a, .foot-note a { color: var(--paper-050); }

/* ==================================================================
   21. Small pieces
   ================================================================== */
.doclist { display: grid; gap: var(--sp-4); }
.doclist dt { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.012em;
              color: var(--ink-950); line-height: 1.26; }
.sec-ink .doclist dt { color: var(--paper-050); }
.doclist dd {
  margin: var(--sp-2) 0 0; padding-left: var(--sp-4);
  border-left: 1px solid var(--paper-200);
  font-size: var(--step--1); line-height: 1.6; color: var(--ink-500);
}
.sec-ink .doclist dd { border-left-color: var(--ink-700); color: var(--ink-400); }

/* A hanging indent rather than a grid. A grid list item splits its inline
   content into anonymous items at every element boundary, so `<strong>Label.</strong>
   followed by text` lands in two different columns and the second one collapses.
   Absolute positioning for the counter cannot do that. */
.nextlist { counter-reset: n; list-style: none; margin: 0; padding: 0; }
.nextlist li {
  counter-increment: n; position: relative;
  padding-left: 2.75rem; line-height: 1.6;
}
.nextlist li + li { margin-top: var(--sp-3); }
.nextlist li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: 0.18em;
  font-family: var(--mono); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.06em; color: var(--ink-500);
}
.sec-ink .nextlist li::before { color: var(--ink-400); }

.policy-grid { display: grid; gap: var(--sp-3); }
.policy-btn {
  display: grid; gap: var(--sp-1); padding: var(--sp-4);
  background: var(--paper-000); border: 1px solid var(--paper-200);
  border-top: 2px solid var(--ink-950); text-decoration: none;
  transition: border-top-color 130ms ease, background-color 130ms ease;
}
.policy-btn:hover { border-top-color: var(--seal-600); background: var(--paper-050); }
.policy-btn-n { font-size: var(--step-0); font-weight: 700; letter-spacing: -0.012em;
                color: var(--ink-950); line-height: 1.26; }
.policy-btn-s { font-size: var(--step--1); line-height: 1.55; color: var(--ink-500); }

.basis {
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 2px solid var(--paper-200);
  font-size: var(--step--1); line-height: 1.62; color: var(--ink-500);
}
.sec-ink .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 {
  padding-block: var(--sp-3); border-bottom: 1px solid var(--paper-200);
  font-size: var(--step-0); line-height: 1.4;
}
.sec-ink .areas li { border-bottom-color: var(--ink-700); }

/* the certified note — the one red callout */
.cert {
  display: grid; gap: var(--sp-2); padding: var(--sp-4);
  background: var(--paper-000);
  border: 1px solid var(--paper-200); border-top: 2px solid var(--seal-600);
}
.cert-k {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--seal-600);
}
.cert p { font-size: var(--step--1); line-height: 1.62; color: var(--ink-800); }
.sec-ink .cert { background: var(--ink-800); border-color: var(--ink-700);
                 border-top-color: var(--seal-300); }
.sec-ink .cert-k { color: var(--seal-300); }
.sec-ink .cert p { color: var(--paper-050); }

.results { border-top: 3px 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); }

/* ==================================================================
   22. Motion — one authored moment
   ================================================================== */
.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 seal inks on: a fade and a small settle, once, the way a stamp
   lands. This is the only authored animation on the site. */
.js .seal { opacity: 0; transform: rotate(-1.5deg) scale(1.02); }
.js .seal.is-in {
  opacity: 1; transform: rotate(0deg) scale(1);
  transition: opacity 620ms ease-out, transform 620ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

@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 .seal { opacity: 1; transform: none; }
}

/* ==================================================================
   23. Print — the document has to survive paper, because it is one
   ================================================================== */
@media print {
  .head, .skip, .cta, .menu-btn, .nav { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sec, .hero { padding-block: 12pt; }
  .sec-tint, .sec-ink { background: none !important; color: #000 !important; }
  .sec-ink h1, .sec-ink h2, .sec-ink h3, .sec-ink p, .sec-ink a { color: #000 !important; }
  a { text-decoration: underline; }
  .sov thead th, .div-ref { background: none !important; color: #000 !important;
                            box-shadow: inset 0 0 0 1px #000; }
  .sov tbody tr:hover { background: none; }
  .sov tr.sov-tot th, .sov tr.sov-tot td { border-bottom-width: 3px; }
  .seal { color: #000 !important; }
  .foot { background: none !important; color: #000 !important; }
  .foot a { color: #000 !important; }
}

/* ==================================================================
   24. 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-5); }
  .div-row { grid-template-columns: 1fr 12rem; align-items: start; gap: var(--sp-4) var(--sp-5); }
  .div-a, .div-b, .div-doc { grid-column: 1; }
  .div-c { grid-column: 2; grid-row: 1 / span 2; }
  .div-hd { display: flex; justify-content: space-between; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .cta-hrs { width: auto; }
}

@media (min-width: 48em) {
  .foot-nav { grid-template-columns: repeat(3, 1fr); }
  .policy-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 62em) {
  .wrap { padding-inline: var(--sp-6); }
  .head-in { grid-template-columns: auto 1fr auto; }
  .brand { grid-row: 1; }
  .nav { grid-column: auto; grid-row: 1; display: block; justify-self: center; }
  .nav-list { display: flex; gap: var(--sp-5); padding: 0; }
  .nav-item { border-top: 0; }
  .nav-lnk { min-height: 40px; padding-block: var(--sp-2); }
  .nav-lnk.is-on { box-shadow: inset 0 -2px 0 var(--seal-600); }
  .nav-caret { width: 7px; height: 7px; }
  .nav-item-sub { position: relative; }
  .nav-sub {
    position: absolute; top: 100%; left: calc(var(--sp-4) * -1);
    display: none; min-width: 24rem; margin: 0; padding: var(--sp-3);
    background: var(--paper-050); border: 1px solid var(--ink-950); border-top-width: 2px;
  }
  .nav-item-sub:hover .nav-sub, .nav-item-sub:focus-within .nav-sub { display: block; }
  .menu-btn { display: none; }
  .head-tel { display: flex; }
  .head-act { grid-row: 1; }

  .hero-in { grid-template-columns: 1fr 1.18fr; gap: var(--sp-7); align-items: start; }
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .split-wide { grid-template-columns: 1.5fr 1fr; }
  .cta-in { grid-template-columns: 1.4fr 1fr; align-items: center; }
  .foot-in { grid-template-columns: 1fr 1.6fr; }

  /* THE LEDGER MARGIN. A fixed column down the left of every section
     holding the division number, with a rule running the full height.
     It is what makes the page read as a sheet from a set. */
  .ledger { display: grid; grid-template-columns: var(--ledger) 1fr; gap: 0; }
  .ledger > .divn {
    grid-column: 1; grid-row: 1;
    flex-direction: column; align-items: flex-start; gap: var(--sp-2);
    padding-right: var(--sp-5);
    margin: 0;
  }
  .ledger > .ledger-body {
    grid-column: 2; grid-row: 1;
    padding-left: var(--sp-6);
    border-left: 1px solid var(--paper-300);
  }
  .sec-ink .ledger > .ledger-body { border-left-color: var(--ink-700); }
  .ledger > .divn .divn-t { writing-mode: horizontal-tb; }
}