/* =====================================================================
   Pinkard Construction Co.
   =====================================================================

   THESIS:   Every bid says what it does not include. Nobody reads them
             together. A commercial general contractor does not build a
             building, it buys one in about thirty pieces, and the gap
             between two trades is literally the intersection of two
             exclusion lists. The roofer excluded the wall flashing, the
             siding sub excluded the roof flashing, and nobody bought the
             flashing. That is the change order, written down on bid day
             in two documents the owner never sees.

   OWN-WORLD:A register of absences on a manila ground — the colour of a
             project folder, and the only coloured page ground in this
             family. Black ink. Excluded scope struck through at full
             contrast, never greyed. And one highlighter, applied ONLY to
             an empty cell: the emphasis colour on this site marks
             nothing, literally.

   STORY:    You arrive at a gap — two trades facing each other with a
             void between them — and understand in two seconds what you
             have been paying for on every project you have ever built.
             Every page after that makes you better at buying, including
             from somebody else.

   FIRST VIEWPORT: The claim, and one gap drawn at full size beside it.

   FORM:     Zero radius. 1px register strokes, 2px structural divisions,
             3px for the file edge and the rule under a total. A 3px file
             edge runs down the left of the page and every section's
             package number sits against it.

   MOTION:   One authored moment: the highlighter is pulled across a void
             left to right over 420ms, once, the way a marker is drawn
             across a page. Nothing loops. Reduced motion removes it and
             the void is simply filled.

   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: "Archivo";
  src: url("/fonts/archivo-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/archivo-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("/fonts/dm-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("/fonts/dm-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ==================================================================
   2. Tokens
   ================================================================== */
:root {
  /* ink — measured against the manila ground, not guessed */
  --ink-950: #17150e;  /* display and rules: 14.70:1 on manila */
  --ink-900: #1c1a12;  /* the dark band */
  --ink-800: #3a3628;  /* body: 9.73:1 manila, 8.85:1 tint */
  --ink-700: #4a4536;
  --ink-600: #5f5947;  /* muted on light only: 5.62:1 manila, 5.12:1 tint */
  --ink-400: #a39c86;  /* muted on dark only: 6.35:1 on --ink-900 */

  /* manila — the colour of a project folder, and the only coloured page
     ground in this family of sites */
  --paper-050: #f6f2e9;  /* a sheet laid on the file */
  --paper-100: #ede6d8;  /* THE PAGE GROUND */
  --paper-200: #e4dcc9;  /* tint band */
  --paper-300: #ded4bc;  /* deeper band */
  --rule-400: #c9c0a8;   /* register hairlines */

  /* THE MARK. One colour. Applied only to absence — see gap() in
     includes/functions.php, which is the only code permitted to emit it.
     --ink-950 on it measures 13.73:1, the strongest pairing on the site,
     which is correct: the void is the loudest thing on the page. */
  --mark-500: #f0e34a;

  --sans: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "DM 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.32rem + 1.2vw, 2.05rem);
  --step-4:  clamp(1.8rem, 1.4rem + 2.0vw, 2.7rem);
  --step-5:  clamp(2.05rem, 1.3rem + 3.5vw, 3.4rem);
  --step-fig: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);

  --measure: 70ch;
  --wrap: 76rem;
  --edge: 5.25rem;   /* the file edge gutter — wide enough for a wrapped label */

  --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(--sans);
  font-size: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--paper-100);
  color: var(--ink-800);
  font-size: var(--step-0);
  line-height: 1.66;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink-950);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.14;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); line-height: 1.08; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); letter-spacing: -0.015em; }
h4 { font-size: var(--step-1); letter-spacing: -0.01em; }

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.16em; }
a:hover { color: var(--ink-950); text-decoration-thickness: 2px; }

button { font: inherit; color: inherit; }

/* The focus ring is ink, not the mark: a focus ring must be one fixed
   colour and the mark means absence. */
:focus-visible { outline: 2px solid var(--ink-950); outline-offset: 2px; }
.sec-ink :focus-visible, .foot :focus-visible, .idbar :focus-visible, .cta :focus-visible {
  outline-color: var(--mark-500);
}

