/* ===========================================================================
   ARIZONA COMPUTER GURU - v2 "Signal"
   Premium brutalist, refined craft. Anton poster scale, signal orange,
   duotone treated imagery, mono metadata motif, hard offset shadows.
   =========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  /* bone / ink neutrals, tinted toward the brand hue (hex fallback first) */
  --paper:      #F4EDE1;
  --surface:    #FBF7F0;
  --surface-2:  #EAE2D4;
  --ink:        #16120F;
  --ink-2:      #46403A;
  --ink-3:      #5C544B;
  --accent:     #E24A12;   /* fills only */
  --accent-ink: #C23A0A;   /* orange TEXT on bone, AA 4.62:1 */
  --on-accent:  #16120F;
  --paper:      oklch(0.944 0.017 84);
  --surface:    oklch(0.972 0.011 84);
  --surface-2:  oklch(0.912 0.022 84);
  --ink:        oklch(0.175 0.009 55);
  --ink-2:      oklch(0.37 0.012 55);
  --ink-3:      oklch(0.445 0.014 55);
  --accent:     oklch(0.585 0.185 38);
  --accent-ink: oklch(0.51 0.175 38);

  --rule:       color-mix(in srgb, var(--ink) 24%, transparent);
  --rule-soft:  color-mix(in srgb, var(--ink) 10%, transparent);
  --grid-hatch: color-mix(in srgb, var(--ink) 6.5%, transparent);

  /* dark band (in-page inversion, independent of theme; literal constants
     so the band stays charcoal + bone in BOTH themes) */
  --band-bg:      #1A1410;
  --band-bg:      oklch(0.205 0.012 55);
  --band-ink:     #F4EDE1;
  --band-ink:     oklch(0.944 0.017 84);
  --band-muted:   #C9BFB2;
  --band-muted:   oklch(0.80 0.018 84);
  --band-accent:  #FF5A1F;
  --band-accent:  oklch(0.66 0.20 38);
  --band-accent-ink: #FF8A4D;
  --band-accent-ink: oklch(0.735 0.155 45);
  --band-rule:    color-mix(in srgb, #F4EDE1 18%, transparent);

  /* Hard offset shadow, lifted off pure ink so the slabs read as depth
     rather than blocks of black. Same graphic language, lower volume. */
  --shadow-c:   color-mix(in srgb, var(--ink) 76%, var(--paper));
  --border-w:   2px;
  --maxw:       1240px;

  --f-display: "Anton", "Arial Narrow Bold", system-ui, sans-serif;
  --f-body:    "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);   /* expo-ish */
  --t-fast: 90ms;
  --t-med: 180ms;
}

[data-theme="dark"] {
  --paper:      #0E0B09;
  --surface:    #171310;
  --surface-2:  #201A15;
  --ink:        #F4EDE1;
  --ink-2:      #C9C1B5;
  --ink-3:      #9A9082;
  --accent:     #FF5A1F;
  --accent-ink: #FF8A4D;
  --on-accent:  #16120F;
  --paper:      oklch(0.155 0.008 55);
  --surface:    oklch(0.205 0.010 55);
  --surface-2:  oklch(0.245 0.012 55);
  --ink:        oklch(0.944 0.017 84);
  --ink-2:      oklch(0.82 0.016 84);
  --ink-3:      oklch(0.665 0.016 70);
  --accent:     oklch(0.66 0.20 38);
  --accent-ink: oklch(0.735 0.155 45);
  --on-accent:  oklch(0.175 0.009 55);

  --rule:       color-mix(in srgb, var(--ink) 26%, transparent);
  --rule-soft:  color-mix(in srgb, var(--ink) 10%, transparent);
  --grid-hatch: color-mix(in srgb, var(--ink) 7%, transparent);

  /* the inversion band goes deeper than the page so pacing survives dark theme */
  --band-bg:    #070504;
  --band-bg:    oklch(0.115 0.006 55);
  --shadow-c:   #000000;
  --shadow-c:   color-mix(in srgb, oklch(0.08 0.004 55) 80%, var(--surface));
}

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* The browser's own [hidden] { display: none } is an author-origin loss: any
   class that sets display beats it. .calc-row sets display:grid, so every row
   the estimator toggles via el.hidden stayed on screen — the backup sub-options
   showed with backup off, and "mix tiers" showed the cards AND the per-tier rows
   at once. !important is deliberate: hidden must outrank any component's display.
   (aria-hidden is a different attribute and is unaffected.) */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
::selection { background: var(--accent); color: var(--on-accent); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 0.75rem; top: -100px; z-index: 200;
  background: var(--ink); color: var(--paper); font-family: var(--f-mono);
  padding: 0.6rem 1rem; border: var(--border-w) solid var(--accent);
  transition: top 120ms var(--ease-out);
}
.skip-link:focus-visible { top: 0.75rem; color: var(--paper); }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px;
}

.wrap { width: min(100% - 3rem, var(--maxw)); margin-inline: auto; }

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: var(--border-w) solid var(--ink);
}
.header-grid {
  width: min(100% - 3rem, var(--maxw)); margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.25rem;
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); }
.brand__mark { color: var(--ink); line-height: 0; } /* outline ring; orange core reads var(--accent) */
.brand__mark svg { width: 34px; height: 33px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-family: var(--f-display); font-weight: 400; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.brand__since {
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-3);
}
.nav { margin-left: auto; display: flex; gap: 1.4rem; }
.nav__link {
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-2);
  padding-block: 0.35rem; position: relative;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--accent); transition: width var(--t-med) var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 0.9rem; }
.nav__phone {
  font-family: var(--f-mono); font-size: 0.88rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
  border: var(--border-w) solid var(--ink); padding: 0.45rem 0.8rem;
  transition: background var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
.nav__phone:hover { background: var(--ink); color: var(--paper); }
.theme-toggle {
  background: transparent; border: var(--border-w) solid var(--ink);
  width: 44px; height: 44px; cursor: pointer; color: var(--ink);
  display: grid; place-items: center; font-size: 1.05rem;
  transition: background var(--t-med), color var(--t-med);
}
.theme-toggle:hover { background: var(--ink); color: var(--paper); }

@media (max-width: 900px) { .nav { display: none; } }
@media (max-width: 560px) {
  .brand__since { display: none; }
  .nav__phone { box-shadow: none; border-width: 2px; padding: 0.4rem 0.6rem; font-size: 0.8rem; }
}

/* ---- Frame: treated imagery system -------------------------------------- */
/* Any image dropped into .frame--duo reads as art-directed: grayscale source
   multiplied over a signal-orange plate (ink+orange duotone), halftone dot
   screen, film grain, hard border + offset slab. */
.frame {
  position: relative; overflow: clip;
  border: var(--border-w) solid var(--ink);
  box-shadow: 9px 9px 0 var(--shadow-c);
  background: var(--surface);
}
/* 2026-08-01: the orange duotone came off. It was grayscale(1) multiplied over a
   solid #E24A12 plate, which flattened every photograph into a single orange wash.
   The photograph now leads; the brand only touches it. Structure (border, offset
   slab, grain, meta tags) is unchanged, so no markup had to move. */
.frame--duo { background: var(--surface); }
.frame--duo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.06) saturate(1.01) brightness(1.02);
}
/* Whisper of a warm grade so the images still belong to the brand. */
.frame--duo::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(158deg, rgba(226, 74, 18, 0.06), rgba(12, 8, 5, 0.10));
  mix-blend-mode: soft-light; opacity: 0.55;
}
/* film grain */
.frame--duo::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode: overlay; opacity: 0.14;
}
/* Lighter "mix" treatment for human/scene shots: keep the real photo (colour,
   detail, warmth) with only a subtle warm/ink grade + light grain. Photography
   leads; brand tints. Use on shop/workbench/desk/people images. */
.frame--duo-soft { background: var(--surface); }
.frame--duo-soft img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.05) saturate(1.02) brightness(1.02);
}
.frame--duo-soft::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(158deg, rgba(226, 74, 18, 0.12), rgba(12, 8, 5, 0.16));
  mix-blend-mode: soft-light; opacity: 0.85;
}
.frame--duo-soft::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode: overlay; opacity: 0.16;
}
.frame__meta {
  position: absolute; z-index: 3;
  font-size: 0.62rem; letter-spacing: 0.14em;
  background: var(--ink); color: var(--paper);
  padding: 0.25rem 0.5rem;
}
[data-theme="dark"] .frame__meta { background: oklch(0.115 0.006 55); color: oklch(0.944 0.017 84); }
.frame__meta--tl { top: 0; left: 0; }
.frame__meta--br { bottom: 0; right: 0; }
.frame--band { border-color: var(--band-ink); box-shadow: 9px 9px 0 var(--band-accent); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  font-family: var(--f-display); font-weight: 400; font-size: 1.08rem;
  letter-spacing: 0.03em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.65rem;
  padding: 0.85rem 1.6rem; cursor: pointer; text-decoration: none;
  border: var(--border-w) solid var(--ink);
  box-shadow: 5px 5px 0 var(--shadow-c);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out),
              background var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--shadow-c); }
.btn:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--shadow-c); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--ink); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn .arrow { font-family: var(--f-mono); }

/* band variants sit on the dark inversion band */
.btn--band { border-color: var(--band-ink); box-shadow: 5px 5px 0 var(--band-accent); background: var(--band-accent); color: #16120F; }
.btn--band:hover { background: var(--band-ink); color: var(--band-bg); box-shadow: 7px 7px 0 var(--band-accent); }
.btn--band-ghost { border-color: var(--band-ink); color: var(--band-ink); box-shadow: 5px 5px 0 var(--band-accent); background: transparent; font-family: var(--f-mono); font-weight: 700; }
.btn--band-ghost:hover { background: var(--band-ink); color: var(--band-bg); box-shadow: 7px 7px 0 var(--band-accent); }

/* ---- Shared section furniture ------------------------------------------- */
.section-head { position: relative; display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 1.4rem; }
.section-no {
  font-family: var(--f-display); font-size: clamp(3rem, 6.3vw, 4.8rem); line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 2px var(--band-accent-ink);
}
.section-no--ink { -webkit-text-stroke: 2px var(--accent-ink); }
.kicker {
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-ink); display: flex; align-items: center; gap: 0.75rem;
}
.kicker::before { content: ""; width: 30px; border-top: 3px solid var(--accent); }
.band-ink .kicker { color: var(--band-accent-ink); }
.band-ink .kicker::before { border-color: var(--band-accent); }

