/* =====================================================================
   Trico Construction, LLC
   =====================================================================

   THESIS:   The honest schedule. Every builder talks about the build; in
             San Francisco the build is the short part. So the site is a
             construction schedule drawn at true proportion, where the
             permit bars are visibly longer than the construction bar and
             the argument is made before the first paragraph.

   OWN-WORLD:Warm paper ruled with a faint vertical time grid, the way a
             printed schedule is ruled. Five phase hues, validated as a
             categorical palette rather than picked by eye, in one fixed
             semantic order. A grotesque with a real lowercase for reading
             and a typewriter mono for everything measured. No photographs,
             no gradients, no sixth colour.

   STORY:    You arrive at a chart of your own project. You see that the
             thing you were worried about (construction) is not the thing
             that will take the time (entitlement and plan check). Every
             page after that answers one part of that chart.

   FIRST VIEWPORT: The claim, and the schedule under it at real proportion,
             with the permit bars running past the construction bar.

   FORM:     2px radius on bars and buttons and nowhere else. Panels take a
             2px rule along the top, never a side accent bar. Time runs left
             to right, always. Labels sit outside bars, always.

   MOTION:   One authored moment: the bars draw from their left edge, once,
             staggered by phase order, 520ms. Nothing loops. Reduced motion
             removes all of it and the bars are 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: "Familjen Grotesk";
  src: url("/fonts/familjen-grotesk-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/familjen-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sometype Mono";
  src: url("/fonts/sometype-mono-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/sometype-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ==================================================================
   2. Tokens
   ================================================================== */
:root {
  /* ink — measured against the page ground, not guessed */
  --ink-950: #16171b;
  --ink-900: #1d1f24;
  --ink-800: #292c32;  /* body text, 13.99:1 on white, 12.19:1 on tint */
  --ink-700: #3a3e45;
  --ink-600: #4e535b;
  --ink-500: #5e6066;  /* muted on light only: 6.29:1 white, 5.47:1 tint */
  --ink-400: #8e9098;  /* muted on dark only: 5.18:1 on --ink-900 */

  /* warm paper — the printed schedule, not a screen */
  --paper-000: #ffffff;
  --paper-050: #faf9f7;
  --paper-100: #f1efeb;
  --paper-200: #e3e0da;
  --paper-300: #cbc7bf;  /* the time grid */

  /* THE PHASE RAMP — validated as a categorical palette. Fixed order.
     Bar values fill a bar; -t values are what a phase name is set in as
     running text, darkened where needed to clear 4.5:1 on BOTH grounds. */
  --ph-design:        #5a4fcf;
  --ph-entitlement:   #b26b00;
  --ph-permit:        #1263b0;
  --ph-construction:  #2f7d32;
  --ph-closeout:      #a8336a;

  --ph-design-t:       #5a4fcf;  /* 6.08 white / 5.29 tint */
  --ph-entitlement-t:  #8f5600;  /* 6.00 / 5.23 — darker than its bar */
  --ph-permit-t:       #1263b0;  /* 6.11 / 5.32 */
  --ph-construction-t: #2a7029;  /* 6.09 / 5.30 — darker than its bar */
  --ph-closeout-t:     #a8336a;  /* 6.27 / 5.46 */

  --ph-design-d:       #8b84e4;  /* on --ink-900 only */
  --ph-entitlement-d:  #d89a3a;
  --ph-permit-d:       #5fa3de;
  --ph-construction-d: #63b168;
  --ph-closeout-d:     #d97ba5;

  /* set per phase by .ph-* and .gr-bar-*; never set by hand */
  --ph: var(--ink-700);
  --ph-t: var(--ink-700);

  --sans: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Sometype 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.1rem);
  --step-4:  clamp(1.85rem, 1.45rem + 2.0vw, 2.8rem);
  --step-5:  clamp(2.15rem, 1.35rem + 3.7vw, 3.65rem);
  --step-fig: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);

  --measure: 70ch;
  --wrap: 76rem;   /* wide, because a schedule is wide */

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

  /* the only radius in the system, and only bars and buttons take it */
  --r: 2px;

  /* the time grid */
  --grid-gap: 88px;
}