.skip {
  position: absolute; left: -9999px; z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-950); color: var(--paper-100);
  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
   register push past the viewport. This is the fix, and it is load-bearing. */
.split > *, .hero-in > *, .cta-in > *, .foot-in > *, .head-in > *, .sheet > * { min-width: 0; }
.file, .file-body { min-width: 0; }
.sheet, .nap, .gap { min-width: 0; max-width: 100%; }
/* The register scrolls inside its own box, so it needs a definite width and it
   must be the containing block for what is inside it. Without `position`, an
   absolutely positioned descendant — every visually-hidden "excluded:" span in
   a wide register is one — is laid out against the viewport instead, escapes
   the scroller's clip, and widens the whole document on a phone even though the
   table itself is scrolling correctly. That bug is invisible on a desktop and
   obvious on a 390px screen. */
.reg-scroll { min-width: 0; width: 100%; max-width: 100%; position: relative; }

/* ==================================================================
   4. The file edge — the page's structural signature
   ------------------------------------------------------------------
   A 3px rule down the left of the page with each section's package
   number set against it, so the whole site reads as one document in a
   folder rather than as a stack of web sections. Below 62em it becomes a
   top rule, because a vertical rule on a phone costs width the register
   needs.
   ================================================================== */
.pkg {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-family: var(--mono);
}
.pkg-n {
  font-size: var(--step--1); font-weight: 500; letter-spacing: 0.06em;
  color: var(--ink-950);
  padding: 2px 7px;
  border: 1px solid var(--ink-950);
}
.pkg-t {
  font-size: var(--step--2); font-weight: 500; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-600);
}
.sec-ink .pkg-n { color: var(--paper-100); border-color: var(--ink-400); }
.sec-ink .pkg-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: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-600);
}
.plabel-d { color: var(--rule-400); }
.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. Buttons
   ------------------------------------------------------------------
   The hover fill is the one sanctioned use of the mark on something that
   is not a void: a hover is momentary rather than a state of the
   document. It is never applied to a resting state.
   ================================================================== */
.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-100);
  font-family: var(--mono); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background-color 130ms ease, color 130ms ease;
}
.btn-lbl { display: block; }
.btn-pri:hover { background: var(--mark-500); color: var(--ink-950); }
.btn-gho { background: transparent; color: var(--ink-950); border-color: var(--ink-600); }
.btn-gho:hover { background: var(--mark-500); border-color: var(--ink-950); color: var(--ink-950); }
.btn-blk { display: flex; width: 100%; }

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

/* ==================================================================
   7. Figures and counts
   ================================================================== */
.fig {
  font-family: var(--mono); font-size: 0.94em; 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: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-600);
  white-space: nowrap;
}
.sec-ink .fig, .cta .fig { color: var(--paper-100); }
.sec-ink .fig-u, .cta .fig-u { color: var(--ink-400); }

/* THE COUNT RULE. Coverage is a number and a noun. Thin coverage carries
   the word "thin" — never a colour. Remove every hue from this site and
   nothing about coverage becomes unreadable. */
.cnt { display: inline-flex; align-items: baseline; gap: var(--sp-2); white-space: nowrap; }
.cnt-n {
  font-family: var(--mono); font-size: var(--step-1); font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--ink-950);
}
.cnt-u {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-600);
}
.cnt-thin {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-950);
  border: 1px solid var(--ink-950); padding: 1px 5px;
}
.sec-ink .cnt-n { color: var(--paper-100); }
.sec-ink .cnt-u { color: var(--ink-400); }
.sec-ink .cnt-thin { color: var(--paper-100); border-color: var(--paper-100); }

/* ==================================================================
   8. THE STRIKE RULE
   ------------------------------------------------------------------
   An excluded scope is struck and kept at full text contrast, never
   greyed. The reader must be able to read exactly what the bidder
   removed; greying it would say "unimportant" when it means
   "deliberately not purchased".
   ================================================================== */