.lead { font-size: 1.15rem; color: var(--ink-2); max-width: 62ch; margin-bottom: 2rem; }
.accent-word { color: var(--accent-ink); font-style: normal; }

.more-link {
  font-family: var(--f-display); font-weight: 400; font-size: 1.05rem;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--accent-ink); text-decoration: none;
  display: inline-flex; gap: 0.5rem; align-items: center;
  border-bottom: 3px solid var(--accent); padding-bottom: 2px;
}
.more-link:hover { color: var(--ink); border-color: var(--ink); }
.more-link .arrow { font-family: var(--f-mono); transition: transform 0.15s var(--ease-out); }
.more-link:hover .arrow { transform: translateX(4px); }
.more-link--band { color: var(--band-accent-ink); border-color: var(--band-accent); }
.more-link--band:hover { color: var(--band-ink); border-color: var(--band-ink); }

.inline-actions { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }

/* visible structural diagonal-hatch motif */
.grid-bg {
  background-image: repeating-linear-gradient(45deg, var(--grid-hatch) 0 1px, transparent 1px 12px);
}

/* ---- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(1.2rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem) 0;
  border-bottom: var(--border-w) solid var(--ink);
  background-image: repeating-linear-gradient(45deg, var(--grid-hatch) 0 1px, transparent 1px 12px);
}
.hero__rail {
  position: absolute; top: 8.5rem; right: 0.4rem;
  writing-mode: vertical-rl;
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--ink-3);
  user-select: none;
}
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 0.55rem 2.2rem;
  font-size: 0.7rem; letter-spacing: 0.18em; color: var(--ink-3);
  border-bottom: 1px solid var(--rule); padding-bottom: 0.8rem;
  margin-bottom: clamp(1.2rem, 3vw, 2.4rem);
}
.hero__meta-wide { margin-left: auto; color: var(--accent-ink); }
.hero__title {
  font-family: var(--f-display); font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(3.2rem, 10vw, 8.8rem);
  line-height: 0.94; letter-spacing: 0.005em;
  color: var(--ink);
  margin-bottom: clamp(1.6rem, 3.5vw, 2.75rem);
}
.hero__line { display: block; }
.hero__line--hollow {
  color: transparent;
  -webkit-text-stroke: 3px var(--ink);
  font-size: 0.62em; line-height: 0.95;
  margin-top: 0.08em;
}
@media (max-width: 700px) { .hero__line--hollow { -webkit-text-stroke-width: 2px; } }
.hero__deck {
  display: grid; grid-template-columns: minmax(0, 44ch) auto;
  justify-content: space-between; align-items: start;
  gap: 1.5rem 4rem;
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.4rem, 2.5vw, 2rem);
  padding-bottom: clamp(2.25rem, 4.5vw, 3.75rem);
}
.hero__sub { font-size: 1.22rem; color: var(--ink-2); max-width: 34ch; }
.hero__cta { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; }
.hero__note {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 0.4rem 2.4rem;
  font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ink-3);
}
@media (max-width: 820px) {
  .hero__deck { grid-template-columns: 1fr; }
  .hero__cta { justify-content: flex-start; }
}
.hero__figure { margin-inline: 0; }
.hero__figure img { aspect-ratio: 21 / 8; object-fit: cover; }
.hero__figure {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  margin-right: 12px; /* room for the offset slab */
}
@media (max-width: 700px) {
  .hero__figure img { aspect-ratio: 3 / 2; }
  .hero__rail { display: none; }
}

/* ---- Hero field notes (slider) -------------------------------------------- */
/* The hero image became a slider of "field notes": an art-directed photo with a
   solid card of genuinely useful local advice sitting on it. Deliberately NOT
   auto-advancing - the hero already has the city rotator running, and a second
   moving thing would fight it (and auto-carousels are hostile to screen readers
   and anyone who reads slowly). The card is opaque, not glass, so the copy is
   legible over any photograph and it stays inside the brutalist system. */
.hfield { position: relative; margin-bottom: clamp(2rem, 4vw, 3rem); margin-right: 12px; }
.hfield__viewport { overflow: clip; }
.hfield__track {
  display: flex; list-style: none; margin: 0; padding: 0;
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hfield__slide { flex: 0 0 100%; min-width: 0; position: relative; }
.hfield__slide[aria-hidden="true"] { visibility: hidden; }
.hfield__slide .frame { margin: 0; }
.hfield__slide .frame img { aspect-ratio: 21 / 8; object-fit: cover; width: 100%; }

/* The note itself. On wide screens it overlaps the photo's lower-left corner,
   breaking the frame edge on purpose - the grid-breaking move the rest of the
   site uses sparingly. */
.fieldnote {
  position: absolute; z-index: 4;
  left: clamp(1rem, 3vw, 2.6rem); bottom: clamp(1rem, 3vw, 2.2rem);
  width: min(27rem, 42%);
  /* Stay clear of the FIG.### tag in the frame's top-left corner. */
  max-height: calc(100% - 3.4rem);
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  box-shadow: 9px 9px 0 var(--shadow-c);
  padding: clamp(1rem, 2vw, 1.5rem);
}
.fieldnote__eyebrow {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 0.5rem;
}
.fieldnote__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.15rem, 2.1vw, 1.7rem); line-height: 0.98;
  margin-bottom: 0.6rem;
}
.fieldnote__body { font-size: 0.9rem; color: var(--ink-2); margin-bottom: 0.7rem; }
.fieldnote__list { list-style: none; margin: 0 0 0.85rem; padding: 0; }
.fieldnote__list li {
  position: relative; padding-left: 1.05rem; margin-bottom: 0.38rem;
  font-size: 0.86rem; line-height: 1.4;
}
.fieldnote__list li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 0.5rem; height: 2px; background: var(--accent);
}
.fieldnote__link {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-ink);
  border-bottom: 2px solid var(--accent); padding-bottom: 2px;
}
.fieldnote__link:hover, .fieldnote__link:focus-visible { color: var(--ink); }

/* Controls: square ink buttons + a mono counter. Hidden entirely at one slide. */
.hfield__controls {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.9rem;
}
.hfield[data-single="true"] .hfield__controls { display: none; }
.hfield__btn {
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border: var(--border-w) solid var(--ink); background: var(--paper);
  color: var(--ink); cursor: pointer; font-size: 1rem; line-height: 1;
  transition: background 140ms ease, color 140ms ease;
}
.hfield__btn:hover:not([disabled]) { background: var(--accent); color: var(--paper); }
.hfield__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hfield__btn[disabled] { opacity: 0.35; cursor: default; }
.hfield__count { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--ink-3); }
.hfield__dots { display: flex; gap: 0.35rem; margin-left: auto; }
.hfield__dot {
  width: 0.7rem; height: 0.7rem; padding: 0; cursor: pointer;
  border: 2px solid var(--ink); background: var(--paper);
}
.hfield__dot[aria-current="true"] { background: var(--accent); }
.hfield__dot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Narrow: the card stops overlaying and sits under the photo, full width, so the
   copy never competes with the image for legibility. */
