/*
  Arlington Motor Company, Inc. — visual world

  THESIS:   Somebody whose car is making a noise is not shopping. They are
            afraid of an open-ended bill on a machine they cannot inspect. The
            only thing that answers that is a number, reached the way the shop
            reaches it: symptom, code, named operation, flat-rate time, price.
            That is a scan tool readout, so the site is one. It refuses the
            category's two arrangements: the blue-to-red gradient with a stock
            technician, a coupon carousel and no prices anywhere; and the dark
            "performance" page with carbon fibre and a red accent.
  OWN-WORLD:A transflective LCD — grey-green field, black pixel ink — carries
            every figure and every price. Transflective is the one display that
            gets MORE readable in direct sunlight, which is where this audience
            reads. The fault colour is the amber of a check-engine lamp: the
            customer's own anxiety object. Corners 1–2px. Components are named
            from the bay: .readout .ro-k .ro-v .chip .key .bay .striping .fig
            .nap
  STORY:    An owner with a symptom and no vocabulary reads a readout that turns
            "grinding when I brake" into a named operation, a flat-rate time and
            a real price range; learns that finding out costs a stated fee that
            comes off the repair; and telephones already knowing the number.
  FIRST VIEWPORT: The readout, at full scale, running the argument end to end on
            an LCD field. The h1 and the telephone key to its left. The labor
            rate and the diagnostic fee visible without scrolling.
  FORM:     The scan tool session, candidate 3 of seven grounded directions
            (seed 0e0ec929, direction scope, persuade). Staging is the readout's
            own sequence: each row narrows the unknown by one step.
  MOTION:   One authored moment — on the homepage the readout links to the
            vehicle once, filling its rows top to bottom over 700ms, the way a
            tool does when you plug it in. Everything else is a single 200ms
            fade-and-rise. Content is visible by default; prefers-reduced-motion
            removes all of it and leaves the readout filled.
  ORDER:    Mobile-first. The base rules are the phone composition and every
            media query is min-width.
*/

/* ==================================================================
   1. Fonts — self-hosted, latin subset, no external requests
   ================================================================== */