.excl { color: var(--ink-800); }
.excl-s {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-950);
  text-underline-offset: 0;
}
.sec-ink .excl { color: var(--paper-100); }
.sec-ink .excl-s { text-decoration-color: var(--paper-100); }

/* ==================================================================
   9. THE GAP — the signature component
   ------------------------------------------------------------------
   Two facing exclusions with the void between them. This is the only
   place the highlighter appears, and gap() in functions.php is the only
   code that emits it.
   ================================================================== */
.gap {
  border: 2px solid var(--ink-950);
  background: var(--paper-050);
  margin-block: var(--sp-5);
}
.gap-side {
  display: grid; gap: var(--sp-1);
  padding: var(--sp-4);
}
.gap-trade {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-950);
}
.gap-x {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-600);
}
.gap-scope { font-size: var(--step-1); line-height: 1.4; }

/* THE VOID */
.gap-void {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--mark-500);
  border-block: 2px solid var(--ink-950);
  position: relative; overflow: hidden;
}
.gap-void-w {
  font-family: var(--mono); font-size: var(--step-1); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-950);
}
.gap-cost {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4);
  border-top: 1px solid var(--rule-400);
  font-size: var(--step--1); line-height: 1.5;
}
.gap-cost dt {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-600);
  white-space: nowrap;
}
.gap-cost dd { margin: 0; color: var(--ink-800); font-family: var(--mono); font-weight: 500; }

.sec-ink .gap { background: var(--ink-900); border-color: var(--paper-100); }
.sec-ink .gap-trade { color: var(--paper-100); }
.sec-ink .gap-x { color: var(--ink-400); }
.sec-ink .gap-void { border-block-color: var(--paper-100); }
.sec-ink .gap-cost { border-top-color: var(--ink-700); }
.sec-ink .gap-cost dt { color: var(--ink-400); }
.sec-ink .gap-cost dd { color: var(--paper-100); }

/* ==================================================================
   10. The register
   ================================================================== */
.reg-scroll {
  overflow-x: auto;
  border: 1px solid var(--ink-950);
  border-top-width: 2px;
  background: var(--paper-050);
  -webkit-overflow-scrolling: touch;
}
.reg-scroll:focus-visible { outline-offset: -3px; }

.reg {
  width: 100%; min-width: 32rem;
  border-collapse: collapse;
  font-size: var(--step--1); line-height: 1.5;
}
.reg caption {
  caption-side: top; text-align: left;
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper-200);
  border-bottom: 2px solid var(--ink-950);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-700);
}
.reg thead th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left; vertical-align: bottom;
  background: var(--ink-950); color: var(--paper-100);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap;
}
.reg tbody th, .reg tbody td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rule-400);
}
.reg tbody th {
  font-weight: 600; font-size: var(--step-0); color: var(--ink-950);
}
.reg tbody th.reg-t {
  font-family: var(--mono); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; width: 1%;
}
.reg tbody tr:hover { background: var(--paper-100); }
.reg tbody tr:last-child th, .reg tbody tr:last-child td { border-bottom: 0; }
.reg .num {
  font-family: var(--mono); font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-950);
  text-align: right;
}
.reg thead th.num { text-align: right; }
.reg .unit {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-600); white-space: nowrap;
}
.reg .reg-sub {
  display: block; margin-top: 3px;
  font-size: var(--step--1); font-weight: 400;
  color: var(--ink-600); line-height: 1.5; white-space: normal;
}
/* the void inside a register row — the ONLY other place the mark appears,
   and it always carries the word */
.reg .void {
  background: var(--mark-500); color: var(--ink-950);
  font-family: var(--mono); font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap;
}
.reg tbody tr:hover .void { background: var(--mark-500); }
.reg tr.reg-tot th, .reg tr.reg-tot td {
  border-top: 2px solid var(--ink-950);
  border-bottom: 3px solid var(--ink-950);
  font-weight: 700; color: var(--ink-950);
}
.reg-note { margin-top: var(--sp-3); font-size: var(--step--1); line-height: 1.6; color: var(--ink-600); }
.sec-ink .reg-note { color: var(--ink-400); }