@media (max-width: 860px) {
  .hfield__slide .frame img { aspect-ratio: 3 / 2; }
  .fieldnote {
    position: static; width: auto; margin-top: -1px;
    box-shadow: none; border-top: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hfield__track { transition: none; }
}

/* ---- Hero city rotator ---------------------------------------------------- */
/* Words stack in one inline-grid cell: the cell is as wide as the widest word
   (EVERYWHERE), so swaps cause zero layout shift. Trailing slack after short
   words is invisible because the comma travels inside each word's cell and the
   line ends there.
   Swap = vertical odometer roll: the stack is a clipped cell (static clip-path
   with small outsets so the comma, hollow stroke, and underline slab are never
   sheared); words only translate. Outgoing rolls up out of the cell, incoming
   rises from below, both on the SAME ease-out-expo so they travel as one rigid
   column — no overshoot, no settle wobble. */
.city-stack { display: inline-grid; clip-path: inset(-0.1em -0.15em -0.18em -0.15em); }
.city-word { grid-area: 1 / 1; white-space: nowrap; visibility: hidden; }
/* no JS: skip the cycle, rest on the payoff word */
html:not(.js) .city-word--final { visibility: visible; }
html:not(.js) .city-word--final .city-word__t::after { transform: scaleX(1); }
.js .city-word.is-on,
.js .city-word.is-off { visibility: visible; }
.js .city-word.is-on  { animation: city-roll-in 240ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.js .city-word.is-off { animation: city-roll-out 240ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes city-roll-in {
  from { transform: translateY(1.15em); }
  to   { transform: none; }
}
@keyframes city-roll-out {
  from { transform: none; }
  to   { transform: translateY(-1.15em); }
}
/* EVERYWHERE lands hollow (brief outline flourish), then rests solid with a
   permanent accent underline slab drawing left to right */
.city-word--final { transition: color 240ms var(--ease-out); }
.city-word--final.is-hollow { color: transparent; -webkit-text-stroke: 3px var(--accent); }
@media (max-width: 700px) { .city-word--final.is-hollow { -webkit-text-stroke-width: 2px; } }
.city-word__t { position: relative; display: inline-block; }
.city-word__t::after {
  content: ""; position: absolute; left: 0.02em; right: 0.02em; bottom: -0.03em;
  height: 0.06em; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
}
.city-word--final.is-settled .city-word__t::after {
  transform: scaleX(1);
  transition: transform 560ms var(--ease-out) 80ms;
}
/* EVERYWHERE is 4 glyphs longer than TUCSON: the city line runs a hair tighter
   than line 1 (11vw vs 11.6vw, invisible side by side) so "for everywhere,"
   holds one line at laptop widths, and steps down on narrow viewports */
.hero__line--city { font-size: clamp(3.2rem, 10vw, 8.8rem); }
@media (max-width: 540px) { .hero__line--city { font-size: 0.7em; } }

/* ---- Service area strip ---------------------------------------------------- */
.svc-area {
  background: var(--surface);
  border-bottom: var(--border-w) solid var(--ink);
  padding: 0.95rem clamp(1rem, 3vw, 2.5rem) 1.05rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.7rem;
}
.svc-area__label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent-ink);
}
.svc-area__list {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.3rem 0;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
}
.svc-area__list li { white-space: nowrap; }
.svc-area__list li + li::before { content: "/"; margin-inline: 0.6rem; color: var(--ink-3); }
.svc-area__wide { color: var(--accent-ink); font-weight: 700; }
.svc-area__note {
  flex-basis: 100%;
  font-size: 0.84rem; color: var(--ink-3); max-width: 76ch;
}

/* ---- Radio ticker -------------------------------------------------------- */
.ticker {
  background: var(--ink); color: var(--paper);
  border-bottom: var(--border-w) solid var(--accent);
  overflow: clip; padding-block: 0.85rem;
}
[data-theme="dark"] .ticker { background: oklch(0.115 0.006 55); }
.ticker__track {
  display: flex; width: max-content;
  animation: ticker-scroll 32s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; white-space: nowrap; padding-inline: 2.6rem;
  color: var(--paper);
}
[data-theme="dark"] .ticker__item { color: oklch(0.944 0.017 84); }
.ticker__item strong { color: #FF8A4D; color: oklch(0.735 0.155 45); font-weight: 700; }
.ticker__item::before { content: "\25CF"; color: var(--accent); margin-right: 1.1rem; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* ---- Trust stats ---------------------------------------------------------- */
.trust { border-bottom: var(--border-w) solid var(--ink); background: var(--surface); }
.trust__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.trust__cell {
  position: relative;
  padding: clamp(2rem, 4vw, 3.4rem) clamp(1.1rem, 2.2vw, 2rem) clamp(1.8rem, 3.2vw, 2.9rem);
  border-right: var(--border-w) solid var(--ink);
}
.trust__cell:last-child { border-right: 0; }
.trust__num {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.3rem); line-height: 0.94;
  letter-spacing: 0.01em;
}
.trust__num .u { font-size: 0.42em; color: var(--accent-ink); letter-spacing: 0.06em; }
.trust__label { font-size: 0.88rem; color: var(--ink-2); margin-top: 0.7rem; max-width: 18ch; }
.trust__tag {
  position: absolute; top: 0.55rem; right: 0.7rem;
  font-size: 0.6rem; letter-spacing: 0.16em; color: var(--ink-3);
}
@media (max-width: 760px) {
  .trust__grid { grid-template-columns: 1fr 1fr; }
  .trust__cell:nth-child(2) { border-right: 0; }
  .trust__cell:nth-child(-n+2) { border-bottom: var(--border-w) solid var(--ink); }
}

/* ---- Dark inversion band -------------------------------------------------- */
.band-ink {
  background: var(--band-bg);
  color: var(--band-ink);
  border-bottom: var(--border-w) solid var(--accent);
  background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--band-ink) 6%, transparent) 0 1px, transparent 1px 12px);
}
.band-wrap { width: min(100% - 3rem, var(--maxw)); margin-inline: auto; }

/* Manifesto */
.manifesto { padding-block: clamp(5rem, 11vw, 10rem) clamp(2.5rem, 5vw, 4.5rem); }
.manifesto__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.4rem, 6.6vw, 5.7rem);
  line-height: 0.92; letter-spacing: 0.005em;
  color: var(--band-ink);
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
  max-width: 14em;
}
.manifesto__title span { display: block; }
.manifesto__title .accent-word { color: var(--band-accent-ink); }
.manifesto__body {
  display: grid; gap: 1.4rem; max-width: 62ch;
  font-size: 1.12rem; color: var(--band-muted);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  justify-items: start;
}
.manifesto__punch {
  font-weight: 700; color: var(--band-ink); font-size: 1.22rem;
  border-block: 3px solid var(--band-accent);
  padding-block: 1rem; max-width: 46ch;
}
.manifesto__figure { max-width: 900px; margin-right: 12px; }
.manifesto__figure img { aspect-ratio: 21 / 9; object-fit: cover; }

/* Services index (inside the band) */
.services { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3.5rem, 7vw, 6rem); }
.services__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.4rem, 5.4vw, 4.5rem); line-height: 0.96;
  color: var(--band-ink); margin-bottom: 2rem;
}
.svc-index { border-top: 1px solid var(--band-rule); margin-bottom: 2.25rem; }
.svc {
  display: grid; grid-template-columns: 4.5rem 1fr auto;
  gap: 1.4rem; align-items: baseline;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--band-rule);
  transition: background var(--t-med) var(--ease-out), padding-left var(--t-med) var(--ease-out);
}
.svc:hover { background: color-mix(in srgb, var(--band-ink) 5%, transparent); }
.svc__no {
  font-family: var(--f-display); font-size: 2rem; line-height: 1;
  color: var(--band-accent-ink);
}
.svc__name {
  font-family: var(--f-display); font-weight: 400; font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  letter-spacing: 0.015em; text-transform: uppercase; color: var(--band-ink);
}
.svc__desc { color: var(--band-muted); font-size: 0.96rem; margin-top: 0.3rem; max-width: 58ch; }
.svc__meta {
  font-size: 0.92rem; font-weight: 700; color: var(--band-accent-ink);
  text-align: right; white-space: nowrap;
}
.svc__per { color: var(--band-muted); font-weight: 400; font-size: 0.8em; }
@media (max-width: 680px) {
  .svc { grid-template-columns: 2.6rem 1fr; }
  .svc__no { font-size: 1.4rem; }
  .svc__meta { grid-column: 2; text-align: left; }
}

/* Accordion variant of the numbered ledger: the service-detail "What's
   included" list. Same disclosure pattern as the FAQ (a button toggles the
   max-height of the panel that immediately follows it, aria-expanded drives a
   rotating +), adapted to the dark band. Collapse is gated on html.js so the
   descriptions stay readable with JS off, and reduced motion falls back to an
   instant open/close via the global reduced-motion rule. */
.svc-index--fold .svc {
  display: block;
  padding-block: 0;
  transition: border-color var(--t-med) var(--ease-out);
}
.svc-index--fold .svc:hover { background: none; }
.svc-index--fold .svc:has(.svc__q[aria-expanded="true"]) { border-bottom-color: var(--band-accent); }
.svc__q {
  width: 100%;
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 1.4rem;
  align-items: baseline;
  padding: 1.15rem 0;
  background: none; border: 0;
  text-align: left; cursor: pointer;
  color: inherit; font: inherit;
  transition: background var(--t-med) var(--ease-out);
}
.svc__q:hover { background: color-mix(in srgb, var(--band-ink) 5%, transparent); }
.svc__q:hover .svc__name { color: var(--band-accent-ink); }
.svc__q:focus-visible { outline: 3px solid var(--band-accent); outline-offset: -3px; }
.svc__tail { display: inline-flex; align-items: baseline; gap: 1.1rem; white-space: nowrap; min-width: 0; }
/* Long meta labels ("GPS-Advanced+") pushed the row past 320px viewports. */
@media (max-width: 380px) {
  .svc__tail { gap: 0.7rem; }
  .svc__tail .svc__meta { white-space: normal; text-align: right; }
}
.svc__tail .svc__meta { font-size: 0.82rem; }
.svc__q .pm {
  font-family: var(--f-mono); font-size: 1.4rem; line-height: 1;
  color: var(--band-accent-ink); flex-shrink: 0;
  transition: transform var(--t-med) var(--ease-out);
}
.svc__q[aria-expanded="true"] .pm { transform: rotate(45deg); }
.svc__panel { overflow: hidden; }
html.js .svc__panel {
  max-height: 0; opacity: 0;
  transition: max-height 0.32s var(--ease-out), opacity 0.26s var(--ease-out);
}
.svc__q[aria-expanded="true"] + .svc__panel { opacity: 1; }
.svc__panel-inner { padding: 0 2.5rem 1.4rem calc(4.5rem + 1.4rem); }
.svc__panel-inner .svc__desc { margin-top: 0; max-width: 62ch; }
@media (max-width: 680px) {
  .svc-index--fold .svc__q { grid-template-columns: 2.6rem 1fr auto; gap: 1rem; }
  .svc__panel-inner { padding-left: calc(2.6rem + 1rem); }
}

/* ---- Pricing -------------------------------------------------------------- */
.pricing {
  padding-block: clamp(4.5rem, 9vw, 8rem) clamp(3.5rem, 7vw, 6.5rem);
  border-bottom: var(--border-w) solid var(--ink);
}
.pricing__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.8rem, 7.6vw, 6.4rem); line-height: 0.93;
  margin-bottom: 1.5rem;
}
.cta__accent { color: var(--band-accent-ink); }

.tiers {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  padding-right: 14px; /* room for offset slabs */
}
.tier {
  position: relative;
  background: var(--surface);
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--shadow-c);
  padding: 2rem 1.6rem 1.8rem;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.tier:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--shadow-c); }