@font-face {
  font-family: "Chivo";
  src: url("/fonts/chivo-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/chivo-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Azeret Mono";
  src: url("/fonts/azeret-mono-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/azeret-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==================================================================
   2. Tokens
   ================================================================== */
:root {
  /* pixel ink — the text on the display, and the dark bands */
  --ink-950: #12160f;
  --ink-900: #1a2016;
  --ink-800: #242c1f;  /* body text on the page, 12.99:1 */
  --ink-700: #333d2c;
  --ink-600: #4a563f;  /* muted text on an LCD field only, 4.61:1 */
  --ink-500: #5e6b52;  /* muted text on the page only, 5.11:1 (3.36:1 on LCD — fails) */
  --ink-400: #8a957e;  /* muted text on the dark bands only, 5.29:1 on --ink-900 */

  /* the transflective LCD field */
  --lcd-100: #e4e9dc;
  --lcd-200: #d3dbc8;
  --lcd-300: #c0cbb2;  /* the readout surface */
  --lcd-400: #a9b799;
  --lcd-500: #8e9e7c;

  /* the case — neutral, slightly cool. Never cream. */
  --case-050: #f3f3f1;
  --case-100: #e8e8e5;
  --case-200: #d7d9d3;
  --case-300: #bec1b9;

  /* MIL amber — the check-engine lamp. A state, never a decoration. */
  --mil-900: #5e3700;
  --mil-800: #6e4100;  /* amber text on an LCD field, 5.14:1 */
  --mil-700: #8a5200;  /* amber text on the page, 5.75:1 */
  --mil-500: #e08a00;
  --mil-400: #f5a300;  /* the lamp itself, as a surface */
  --mil-100: #ffe9c2;

  /* stop red — a hard stop. Rare by design. */
  --stop-700: #8f1017;  /* on an LCD field, 5.51:1 */
  --stop-600: #b3141e;  /* on the page, 6.51:1 */
  --stop-300: #f08a8f;  /* on the dark bands */

  --sans: "Chivo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Azeret 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.6rem, 1.3rem + 1.4vw, 2.2rem);
  --step-4: clamp(2rem, 1.45rem + 2.4vw, 3rem);
  --step-5: clamp(2.3rem, 1.4rem + 4.2vw, 4rem);

  --measure: 70ch;
  --wrap: 76rem;

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

  /* A hand tool and a display bezel are machined rectangles with a corner
     break, not rounded cards. */
  --radius: 1px;
  --radius-panel: 2px;

  --bezel: inset 0 0 0 1px rgba(18, 22, 15, 0.18);

  /* hazard striping on a bay floor — the one recurring texture */
  --stripe: repeating-linear-gradient(
              45deg,
              var(--ink-900) 0 10px,
              var(--case-200) 10px 20px);
}

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

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

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

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

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

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

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

/* One focus treatment site-wide. Amber is the single sanctioned non-state use
   here, because a focus ring must be one fixed colour. */
:focus-visible {
  outline: 2px solid var(--mil-500);
  outline-offset: 2px;
  border-radius: var(--radius);
}
.sec-ink :focus-visible,
.foot :focus-visible,
.idbar :focus-visible,
.cta :focus-visible { outline-color: var(--mil-400); }

strong, b { font-weight: 700; }

code, kbd, samp { font-family: var(--mono); font-size: 0.86em; font-weight: 500; }

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

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

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

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

/* ==================================================================
   4. Striping — the recurring texture
   ------------------------------------------------------------------
   Hazard striping on a workshop bay floor. Full-bleed, 10px, and the only
   ornament in the system.
   ================================================================== */
.striping {
  height: 10px;
  width: 100%;
  background-image: var(--stripe);
  background-size: 28px 28px;
}
.striping-amber {
  background-image: repeating-linear-gradient(45deg,
    var(--ink-900) 0 10px, var(--mil-400) 10px 20px);
}

/* ==================================================================
   5. Readout labels — the strip above a field
   ================================================================== */
.rlabel {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 var(--sp-4);
}
.rlabel-d { color: var(--case-300); }
.sec-ink .rlabel, .cta .rlabel, .foot .rlabel { color: var(--ink-400); }
.sec-ink .rlabel-d, .cta .rlabel-d, .foot .rlabel-d { color: var(--ink-700); }
.readout .rlabel { color: var(--ink-600); }
.readout .rlabel-d { color: var(--lcd-500); }

/* ==================================================================
   6. Keys — every button on this site is a hard key
   ------------------------------------------------------------------
   A machined rectangle with a 2px rule along the bottom edge: the travel of a
   pressed key. Primary is the readout inverted.
   ================================================================== */
.key {
  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-bottom-width: 3px;
  border-radius: var(--radius-panel);
  background: var(--ink-950);
  color: var(--lcd-300);
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 130ms ease, color 130ms ease, border-color 130ms ease;
}
.key-lbl { display: block; }
.key-pri:hover { background: var(--ink-800); border-color: var(--ink-800); color: var(--lcd-100); }
.key-pri:active { border-bottom-width: 1px; margin-top: 2px; }

.key-gho {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-700);
}
.key-gho:hover { background: var(--ink-900); border-color: var(--ink-900); color: var(--lcd-300); }

.key-blk { display: flex; width: 100%; }

.sec-ink .key-pri, .cta .key-pri, .foot .key-pri {
  background: var(--lcd-300);
  border-color: var(--lcd-300);
  color: var(--ink-950);
}
.sec-ink .key-pri:hover, .cta .key-pri:hover, .foot .key-pri:hover {
  background: var(--lcd-100); border-color: var(--lcd-100);
}
.sec-ink .key-gho, .cta .key-gho, .foot .key-gho { color: var(--lcd-200); border-color: var(--ink-700); }
.sec-ink .key-gho:hover, .cta .key-gho:hover, .foot .key-gho:hover {
  background: var(--lcd-300); border-color: var(--lcd-300); color: var(--ink-950);
}

/* ==================================================================
   7. Figures, chips and spans
   ================================================================== */
.fig {
  font-family: var(--mono);
  font-size: 0.94em;   /* Azeret Mono runs large beside Chivo; this is the optical match */
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-950);
  white-space: nowrap;
}
.fig-u {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
}
/* a figure that cannot be known without the car */
.fig-amber { color: var(--mil-700); }
.readout .fig-amber, .bay .fig-amber { color: var(--mil-800); }
/* a figure that is confirmed */
.fig-ok { color: var(--ink-700); }
.sec-ink .fig, .cta .fig { color: var(--lcd-100); }
.sec-ink .fig-u, .cta .fig-u { color: var(--ink-400); }
.sec-ink .fig-amber, .cta .fig-amber { color: var(--mil-400); }

/* the service-group code chip */
.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lcd-300);
  background: var(--ink-950);
  padding: 3px var(--sp-2);
  border-radius: var(--radius);
}
.sec-ink .chip, .cta .chip { background: var(--lcd-300); color: var(--ink-950); }
.readout .chip { background: var(--ink-950); color: var(--lcd-300); }