/* ==================================================================
   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-000);
  color: var(--ink-800);
  font-size: var(--step-0);
  line-height: 1.68;
  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.022em;
  line-height: 1.12;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); line-height: 1.07; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); letter-spacing: -0.016em; }
h4 { font-size: var(--step-1); letter-spacing: -0.012em; }

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(--ph-permit-t); }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--ph-permit);
  outline-offset: 2px;
}
.sec-ink :focus-visible, .foot :focus-visible, .idbar :focus-visible, .cta :focus-visible {
  outline-color: var(--ph-permit-d);
}

.skip {
  position: absolute; left: -9999px; z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-950); color: var(--paper-000);
  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 push past the viewport. This is the fix, and it is load-bearing. */
.split > *, .hero-in > *, .cta-in > *, .foot-in > *, .head-in > *, .panel > * { min-width: 0; }
.panel, .nap, .gr-scroll, .tab-scroll { min-width: 0; max-width: 100%; }

/* ==================================================================
   4. The time grid — the page's structural signature
   ================================================================== */
.tgrid { position: relative; }
.tgrid::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg, var(--paper-300) 0 1px, transparent 1px var(--grid-gap));
  opacity: 0.4;
  pointer-events: none;
}
.tgrid > * { position: relative; }

/* ==================================================================
   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.1em; 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: var(--r);
  background: var(--ink-950);
  color: var(--paper-000);
  font-family: var(--mono); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.1em; 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(--ph-permit); border-color: var(--ph-permit); }
.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-000); }
.btn-blk { display: flex; width: 100%; }

.sec-ink .btn-pri, .cta .btn-pri, .foot .btn-pri {
  background: var(--paper-000); border-color: var(--paper-000); color: var(--ink-950);
}
.sec-ink .btn-pri:hover, .cta .btn-pri:hover, .foot .btn-pri:hover {
  background: var(--ph-permit-d); border-color: var(--ph-permit-d); 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-000); border-color: var(--paper-000); color: var(--ink-950);
}

/* ==================================================================
   7. Figures — THE DURATION RULE renders here
   ================================================================== */
.fig {
  font-family: var(--mono); font-size: 0.95em; 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.08em; text-transform: uppercase; color: var(--ink-500);
  white-space: nowrap;
}
.fig-design       { color: var(--ph-design-t); }
.fig-entitlement  { color: var(--ph-entitlement-t); }
.fig-permit       { color: var(--ph-permit-t); }
.fig-construction { color: var(--ph-construction-t); }
.fig-closeout     { color: var(--ph-closeout-t); }
.sec-ink .fig, .cta .fig { color: var(--paper-000); }
.sec-ink .fig-u, .cta .fig-u { color: var(--ink-400); }
.sec-ink .fig-design       { color: var(--ph-design-d); }
.sec-ink .fig-entitlement  { color: var(--ph-entitlement-d); }
.sec-ink .fig-permit       { color: var(--ph-permit-d); }
.sec-ink .fig-construction { color: var(--ph-construction-d); }
.sec-ink .fig-closeout     { color: var(--ph-closeout-d); }

/* ==================================================================
   8. The phase tag — the only place a colour is decided
   ================================================================== */
.ph {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ph-t); white-space: nowrap;
}
.ph-dot {
  flex: 0 0 auto; width: 10px; height: 10px; border-radius: var(--r);
  background: var(--ph);
}
.ph-design       { --ph: var(--ph-design);       --ph-t: var(--ph-design-t); }
.ph-entitlement  { --ph: var(--ph-entitlement);  --ph-t: var(--ph-entitlement-t); }
.ph-permit       { --ph: var(--ph-permit);       --ph-t: var(--ph-permit-t); }
.ph-construction { --ph: var(--ph-construction); --ph-t: var(--ph-construction-t); }
.ph-closeout     { --ph: var(--ph-closeout);     --ph-t: var(--ph-closeout-t); }