/* THE SHEET RULE — a register stays a light sheet even on the dark band,
   so it never needs a second set of contrast ratios. */
.sec-ink .reg-scroll { background: var(--paper-050); border-color: var(--paper-100); }
.sec-ink .reg caption { background: var(--paper-200); color: var(--ink-700); }
.sec-ink .reg thead th { background: var(--ink-950); color: var(--paper-100); }
.sec-ink .reg tbody th, .sec-ink .reg tbody td { color: var(--ink-800); }
.sec-ink .reg tbody th.reg-t, .sec-ink .reg .num { color: var(--ink-950); }
.sec-ink .reg .unit, .sec-ink .reg .reg-sub { color: var(--ink-600); }
.sec-ink .reg .excl { color: var(--ink-800); }
.sec-ink .reg .excl-s { text-decoration-color: var(--ink-950); }
.sec-ink .reg a { color: var(--ink-950); }

/* ==================================================================
   11. Sheets
   ================================================================== */
.sheet {
  background: var(--paper-050);
  border: 1px solid var(--rule-400);
  border-top: 2px solid var(--ink-950);
  border-radius: 0;
  padding: var(--sp-5);
}
.sheet > * + * { margin-top: var(--sp-4); }
.sheet-note { font-size: var(--step--1); color: var(--ink-600); line-height: 1.6; }
.sec-ink .sheet {
  background: var(--ink-800); border-color: var(--ink-700);
  border-top-color: var(--paper-100); color: var(--paper-100);
}
.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-050); }

/* ==================================================================
   12. Identification bar
   ================================================================== */
.idbar { background: var(--ink-950); color: var(--paper-100); }
.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: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--paper-100);
}
.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; }
@media (min-width: 34em) {
  .idbar-meta span:not(:last-child)::after {
    content: "/"; position: absolute; right: calc(var(--sp-2) * -1 - 3px);
    color: var(--ink-700);
  }
}

/* ==================================================================
   13. Header
   ================================================================== */
.head {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper-100);
  border-bottom: 2px solid var(--ink-950);
  transition: box-shadow 160ms ease;
}
.head.is-stuck { box-shadow: 0 1px 0 var(--rule-400), 0 10px 22px -20px rgba(23, 21, 14, 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.06; min-width: 0; }
.brand-a { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.022em; color: var(--ink-950); }
.brand-b {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-600);
}
.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: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-600);
}
.head-tel-n {
  font-family: var(--mono); font-size: var(--step-1); font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--ink-950);
}
.head-tel:hover .head-tel-n { box-shadow: inset 0 -0.5em 0 var(--mark-500); }

.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: 500;
  letter-spacing: 0.13em; 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(--rule-400); }
.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: 500;
  letter-spacing: 0.11em; text-transform: uppercase; text-decoration: none; color: var(--ink-900);
}
.nav-lnk.is-on { box-shadow: inset 0 -2px 0 var(--ink-950); }
.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(--rule-400); text-decoration: none;
}
.nav-sub-lnk:hover { border-left-color: var(--ink-950); }
.nav-sub-d {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.06em; color: var(--ink-600);
  padding: 1px 5px; border: 1px solid var(--rule-400);
}
.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-600); line-height: 1.45;
}

/* ==================================================================
   14. Hero
   ================================================================== */
.hero { background: var(--paper-100); padding-block: var(--sp-7) var(--sp-8); }
.hero-in { display: grid; gap: var(--sp-7); }
.hero-h1 { margin-bottom: var(--sp-5); }
/* the one typographic use of the mark: a highlighter drawn under the words
   that name the absence. It sits behind the text, so contrast is ink on
   the mark at 13.73:1. */
.hero-h1 em {
  font-style: normal;
  box-shadow: inset 0 -0.34em 0 var(--mark-500);
}
.hero-lead { font-size: var(--step-1); line-height: 1.6; max-width: 55ch; 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-600);
}

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

/* ==================================================================
   15. Sections
   ================================================================== */