.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(--case-300); }
.span-v {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}
.sec-ink .span-line, .cta .span-line { background: var(--ink-700); }
.sec-ink .span-v, .cta .span-v { color: var(--lcd-200); }

/* ==================================================================
   8. The readout — the signature component
   ------------------------------------------------------------------
   An LCD field recessed into a bezel, with a label strip and rows of
   term-and-value pairs. Every price on this site lives on one of these.
   ================================================================== */
.readout {
  background: var(--lcd-300);
  border: 2px solid var(--ink-950);
  border-radius: var(--radius-panel);
  box-shadow: var(--bezel);
  padding: var(--sp-4);
  color: var(--ink-950);
}
.readout-hd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  background: var(--ink-950);
  color: var(--lcd-300);
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.readout-hd-v { color: var(--lcd-500); }

.ro { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.ro-k {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-600);
  padding-top: var(--sp-3);
}
.ro-v {
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--lcd-500);
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-950);
  font-variant-numeric: tabular-nums;
}
.ro > .ro-v:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.ro-amber { color: var(--mil-800); }
.ro-ok    { color: var(--ink-700); }
.ro-note {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--lcd-500);
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-600);
}
.ro-note a { color: var(--ink-950); }

/* the hero readout, set larger */
.readout-hero .ro-v { font-size: var(--step-0); }
.readout-hero .ro-total { font-size: var(--step-2); font-weight: 750; letter-spacing: -0.02em; }

/* ==================================================================
   9. Panel — the plain, non-readout container
   ================================================================== */
.panel {
  background: var(--case-050);
  border: 1px solid var(--case-300);
  border-bottom: 2px solid var(--ink-900);
  border-radius: var(--radius-panel);
  padding: var(--sp-5);
}
.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-bottom-color: var(--lcd-500);
  color: var(--lcd-100);
}
.sec-ink .panel-note { color: var(--ink-400); }
.sec-ink .panel h2, .sec-ink .panel h3 { color: var(--lcd-100); }
.sec-case .panel { background: var(--case-050); }

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

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

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

.head-act { display: flex; align-items: center; gap: var(--sp-3); }

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

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

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

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

/* the two headline numbers, side by side under the hero copy */
.rates2 { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.rate2 {
  background: var(--lcd-300);
  border: 2px solid var(--ink-950);
  border-radius: var(--radius-panel);
  box-shadow: var(--bezel);
  padding: var(--sp-4);
}
.rate2-k {
  display: block;
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-600);
}
.rate2-v {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--mono);
  font-size: var(--step-2);
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--ink-950);
  font-variant-numeric: tabular-nums;
}
.rate2-s { display: block; margin-top: var(--sp-2); font-size: var(--step--1); line-height: 1.5; color: var(--ink-600); }

/* ==================================================================
   13. Sections
   ================================================================== */
.sec { padding-block: var(--sp-8); }
.sec-case { background: var(--case-100); border-block: 1px solid var(--case-200); }
.sec-ink { background: var(--ink-900); color: var(--lcd-100); }
.sec-ink h1, .sec-ink h2, .sec-ink h3, .sec-ink h4 { color: var(--lcd-100); }
.sec-ink a { color: var(--lcd-100); }
.sec-ink a:hover { color: var(--mil-400); }

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

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

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

/* ==================================================================
   14. Bay — the dense price table, rendered as a readout
   ================================================================== */
.bay-scroll {
  overflow-x: auto;
  border: 2px solid var(--ink-950);
  border-radius: var(--radius-panel);
  background: var(--lcd-300);
  box-shadow: var(--bezel);
  -webkit-overflow-scrolling: touch;
}
.bay-scroll:focus-visible { outline-offset: -3px; }
.bay { width: 100%; border-collapse: collapse; font-size: var(--step--1); line-height: 1.5; }
.bay caption {
  caption-side: top;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-950);
  color: var(--lcd-300);
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.bay th, .bay td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--lcd-500);
}
.bay thead th {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-950);
  background: var(--lcd-400);
  white-space: nowrap;
}
.bay tbody th { font-weight: 700; font-size: var(--step-0); color: var(--ink-950); }
.bay tbody tr:last-child th, .bay tbody tr:last-child td { border-bottom: 0; }
.bay tbody tr:hover { background: var(--lcd-200); }
.bay .num {
  font-family: var(--mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink-950);
}
.bay .num-amber { color: var(--mil-800); }
.bay .bay-sub {
  display: block;
  margin-top: 3px;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--ink-600);
  line-height: 1.5;
  white-space: normal;
}
.bay-note { margin-top: var(--sp-3); font-size: var(--step--1); line-height: 1.6; color: var(--ink-500); }
.sec-ink .bay-note { color: var(--ink-400); }