.tier--pop {
  background: var(--ink); color: var(--paper);
  box-shadow: 8px 8px 0 var(--accent);
}
.tier--pop:hover { box-shadow: 11px 11px 0 var(--accent); }
[data-theme="dark"] .tier--pop { background: oklch(0.115 0.006 55); border-color: var(--accent); color: var(--ink); }
.tier__flag {
  position: absolute; top: -4px; right: -4px;
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent);
  padding: 0.4rem 0.7rem;
}
.tier__name {
  font-family: var(--f-display); font-weight: 400; font-size: 1.5rem;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.tier__price {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(3.9rem, 7.2vw, 5.9rem); line-height: 0.94;
  margin-top: 1rem; letter-spacing: 0.01em;
}
.tier__cur { font-size: 0.45em; vertical-align: 0.75em; color: var(--accent-ink); }
.tier--pop .tier__cur { color: #FF8A4D; color: oklch(0.735 0.155 45); }
.tier__per { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 0.7rem; }
.tier--pop .tier__per { color: oklch(0.80 0.018 84); }
.tier__blurb { font-size: 0.95rem; color: var(--ink-2); margin-top: 1.1rem; max-width: 30ch; }
.tier--pop .tier__blurb { color: oklch(0.80 0.018 84); }
.tier__tag { position: absolute; bottom: 0.6rem; right: 0.75rem; font-size: 0.6rem;
  letter-spacing: 0.16em; color: var(--ink-3); }
.tier--pop .tier__tag { color: oklch(0.665 0.016 70); }
@media (max-width: 860px) {
  .tiers { grid-template-columns: 1fr; max-width: 460px; }
}

/* ---- Dispatch board -------------------------------------------------------- */
.dispatch {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: var(--surface);
  border-bottom: var(--border-w) solid var(--ink);
}
.dispatch__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.3rem, 5vw, 4rem); line-height: 0.96;
  margin-bottom: 1.25rem;
}
.dispatch-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.4rem, 2.5vw, 2.2rem);
  margin-bottom: 2.5rem;
  padding-right: 10px;
}
/* flat by design: the slab shadows are reserved for buttons, tiers, and frames
   so the page keeps contrast between flatness and sudden depth */
.report {
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  display: flex; flex-direction: column;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.report:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--shadow-c); }
.report__bar {
  display: flex; justify-content: space-between; gap: 0.8rem;
  font-size: 0.64rem; letter-spacing: 0.16em;
  background: var(--ink); color: var(--paper);
  padding: 0.65rem 1rem;
}
[data-theme="dark"] .report__bar { background: oklch(0.115 0.006 55); color: var(--ink); }
.report__title {
  font-family: var(--f-display); font-weight: 400; font-size: 1.45rem;
  line-height: 1.08; letter-spacing: 0.01em;
  padding: 1.4rem 1.2rem 0.7rem;
}
.report__excerpt { color: var(--ink-2); font-size: 0.94rem; padding: 0 1.2rem 1.5rem; flex: 1; }
.report__meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.7rem; color: var(--ink-3);
  border-top: 1px solid var(--rule);
  padding: 0.7rem 1.2rem;
}
.report__tag {
  background: var(--accent); color: var(--on-accent);
  padding: 0.2rem 0.55rem; letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 0.64rem;
}

/* ---- CTA band --------------------------------------------------------------- */
.band-ink--cta { border-bottom: 0; }
.cta { padding-block: clamp(4rem, 9vw, 7.5rem); }
.cta .kicker { margin-bottom: 1.6rem; }
.cta__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3rem, 9.4vw, 7.9rem); line-height: 0.93;
  color: var(--band-ink);
  margin-bottom: 1.8rem;
}
.cta__title span { display: block; }
.cta__sub { color: var(--band-muted); font-size: 1.15rem; max-width: 52ch; margin-bottom: 2.4rem; }
.cta__actions { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* ---- Footer ------------------------------------------------------------------ */
.site-footer {
  background: var(--paper);
  border-top: var(--border-w) solid var(--ink);
  padding-block: 2.5rem 2rem;
}
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 2rem 2.5rem; align-items: start;
}
.footer-brand {
  font-family: var(--f-display); font-weight: 400; font-size: 1.2rem;
  text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.5rem;
}
.footer-line { font-size: 0.76rem; color: var(--ink-3); letter-spacing: 0.04em; line-height: 1.9; }
.footer-line a { color: var(--ink-2); }
.footer-line a:hover { color: var(--accent-ink); }
.footer-col--meta { text-align: right; }
.disclaimer {
  font-size: 0.68rem; color: var(--ink-3); letter-spacing: 0.02em;
  max-width: 90ch;
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem 2rem; }
  .footer-col--brand { grid-column: 1 / -1; }
  .footer-col--meta { text-align: left; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---- Footer sitemap ----------------------------------------------------- */
.footer-col--brand .footer-brand { margin-bottom: 0.6rem; }
.footer-head {
  font-family: var(--f-mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
  padding-bottom: 0.5rem; margin-bottom: 0.55rem;
  border-bottom: 1px solid var(--rule);
}
.footer-head--2 { margin-top: 1.5rem; }
.footer-nav {
  display: block; font-family: var(--f-mono); font-size: 0.75rem;
  letter-spacing: 0.03em; color: var(--ink-2); text-decoration: none;
  padding-block: 0.3rem;
  transition: color var(--t-med) var(--ease-out);
}
.footer-nav:hover, .footer-nav:focus-visible { color: var(--accent-ink); }
.footer-nav--all { color: var(--accent-ink); margin-top: 0.35rem; }
.footer-base {
  border-top: 1px solid var(--rule); margin-top: 2.25rem; padding-top: 1.2rem;
}
.footer-base .footer-line { margin-bottom: 0.55rem; }

/* ---- Reveal on scroll (JS-gated; content never stuck hidden without JS) ---- */
.js .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.js .reveal.in { opacity: 1; transform: none; }

/* ===========================================================================
   v2.1 - SUBPAGE LAYER (services / pricing / about / contact / calculator)
   Same tokens, same idiom. Global nav additions + the components the interior
   pages need: page heads, data tables, tier feature lists, the estimator,
   the contact form, FAQ accordion, story/on-air furniture.
   =========================================================================== */

/* ---- Global nav (multi-page) --------------------------------------------- */
.nav__cta {
  font-family: var(--f-mono); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  background: var(--accent); color: var(--on-accent);
  border: var(--border-w) solid var(--ink);
  padding: 0.5rem 0.85rem;
  transition: background var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
.nav__cta:hover { background: var(--ink); color: var(--paper); }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after { width: 100%; }
.nav__link--mobile { display: none; }
.nav__toggle {
  display: none; background: transparent; border: var(--border-w) solid var(--ink);
  width: 44px; height: 44px; cursor: pointer; color: var(--ink);
  place-items: center; font-size: 1.2rem; line-height: 1;
}
.nav__toggle:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 1120px) {
  .nav { gap: 1.05rem; }
  .nav__cta { display: none; }
}
@media (max-width: 900px) {
  .nav__toggle { display: grid; }
  .site-header .nav { display: none; }
  .site-header.nav-open .nav {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    margin-left: 0;
    background: var(--paper);
    border-bottom: var(--border-w) solid var(--ink);
    padding: 0.4rem clamp(1rem, 4vw, 1.5rem) 1rem;
  }
  .site-header.nav-open .nav .nav__link {
    font-size: 0.95rem; padding-block: 0.85rem;
    border-bottom: 1px solid var(--rule-soft);
  }
  .site-header.nav-open .nav .nav__link--mobile { display: block; color: var(--accent-ink); }
}
@media (max-width: 640px) { .nav__phone { display: none; } }

/* ---- Page head (interior hero) ------------------------------------------- */
.page-head {
  position: relative;
  padding: clamp(1.2rem, 3vw, 2.2rem) clamp(1rem, 3vw, 2.5rem) clamp(2.2rem, 4.5vw, 3.4rem);
  border-bottom: var(--border-w) solid var(--ink);
  background-image: repeating-linear-gradient(45deg, var(--grid-hatch) 0 1px, transparent 1px 12px);
}
.page-head__meta {
  display: flex; flex-wrap: wrap; gap: 0.55rem 2.2rem;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--rule); padding-bottom: 0.8rem;
  margin-bottom: clamp(1.2rem, 3vw, 2.2rem);
}
.page-head__meta-wide { margin-left: auto; color: var(--accent-ink); }
.page-head__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.7rem, 8vw, 6.6rem);
  line-height: 0.9; letter-spacing: 0.005em;
  margin-bottom: clamp(1.2rem, 2.6vw, 2rem);
}
.page-head__title span { display: block; }
.t-hollow { color: transparent; -webkit-text-stroke: 3px var(--ink); }
@media (max-width: 700px) { .t-hollow { -webkit-text-stroke-width: 2px; } }
.page-head__deck {
  display: grid; grid-template-columns: minmax(0, 56ch) auto;
  justify-content: space-between; align-items: start; gap: 1.5rem 4rem;
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.2rem, 2.2vw, 1.8rem);
}
.page-head__lead { font-size: 1.18rem; color: var(--ink-2); max-width: 52ch; }
.page-head__aside { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 820px) {
  .page-head__deck { grid-template-columns: 1fr; }
  .page-head__aside { justify-content: flex-start; }
}
.page-head__figure { margin: clamp(1.8rem, 3.5vw, 2.6rem) 12px 0 0; }
.page-head__figure img { aspect-ratio: 21 / 7; object-fit: cover; }
@media (max-width: 700px) { .page-head__figure img { aspect-ratio: 3 / 2; } }

/* ---- Section shells -------------------------------------------------------- */
.sect { padding-block: clamp(3.4rem, 7vw, 6rem); border-bottom: var(--border-w) solid var(--ink); }
.sect--surface { background: var(--surface); }
.band-sect { padding-block: clamp(3.5rem, 7.5vw, 6.5rem); }
.band-title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.3rem, 5vw, 4.2rem); line-height: 0.96;
  color: var(--band-ink); margin-bottom: 1.4rem;
}
.band-lead { color: var(--band-muted); font-size: 1.12rem; max-width: 62ch; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.band-fine { color: var(--band-muted); font-size: 0.78rem; letter-spacing: 0.02em; line-height: 1.7; max-width: 72ch; margin-top: 1.1rem; opacity: 0.85; }
.band-punch {
  font-weight: 700; color: var(--band-ink); font-size: 1.18rem;
  border-block: 3px solid var(--band-accent);
  padding-block: 1rem; max-width: 52ch;
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
}
.sect__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.3rem, 5vw, 4.2rem); line-height: 0.96;
  margin-bottom: 1.4rem;
}
.note { font-size: 0.88rem; color: var(--ink-3); }
.note .mono { color: var(--accent-ink); font-weight: 700; }

/* ---- Service groups (catalog page, inside the dark band) ------------------ */
.svc-group + .svc-group { margin-top: clamp(2.6rem, 5.5vw, 4.2rem); }
.svc-group__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.9rem, 4vw, 3rem); line-height: 0.95;
  color: var(--band-ink); margin-bottom: 0.4rem;
}
.svc-group__tag {
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--band-accent-ink); margin-left: 0.9rem; vertical-align: 0.6em;
}