.sec { padding-block: var(--sp-8); }
.sec-tint { background: var(--paper-200); }
.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 { box-shadow: inset 0 -0.12em 0 var(--mark-500); }

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

.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); }
.sec-ink .prose, .sec-ink .prose .lead { color: var(--paper-100); }

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

/* ==================================================================
   16. Package list (the scopes, as bid packages)
   ================================================================== */
.pkgs { border-top: 3px solid var(--ink-950); }
.pkg-hd {
  display: none; padding-block: var(--sp-2);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-600);
  border-bottom: 1px solid var(--rule-400);
}
.pkg-row {
  display: grid; gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-bottom: 2px solid var(--rule-400);
}
.pkg-a { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.pkg-ref {
  font-family: var(--mono); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.06em; padding: 2px 7px;
  background: var(--ink-950); color: var(--paper-100);
}
.pkg-n2 { font-size: var(--step-2); }
.pkg-n2 a:hover { box-shadow: inset 0 -0.12em 0 var(--mark-500); text-decoration: none; }
.pkg-b { max-width: 62ch; line-height: 1.62; }
.pkg-c { min-width: 0; }
.pkg-doc {
  display: grid; gap: var(--sp-1);
  padding-top: var(--sp-3); border-top: 1px solid var(--rule-400);
  font-size: var(--step--1); line-height: 1.5;
}
.pkg-doc dt {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-600);
}
.pkg-doc dd { margin: 0; color: var(--ink-700); }
.sec-ink .pkgs { border-top-color: var(--paper-100); }
.sec-ink .pkg-row { border-bottom-color: var(--ink-700); }
.sec-ink .pkg-doc { border-top-color: var(--ink-700); }
.sec-ink .pkg-doc dd { color: var(--paper-100); }
.sec-ink .pkg-ref { background: var(--paper-100); 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(--rule-400); }
.span-v {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: var(--step--1); font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--ink-700); white-space: nowrap;
}
.sec-ink .span-line, .cta .span-line { background: var(--ink-700); }
.sec-ink .span-v, .cta .span-v { color: var(--paper-100); }

/* ==================================================================
   17. Identification block
   ================================================================== */
.nap {
  background: var(--paper-050);
  border: 1px solid var(--rule-400);
  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: 1px solid var(--rule-400);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
}
.nap-hd-k { color: var(--ink-950); }
.nap-hd-v { color: var(--ink-600); }
.nap-hd-v abbr { text-decoration: none; border-bottom: 1px dotted var(--ink-600); }
.nap-name { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.02em; 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: 8rem 1fr; gap: var(--sp-2) var(--sp-4);
  padding-top: var(--sp-4); border-top: 1px solid var(--rule-400);
  font-size: var(--step--1); line-height: 1.5;
}
.nap-rows dt {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-600);
}
.nap-rows dd { margin: 0; color: var(--ink-800); }
.nap-tz { color: var(--ink-600); }
.nap-rows .tel { font-family: var(--mono); font-weight: 500; 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-100);
}
.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-hd-v abbr, .sec-ink .nap-hd-v abbr { border-bottom-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-100); }
.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); }

/* ==================================================================
   18. Page head
   ================================================================== */
.phead { background: var(--paper-100); 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: 500;
          letter-spacing: 0.11em; 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(--rule-400); }
.crumbs a { color: var(--ink-600); 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: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-600);
}
.phead-body { padding-bottom: var(--sp-7); max-width: 62ch; }
.phead-h1 { margin-bottom: var(--sp-4); }
.phead-h1 em { font-style: normal; box-shadow: inset 0 -0.3em 0 var(--mark-500); }
.phead-lead { font-size: var(--step-1); line-height: 1.6; color: var(--ink-700); }

/* ==================================================================
   19. FAQ
   ================================================================== */
.faq { border-top: 3px solid var(--ink-950); }
.faq-i { border-bottom: 1px solid var(--rule-400); }
.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: 600; letter-spacing: -0.014em;
  line-height: 1.4; color: var(--ink-950);
}
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary:hover span:first-child { box-shadow: inset 0 -0.12em 0 var(--mark-500); }
.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(--ink-950); }
.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; }