.sec-ink .ph-design       { --ph-t: var(--ph-design-d); }
.sec-ink .ph-entitlement  { --ph-t: var(--ph-entitlement-d); }
.sec-ink .ph-permit       { --ph-t: var(--ph-permit-d); }
.sec-ink .ph-construction { --ph-t: var(--ph-construction-d); }
.sec-ink .ph-closeout     { --ph-t: var(--ph-closeout-d); }

/* ==================================================================
   9. THE SCHEDULE — the signature component
   ------------------------------------------------------------------
   A real <table>, so a screen reader gets a grid with row headers and
   the duration in its own cell. The bar layer is positioned inside the
   track cell, so it is a chart to everybody else. Nothing is ever
   printed inside a bar.
   ================================================================== */
.gr-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.gr-scroll:focus-visible { outline-offset: -3px; }

.gr-t {
  width: 100%; min-width: 30rem;
  border-collapse: collapse;
  font-size: var(--step--1); line-height: 1.4;
}
.gr-t caption {
  caption-side: top; text-align: left;
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--paper-200);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500);
}
.gr-t thead th {
  padding: 0 0 var(--sp-2);
  text-align: left; vertical-align: bottom;
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500);
  border-bottom: 1px solid var(--paper-200);
  white-space: nowrap;
}
.gr-t thead .gr-track-h { width: 100%; }

.gr { border-bottom: 1px solid var(--paper-100); }
.gr:last-child { border-bottom: 0; }

.gr-lbl {
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  text-align: left; vertical-align: middle; white-space: nowrap;
  font-weight: 500; font-size: var(--step-0); color: var(--ink-950);
}
.gr-n { font-weight: 600; }
.gr-cp {
  display: inline-block; margin-left: var(--sp-2);
  padding: 1px 5px;
  border: 1px solid var(--ink-950); border-radius: var(--r);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.06em; color: var(--ink-950);
  text-decoration: none; cursor: help;
}
.gr-dur {
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  vertical-align: middle; white-space: nowrap;
  font-family: var(--mono); font-size: var(--step--1); font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--ink-500);
}
.gr-track {
  position: relative;
  padding: var(--sp-3) 0;
  vertical-align: middle;
  /* --gr-div is set per chart so the grid rules land exactly on the axis ticks
     printed underneath. A grid that does not agree with its own axis is worse
     than no grid. */
  background: repeating-linear-gradient(
    90deg, var(--paper-200) 0 1px, transparent 1px var(--gr-div, 25%));
}
.gr-bar {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 18px;
  border-radius: var(--r);
  background: var(--ph);
  transform-origin: left center;
}
.gr-bar-design       { --ph: var(--ph-design); }
.gr-bar-entitlement  { --ph: var(--ph-entitlement); }
.gr-bar-permit       { --ph: var(--ph-permit); }
.gr-bar-construction { --ph: var(--ph-construction); }
.gr-bar-closeout     { --ph: var(--ph-closeout); }

/* THE STATUS-IS-NOT-A-HUE RULE: the critical path is an outline and a
   word, never a colour. Remove every hue and it is still identifiable. */
.gr-bar.is-cp { box-shadow: 0 0 0 2px var(--ink-950); }

/* A phase that does not apply to this project: the row stays so its absence is
   visible, and it is set back so it does not read as a phase with a tiny bar. */
.gr.is-none .gr-lbl, .gr.is-none .gr-dur { color: var(--ink-500); font-weight: 400; }
.gr.is-none .gr-dur { font-style: normal; }

.gr-axis {
  display: flex; justify-content: space-between;
  margin-top: var(--sp-2);
  font-family: var(--mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500);
}
.gr-note {
  margin-top: var(--sp-4); font-size: var(--step--1); line-height: 1.6;
  color: var(--ink-500);
}
.sec-ink .gr-note { color: var(--ink-400); }