/* ---- Data tables (brutalist ledger) --------------------------------------- */
.table-slab {
  border: var(--border-w) solid var(--ink); background: var(--surface);
  box-shadow: 8px 8px 0 var(--shadow-c);
  overflow-x: auto; margin-right: 12px; margin-bottom: 1.5rem;
}
.table-slab + .table-slab { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.data-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.data-table caption {
  text-align: left; font-family: var(--f-mono);
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem;
}
[data-theme="dark"] .data-table caption { background: oklch(0.115 0.006 55); color: var(--ink); }
.data-table th {
  font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500; color: var(--ink-3);
  text-align: left; padding: 0.8rem 1rem 0.55rem;
  border-bottom: var(--border-w) solid var(--ink);
}
.data-table td { padding: 0.72rem 1rem; border-bottom: 1px solid var(--rule-soft); font-size: 0.97rem; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .num {
  text-align: right; font-family: var(--f-mono);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.data-table tr.pop td { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
.data-table tr.pop td:first-child::after {
  content: "MOST CHOSEN"; font-family: var(--f-mono); font-size: 0.54rem;
  letter-spacing: 0.14em; background: var(--accent); color: var(--on-accent);
  padding: 0.16rem 0.4rem; margin-left: 0.6rem; vertical-align: middle; white-space: nowrap;
}
/* band variant: same slab on the charcoal inversion band */
.band-ink .table-slab {
  border-color: var(--band-ink);
  background: color-mix(in srgb, var(--band-ink) 4%, transparent);
  box-shadow: 8px 8px 0 var(--band-accent);
}
.band-ink .data-table caption { background: var(--band-ink); color: var(--band-bg); }
.band-ink .data-table th { color: var(--band-muted); border-bottom-color: var(--band-ink); }
.band-ink .data-table td { color: var(--band-ink); border-bottom-color: var(--band-rule); }
.band-ink .data-table tr.pop td { background: color-mix(in srgb, var(--band-accent) 16%, transparent); }
.band-ink .data-table tr.pop td:first-child::after { background: var(--band-accent); color: #16120F; }

/* ---- Price rows (hosting / 365 / phones) ----------------------------------- */
/* Editorial rows: title rail on the left, full-width ledger on the right, so
   the small tables get the same room (and read) as the labor slabs above. */
.price-cols {
  display: grid; grid-template-columns: 1fr;
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
}
.price-block {
  display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  min-width: 0; /* grid item: never let table min-content widen the track */
}
.price-block + .price-block {
  border-top: 1px solid var(--rule);
  margin-top: clamp(2.2rem, 4vw, 3rem);
  padding-top: clamp(2.2rem, 4vw, 3rem);
}
.price-block__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: 1.5rem; letter-spacing: 0.015em; margin-bottom: 0.9rem;
  grid-column: 1; grid-row: 1;
}
.price-block .table-slab { box-shadow: 7px 7px 0 var(--shadow-c); grid-column: 2; grid-row: 1 / 3; margin-bottom: 0; }
.price-block .data-table { min-width: 0; }
.price-block .data-table th { padding: 0.85rem 1.15rem 0.55rem; }
.price-block .data-table td { padding: 0.8rem 1.15rem; }
.price-block .data-table th:first-child { width: 30%; }
.price-block .data-table th.num { width: 15%; }
.price-block .note { margin-top: 0.9rem; font-size: 0.8rem; grid-column: 1; grid-row: 2; }
@media (max-width: 900px) {
  .price-block { display: block; }
}

/* ---- Tier feature lists (pricing page) -------------------------------------- */
.tier__list { list-style: none; padding: 0; margin-top: 1.2rem; border-top: 1px solid var(--rule); }
.tier__list li {
  position: relative; padding: 0.5rem 0 0.5rem 1.5rem;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.92rem; color: var(--ink-2);
}
.tier__list li::before {
  content: "+"; position: absolute; left: 0.1rem; top: 0.45rem;
  font-family: var(--f-mono); font-weight: 700; color: var(--accent-ink);
}
.tier--pop .tier__list { border-top-color: color-mix(in srgb, #F4EDE1 30%, transparent); }
.tier--pop .tier__list li { color: oklch(0.80 0.018 84); border-bottom-color: color-mix(in srgb, #F4EDE1 14%, transparent); }
.tier--pop .tier__list li::before { color: oklch(0.735 0.155 45); }

/* The block-time discount is a different kind of line from the features above it:
   money off labour, not something bundled in. Marked with % instead of +, and set
   off by a heavier rule so it reads as the card's closing line rather than the
   sixth feature. Basic carries none, so its absence does the comparing. */
.tier__list li.is-perk {
  border-top: 1px solid var(--rule); border-bottom: 0;
  margin-top: 0.3rem; padding-top: 0.7rem;
  font-weight: 700; color: var(--ink);
}
.tier__list li.is-perk::before { content: "%"; top: 0.68rem; }
.tier--pop .tier__list li.is-perk {
  color: var(--band-ink); border-top-color: color-mix(in srgb, #F4EDE1 30%, transparent);
}

/* ---- Story (about) ----------------------------------------------------------- */
.story__grid {
  display: grid; grid-template-columns: minmax(0, 60ch) minmax(280px, 430px);
  justify-content: space-between; align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 900px) { .story__grid { grid-template-columns: 1fr; } }
.story__copy p { color: var(--ink-2); font-size: 1.08rem; margin-bottom: 1.15rem; max-width: 58ch; }
.pull {
  font-weight: 700; color: var(--ink); font-size: 1.2rem;
  border-block: 3px solid var(--accent);
  padding-block: 1rem; margin-block: 1.7rem 0; max-width: 46ch;
}
.story__figure { margin-right: 12px; }
.story__figure img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ---- On air (about) ----------------------------------------------------------- */
.onair-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: var(--border-w) solid var(--ink); background: var(--paper);
  box-shadow: 9px 9px 0 var(--shadow-c);
  margin-right: 12px;
}
.onair-cell {
  position: relative;
  padding: clamp(1.6rem, 3.2vw, 2.6rem) clamp(1.1rem, 2.2vw, 1.8rem);
  border-right: var(--border-w) solid var(--ink);
}
.onair-cell:last-child { border-right: 0; }
.onair-cell .trust__num { font-size: clamp(1.9rem, 3.8vw, 3.4rem); }
/* the call-in number is 12 glyphs; scale it independently so it never crowds
   its cell edge at mid widths */
.onair-cell .trust__num--dial { font-size: clamp(1.5rem, 3vw, 2.9rem); white-space: nowrap; }
@media (max-width: 700px) {
  .onair-grid { grid-template-columns: 1fr; }
  .onair-cell { border-right: 0; border-bottom: var(--border-w) solid var(--ink); }
  .onair-cell:last-child { border-bottom: 0; }
}

/* ---- Big quote (about) --------------------------------------------------------- */
.bigquote {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.9rem, 5vw, 3.8rem); line-height: 1.05;
  max-width: 22ch;
}
.signature {
  font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 1.6rem;
}

/* ---- Contact ------------------------------------------------------------------- */
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 560px);
  gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
}
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-lines {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem; margin-top: 2.2rem;
  border-top: 1px solid var(--rule); padding-top: 1.8rem;
}
@media (max-width: 520px) { .contact-lines { grid-template-columns: 1fr; } }
.contact-lines .k {
  display: block; font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 0.35rem;
}
.contact-lines .v { font-size: 1.02rem; font-weight: 600; color: var(--ink); text-decoration: none; }
a.v:hover { color: var(--accent-ink); }
.contact-form {
  border: 4px solid var(--ink); background: var(--surface);
  box-shadow: 9px 9px 0 var(--shadow-c);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  margin-right: 12px;
}
.contact-form__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: 1.45rem; margin-bottom: 1.3rem;
}
.form-field { margin-bottom: 1.2rem; }
.form-field label {
  display: block; font-family: var(--f-mono); font-size: 0.66rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 0.45rem;
}
.form-field input, .form-field textarea {
  width: 100%; border: var(--border-w) solid var(--ink);
  background: var(--paper); color: var(--ink);
  font: inherit; padding: 0.75rem 0.9rem;
}
.form-field textarea { min-height: 9.5rem; resize: vertical; }
.form-field input:focus-visible, .form-field textarea:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.form-note { margin-top: 1rem; font-size: 0.85rem; color: var(--ink-3); }
.form-note.is-err { color: var(--accent-ink); font-weight: 600; }
.form-note.is-ok { color: var(--ink); font-weight: 600; }
/* Turnstile widget. Reserve its height so the button does not jump on load. */
.form-captcha { margin-bottom: 1.2rem; min-height: 65px; }
/* The widget iframe is fixed-width; keep it from setting the grid's min-content. */
.form-captcha, .form-captcha iframe { max-width: 100%; }
@media (max-width: 420px) { .form-captcha { min-height: 140px; } }

/* ---- Turnstile deferral -----------------------------------------------------
   Turnstile runs a proof-of-work + fingerprint pass on the main thread. Rendered
   at page load it froze scrolling for ~2s while someone was still reading, so the
   widget is now mounted on first form interaction instead (see v2.js). This
   placeholder holds the exact footprint the widget will take so nothing shifts,
   and reads as a deliberate, calm part of the form rather than a loading defect. */
.captcha-ph {
  display: flex; align-items: center; gap: .6rem;
  min-height: 65px; padding: .7rem .85rem;
  border: 1px dashed var(--rule); border-radius: 2px;
  background: var(--surface-2);
  color: var(--ink-3); font-size: .8125rem; line-height: 1.35;
}
.captcha-ph__mark {
  flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-top-color: var(--accent-ink);
}
/* Only spins once the widget is actually being fetched — a placeholder that
   spins while idle is a lie about what the page is doing. */
.captcha-ph.is-loading .captcha-ph__mark { animation: captchaSpin .7s linear infinite; }
.captcha-ph.is-loading { border-style: solid; }
@keyframes captchaSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .captcha-ph.is-loading .captcha-ph__mark { animation: none; border-top-color: var(--accent-ink); }
}
@media (max-width: 420px) { .captcha-ph { min-height: 140px; align-items: flex-start; } }
/* Spam honeypot: off-screen for everyone, and aria-hidden so nothing announces it. */
.form-trap {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; white-space: nowrap;
}
.btn[disabled] { opacity: 0.55; cursor: progress; }

/* ---- FAQ accordion --------------------------------------------------------------- */
/* Two-column editorial split: sticky title rail left, accordion right, so the
   section fills the full measure instead of stranding the right half. */
.faq-layout {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 2rem clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.faq-intro { position: sticky; top: 5.4rem; }
.faq-layout .faq-list { max-width: none; }
@media (max-width: 940px) {
  .faq-layout { grid-template-columns: 1fr; gap: 0.5rem; }
  .faq-intro { position: static; }
}
.faq-list { border-top: var(--border-w) solid var(--ink); max-width: 76ch; }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 1.5rem; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--f-body); font-weight: 700; font-size: 1.05rem; color: var(--ink);
  padding: 1.1rem 0.2rem;
}
.faq__q:hover { color: var(--accent-ink); }
.faq__q .pm {
  font-family: var(--f-mono); font-size: 1.25rem; color: var(--accent-ink);
  flex-shrink: 0; transition: transform var(--t-med) var(--ease-out);
}
.faq__q[aria-expanded="true"] .pm { transform: rotate(45deg); }
.faq__a { overflow: hidden; max-height: 0; transition: max-height 0.3s var(--ease-out); }
.faq__a-inner { padding: 0.1rem 2.5rem 1.3rem 0.2rem; color: var(--ink-2); max-width: 70ch; }

/* ---- Calculator -------------------------------------------------------------------- */
.calc-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
  gap: clamp(2rem, 4vw, 4rem); align-items: start;
}
@media (max-width: 940px) { .calc-grid { grid-template-columns: 1fr; } }
.calc-inputs {
  border: var(--border-w) solid var(--ink); background: var(--surface);
  box-shadow: 9px 9px 0 var(--shadow-c);
}
.calc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem 2rem; align-items: center;
  padding: 1.05rem clamp(1rem, 2.5vw, 1.6rem);
  border-bottom: 1px solid var(--rule);
}
.calc-row:last-child { border-bottom: 0; }
.calc-row > label { font-weight: 700; font-size: 1rem; }
.calc-row .hint, .be-row .hint {
  display: block; font-family: var(--f-mono); font-weight: 400;
  font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 0.3rem;
}
@media (max-width: 560px) {
  .calc-row { grid-template-columns: 1fr; }
}
.stepper { display: flex; border: var(--border-w) solid var(--ink); background: var(--paper); }
.stepper button {
  width: 44px; height: 44px; border: 0; cursor: pointer;
  background: var(--surface-2); color: var(--ink);
  font-family: var(--f-mono); font-size: 1.15rem; line-height: 1;
}
.stepper button:hover { background: var(--ink); color: var(--paper); }
.stepper button:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.stepper input {
  width: 4.4rem; border: 0; background: var(--paper); color: var(--ink);
  text-align: center; font-family: var(--f-mono); font-size: 1.05rem; font-weight: 700;
  -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.selectwrap { position: relative; }
.selectwrap::after {
  content: "\25BE"; position: absolute; right: 0.8rem; top: 50%;
  transform: translateY(-50%); pointer-events: none;
  font-family: var(--f-mono); color: var(--accent-ink);
}
.selectwrap select {
  font-family: var(--f-mono); font-size: 0.88rem; font-weight: 700; color: var(--ink);
  background: var(--paper); border: var(--border-w) solid var(--ink);
  padding: 0.7rem 2.3rem 0.7rem 0.85rem; cursor: pointer;
  appearance: none; -webkit-appearance: none; max-width: 100%;
}
.selectwrap select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.switch { position: relative; display: inline-block; width: 66px; height: 34px; }
.switch input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer;
}
.switch .track {
  position: absolute; inset: 0; pointer-events: none;
  border: var(--border-w) solid var(--ink); background: var(--surface-2);
  transition: background var(--t-med) var(--ease-out);
}
.switch input:checked ~ .track { background: var(--accent); }
.switch input:focus-visible ~ .track { outline: 3px solid var(--accent); outline-offset: 3px; }
.switch .knob {
  position: absolute; top: 7px; left: 7px; width: 20px; height: 20px;
  background: var(--ink); pointer-events: none;
  transition: transform var(--t-med) var(--ease-out);
}
.switch input:checked ~ .knob { transform: translateX(32px); }