/* ==================================================================
   15. Service group rows
   ================================================================== */
.groups { border-top: 2px solid var(--ink-950); }
.group-hd {
  display: none;
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--case-300);
}
.group {
  display: grid;
  gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--case-200);
}
.group-a { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.group-n { font-size: var(--step-2); }
.group-n a:hover { color: var(--mil-700); }
.group-b { max-width: 60ch; line-height: 1.62; }
.group-c { min-width: 0; }
.group-from {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink-950);
  background: var(--lcd-300);
  border: 1px solid var(--ink-950);
  border-radius: var(--radius);
  padding: 2px var(--sp-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

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

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

.foot .nap, .sec-ink .nap, .cta .nap {
  background: var(--ink-800);
  border-color: var(--ink-700);
  border-bottom-color: var(--lcd-500);
}
.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(--lcd-100); }
.foot .nap-hd-v, .sec-ink .nap-hd-v, .cta .nap-hd-v { color: var(--ink-400); }
.foot .nap-name, .sec-ink .nap-name, .cta .nap-name { color: var(--lcd-100); }
.foot .nap-addr, .sec-ink .nap-addr, .cta .nap-addr { color: var(--lcd-200); }
.foot .nap-rows, .sec-ink .nap-rows, .cta .nap-rows { border-top-color: var(--ink-700); }
.foot .nap-rows dt, .sec-ink .nap-rows dt, .cta .nap-rows dt { color: var(--ink-400); }
.foot .nap-rows dd, .sec-ink .nap-rows dd, .cta .nap-rows dd { color: var(--lcd-100); }
.foot .nap-rows dd a, .sec-ink .nap-rows dd a { color: var(--lcd-100); }
.foot .nap-tz, .sec-ink .nap-tz { color: var(--ink-400); }

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

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

/* ==================================================================
   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: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-900);
}
.field-req { font-weight: 600; letter-spacing: 0.08em; color: var(--stop-600); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--sp-3);
  background: var(--case-050);
  border: 1px solid var(--case-300);
  border-radius: var(--radius-panel);
  color: var(--ink-950);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.5;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink-700); }
.field-hint { font-size: var(--step--1); line-height: 1.6; color: var(--ink-500); }
.field-err {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stop-600);
}
.field.is-err input, .field.is-err select, .field.is-err textarea { border-color: var(--stop-600); }
.grid-2 { display: grid; gap: var(--sp-5); }
.check { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; }
.check input { width: 20px; height: 20px; margin-top: 0.2em; accent-color: var(--ink-800); }
.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; }
/* off screen, never display:none, so a bot still finds it */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--step--1); line-height: 1.62; color: var(--ink-500); }
.form-err {
  padding: var(--sp-4);
  border: 1px solid var(--stop-600);
  border-bottom: 2px solid var(--stop-600);
  border-radius: var(--radius-panel);
  background: var(--mil-100);
  color: var(--stop-700);
  font-size: var(--step--1);
  line-height: 1.6;
}
.form-err ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }

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

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

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

.nextlist { counter-reset: n; list-style: none; margin: 0; padding: 0; }
.nextlist li { counter-increment: n; display: grid; grid-template-columns: 2rem 1fr; gap: var(--sp-3); line-height: 1.6; }
.nextlist li + li { margin-top: var(--sp-3); }
.nextlist li::before {
  content: counter(n);
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 700;
  color: var(--lcd-300);
  background: var(--ink-950);
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--radius);
  display: grid; place-items: center;
}

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

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

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

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

/* a marked state — amber for an unknown or a fault, red for a hard stop */
.mark {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--mil-100);
  border: 1px solid var(--mil-700);
  border-bottom: 2px solid var(--mil-700);
  border-radius: var(--radius-panel);
}
.mark-k { font-family: var(--mono); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mil-800); }
.mark p { font-size: var(--step--1); line-height: 1.62; color: var(--ink-800); }
.mark-stop { background: var(--case-100); border-color: var(--stop-600); border-bottom-color: var(--stop-600); }
.mark-stop .mark-k { color: var(--stop-700); }
.sec-ink .mark { background: var(--ink-800); border-color: var(--mil-400); border-bottom-color: var(--mil-400); }
.sec-ink .mark-k { color: var(--mil-400); }
.sec-ink .mark p { color: var(--lcd-100); }