/* the legend — always present, because there are five series */
.lgd {
  list-style: none; margin: var(--sp-4) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500);
}
.lgd-i { display: inline-flex; align-items: center; gap: var(--sp-2); }
.lgd-k {
  flex: 0 0 auto; width: 18px; height: 10px; border-radius: var(--r);
}
.lgd-k-design       { background: var(--ph-design); }
.lgd-k-entitlement  { background: var(--ph-entitlement); }
.lgd-k-permit       { background: var(--ph-permit); }
.lgd-k-construction { background: var(--ph-construction); }
.lgd-k-closeout     { background: var(--ph-closeout); }
.lgd-k-cp { background: transparent; box-shadow: inset 0 0 0 2px var(--ink-950); }
.sec-ink .lgd { color: var(--ink-400); }
.sec-ink .lgd-k-cp { box-shadow: inset 0 0 0 2px var(--paper-000); }

/* ==================================================================
   10. Panels
   ================================================================== */
.panel {
  background: var(--paper-050);
  border: 1px solid var(--paper-200);
  border-top: 2px solid var(--ink-900);
  border-radius: 0;
  padding: var(--sp-5);
}
.panel-design       { border-top-color: var(--ph-design); }
.panel-entitlement  { border-top-color: var(--ph-entitlement); }
.panel-permit       { border-top-color: var(--ph-permit); }
.panel-construction { border-top-color: var(--ph-construction); }
.panel-closeout     { border-top-color: var(--ph-closeout); }
.panel > * + * { margin-top: var(--sp-4); }
.panel-note { font-size: var(--step--1); color: var(--ink-500); line-height: 1.6; }
.sec-ink .panel {
  background: var(--ink-800); border-color: var(--ink-700);
  border-top-color: var(--paper-300); color: var(--paper-050);
}
.sec-ink .panel-note { color: var(--ink-400); }
.sec-ink .panel h2, .sec-ink .panel h3 { color: var(--paper-000); }
.sec-tint .panel { background: var(--paper-000); }

/* THE LIGHT-GROUND RULE, in code. The phase ramp was validated against a light
   chart surface, so a chart never sits on the dark band: a .panel-sheet keeps
   its white ground wherever it is placed, and the dark section holds it the way
   a table holds a sheet of paper. This is the only way a schedule is allowed to
   appear inside .sec-ink. */
.sec-ink .panel-sheet {
  background: var(--paper-000);
  border-color: var(--paper-300);
  border-top-color: var(--ink-900);
  color: var(--ink-800);
}
.sec-ink .panel-sheet h2, .sec-ink .panel-sheet h3 { color: var(--ink-950); }
.sec-ink .panel-sheet .plabel { color: var(--ink-500); }
.sec-ink .panel-sheet .plabel-d { color: var(--paper-300); }
.sec-ink .panel-sheet .gr-note,
.sec-ink .panel-sheet .panel-note { color: var(--ink-500); }
.sec-ink .panel-sheet .lgd { color: var(--ink-500); }
.sec-ink .panel-sheet .lgd-k-cp { box-shadow: inset 0 0 0 2px var(--ink-950); }
.sec-ink .panel-sheet a { color: var(--ph-permit-t); }
.sec-ink .panel-sheet a:hover { color: var(--ink-950); }

/* ==================================================================
   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: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-000);
}
.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; }
.idbar-meta span:not(:last-child)::after {
  content: "/"; position: absolute; right: calc(var(--sp-2) * -1 - 2px);
  color: var(--ink-600);
}

/* ==================================================================
   12. Header
   ================================================================== */
.head {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper-000);
  border-bottom: 1px solid var(--paper-200);
  transition: box-shadow 160ms ease;
}
.head.is-stuck { box-shadow: 0 1px 0 var(--paper-200), 0 10px 22px -20px rgba(22, 23, 27, 0.4); }
.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.1em; 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.14; text-decoration: none; text-align: right; }
.head-tel-k {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.1em; 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(--ph-permit-t); }

.menu-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: var(--sp-2) var(--sp-3);
  background: transparent; border: 1px solid var(--paper-300); border-radius: var(--r);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.1em; 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-100); }