/* --- Seat-tier picker (Microsoft 365, GPS-Voice) ---------------------------
   A row of selectable cards carrying price AND what you get for it, because
   the question behind "which plan" is never the number on its own. Real radio
   inputs, visually hidden, so keyboard and screen readers get a proper group;
   the card is just the paint. Stacks to one column on narrow screens. */
.calc-row--stack { grid-template-columns: 1fr; }
.tierpick {
  display: grid; gap: 0.6rem; margin-top: 0.15rem;
  grid-template-columns: repeat(auto-fit, minmax(9.25rem, 1fr));
}
.tierpick__opt { display: block; cursor: pointer; }
.tierpick__opt input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.tierpick__card {
  display: flex; flex-direction: column; gap: 0.18rem; height: 100%;
  padding: 0.7rem 0.8rem 0.75rem;
  border: var(--border-w) solid var(--ink); background: var(--paper);
  transition: background var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
.tierpick__opt:hover .tierpick__card { background: var(--surface-2); }
.tierpick__name { font-weight: 700; font-size: 0.95rem; line-height: 1.15; }
.tierpick__price {
  font-family: var(--f-mono); font-weight: 700; font-size: 1.35rem;
  line-height: 1; color: var(--accent-ink);
}
.tierpick__note {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); margin-top: auto; padding-top: 0.3rem;
}
/* Selected: accent fill, ink text (--on-accent), price flips to ink so it does
   not vibrate orange-on-orange. */
.tierpick__opt input:checked ~ .tierpick__card {
  background: var(--accent); color: var(--on-accent); border-color: var(--ink);
}
.tierpick__opt input:checked ~ .tierpick__card .tierpick__price { color: var(--on-accent); }
.tierpick__opt input:checked ~ .tierpick__card .tierpick__note { color: var(--on-accent); opacity: 0.72; }
.tierpick__opt input:focus-visible ~ .tierpick__card { outline: 3px solid var(--accent); outline-offset: 3px; }

/* The "mix tiers" switch and the per-tier rows it reveals. The rows are plain
   .calc-sub, so they inherit the same indent + turnstile marker as the backup
   sub-options; the rule just ties the group together visually. */
.calc-row--mix { border-bottom: 0; padding-bottom: 0.55rem; }
.calc-mix { border-bottom: 1px solid var(--rule); }
.calc-mix > .calc-row:last-child { border-bottom: 0; }

/* An inline aside inside the estimator, for a service we price with the client
   rather than in the form. Deliberately unlike a .calc-row — no control column,
   no switch — so it reads as an explanation and not a disabled input. */
.calc-note {
  padding: 1.05rem clamp(1rem, 2.5vw, 1.6rem);
  border-bottom: 1px solid var(--rule);
  border-left: var(--border-w) solid var(--accent);
  background: var(--surface-2);
}
.calc-note p { font-size: 0.88rem; line-height: 1.55; color: var(--ink-2); }
.calc-note p + p { margin-top: 0.5rem; }
.calc-note strong { color: var(--ink); font-weight: 700; }

/* --- Collapsible panels ----------------------------------------------------
   display:none cannot be transitioned, so the toggled regions animate on
   grid-template-rows 0fr -> 1fr instead. The inner element must carry
   overflow:hidden + min-height:0 or the content refuses to shrink below its
   intrinsic height. Content is laid out but clipped while closed, so the JS
   also sets [inert] to keep collapsed fields out of the tab order and the
   accessibility tree — clipped is not the same as gone. */
.collapse {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-med) var(--ease-out);
}
.collapse.is-open { grid-template-rows: 1fr; }
.collapse__inner {
  overflow: hidden; min-height: 0;
  opacity: 0; transition: opacity var(--t-fast) var(--ease-out);
}
.collapse.is-open > .collapse__inner { opacity: 1; transition-delay: 60ms; }
@media (prefers-reduced-motion: reduce) {
  .collapse, .collapse__inner { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tierpick__card { transition: none; }
}

.calc-out {
  position: sticky; top: 5.4rem;
  background: var(--ink); color: var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 9px 9px 0 var(--accent);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  margin-right: 12px;
}
[data-theme="dark"] .calc-out { background: oklch(0.115 0.006 55); border-color: var(--accent); color: var(--ink); }
.calc-out__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: 1.4rem; letter-spacing: 0.02em; margin-bottom: 1.1rem;
}
.lline {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--f-mono); font-size: 0.8rem;
  padding-block: 0.45rem;
  border-bottom: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
}
.lline .muted { opacity: 0.6; font-size: 0.92em; }
.lline.is-zero { opacity: 0.4; }
.lline .lcost { white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.3rem; }
.calc-total .tlabel {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.2em;
  text-transform: uppercase; opacity: 0.7;
}
.calc-total .tnum { font-family: var(--f-display); font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; }
.calc-annual, .calc-perep { font-family: var(--f-mono); font-size: 0.74rem; opacity: 0.75; margin-top: 0.45rem; }
.calc-cta { margin-top: 1.7rem; width: 100%; justify-content: center; }
.calc-foot { font-size: 0.78rem; opacity: 0.7; margin-top: 1.1rem; }

/* ---- Compact CTA band (interior pages) ----------------------------------------- */
.cta--compact { padding-block: clamp(3.2rem, 6.5vw, 5.5rem); }
.cta--compact .cta__title { font-size: clamp(2.5rem, 6.3vw, 5.1rem); }

/* ===========================================================================
   v2.2 - CLICKABLE SERVICE INDEX ROWS -> detail sub-pages
   The index rows on the homepage and the catalog become links to per-service
   detail pages. The service NAME is the real anchor; a stretched ::after makes
   the whole row clickable, while the price stays a separate secondary link to
   pricing. Rows WITHOUT a link (about promises, detail-page ledgers) are left
   completely untouched via :has() gating.
   =========================================================================== */