.results { border-top: 2px solid var(--ink-950); }
.result { padding-block: var(--sp-5); border-bottom: 1px solid var(--case-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); }

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

/* The authored moment: the hero readout links to the vehicle and fills its rows
   top to bottom, once, the way a tool does when you plug it in. */
.js .readout-hero .ro-v { animation: ro-fill 160ms linear both; }
.js .readout-hero .ro-v:nth-of-type(1) { animation-delay: 120ms; }
.js .readout-hero .ro-v:nth-of-type(2) { animation-delay: 240ms; }
.js .readout-hero .ro-v:nth-of-type(3) { animation-delay: 360ms; }
.js .readout-hero .ro-v:nth-of-type(4) { animation-delay: 480ms; }
.js .readout-hero .ro-v:nth-of-type(5) { animation-delay: 600ms; }
.js .readout-hero .ro-v:nth-of-type(6) { animation-delay: 720ms; }
@keyframes ro-fill {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* the link indicator in the readout header */
.js .readout-hero .readout-hd-v { animation: ro-link 900ms steps(1, end) 1 both; }
@keyframes ro-link {
  0%, 30%  { color: var(--mil-400); }
  31%, 100% { color: var(--lcd-500); }
}

@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 .readout-hero .ro-v { opacity: 1; }
}

/* ==================================================================
   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); }
  .rates2 { grid-template-columns: 1fr 1fr; }
  .ro { grid-template-columns: 7.5rem 1fr; align-items: baseline; column-gap: var(--sp-4); }
  .ro-k { padding-top: var(--sp-3); }
  .group { grid-template-columns: 1fr 11rem; align-items: start; gap: var(--sp-4) var(--sp-5); }
  .group-a, .group-b { grid-column: 1; }
  .group-c { grid-column: 2; grid-row: 1 / span 2; }
  .seq-m { grid-template-columns: 1fr 11rem; align-items: center; gap: var(--sp-4) var(--sp-5); }
  .seq-a, .seq-b { grid-column: 1; }
  .seq-c { grid-column: 2; grid-row: 1 / span 2; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .policy-grid { grid-template-columns: 1fr 1fr; }
  .areas { grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); }
}

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

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

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

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

  .hero-in { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--sp-8); }
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .split-wide { grid-template-columns: 1.25fr 0.75fr; }
  .foot-in { grid-template-columns: 21rem 1fr; gap: var(--sp-8); }
  .foot-nav { grid-template-columns: repeat(4, 1fr); }
  .foot-btm { grid-column: 1 / -1; }
  .group-hd { display: grid; grid-template-columns: 1fr 12rem; gap: var(--sp-5); }
  .group { grid-template-columns: 1fr 12rem; }
  .seq-m { grid-template-columns: 1fr 12rem; }
  .bay { font-size: var(--step-0); }
  .phead-body { padding-bottom: var(--sp-8); }
  .ro { grid-template-columns: 8.5rem 1fr; }
}

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

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

/* ==================================================================
   26. Print — a price menu is a thing people print and bring in
   ================================================================== */
@media print {
  .idbar, .head, .foot-nav, .cta, .menu-btn, .skip, .striping { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; }
  .sec, .hero { padding-block: 12pt; }
  .sec-ink, .cta, .foot { background: #fff !important; color: #000 !important; }
  .sec-ink h1, .sec-ink h2, .sec-ink h3 { color: #000 !important; }
  .readout, .panel, .nap, .bay-scroll, .rate2 {
    background: #fff !important; color: #000 !important;
    box-shadow: none !important; border-color: #999 !important; break-inside: avoid;
  }
  .readout-hd, .bay caption, .bay thead th, .seq-ref, .chip, .nextlist li::before {
    background: none !important; color: #000 !important; box-shadow: inset 0 0 0 1px #000;
  }
  .group, .seq-m, .faq-i, .rate2 { break-inside: avoid; }
  .faq-a { display: block !important; }
  a { text-decoration: underline; }
  .bay tbody tr:hover { background: none; }
  .ro-amber, .fig-amber, .num-amber { color: #000 !important; font-weight: 800; }
}