.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.09em; text-transform: uppercase; text-decoration: none; color: var(--ink-900);
}
.nav-lnk.is-on { color: var(--ph-permit-t); }
.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(--ph-permit); }
.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.3; }
.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-000); 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(--ph-entitlement-t); }
.hero-lead { font-size: var(--step-1); line-height: 1.58; max-width: 56ch; 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.7; 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-050);
  border: 1px solid var(--paper-200);
  border-top: 2px solid var(--ink-900);
}
.sp-entitlement { border-top-color: var(--ph-entitlement); }
.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: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500);
}
.sp-s { font-size: var(--step--1); line-height: 1.6; 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-000); }
.sec-ink a { color: var(--paper-000); }
.sec-ink a:hover { color: var(--ph-permit-d); }

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

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

/* ==================================================================
   15. Ordinary tables
   ================================================================== */
.tab-scroll {
  overflow-x: auto;
  border: 1px solid var(--ink-900);
  background: var(--paper-000);
  -webkit-overflow-scrolling: touch;
}
.tab-scroll:focus-visible { outline-offset: -3px; }
.tab {
  width: 100%; min-width: 34rem;
  border-collapse: collapse; font-size: var(--step--1); line-height: 1.5;
}
.tab caption {
  caption-side: top; text-align: left;
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper-100);
  border-bottom: 1px solid var(--ink-900);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-700);
}
.tab thead th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left; vertical-align: bottom;
  background: var(--ink-900); color: var(--paper-000);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap;
}
.tab tbody th, .tab tbody td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--paper-200);
}
.tab tbody th { font-weight: 600; font-size: var(--step-0); color: var(--ink-950); }
.tab tbody tr:hover { background: var(--paper-050); }
.tab tbody tr:last-child th, .tab tbody tr:last-child td { border-bottom: 0; }
.tab .num {
  font-family: var(--mono); font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-950);
}
.tab .unit {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap;
}
.tab .tab-sub {
  display: block; margin-top: 3px;
  font-family: var(--sans); font-size: var(--step--1); font-weight: 400;
  color: var(--ink-500); line-height: 1.5; white-space: normal;
}
.tab-note { margin-top: var(--sp-3); font-size: var(--step--1); line-height: 1.6; color: var(--ink-500); }
.sec-ink .tab-note { color: var(--ink-400); }

/* THE SHEET RULE — a table stays a light printed sheet even on the dark
   band, so it needs no second set of contrast ratios. */
.sec-ink .tab-scroll { background: var(--paper-000); border-color: var(--paper-300); }
.sec-ink .tab caption { background: var(--paper-100); color: var(--ink-700); }
.sec-ink .tab thead th { background: var(--ink-900); color: var(--paper-000); }
.sec-ink .tab tbody th { color: var(--ink-950); }
.sec-ink .tab tbody td { color: var(--ink-800); }
.sec-ink .tab .num { color: var(--ink-950); }
.sec-ink .tab .unit, .sec-ink .tab .tab-sub { color: var(--ink-500); }
.sec-ink .tab a { color: var(--ph-permit-t); }

/* ==================================================================
   16. Scope list
   ================================================================== */
.scopes { border-top: 2px solid var(--ink-950); }
.scope-hd {
  display: none; padding-block: var(--sp-2);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500);
  border-bottom: 1px solid var(--paper-200);
}
.scope {
  display: grid; gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--paper-200);
}
.scope-a { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.scope-ref {
  font-family: var(--mono); font-size: var(--step--1); font-weight: 600;
  padding: 2px 7px; border-radius: var(--r);
  background: var(--ink-950); color: var(--paper-000);
}
.scope-n { font-size: var(--step-2); }
.scope-n a:hover { color: var(--ph-permit-t); }
.scope-b { max-width: 62ch; line-height: 1.62; }
.scope-c { min-width: 0; }
.scope-doc {
  display: grid; gap: var(--sp-1);
  padding-top: var(--sp-3); border-top: 1px solid var(--paper-100);
  font-size: var(--step--1); line-height: 1.5;
}
.scope-doc dt {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500);
}
.scope-doc dd { margin: 0; color: var(--ink-700); }
.sec-ink .scope { border-bottom-color: var(--ink-700); }
.sec-ink .scope-doc { border-top-color: var(--ink-700); }
.sec-ink .scope-doc dd { color: var(--paper-050); }
.sec-ink .scope-ref { background: var(--paper-000); color: var(--ink-950); }