.svc { position: relative; }
.svc__link {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 0.5rem;
}
/* stretched hit-area: whole row navigates to the detail page */
.svc__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.svc__go {
  font-family: var(--f-mono); font-size: 0.72em; color: var(--band-accent-ink);
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
/* affordance: rows that link slide + warm on hover/focus, and reveal the arrow */
.svc:has(.svc__link):hover,
.svc:has(.svc__link:focus-visible) { padding-left: 0.6rem; }
.svc:has(.svc__link):hover .svc__link,
.svc:has(.svc__link:focus-visible) .svc__link { color: var(--band-accent-ink); }
.svc:has(.svc__link):hover .svc__go,
.svc:has(.svc__link:focus-visible) .svc__go { opacity: 1; transform: none; }
.svc:has(.svc__link:focus-visible) { background: color-mix(in srgb, var(--band-ink) 6%, transparent); }
.svc__link:focus-visible { outline: 3px solid var(--band-accent); outline-offset: 5px; }
/* secondary action: price chip links to pricing, sitting above the row overlay */
a.svc__meta {
  position: relative; z-index: 3; text-decoration: none;
  transition: color var(--t-med) var(--ease-out);
}
a.svc__meta:hover { color: var(--band-ink); }
a.svc__meta:focus-visible { outline: 3px solid var(--band-accent); outline-offset: 4px; }
/* graceful fallback for engines without :has() - the name anchor still works */
@supports not selector(:has(*)) {
  .svc__go { opacity: 1; transform: none; }
}

/* ==== Get Support button (header) ======================================== */
.nav__support {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--f-mono); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  background: transparent; color: var(--ink);
  border: var(--border-w) solid var(--ink);
  padding: 0.5rem 0.85rem;
  transition: background var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
.nav__support:hover, .nav__support:focus-visible { background: var(--ink); color: var(--paper); }
.nav__support:hover svg, .nav__support:focus-visible svg { color: var(--paper); }
.nav__support svg { width: 15px; height: 15px; flex: none; color: var(--accent); }
/* Mobile: tighten the whole header so Get Support + theme + menu always fit
   (down to 320px) without overflow. Phone lives in the menu + footer. */
@media (max-width: 560px) {
  .header-grid { gap: 0.55rem; }
  .header-actions { gap: 0.45rem; }
  .brand { gap: 0.5rem; }
  .brand__mark svg { width: 28px; height: 27px; }
  .brand__name { font-size: 0.92rem; letter-spacing: 0; }
  .nav__support { padding: 0.45rem 0.55rem; font-size: 0.72rem; letter-spacing: 0.03em; gap: 0.35rem; }
  .nav__support svg { width: 14px; height: 14px; }
}
@media (max-width: 380px) {
  .nav__support-get { display: none; }
  .brand__name { font-size: 0.84rem; }
}

/* ==== Support page: access cards + portal form ========================== */
.access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: stretch; }
@media (max-width: 820px) { .access-grid { grid-template-columns: 1fr; } }
.access-card {
  display: flex; flex-direction: column;
  border: var(--border-w) solid var(--ink); background: var(--surface);
  box-shadow: 8px 8px 0 var(--shadow-c);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
.access-card--primary { border-top: 6px solid var(--accent); }
.access-card__no { font-size: 0.68rem; letter-spacing: 0.16em; color: var(--ink-3); }
.access-card__title {
  font-family: var(--f-display); font-weight: 400; line-height: 0.95;
  font-size: clamp(1.7rem, 3.6vw, 2.35rem); text-transform: uppercase;
  letter-spacing: 0.01em; margin: 0.55rem 0 0.9rem;
}
.access-card > p { color: var(--ink-2); font-size: 1rem; line-height: 1.6; margin-bottom: 1.3rem; }
.access-card .btn { align-self: flex-start; }
.access-card__fine { margin-top: 1rem; font-size: 0.68rem; color: var(--ink-3); letter-spacing: 0.03em; line-height: 1.6; }
.portal-form { margin-top: auto; }
.portal-form .form-field { margin-bottom: 1rem; }
.portal-form .btn { align-self: flex-start; }
.link-arrow {
  display: inline-block; margin-top: 1rem;
  font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-ink); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.link-arrow:hover, .link-arrow:focus-visible { color: var(--ink); }

/* ==== Support page: not-a-client-yet row ================================= */
.new-here__lead { color: var(--ink-2); font-size: 1.1rem; line-height: 1.6; max-width: 54ch; margin-top: 1rem; }
.new-here__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem; }

/* ==== Calculator: member badge, backup sub-rows, GB input =============== */
.calc-member {
  margin-top: 0.9rem; font-family: var(--f-mono);
  font-size: 0.72rem; letter-spacing: 0.03em; line-height: 1.5;
  background: var(--accent); color: var(--on-accent);
  padding: 0.55rem 0.75rem;
}
.calc-sub > label { padding-left: 1.15rem; position: relative; }
.calc-sub > label::before {
  content: "\21B3"; position: absolute; left: 0; top: 0.05rem; opacity: 0.55;
}
.calc-num {
  font-family: var(--f-mono); font-size: 0.95rem; text-align: right;
  width: 7rem; padding: 0.5rem 0.7rem;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  justify-self: end;
}

/* ==== Estimator: block-time break-even (dark band) ======================= */
.be-grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.6rem, 3.5vw, 3rem); align-items: start;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem);
}
@media (max-width: 860px) { .be-grid { grid-template-columns: 1fr; } }

.be-input {
  border: var(--border-w) solid var(--band-ink);
  background: color-mix(in srgb, var(--band-ink) 5%, transparent);
  box-shadow: 8px 8px 0 var(--band-accent);
  padding: clamp(1.1rem, 2.6vw, 1.7rem); margin-right: 12px;
}
.be-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.9rem 1.6rem; align-items: center; }
.be-row > label { font-weight: 700; font-size: 1rem; color: var(--band-ink); }
.be-row .hint { color: var(--band-muted); }
@media (max-width: 560px) { .be-row { grid-template-columns: 1fr; } }
.be-tier {
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--band-muted); line-height: 1.7;
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--band-rule);
}
.be-tier strong { color: var(--band-accent-ink); font-weight: 500; }

/* stepper on the charcoal band (band colors are theme-independent) */
.stepper--band { border-color: var(--band-ink); background: color-mix(in srgb, var(--band-ink) 10%, transparent); }
.stepper--band button { background: color-mix(in srgb, var(--band-ink) 16%, transparent); color: var(--band-ink); }
.stepper--band button:hover { background: var(--band-ink); color: var(--band-bg); }
.stepper--band input { background: transparent; color: var(--band-ink); }
.stepper--band button:focus-visible, .stepper--band input:focus-visible { outline-color: var(--band-accent); }