/* ==================================================================
   20. Forms
   ------------------------------------------------------------------
   An error fills the message strip with the mark, consistent with the
   Void Rule: a missing required answer is an absence. It always carries
   the words as well.
   ================================================================== */
.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: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-700);
}
.field-req { font-weight: 500; letter-spacing: 0.1em; color: var(--ink-950);
             box-shadow: inset 0 -0.55em 0 var(--mark-500); }
.field input, .field select, .field textarea {
  min-height: 46px; padding: var(--sp-3);
  background: var(--paper-050); color: var(--ink-950);
  border: 1px solid var(--rule-400); 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-950); }
.field-hint { font-size: var(--step--1); line-height: 1.6; color: var(--ink-600); }
.field-err {
  display: inline-block; padding: 2px var(--sp-2);
  background: var(--mark-500); color: var(--ink-950);
  font-family: var(--mono); font-size: var(--step--1); font-weight: 500;
}
.field.is-err input, .field.is-err select, .field.is-err textarea { border-color: var(--ink-950); border-width: 2px; }
.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(--ink-950); }
.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-600); }
.form-err {
  padding: var(--sp-4); margin-bottom: var(--sp-5);
  border: 2px solid var(--ink-950);
  background: var(--paper-050); font-size: var(--step--1); line-height: 1.6;
}
.form-err strong { box-shadow: inset 0 -0.5em 0 var(--mark-500); }
.form-err ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }

/* ==================================================================
   21. CTA and footer
   ================================================================== */
.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-h em { font-style: normal; box-shadow: inset 0 -0.3em 0 var(--mark-500); color: var(--ink-950); }
.cta-copy > p { line-height: 1.64; max-width: 57ch; color: var(--paper-100); }
.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: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-400);
}

.foot { background: var(--ink-950); color: var(--paper-100); }
.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: 500; letter-spacing: 0.13em; 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-100); text-decoration: none; font-size: var(--step--1); line-height: 1.5; }
.foot-col a:hover { box-shadow: inset 0 -0.12em 0 var(--mark-500); }
.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-100); }

/* ==================================================================
   22. Small pieces
   ================================================================== */
.doclist { display: grid; gap: var(--sp-4); }
.doclist dt { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.014em;
              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(--rule-400);
  font-size: var(--step--1); line-height: 1.6; color: var(--ink-600);
}
.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 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 { counter-reset: n; list-style: none; margin: 0; padding: 0; }
.nextlist li {
  counter-increment: n; position: relative;
  padding-left: 2.6rem; 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: 500;
  letter-spacing: 0.06em; color: var(--ink-600);
}
.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-050); border: 1px solid var(--rule-400);
  border-top: 2px solid var(--ink-950); text-decoration: none;
  transition: background-color 130ms ease;
}
.policy-btn:hover { background: var(--paper-200); }
.policy-btn:hover .policy-btn-n { box-shadow: inset 0 -0.12em 0 var(--mark-500); }
.policy-btn-n { font-size: var(--step-0); font-weight: 600; letter-spacing: -0.014em;
                color: var(--ink-950); line-height: 1.26; }
.policy-btn-s { font-size: var(--step--1); line-height: 1.55; color: var(--ink-600); }

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

/* the note callout — ink and rules, no colour. The rule runs along the TOP:
   a side accent bar on a card is the one border pattern this family bans,
   and the only left rule in this stylesheet is the file edge. */
.note {
  display: grid; gap: var(--sp-2); padding: var(--sp-4);
  background: var(--paper-050);
  border: 1px solid var(--rule-400); border-top: 2px solid var(--ink-950);
}
.note-k {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-950);
}
.note p { font-size: var(--step--1); line-height: 1.62; color: var(--ink-800); }
.sec-ink .note { background: var(--ink-800); border-color: var(--ink-700);
                 border-top-color: var(--paper-100); }
.sec-ink .note-k { color: var(--paper-050); }
.sec-ink .note p { color: var(--paper-100); }