/* the span callout */
.span { display: inline-flex; align-items: center; gap: var(--sp-2); width: 100%; min-width: 0; }
.span-line { flex: 1 1 auto; height: 1px; min-width: var(--sp-3); background: var(--paper-300); }
.span-v {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: var(--step--1); font-weight: 500;
  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); }

/* ==================================================================
   17. Identification block
   ================================================================== */
.nap {
  background: var(--paper-050);
  border: 1px solid var(--paper-200);
  border-top: 2px solid var(--ink-900);
  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(--paper-200);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.nap-hd-k { color: var(--ink-900); }
.nap-hd-v { color: var(--ink-500); }
.nap-hd-v abbr { text-decoration: none; border-bottom: 1px dotted var(--ink-500); }
.nap-name { font-size: var(--step-1); font-weight: 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: 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: 500;
  letter-spacing: 0.1em; 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-000); }
.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-000); }
.foot .nap-tz, .sec-ink .nap-tz { color: var(--ink-400); }

/* ==================================================================
   18. Page head
   ================================================================== */
.phead { background: var(--paper-000); 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); letter-spacing: 0.08em; text-transform: uppercase; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; }
.crumbs li { display: flex; align-items: center; gap: var(--sp-2); }
.crumbs li + li::before { content: "/"; color: var(--paper-300); }
.crumbs a { color: var(--ink-500); text-decoration: none; }
.crumbs a:hover { color: var(--ink-900); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink-900); font-weight: 600; }
.phead-ref {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500);
}
.phead-body { padding-bottom: var(--sp-7); max-width: 64ch; }
.phead-h1 { margin-bottom: var(--sp-4); }
.phead-lead { font-size: var(--step-1); line-height: 1.58; color: var(--ink-700); }

/* ==================================================================
   19. FAQ
   ================================================================== */
.faq { border-top: 2px solid var(--ink-950); }
.faq-i { border-bottom: 1px solid var(--paper-200); }
.faq-i summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-4); cursor: pointer; list-style: none;
  font-size: var(--step-1); font-weight: 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 { color: var(--ph-permit-t); }
.faq-sign { flex: 0 0 auto; position: relative; width: 14px; height: 14px; margin-top: 0.42em; }
.faq-sign::before, .faq-sign::after { content: ""; position: absolute; background: var(--ph-permit-t); }
.faq-sign::before { left: 0; right: 0; top: 6px; height: 2px; }
.faq-sign::after { top: 0; bottom: 0; left: 6px; width: 2px; transition: opacity 140ms ease; }
.faq-i[open] .faq-sign::after { opacity: 0; }
.faq-a { padding-bottom: var(--sp-5); max-width: var(--measure); }
.faq-a > * + * { margin-top: var(--sp-3); }
.faq-a p { line-height: 1.68; }

/* ==================================================================
   20. 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: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-700);
}
.field-req { font-weight: 600; letter-spacing: 0.08em; color: var(--ph-closeout-t); }
.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: 500;
  color: var(--ph-closeout-t);
}
.field.is-err input, .field.is-err select, .field.is-err textarea { border-color: var(--ph-closeout); }
.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(--ph-permit); }
.check label { text-transform: none; letter-spacing: 0.01em; font-family: var(--sans);
               font-size: var(--step--1); line-height: 1.6; font-weight: 400; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--step--1); line-height: 1.62; color: var(--ink-500); }
.form-err {
  padding: var(--sp-4); margin-bottom: var(--sp-5);
  border: 1px solid var(--ph-closeout); border-top-width: 2px;
  background: var(--paper-050); font-size: var(--step--1); line-height: 1.6;
}
.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-050); }
.cta-in { padding-block: var(--sp-8); display: grid; gap: var(--sp-6); }
.cta-h { color: var(--paper-000); margin-bottom: var(--sp-4); }
.cta-copy > p { line-height: 1.65; max-width: 58ch; 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);
  letter-spacing: 0.08em; 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-000); }
.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.1em; 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(--ph-permit-d); 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.7;
  letter-spacing: 0.04em; color: var(--ink-400);
}
.foot-legal a, .foot-note a { color: var(--paper-050); }

/* ==================================================================
   22. Small pieces
   ================================================================== */