.be-verdict {
  border-left: var(--border-w) solid var(--band-accent);
  padding-left: clamp(1.1rem, 2.6vw, 1.8rem);
}
.be-verdict--hold { border-left-color: var(--band-muted); }
.be-verdict__kicker { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--band-muted); }
.be-verdict__head {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.85rem, 4.2vw, 2.9rem); line-height: 1.03;
  text-transform: uppercase; color: var(--band-ink); margin-top: 0.5rem;
}
.be-verdict__rate {
  margin-top: 0.6rem; color: var(--band-muted);
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.be-verdict__num {
  font-family: var(--f-display); font-size: clamp(2.1rem, 4.8vw, 3rem); line-height: 1;
  letter-spacing: 0; color: var(--band-accent-ink); margin-right: 0.4rem;
}
.be-verdict--hold .be-verdict__num { color: var(--band-ink); }
.be-lines { margin-top: 1.3rem; }
.be-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--band-rule);
  font-size: 0.95rem; color: var(--band-ink);
}
.be-line:last-child { border-bottom: 0; }
.be-line .bname { color: var(--band-muted); }
.be-line .bcost { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.be-line--save .bname, .be-line--save .bcost { color: var(--band-accent-ink); font-weight: 700; }
.be-verdict__note { margin-top: 1.15rem; font-size: 0.88rem; line-height: 1.65; color: var(--band-muted); max-width: 48ch; }

/* recommended / below-break-even rows in the block table */
.data-table tr.is-best td { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
.data-table tr.is-best td:first-child::after {
  content: "YOUR BEST FIT"; font-family: var(--f-mono); font-size: 0.54rem;
  letter-spacing: 0.14em; background: var(--accent); color: var(--on-accent);
  padding: 0.16rem 0.4rem; margin-left: 0.6rem; vertical-align: middle; white-space: nowrap;
}
.data-table tr.is-under td { opacity: 0.55; }
.band-ink .data-table tr.is-best td { background: color-mix(in srgb, var(--band-accent) 16%, transparent); }
.band-ink .data-table tr.is-best td:first-child::after { background: var(--band-accent); color: #16120F; }

/* ==== Block table: prepaid total with its effective hourly underneath ==== */
.cell-pair__total { display: block; }
.cell-pair__rate {
  display: block; font-size: 0.8em; color: var(--ink-3);
  margin-top: 0.12rem; letter-spacing: 0.01em;
}
.band-ink .cell-pair__rate { color: var(--band-muted); }
.data-table tr.pop .cell-pair__rate,
.data-table tr.is-best .cell-pair__rate { opacity: 0.85; }

/* ==== Fine print (light sections) ======================================== */
/* Reusable terms block: a labelled, mono, low-contrast list that sits under a
   price table without competing with it. Band variant inherits band colours. */
.fine-print {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 2px solid var(--rule);
  padding-top: 1rem;
  max-width: 88ch;
}
.fine-print__head {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.7rem;
}
.fine-print__list { list-style: none; display: grid; gap: 0.5rem; }
.fine-print__list li {
  font-size: 0.78rem; line-height: 1.65; color: var(--ink-3);
  padding-left: 1.15rem; position: relative;
}
.fine-print__list li::before {
  content: "//"; position: absolute; left: 0; top: 0;
  font-family: var(--f-mono); font-size: 0.66rem; color: var(--accent-ink); opacity: 0.7;
}
.fine-print__list strong { color: var(--ink-2); font-weight: 700; }
.band-ink .fine-print { border-top-color: var(--band-rule); }
.band-ink .fine-print__head,
.band-ink .fine-print__list li { color: var(--band-muted); }
.band-ink .fine-print__list li::before { color: var(--band-accent-ink); }
.band-ink .fine-print__list strong { color: var(--band-ink); }

/* ==== Narrow screens: the ledger restacks as cards ======================== */
/* A 3–4 column table cannot hold its columns under ~640px, and the slab's
   horizontal scroll hides the prices people came for behind a swipe. Below
   that width each row becomes a card: the row's name is the heading, the
   remaining cells read as label/value lines. v2.js copies the column names
   into data-label (and restores the ARIA roles display:block would strip),
   so the markup stays a real table. */
@media (max-width: 640px) {
  .table-slab { overflow-x: visible; }
  .data-table { display: block; min-width: 0; }
  .data-table caption { display: block; }
  .data-table tbody { display: block; }
  .data-table thead {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .data-table tbody tr {
    display: block; padding: 0.9rem 1rem 1rem;
    border-bottom: 1px solid var(--rule);
  }
  .data-table tbody tr:last-child { border-bottom: 0; }
  .data-table td {
    display: block; padding: 0.32rem 0; border-bottom: 0; font-size: 0.95rem;
  }
  /* These labels ARE the column headers now, so they carry real meaning and
     have to read like it — at 0.6rem in --ink-3 they were gray-on-black inside
     the charcoal band. Bigger, heavier, and one step up the contrast ramp. */
  .data-table td::before {
    content: attr(data-label); display: block; margin-bottom: 0.12rem;
    font-family: var(--f-mono); font-size: 0.66rem; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
  }
  .band-ink .data-table td::before { color: var(--band-muted); }
  /* First cell is the row's name — the card heading, no label needed. */
  .data-table td:first-child {
    padding: 0 0 0.5rem; font-size: 1.08rem; font-weight: 600;
  }
  .data-table td:first-child::before { content: none; }
  /* Money cells keep the ledger read: label left, figure right. */
  .data-table td.num {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 0.9rem; text-align: right;
  }
  .data-table td.num::before { margin-bottom: 0; text-align: left; }
  .data-table td.num .cell-pair__total { margin-left: auto; }
  .data-table td.num .cell-pair__rate { flex: 0 0 100%; text-align: right; }
  /* Highlight the whole card, not each cell, or the tint reads as stripes. */
  .data-table tr.pop, .data-table tr.is-best {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }
  .data-table tr.pop td, .data-table tr.is-best td { background: transparent; }
  .band-ink .data-table tr.pop, .band-ink .data-table tr.is-best {
    background: color-mix(in srgb, var(--band-accent) 16%, transparent);
  }
  .band-ink .data-table tbody tr { border-bottom-color: var(--band-rule); }
}

/* ==== Narrow screens: the flourishes step back ============================ */
/* The mono furniture — map coordinates, outlined section numerals, the DOC.xx
   filing tags, the PLAN.x corner stamps — is texture for a wide page. On a
   phone it is rows of gray type between the reader and the content, so it
   drops out. Only decoration goes: the chips that carry a real fact (FROM $22
   / USER, IN GPS-PRO & UP) stay, they just stop being pinned right. */
@media (max-width: 640px) {
  .deco-mono { display: none; }
  .section-no { display: none; }
  .section-head { gap: 0; margin-bottom: 1.1rem; }
  .tier__tag { display: none; }
  .page-head__meta > span:first-child { display: none; }
  .hero__meta, .page-head__meta { gap: 0.4rem 1.4rem; }
  .hero__meta-wide, .page-head__meta-wide { margin-left: 0; }
}

/* CTA rows: buttons sized to their own labels read as a ragged edge once they
   stack on a phone (a phone-number button is much wider than "Talk to a human"),
   so below the wrap point each row becomes one column of equal blocks. */
@media (max-width: 640px) {
  .new-here__actions,
  .hero__cta,
  .cta__actions {
    display: grid; grid-template-columns: 1fr; gap: 0.8rem;
  }
  .new-here__actions .btn,
  .hero__cta .btn,
  .cta__actions .btn { justify-content: center; }
}

/* ==== About: the closing quote is a block, not a section head ============= */
/* Unboxed, the quote read as another heading and left the signature floating
   underneath like the start of a new section. The slab makes it one unit and
   puts the attribution inside it, below a hairline. */
.bigquote-block {
  border: var(--border-w) solid var(--ink);
  background: var(--surface);
  box-shadow: 9px 9px 0 var(--shadow-c);
  padding: clamp(1.5rem, 3.5vw, 2.8rem);
  margin-right: 12px;
  max-width: min(100%, 62rem);
}
.bigquote-block .signature {
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  padding-top: clamp(0.8rem, 1.6vw, 1.1rem);
  border-top: 1px solid var(--rule);
}

/* Attribution belongs INSIDE the pull quote's rules — below the bottom rule it
   floated between the quote and the next paragraph, attached to neither. The
   wrapper carries the rules; the quote inside drops its own. */
.pull-block {
  border-block: 3px solid var(--accent);
  padding-block: 1rem; margin-block: 1.7rem 0; max-width: 46ch;
}
.pull-block .pull { border: 0; padding-block: 0; margin-block: 0; max-width: none; }
.pull-block .signature { margin-top: 0.9rem; }

/* ---------------------------------------------------------------------------
   INKY banner explainer (inky-faq.html).

   This deliberately renders a MOCK OF THE REAL BANNER rather than an abstract
   colour swatch. Someone arrives on this page having just seen a coloured strip
   at the top of an email; the fastest way to answer them is to show the same
   strip and label it. Recognition beats description.

   Built in markup rather than as an exported image on purpose: it uses the real
   site tokens instead of approximations, stays crisp at any size, is real text
   for screen readers and search, and can be corrected in seconds. (A Canva
   export is still the right artifact for the printable client handout.)

   The three hues are FIXED literals, not theme tokens -- they represent another
   product's UI, so they must not drift with our palette. Each banner is a pale
   tint with a saturated left rule, which is both how the real banners read and
   what keeps dark ink on them legible. That is why the banners stay light in
   dark mode: they are a picture of an inbox, not part of our chrome.
   --------------------------------------------------------------------------- */
.inky-list {
  display: grid; gap: clamp(1.4rem, 3vw, 2.2rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.inky-row {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.1rem, 2.4vw, 2rem); align-items: start;
}

/* --- the mock banner ------------------------------------------------------ */
.inky-banner {
  border: var(--border-w) solid #16120F;
  border-left-width: 10px;
  padding: 0.85rem 1rem;
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--band-ink) 20%, transparent);
  color: #16120F;
}
.inky-banner--gray   { background: #EDEEF0; border-left-color: #9AA0A6; }
.inky-banner--yellow { background: #FBF0CE; border-left-color: #F2C744; }
.inky-banner--red    { background: #FADFDB; border-left-color: #D93A2B; }

.inky-banner__verdict {
  font-weight: 700; font-size: 1rem; margin: 0 0 0.35rem; line-height: 1.25;
}
.inky-banner__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-family: var(--f-mono); font-size: 0.76rem;
  color: color-mix(in srgb, #16120F 74%, transparent); margin: 0;
}
.inky-banner__tag {
  border: 1px solid color-mix(in srgb, #16120F 45%, transparent);
  padding: 0.05rem 0.4rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.inky-banner__report {
  display: block; margin-top: 0.5rem;
  font-family: var(--f-mono); font-size: 0.72rem;
  text-decoration: underline;
  color: color-mix(in srgb, #16120F 66%, transparent);
}

/* --- the explanation beside it -------------------------------------------- */
.inky-row__name {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  letter-spacing: 0.01em; margin: 0 0 0.5rem; color: var(--band-ink);
}
.inky-row__body {
  color: color-mix(in srgb, var(--band-ink) 82%, transparent);
  font-size: 0.98rem; line-height: 1.55; margin: 0 0 0.7rem;
}
.inky-row__do {
  font-size: 0.95rem; line-height: 1.5; margin: 0;
  color: var(--band-ink);
  border-top: 1px solid color-mix(in srgb, var(--band-ink) 26%, transparent);
  padding-top: 0.6rem;
}
.inky-row__do strong {
  font-family: var(--f-mono); font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--band-accent-ink); display: block; margin-bottom: 0.2rem;
}

@media (max-width: 820px) {
  .inky-row { grid-template-columns: 1fr; gap: 0.9rem; }
}

/* ---------------------------------------------------------------------------
   GPS tier capability matrix (pricing.html).

   Complements the tier cards above it rather than repeating them. The cards
   nest features as "Everything in Basic" / "Everything in Pro", which is
   compact but hides the one thing a buyer is actually asking: at which tier
   does THIS capability start? The matrix answers that directly.

   Deliberately carries NO prices. The cards own those, and a second copy of a
   number is how published pricing drifts out of sync with RATE-CARD.md.

   Two rows carry values rather than ticks (help-desk hours, block discount) --
   that is precisely the detail the nested card lists cannot express.
   --------------------------------------------------------------------------- */
.tier-matrix { margin-top: clamp(1.8rem, 3.4vw, 2.6rem); }
.tier-matrix .data-table th.num,
.tier-matrix .data-table td.num { text-align: center; }

.tier-matrix td.num { font-family: var(--f-mono); font-size: 0.86rem; }

/* Included / not-included marks. The glyph is decorative; the real state is
   announced to screen readers by the .sr-only text beside it. */
.tm-yes::before {
  content: "\25CF";                   /* filled circle */
  color: var(--accent-ink); font-size: 0.8rem;
}
.tm-no::before {
  content: "\2013";                   /* en dash */
  color: color-mix(in srgb, var(--ink) 34%, transparent);
}
.tier-matrix tr.is-group td {
  font-family: var(--f-mono); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-3);
  border-top: var(--border-w) solid var(--ink);
  padding-top: 0.9rem;
}