.results { border-top: 3px solid var(--ink-950); }
.result { padding-block: var(--sp-5); border-bottom: 1px solid var(--rule-400); }
.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-600); margin-bottom: var(--sp-2); }
.result p { font-size: var(--step--1); line-height: 1.6; color: var(--ink-600); }

/* ==================================================================
   23. Motion — one authored moment
   ------------------------------------------------------------------
   The highlighter is pulled across the void left to right, once, the way
   a marker is drawn across a page.
   ================================================================== */
.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; }

.js .gap-void { background: var(--paper-050); }
.js .gap-void::before {
  content: ""; position: absolute; inset: 0;
  background: var(--mark-500);
  transform: scaleX(0); transform-origin: left center;
}
.js .gap-void-w { position: relative; z-index: 1; }
.js .gap.is-in .gap-void::before {
  transform: scaleX(1);
  transition: transform 420ms cubic-bezier(0.22, 0.8, 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 .gap-void { background: var(--mark-500); }
  .js .gap-void::before { display: none; }
}

/* ==================================================================
   24. Print — an owner will take the register into a meeting
   ================================================================== */
@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; }
  .hero-h1 em, .phead-h1 em, .cta-h em { box-shadow: none !important; text-decoration: underline; }
  .reg thead th, .pkg-ref { background: none !important; color: #000 !important;
                            box-shadow: inset 0 0 0 1px #000; }
  .reg tbody tr:hover { background: none; }
  /* the void survives a printer that drops colour: it keeps its fill where
     colour prints, and gains a heavy outline where it does not */
  .gap-void, .reg .void {
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
    box-shadow: inset 0 0 0 2px #000;
  }
  .js .gap-void { background: var(--mark-500) !important; }
  .js .gap-void::before { display: none; }
  .foot { background: none !important; color: #000 !important; }
  .foot a { color: #000 !important; }
}

/* ==================================================================
   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-5); }
  .pkg-row { grid-template-columns: 1fr 12rem; align-items: start; gap: var(--sp-4) var(--sp-5); }
  .pkg-a, .pkg-b, .pkg-doc { grid-column: 1; }
  .pkg-c { grid-column: 2; grid-row: 1 / span 2; }
  .pkg-hd { display: flex; justify-content: space-between; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .cta-hrs { width: auto; }
  .gap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; }
  .gap-side { align-content: center; }
  .gap-void {
    border-block: 0; border-inline: 2px solid var(--ink-950);
    writing-mode: vertical-rl; padding: var(--sp-4) var(--sp-3);
  }
  .sec-ink .gap-void { border-inline-color: var(--paper-100); }
  .gap-cost { grid-column: 1 / -1; }
  .js .gap.is-in .gap-void::before { transform: scaleY(1); }
  .js .gap-void::before { transform: scaleY(0); transform-origin: center top; }
}

@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-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-100); border: 2px solid var(--ink-950);
  }
  .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.1fr; gap: var(--sp-8); 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 FILE EDGE. A 3px rule down the left of every section with the
     package number set against it, so the site reads as one document in a
     folder rather than as a stack of blocks. */
  .file { display: grid; grid-template-columns: var(--edge) 1fr; gap: 0; }
  .file > .pkg {
    grid-column: 1; grid-row: 1;
    flex-direction: column; align-items: flex-start; gap: var(--sp-2);
    padding-right: var(--sp-4); margin: 0;
    min-width: 0;
  }
  /* the label wraps inside the gutter rather than running into the file edge */
  .file > .pkg .pkg-t {
    max-width: 100%;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  /* THE FILE EDGE. A mechanical check reads a 3px left border as the card
     accent bar this family of sites bans. It is not one: it is the spine of
     the document, full height, on every section, with the package number set
     against it — the site's structural signature. Documented as a deliberate
     exception in DESIGN.md §"Deliberate exceptions". */
  .file > .file-body {
    grid-column: 2; grid-row: 1;
    padding-left: var(--sp-6);
    border-left: 3px solid var(--ink-950);
  }
  .sec-ink .file > .file-body { border-left-color: var(--paper-100); }
}