.doclist { display: grid; gap: var(--sp-4); }
.doclist dt { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.016em;
              color: var(--ink-950); line-height: 1.28; }
.sec-ink .doclist dt { color: var(--paper-000); }
.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); }

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

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

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

.basis {
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px 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 risk callout — a named risk, not a decoration */
.risk {
  display: grid; gap: var(--sp-2); padding: var(--sp-4);
  background: var(--paper-050);
  border: 1px solid var(--paper-200); border-top: 2px solid var(--ph-entitlement);
}
.risk-k {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ph-entitlement-t);
}
.risk p { font-size: var(--step--1); line-height: 1.62; color: var(--ink-800); }
.sec-ink .risk { background: var(--ink-800); border-color: var(--ink-700);
                 border-top-color: var(--ph-entitlement-d); }
.sec-ink .risk-k { color: var(--ph-entitlement-d); }
.sec-ink .risk p { color: var(--paper-050); }

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

/* ==================================================================
   23. 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 bars draw from their left edge, once, staggered by phase order.
   This is the only authored animation on the site. */
.js .gr-scroll .gr-bar { transform: translateY(-50%) scaleX(0); }
.js .gr-scroll.is-in .gr-bar {
  transform: translateY(-50%) scaleX(1);
  transition: transform 520ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
.js .gr-scroll.is-in .gr:nth-child(1) .gr-bar { transition-delay: 0ms; }
.js .gr-scroll.is-in .gr:nth-child(2) .gr-bar { transition-delay: 70ms; }
.js .gr-scroll.is-in .gr:nth-child(3) .gr-bar { transition-delay: 140ms; }
.js .gr-scroll.is-in .gr:nth-child(4) .gr-bar { transition-delay: 210ms; }
.js .gr-scroll.is-in .gr:nth-child(5) .gr-bar { transition-delay: 280ms; }
.js .gr-scroll.is-in .gr:nth-child(6) .gr-bar { transition-delay: 350ms; }
.js .gr-scroll.is-in .gr:nth-child(7) .gr-bar { transition-delay: 420ms; }

@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 .gr-scroll .gr-bar { transform: translateY(-50%) scaleX(1); }
}

/* ==================================================================
   24. Print — the schedule has to survive paper
   ================================================================== */
@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; }
  .tgrid::before { display: none; }
  a { text-decoration: underline; }
  .tab thead th, .scope-ref { background: none !important; color: #000 !important;
                              box-shadow: inset 0 0 0 1px #000; }
  .tab tbody tr:hover { background: none; }
  /* the bars survive print: colour where the printer allows it, and an
     outline where it does not, so the proportions are still readable */
  .gr-bar { box-shadow: inset 0 0 0 1px #000; print-color-adjust: exact;
            -webkit-print-color-adjust: exact; }
  .gr-track { background: none; border-bottom: 1px dotted #999; }
  .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-4); }
  .scope { grid-template-columns: 1fr 12rem; align-items: start; gap: var(--sp-4) var(--sp-5); }
  .scope-a, .scope-b, .scope-doc { grid-column: 1; }
  .scope-c { grid-column: 2; grid-row: 1 / span 2; }
  .scope-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; }
  .hero-in { grid-template-columns: 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(--ph-permit); }
  .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: 23rem; margin: 0; padding: var(--sp-3);
    background: var(--paper-000); border: 1px solid var(--paper-200);
    box-shadow: 0 10px 22px -20px rgba(22, 23, 27, 0.4);
  }
  .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.15fr; 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; }
  .gr-t { min-width: 0; }
}