/* ==== css/fonts.css ==== */
/* fonts.css: the three self-hosted families, the @font-face blocks copied from mockup/assets/fonts/*.css as fetch-fonts.mjs
   generated them (Fontsource 5.3.0, OFL-1.1), plus metric-matched local fallback faces so a late web font barely moves the fold
   or the splash landing. Fallback method (capsize): the web font's letter-frequency-weighted average advance over the local face's
   gives size-adjust, and the web font's hhea ascent, descent and line gap over that size-adjust give the overrides. Archivo is
   measured at the H1's instance (wdth 112, wght 800) against Arial Bold, Instrument Sans at 400 against Arial, JetBrains Mono
   at 500 against Menlo, computed with fontTools 4.63 on 2026-10-09 from the shipped woff2 files. */
/* archivo-latin-wght-normal */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/archivo-latin-wght-normal.8f704806.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* archivo-latin-wdth-normal */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/assets/fonts/archivo-latin-wdth-normal.e3a28ead.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* instrument-sans-latin-wght-normal */
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/assets/fonts/instrument-sans-latin-wght-normal.2ee17598.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* instrument-sans-latin-wght-italic */
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 400 700;
  src: url(/assets/fonts/instrument-sans-latin-wght-italic.77210cdd.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* jetbrains-mono-latin-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/fonts/jetbrains-mono-latin-wght-normal.18be4527.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* metric fallbacks */
@font-face { font-family: "Archivo Variable Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 100 900; size-adjust: 115.35%; ascent-override: 76.12%; descent-override: 18.21%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans Variable Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 103.01%; ascent-override: 94.17%; descent-override: 24.27%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono Variable Fallback"; src: local("Menlo Regular"), local("Menlo-Regular"), local("Menlo"), local("Consolas"); size-adjust: 99.66%; ascent-override: 102.35%; descent-override: 30.10%; line-gap-override: 0%; }
/* narrow fallbacks for the hero heading's phone stretches (sections.css picks one per width): the same Arial Bold scaled to
   Archivo's advance at stretch 90 and 75 (the 112 face above is too wide there, so a late web font re-broke the heading's
   lines and moved the fold), with ascent and descent kept at the 112 face's absolute values. Since the heading is sized to
   its column on phones (three lines from 320 px), the plain 90 face breaks where Archivo does from 340 to 759 px, measured
   line for line with the web fonts blocked; nothing changes once the web font is in. The section titles keep width 112 at
   every width, so the 112 face is theirs. */
@font-face { font-family: "Archivo Variable Fallback 90"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 100 900; size-adjust: 93.88%; ascent-override: 93.53%; descent-override: 22.37%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Variable Fallback 90 Wide"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 100 900; size-adjust: 96.25%; ascent-override: 91.22%; descent-override: 21.82%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Variable Fallback 75"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 100 900; size-adjust: 81.25%; ascent-override: 108.07%; descent-override: 25.85%; line-gap-override: 0%; }
/* ==== css/tokens.css ==== */
/* tokens.css: every custom property the page uses, with its value; the surface aliases for the light sections and the
   dark bands so one component works on both chromes. Contrast ratios re-measured on the built page. The font stacks carry
   the metric-matched fallback faces from fonts.css second. */
:root {
  --paper: #F7F9FB;
  --mist: #F3F5F6;
  --ink: #22282B;
  --ink-2: #55606A;
  --line: #D9DEE4;
  --navy: #24266F;
  --blue: #0088C9;
  --blue-text: #065C85;
  --deck: #062F4A;
  --deck-2: #0C3D59;
  --dim: #C4D2DE;
  --sky: #6FCBFF;
  --band: #065C85;
  --slate: #22343F;
  --go: #1E7B46;
  --caution: #8A5A00;
  --stop: #B3261E;
  --go-d: #5BD58A;
  --caution-d: #FFC24D;
  --stop-d: #FF8A7E;
  --radius: 6px;
  --shadow-lift: 0 24px 64px rgba(15,17,52,.38);
  --shadow-header: 0 1px 0 rgba(15,17,52,.18);
  --rule-dark: rgba(183,192,216,.18);
  --font-display: "Archivo Variable", "Archivo Variable Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans Variable", "Instrument Sans Variable Fallback", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono Variable", "JetBrains Mono Variable Fallback", ui-monospace, Menlo, Consolas, monospace;
  --h1: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem);
  --h2: clamp(1.875rem, 1.25rem + 1.8vw, 3rem);
  --h3: 1.375rem;
  --lede: clamp(1.1875rem, 1rem + 0.5vw, 1.3125rem);
  --num: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  --body: 17px;
  --body-m: 16.5px;
  --container: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(56px, 6vw + 40px, 120px);
  --nav-h: 64px;
  --bar-h: 64px;
  --se-z: 1000;
  --splash-ms: 3050;

  /* light surface aliases (the page default: paper) */
  --surface: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --accent: var(--blue-text);
  --rule: var(--line);
}
@media (max-width: 759px) {
  :root { --nav-h: 56px; }
}

/* surfaces: the light pair and the four dark plates. The semantic constants are never aliased. */
.surface-paper { --surface: var(--paper); --fg: var(--ink); --fg-2: var(--ink-2); --accent: var(--blue-text); --rule: var(--line); }
.surface-mist  { --surface: var(--mist);  --fg: var(--ink); --fg-2: var(--ink-2); --accent: var(--blue-text); --rule: var(--line); }
.surface-deck  { --surface: var(--deck);  --fg: var(--paper); --fg-2: var(--dim); --accent: var(--sky); --rule: var(--rule-dark); }
.surface-deck-2 { --surface: var(--deck-2); --fg: var(--paper); --fg-2: var(--dim); --accent: var(--sky); --rule: var(--rule-dark); }
.surface-navy  { --surface: var(--navy);  --fg: var(--paper); --fg-2: var(--dim); --accent: var(--sky); --rule: var(--rule-dark); }
.surface-band  { --surface: var(--band);  --fg: var(--paper); --fg-2: var(--paper); --accent: var(--paper); --rule: rgba(247,249,251,.28); }
.surface-slate { --surface: var(--slate); --fg: var(--paper); --fg-2: var(--dim); --accent: var(--sky); --rule: var(--rule-dark); }
[class*="surface-"] { background-color: var(--surface); color: var(--fg); }
/* ==== css/base.css ==== */
/* base.css: reset, body, type, links, buttons, utilities, header, drawer, footer, the sticky call bar. Base styles are the
   finished frame: nothing here hides content waiting for script. Component-local custom properties: --head, --btn-bg,
   --btn-fg, --brand-h. */

/* ---- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* the canvas is the header's navy: Safari 26 on iOS no longer reads theme-color and paints the strip behind the status bar
   (and the overscroll) in the page's own background, so the dark header meets the top of the phone instead of sitting under
   a pale band; the body keeps the paper (P2-FIXLIST item 2) */
html { background-color: var(--deck); }
html, body { overflow-x: hidden; overflow-x: clip; }
html.dlg-open, html.drawer-open, html.qdlg-open { overflow: hidden; }
body { margin: 0; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: var(--nav-h); }
@media (max-width: 759px) {
  html { scroll-padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }
}
/* Sticky at every width: anchors and keyboard focus clear the visible header. */
html { scroll-padding-top: var(--nav-h); }
[id] { scroll-margin-top: 0; }
/* the scroll lock under a dialog never moves the page sideways where scrollbars take room: the scripts mark html.sb-room
   when the scrollbar has width (classic scrollbars), and only then is its gutter kept while the page is locked; overlay
   scrollbars reserve nothing, so no pale strip appears at the right edge */
html.sb-room.dlg-open, html.sb-room.qdlg-open, html.sb-room.drawer-open { scrollbar-gutter: stable; }

/* surface-dependent component colors */
:root, .surface-paper, .surface-mist { --head: var(--navy); --btn-bg: var(--navy); --btn-fg: var(--paper); }
.surface-deck, .surface-deck-2, .surface-navy, .surface-slate { --head: var(--paper); --btn-bg: var(--sky); --btn-fg: var(--deck); }
.surface-band { --head: var(--paper); --btn-bg: var(--paper); --btn-fg: var(--band); }

/* ---- body and type */
body {
  font-family: var(--font-body);
  font-size: var(--body-m);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}
@media (min-width: 760px) { body { font-size: var(--body); } }

h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.015em;
  color: var(--head);
  text-wrap: balance;
}
h1 { font-size: var(--h1); line-height: 1.02; }
h2 { font-size: var(--h2); line-height: 1.1; }
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: var(--h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--head);
  text-wrap: balance;
}
p, li, dd { text-wrap: pretty; }
.lede { font-size: var(--lede); line-height: 1.5; color: var(--fg-2); max-width: 30em; text-wrap: balance; }
.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mono { font-weight: 500; }
/* a measured figure inside running text: the instrument face at its 500 weight, a touch smaller so it sits on the line */
.fig { font-family: var(--font-mono); font-weight: 500; font-size: 0.94em; font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; }
.num { font-weight: 700; }
.measure { max-width: 64ch; }
.muted { color: var(--fg-2); }
.owner { font-family: var(--font-mono); font-size: 0.86em; font-weight: 500; letter-spacing: 0.02em; color: var(--fg-2); white-space: normal; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.surface-band :focus-visible { outline-color: var(--paper); }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* quotations: the company's and its clients' words, set as such */
.quote-text { font-style: italic; }
.quote-text::before { content: "\201C"; }
.quote-text::after { content: "\201D"; }
blockquote p + p { margin-top: 10px; }
blockquote + .src, blockquote + .attrib, .quote-text + .src { margin-top: 10px; }
.attrib { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; line-height: 1.45; letter-spacing: 0.04em; color: var(--fg-2); font-style: normal; }
.attrib b { color: var(--fg); font-weight: 700; }
.src { max-width: 60ch; font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 1.45; letter-spacing: 0.02em; color: var(--fg-2); }

/* ---- layout utilities */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 4vw, 56px); max-width: 62rem; }
.section-head h2 { padding-bottom: 0.08em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.nowrap { white-space: nowrap; }

/* ---- skip link */
.skip-link {
  position: absolute; left: var(--gutter); top: 8px; z-index: 120;
  padding: 12px 16px; border-radius: var(--radius);
  background: var(--sky); color: var(--deck); font-weight: 600; text-decoration: none;
  clip-path: inset(50%); opacity: 0; pointer-events: none;
}
.skip-link:focus { clip-path: none; opacity: 1; pointer-events: auto; }

/* ---- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.15; letter-spacing: 0;
  text-align: center; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.btn-primary:hover { box-shadow: inset 0 0 0 1px var(--btn-fg); }
.btn-outline { background: transparent; color: var(--head); border-color: var(--fg-2); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn .arrow { width: 16px; height: 16px; flex: none; transition: transform .16s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
/* a phone number never breaks across two lines (P2-FIXLIST items 8 to 10) */
a[href^="tel:"] { white-space: nowrap; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.link-arrow .arrow { width: 16px; height: 16px; transition: transform .16s ease; }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* ---- chips and captions */
.chip {
  display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px;
  border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); box-shadow: inset 0 0 0 1px var(--rule);
}
.chip-concept {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  color: var(--paper); background: rgba(15,17,52,.84); box-shadow: inset 0 0 0 1px rgba(247,249,251,.22);
  pointer-events: none;
}
.chip-concept.at-right { left: auto; right: 10px; }
.caption {
  margin-top: 10px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; line-height: 1.45; letter-spacing: 0.02em;
  color: var(--fg-2);
}
.plate-img { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--deck-2); }
.plate-img > picture, .svc-media > picture, .hero-frame > picture, .franchise-hero > picture { position: absolute; inset: 0; }
.plate-img img, .svc-media img, .hero-frame img, .franchise-hero img { width: 100%; height: 100%; object-fit: cover; }

/* ---- header: the same navy band at the top, after scrolling, and on phones.
   The logo is stable; focus and the menu remain visible while the page scrolls. */
.site-header {
  position: sticky; top: 0; z-index: 100; background-color: var(--deck);
  --hd-nav: var(--paper); --hd-tel: var(--paper); --hd-ico: var(--paper); --hd-ring: var(--rule-dark);
  --hd-hi: var(--sky); --hd-mark: var(--sky); --btn-bg: var(--sky); --btn-fg: var(--deck);
  box-shadow: inset 0 -1px 0 var(--rule-dark);
}
.site-header::before, .site-header::after { content: none; }
.site-header.is-scrolled { box-shadow: var(--shadow-header); }
.header-bar { display: flex; align-items: center; gap: 10px; min-height: var(--nav-h); }
.brand-wrap { position: relative; display: inline-flex; flex: none; margin-right: auto; }
.brand {
  --brand-h: 30.5px;
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; flex: none;
  gap: calc(var(--brand-h) * 13.25 / 81.135);
  margin-right: 0; padding: 6px 0;
  text-decoration: none; border-radius: var(--radius);
}
/* Existing inverted logo inks on the constant dark header and drawer. */
.brand svg [data-color="1"] { fill: var(--paper); }
.brand svg [data-color="3"] { fill: var(--deck); }
.brand-mark { height: var(--brand-h); width: calc(var(--brand-h) * 58.6 / 81.135); flex: none; }
.brand-name { height: var(--brand-h); width: calc(var(--brand-h) * 327.33 / 81.135); flex: none; }
@media (min-width: 760px) { .brand { --brand-h: 40px; } }
@media (min-width: 861px) and (max-width: 1099px) { .brand { --brand-h: 34px; } }

.site-nav ul { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  color: var(--hd-nav); font-size: 15px; font-weight: 500; text-decoration: none; border-radius: var(--radius);
  transition: color .24s ease, box-shadow .16s ease;
}
.site-nav a:hover { color: var(--hd-hi); }
.site-nav a[aria-current] { color: var(--hd-hi); box-shadow: inset 0 -2px 0 var(--hd-mark); }
@media (min-width: 1100px) { .site-nav a { padding: 0 14px; font-size: 15.5px; } }

.header-tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  min-height: 44px; min-width: 44px; padding: 0 10px;
  border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--hd-ring);
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0;
  color: var(--hd-tel); text-decoration: none; white-space: nowrap;
  transition: color .24s ease, box-shadow .24s ease;
}
.header-tel:hover { color: var(--hd-hi); box-shadow: inset 0 0 0 1px var(--hd-hi); }
.header-tel .tel-icon { width: 18px; height: 18px; display: none; color: var(--hd-ico); transition: color .24s ease; }
.header-tel:hover .tel-icon { color: var(--hd-hi); }
.header-tel .tel-cc { display: none; }
@media (min-width: 1100px) { .header-tel .tel-cc { display: inline; } .header-tel { font-size: 13.5px; } }
@media (max-width: 359px) { .header-tel .tel-text { display: none; } .header-tel .tel-icon { display: block; } .header-tel { padding: 0; } }

.header-cta { flex: none; }
/* 861 to 1023 px: the five nav labels, the number and the CTA share one row; these come after the rules they adjust */
@media (min-width: 861px) and (max-width: 1023px) {
  .brand { --brand-h: 30px; }
  .site-nav a { padding: 0 6px; font-size: 14px; }
  .header-tel { padding: 0 8px; font-size: 12px; }
  .header-cta { padding: 0 12px; font-size: 14px; }
}
/* 375 px and under: the row keeps its 16 px gutter (the full number shows from 360 px; the lockup steps down 360 to 374) */
@media (max-width: 375px) { .header-bar { gap: 8px; } }
@media (min-width: 360px) and (max-width: 374px) { .brand { --brand-h: 27px; } }
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--radius); background: transparent; color: var(--hd-ico);
  box-shadow: inset 0 0 0 1px var(--hd-ring);
  transition: color .24s ease, box-shadow .24s ease;
}
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn:hover { color: var(--hd-hi); box-shadow: inset 0 0 0 1px var(--hd-hi); }
@media (max-width: 599px) { .header-cta { display: none; } }
@media (max-width: 860px) { .site-nav { display: none; } }
@media (min-width: 861px) { .menu-btn { display: none; } }

.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; }
.progress-bar { display: block; height: 100%; background: var(--sky); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 759px) { .progress { display: none; } }

/* ---- the nav drawer (a built-in dialog element from the right, 860 px and under) */
.drawer {
  position: fixed; inset: 0 0 0 auto;
  width: min(88vw, 380px); height: 100%; max-width: none; max-height: none;
  margin: 0 0 0 auto; padding: 0; border: 0;
  background: var(--deck); color: var(--paper);
  box-shadow: var(--shadow-lift);
  overscroll-behavior: contain;
}
.drawer::backdrop { background: rgba(15,17,52,.6); }
.drawer[open] { display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) {
  .drawer { transition: transform .26s cubic-bezier(.2,.7,.2,1), overlay .26s allow-discrete, display .26s allow-discrete; transform: translateX(100%); }
  .drawer[open] { transform: none; }
  @starting-style { .drawer[open] { transform: translateX(100%); } }
  .drawer.is-still { transition: none; }
  @starting-style { .drawer.is-still[open] { transform: none; } }
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 8px 12px 8px 24px; border-bottom: 1px solid var(--rule-dark); }
/* the drawer opens on the header's lockup in the dark bar's inks (WAVE4-FIXLIST item 8; decision 27), drawn still and hidden
   from assistive tech (the dialog is named Menu), so the close button is the first stop; it sizes with the header's --brand-h */
.drawer-brand { margin-right: auto; }
.drawer-close, .dlg-close {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius);
  background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor;
}
.drawer-close svg, .dlg-close svg { width: 20px; height: 20px; }
.drawer-close:hover { color: var(--sky); }
.drawer-list { padding: 12px 12px 4px; }
.drawer-list a {
  display: flex; align-items: center; min-height: 54px; padding: 0 12px;
  border-bottom: 1px solid var(--rule-dark);
  font-family: var(--font-display); font-size: 22px; font-weight: 700; font-stretch: 100%;
  color: var(--paper); text-decoration: none;
}
.drawer-list a:hover, .drawer-list a[aria-current] { color: var(--sky); }
.drawer-list a[aria-current] { box-shadow: inset 0 -2px 0 var(--sky); }
.drawer-foot { display: grid; gap: 12px; padding: 20px 24px calc(24px + env(safe-area-inset-bottom, 0px)); margin-top: auto; }
.drawer-foot .btn { width: 100%; }
.drawer-tel { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--rule-dark); font-family: var(--font-mono); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--paper); text-decoration: none; }
.drawer-tel:hover { color: var(--sky); }

/* ---- the sticky call bar (phones only, under 760 px; the only pinned element there) */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--deck); box-shadow: 0 -1px 0 var(--rule-dark);
  transform: translateY(110%); visibility: hidden;
}
.callbar.is-shown { transform: none; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .callbar { transition: transform .24s cubic-bezier(.2,.7,.2,1), visibility 0s linear .24s; }
  .callbar.is-shown { transition: transform .24s cubic-bezier(.2,.7,.2,1), visibility 0s; }
}
.callbar a { min-height: 48px; padding: 0 10px; font-size: 15px; }
/* the call button stacks a mono "CALL" over the number, so the whole number fits its half of the bar from 320 px up
   (one line, "Call (866) 838-1555", needed 171 px against 118 px at 320 and overflowed at 320 to 375) */
.callbar a.callbar-call { flex-direction: column; gap: 2px; padding: 0 8px; background: transparent; color: var(--paper); border: 1px solid var(--rule-dark); font-family: var(--font-mono); font-weight: 500; line-height: 1.1; }
.callbar-k { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky); }
.callbar-n { font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.callbar a.callbar-call:hover { border-color: var(--sky); }
.callbar a.callbar-call:hover .callbar-n { color: var(--sky); }
@media (min-width: 760px) { .callbar { display: none; } }

/* ---- footer */
.site-footer { padding-block: clamp(48px, 5vw, 80px) 28px; background: var(--slate); color: var(--paper); }
@media (max-width: 759px) { .site-footer { padding-bottom: calc(28px + var(--bar-h) + env(safe-area-inset-bottom, 0px)); } }
.footer-grid { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); } }
.footer-brand svg { width: 196px; height: auto; }
.footer-nap { margin-top: 20px; font-style: normal; display: grid; gap: 4px; color: var(--paper); }
.footer-nap .mono { font-size: 14px; }
.footer-nap a { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; color: var(--sky); }
.footer-hours { margin-top: 10px; color: var(--dim); font-size: 15px; }
.footer-col h2 { font-family: var(--font-mono); font-size: 12px; font-weight: 500; font-stretch: 100%; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.4; color: var(--sky); margin-bottom: 12px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 36px; color: var(--paper); text-decoration: none; }
.footer-links a:hover { color: var(--sky); text-decoration: underline; }
.footer-legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule-dark); display: grid; gap: 18px; }
.footer-legal .legend { color: var(--dim); font-size: 15px; line-height: 1.6; max-width: 30em; }
.footer-legal .legend-note { margin-top: -8px; }
.illustration-note { color: var(--dim); font-size: 14px; line-height: 1.5; max-width: 32em; }
.copyright { color: var(--dim); font-size: 14px; }
.agency-credit { color: var(--dim); font-size: 14px; }
.agency-credit a { color: var(--dim); text-decoration: underline; white-space: nowrap; }
.agency-credit a:hover { color: var(--paper); }
.module-pending { margin: 24px 0; padding: 24px; border-radius: var(--radius); box-shadow: inset 0 0 0 2px var(--stop); color: var(--stop); font-family: var(--font-mono); font-size: 14px; background: var(--paper); }

@media print {
  .site-header { position: static; transform: none !important; }
  /* the header prints in its light state, wherever the page was scrolled */
  .site-header {
    background-color: var(--paper);
    --hd-nav: rgba(34, 40, 43, .8); --hd-tel: var(--blue-text); --hd-ico: var(--navy); --hd-ring: var(--line);
    --hd-hi: var(--blue-text); --hd-mark: var(--blue); --btn-bg: var(--navy); --btn-fg: var(--paper);
  }
  .site-header, .site-header::before, .site-header .header-bar * { transition: none !important; }
  .site-header .brand svg [data-color="1"] { fill: #24266F !important; }
  .site-header .brand svg [data-color="3"] { fill: #FFFFFF !important; }
  .callbar, .drawer, .menu-btn, .progress, .skip-link { display: none !important; }
}

.franchise-disclosure { font-size: 14px; line-height: 1.55; }
.franchise-disclosure summary { display: flex; align-items: center; min-height: 44px; width: fit-content; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.franchise-disclosure summary::before { content: "+"; margin-right: 8px; text-decoration: none; }
.franchise-disclosure[open] summary::before { content: "−"; }
.franchise-disclosure .legend { margin-top: 12px; max-width: 72ch; font-size: 14px; line-height: 1.6; }
.franchise-disclosure-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
/* ==== css/sections.css ==== */
/* sections.css: every section's layout, 375 first, then 760 and 1024 up. No motion rule lives here (motion.css holds
   them); the [data-reveal] hooks are marked in the template only. */

/* ---------------------------------------------------------------- hero (deck) */
.hero { position: relative; padding-block: 28px 44px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.hero-grid > * { min-width: 0; }
.hero-kicker { margin-bottom: 14px; }
/* under 440 px the kicker cannot hold one line: it sets as two lines with no separator, so the dot never strands */
@media (max-width: 439px) { .hero-kicker .k { display: block; } .hero-kicker .sep { display: none; } }
.hero-title { font-size: var(--h1); line-height: 1.02; font-stretch: 75%; color: var(--paper); padding-bottom: 0.06em; }
/* phones: one width for the heading on both pages, stretch 75 under 760 px (WAVE4-FIXLIST item 10; the national page sets its
   own size in national.css). The payoff line "Cleaned from the air." always fits the column, so the heading sets in three
   lines from 320 px up; the size follows the column and stops at the token's 40 px (the pivot measures 7.72 times the font
   size at stretch 75, in Archivo and in its fallback alike) */
@media (max-width: 759px) { .hero-title { font-size: min(var(--h1), calc((100vw - 2 * var(--gutter)) * 0.1275)); } }
/* the three beats on one line where they fit, the payoff in sky on its own line */
.hero-title .pivot { display: block; color: var(--sky); text-wrap: wrap; }
.hero-title .hero-beat { white-space: nowrap; }
/* the heading's fallback follows its stretch (fonts.css), so its lines break where Archivo's will before the web font
   arrives and nothing moves when it swaps in */
.hero-title { font-family: "Archivo Variable", "Archivo Variable Fallback 75", "Helvetica Neue", Arial, sans-serif; }
@media (min-width: 760px) { .hero-title { font-family: var(--font-display); } }
.hero-copy { display: grid; gap: 22px; margin-top: 18px; }
.hero-deck { color: var(--dim); font-size: 16.5px; line-height: 1.55; max-width: 60ch; }
.hero-ctas { display: grid; gap: 12px; }
.hero-ctas .btn { width: 100%; }
.hero-trust { font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 1.6; letter-spacing: 0.01em; color: var(--dim); }
.hero-trust a { color: var(--sky); text-decoration-color: rgba(111,203,255,.45); text-underline-offset: 0.22em; white-space: nowrap; }   /* a named job or market never splits across lines */
.hero-trust a:hover { text-decoration-color: var(--sky); }
.hero-trust .sep { color: var(--fg-2); padding-inline: 0.15em; }
.hero-trust-k { color: var(--paper); }
.hero-media { margin-top: 32px; }
.hero-frame { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--rule-dark); background: #5d7f99; aspect-ratio: 4 / 5; }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-media .caption { color: var(--dim); }
@media (min-width: 600px) {
  .hero-ctas { grid-template-columns: repeat(2, max-content); }
  .hero-ctas .btn { width: auto; min-width: 200px; }
}
@media (min-width: 760px) {
  .hero { padding-block: 48px 64px; }
  .hero-title { font-stretch: 112%; }
  .hero-deck { font-size: var(--lede); }
  .hero-frame { aspect-ratio: 3 / 2; }
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); column-gap: 48px; align-items: start; }
  .hero-kicker, .hero-title { grid-column: 1 / -1; }
  .hero-title { margin-bottom: 8px; }
  .hero-copy { margin-top: 28px; align-content: start; }
  .hero-media { margin-top: 28px; }
}


/* ---------------------------------------------------------------- the next step that closes a section */
.section-next { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: clamp(32px, 4vw, 56px); padding-top: clamp(22px, 2.6vw, 30px); border-top: 1px solid var(--rule); font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--head); text-wrap: balance; }
.section-next .btn { flex: none; font-family: var(--font-body); letter-spacing: 0; }
.section-next .link-arrow { font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; letter-spacing: 0; color: var(--accent); }
.section-next a[href^="tel:"] { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; }
@media (max-width: 479px) { .section-next .btn { width: 100%; } }
/* a link-only next step sits under a list that already ends on a rule */
.section-next.is-quiet { margin-top: 26px; padding-top: 0; border-top: 0; }

/* ---------------------------------------------------------------- who calls us (mist) */
.who-list { border-top: 1px solid var(--rule); }
.who-row { display: grid; gap: 18px; padding-block: 32px; border-bottom: 1px solid var(--rule); }
.who-row > * { min-width: 0; }
.who-type { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.05; letter-spacing: -0.015em; color: var(--navy); }
.who-line { margin-top: 10px; color: var(--ink-2); max-width: 40ch; }
.who-line q { quotes: none; }
.who-quote blockquote p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }
.who-quote blockquote p::before { content: "\201C"; }
.who-quote blockquote p::after { content: "\201D"; }
@media (min-width: 900px) {
  .who-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; padding-block: 40px; }
  .who-quote blockquote p { font-size: 1.125rem; }
}
/* the one line that tells the reader every building has its own result */
.who-typicality { padding-top: 22px; max-width: 31em; color: var(--ink-2); font-size: 15px; line-height: 1.55; }

/* ---------------------------------------------------------------- selected work (paper) */
.work-plates { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.work-plates > * { min-width: 0; }
.plate { position: relative; border-radius: var(--radius); }
.plate-body { display: grid; gap: 18px; align-content: start; }
.plate-title { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--head); }
.plate-title button { all: unset; cursor: pointer; border-radius: var(--radius); }
.plate-title button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.plate-title button .open-glyph { display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.22em; vertical-align: 0.04em; color: var(--accent); transition: transform .16s ease; }
.plate-title button:hover .open-glyph { transform: translate(2px, -2px); }
.plate-lines { display: grid; gap: 2px; font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--fg-2); }
.tiles-label { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
/* tiles size from their own column (container queries), so a published figure never clips at any width */
.tiles-wrap { container-type: inline-size; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 8px; background: var(--rule); border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--rule); }
.tiles:has(> .tile:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; min-width: 0; padding: 14px 10px 14px 11px; background: var(--surface); }
.tile .num { margin: 0; font-size: clamp(18px, 6.3cqi, var(--num)); line-height: 1; letter-spacing: -0.02em; color: var(--accent); white-space: nowrap; }
/* a published figure with words in it ("55 lb or less") sets on two balanced lines where its tile is narrow */
.tile .num.is-long { white-space: normal; text-wrap: balance; line-height: 1.05; }
.tiles:has(> .tile:nth-child(4)) .num { font-size: clamp(18px, 9.5cqi, var(--num)); }
.tile .tile-label { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; line-height: 1.35; letter-spacing: 0.03em; color: var(--fg-2); }
@container (min-width: 460px) {
  .tile { padding: 16px 14px; }
  .tiles:has(> .tile:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tiles:has(> .tile:nth-child(4)) .num { font-size: clamp(18px, 4.6cqi, var(--num)); }
}
.plate-paras { display: grid; gap: 12px; color: var(--fg); }
.plate--photo .plate-quote, .plate--half .plate-paras { max-width: 33em; }
/* running paragraphs hold about 68 characters per line (60 to 70) wherever their column is wider */
.plate-paras p, .safety-note > p, .tech-block > p { max-width: 31em; }
.plate-quote { padding-left: 16px; border-left: 2px solid var(--accent); }
.plate-quote blockquote p { font-style: italic; line-height: 1.6; color: var(--fg); }
.plate-quote blockquote p + p { margin-top: 10px; }
.plate-quote blockquote p::before { content: "\201C"; }
.plate-quote blockquote p:last-child::after { content: "\201D"; }
.plate-src { margin-top: -8px; }
.plate-note { margin-top: -6px; font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.press-line { line-height: 1.6; }
.press-line a { white-space: nowrap; }
.plate-actions { display: grid; gap: 12px; }
.plate-actions .btn { width: 100%; }
@media (min-width: 480px) { .plate-actions { display: flex; flex-wrap: wrap; } .plate-actions .btn { width: auto; } }
.plate-photos { display: grid; gap: 14px; }
.plate-photos figure { min-width: 0; }
.plate-photos .plate-img { aspect-ratio: 16 / 9; }
.plate-photos figure + figure .plate-img { aspect-ratio: 3 / 2; }
.plate--type { padding: 26px 20px; }
.plate-main, .plate-side { display: grid; gap: 18px; align-content: start; min-width: 0; }
.plate--photo { display: grid; gap: 24px; }
.plate--half { display: grid; gap: 22px; padding-top: 4px; }
.plate--half .plate-img { aspect-ratio: 1187 / 724; }
.status-chip { color: var(--caution); box-shadow: inset 0 0 0 1px currentColor; }
@media (min-width: 760px) {
  .plate--type { padding: 36px 32px; }
  .plate-photos { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .plate-photos figure + figure { margin-top: 64px; }
  .plate--half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
}
@media (min-width: 1024px) {
  .work-plates { gap: 32px; }
  .plate--type { padding: 40px 40px 44px; }
  .plate--type .plate-body { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 56px; align-items: center; }
  .plate--type .plate-main { align-self: start; }
}
/* the Empower spread from 1200 px (below it the photos sit side by side above the story, as at 768, so the story never runs
   in a narrow column beside them): the job photo overlaps the skyline's lower right edge only a little, so the skyline's
   caption keeps one line beside it, and both ride beside the story while it is read */
@media (min-width: 1200px) {
  .plate--photo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
  .plate--photo .plate-photos { grid-template-columns: minmax(0, 1fr); position: sticky; top: calc(var(--nav-h) + 24px); }
  .plate--photo .plate-photos figure:first-child .caption { max-width: 27%; white-space: nowrap; }
  .plate--photo .plate-photos figure + figure { width: 70%; margin: -34px 0 0 auto; position: relative; }
  .plate--photo .plate-photos figure + figure .plate-img { box-shadow: 0 0 0 8px var(--paper); }
}

/* ---------------------------------------------------------------- shells for the Flight Brief and Locations sections */
.band { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.band-backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.band-backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18; }
.band-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--deck) 0%, rgba(15,17,52,0) 22%, rgba(15,17,52,0) 70%, var(--deck) 100%); }
.brief-inner, .locations-inner { position: relative; }
.locations-head { display: grid; gap: 28px; margin-bottom: clamp(28px, 4vw, 48px); }
.locations-head .section-head { margin-bottom: 0; }

/* ---------------------------------------------------------------- services (paper) */
.svc-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.svc-grid > * { min-width: 0; }
.svc-card { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius); background: var(--paper); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .16s ease; }
.svc-card:hover { box-shadow: 0 0 0 1px var(--blue-text); }
.svc-media { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; background: var(--mist); }
.svc-media img { width: 100%; height: 100%; object-fit: cover; }
.svc-media--type { display: grid; align-content: center; padding: clamp(20px, 2.2vw, 28px); background: var(--deck-2); color: var(--paper); }
.svc-media--type .svc-method-big { font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--paper); }
.svc-media--type .kicker { margin-bottom: 14px; color: var(--sky); }
.svc-method-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.svc-method-points li { padding-top: 10px; border-top: 1px solid var(--rule-dark); font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); font-weight: 600; line-height: 1.3; }
.svc-body { display: grid; gap: 12px; align-content: start; padding: 20px 20px 22px; }
.svc-title { font-size: 1.375rem; }
.svc-open { all: unset; cursor: pointer; }
.svc-open::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); z-index: 3; }
.svc-open::after { content: none; }
.svc-page { color: var(--navy); text-decoration: none; }
.svc-page:hover { text-decoration: underline; text-underline-offset: .18em; }
.svc-page:focus-visible, .svc-open:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 4px; border-radius: 2px; }
.svc-open.svc-more { min-height: 44px; padding-block: 10px; display: inline-flex; gap: 8px; cursor: pointer; color: var(--blue-text); font: 600 15px/1.4 var(--font-body); }
.svc-media:has(img[src*="service-solar-real"]) img { object-position: 34% 50%; }
.svc-open:focus-visible::after { outline: 2px solid var(--blue); outline-offset: 2px; }
.svc-desc { color: var(--ink); }
.svc-method { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.5; color: var(--ink-2); }
.svc-method b { font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; color: var(--blue-text); }
.svc-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; font-weight: 600; font-size: 15px; color: var(--blue-text); justify-self: start; }
.svc-more .arrow { width: 15px; height: 15px; transition: transform .16s ease; }
.svc-card:hover .svc-more .arrow { transform: translateX(4px); }
/* in a row of cards the "Details" links share one baseline along the bottom */
.svc-card .svc-body { display: flex; flex-direction: column; }
.svc-card .svc-more { margin-top: auto; align-self: flex-start; }
.svc-rows { display: grid; gap: 0; margin-top: 28px; border-top: 1px solid var(--line); }
.svc-row { position: relative; display: grid; gap: 10px; padding: 22px 4px; border-bottom: 1px solid var(--line); }
.svc-row:hover .svc-title { color: var(--blue-text); }
.svc-foot { margin-top: 28px; }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .svc-row { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr) auto; align-items: center; gap: 28px; padding: 26px 8px; }
  .svc-row .svc-method { padding-top: 0; border-top: 0; }
}

/* the before and after wipe (restoration card, technology pair): a built-in range input drives --wipe; no script means a 50/50 split */
.wipe { position: relative; overflow: hidden; --wipe: 50%; background: var(--mist); }
.wipe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wipe .wipe-before { clip-path: inset(0 calc(100% - var(--wipe)) 0 0); }
.wipe-line { position: absolute; top: 0; bottom: 0; left: var(--wipe); width: 2px; margin-left: -1px; background: var(--paper); box-shadow: 0 0 0 1px rgba(15,17,52,.35); pointer-events: none; z-index: 2; }
.wipe-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px rgba(15,17,52,.35); }
.wipe-range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.wipe-range:focus-visible + .wipe-line::after { outline: 2px solid var(--blue); outline-offset: 2px; }
.wipe-tag { position: absolute; bottom: 10px; z-index: 3; pointer-events: none; color: var(--paper); background: rgba(15,17,52,.84); box-shadow: inset 0 0 0 1px rgba(247,249,251,.22); }
.wipe-tag.is-before { left: 10px; }
.wipe-tag.is-after { right: 10px; }
.svc-card .wipe, .plate-img.has-wipe > .wipe { position: absolute; inset: 0; } /* the dialog clones a card's wipe out of the card, so the pair is sized there too */
.svc-card .wipe-range { z-index: 4; }

/* ---------------------------------------------------------------- safety (deck band) */
.safety .section-head h2 { max-width: 30ch; }
.mission-head { margin-bottom: 22px; color: var(--paper); }
.mission { position: relative; display: grid; gap: 26px; margin: 0 0 clamp(44px, 5vw, 72px); padding: 0; list-style: none; }
.mission-step { position: relative; min-width: 0; padding-left: 32px; }
.mission-step .kicker { margin-bottom: 6px; }
.mission-step h4 { font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: 1.25rem; line-height: 1.2; color: var(--paper); }
.mission-step p:not(.kicker) { margin-top: 8px; color: var(--dim); line-height: 1.55; max-width: 34ch; }
/* the waypoint: a ring with an open center, so a drawn line's lit dot can show through it */
.mission-dot { position: absolute; left: 0; top: 2px; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--sky); }
@media (min-width: 900px) {
  .mission { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .mission-step { padding: 30px 0 0; }
  .mission-step .kicker { margin-bottom: 8px; }
}
.access-head { margin-bottom: 18px; color: var(--paper); }
.access-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.access-grid > * { min-width: 0; }
.access-card { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 22px 20px; border-radius: var(--radius); background: var(--deck-2); box-shadow: 0 0 0 1px var(--rule-dark); }
.access-card h4 { font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: 1.375rem; line-height: 1.2; color: var(--paper); }
.access-card > p:not(.src) { color: var(--paper); line-height: 1.6; }
.checklists { margin-top: clamp(40px, 5vw, 72px); }
.checklists-head { display: grid; gap: 8px; margin-bottom: 22px; }
.checklists-head h3 { color: var(--paper); }
.checklist-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.checklist { padding: 16px 0 0; border-top: 2px solid var(--sky); }
.checklist h4 { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky); margin-bottom: 12px; }
.checklist ul { list-style: none; margin: 0; padding: 0; }
.checklist li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--rule-dark); color: var(--paper); line-height: 1.45; }
.checklist li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 9px; height: 5px; border-left: 2px solid var(--sky); border-bottom: 2px solid var(--sky); transform: rotate(-45deg); }
.checklist li small { display: block; margin-top: 3px; color: var(--dim); font-size: 0.9em; line-height: 1.45; }
.checklist ul ul { margin-top: 6px; }
.checklist ul ul li { padding-left: 16px; border-top: 0; color: var(--dim); font-size: 0.94em; }
.checklist ul ul li::before { width: 5px; height: 5px; top: 1.1em; border: 0; border-radius: 50%; background: var(--dim); transform: none; }
.safety-split { display: grid; gap: 32px; margin-top: clamp(40px, 5vw, 72px); }
.safety-split > * { min-width: 0; }
.safety-notes { display: grid; gap: 28px; align-content: start; }
.safety-note h3 { margin-bottom: 10px; }
.safety-note > p { color: var(--paper); line-height: 1.6; }
.safety-quote { margin-top: 16px; padding-left: 16px; border-left: 2px solid var(--sky); }
.safety-note blockquote p { color: var(--paper); line-height: 1.6; }
.safety-note .quote-text::before { content: "\201C"; }
.safety-note .quote-text::after { content: "\201D"; }
.leaders { display: grid; gap: 6px; margin-top: 10px; }
.leaders li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; padding: 8px 0; border-top: 1px solid var(--rule-dark); }
.leaders .name { color: var(--paper); font-weight: 600; }
.leaders .role { color: var(--dim); font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.safety-photo .plate-img { aspect-ratio: 16 / 9; }
.safety-side { display: grid; gap: 28px; align-content: start; min-width: 0; }
.safety-link { margin-top: 8px; }
.safety-link a { color: var(--sky); }
.band-quote { margin-top: clamp(40px, 5vw, 72px); padding: clamp(28px, 4vw, 56px); border-radius: var(--radius); }
.band-quote blockquote p { font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: clamp(1.375rem, 1.05rem + 1.1vw, 2rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--paper); max-width: 46ch; }
.band-quote blockquote p::before { content: "\201C"; }
.band-quote blockquote p::after { content: "\201D"; }
.band-quote .attrib { color: var(--paper); }
.band-quote-line { margin-top: clamp(22px, 2.6vw, 32px); padding-top: clamp(18px, 2vw, 24px); border-top: 1px solid var(--rule); font-weight: 500; font-size: var(--lede); line-height: 1.5; color: var(--paper); max-width: 31em; }
@media (min-width: 900px) {
  .access-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the aviation and site lists stack in the first column, the longer crew list holds the second: the two columns end
     together (three side by side left two short and one long) */
  .checklist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 26px; align-items: start; }
  .checklist-grid > .checklist:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
  .safety-split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; }
  .safety-side { position: sticky; top: calc(var(--nav-h) + 28px); }
}

/* ---------------------------------------------------------------- technology (mist) */
.tech-wipe { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.tech-wipe img { object-position: 60% 50%; }
@media (min-width: 760px) { .tech-wipe { aspect-ratio: 2000 / 848; } .tech-wipe img { object-position: 50% 50%; } }
.tech-photo { aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; }
.tech-photo img { object-position: 65% 50%; }
@media (min-width: 760px) { .tech-photo { aspect-ratio: 16 / 9; } }
.tech-wipe-label { margin-top: 10px; }
.tech-grid { display: grid; gap: 36px; margin-top: clamp(32px, 4vw, 56px); }
.tech-grid > * { min-width: 0; }
.tech-block { display: grid; gap: 14px; align-content: start; }
.tech-block + .tech-block { gap: 32px; }
.tech-note { display: grid; gap: 10px; }
.tech-note h3 { font-size: 1.375rem; }
.instrument > p:not(.scale-cap) { margin-top: 18px; }
.tech-block h3 { font-size: 1.5rem; }
.foam-lines { display: grid; gap: 4px; font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--navy); }
.tech-plate .plate-img { aspect-ratio: 4 / 3; }
.instrument { padding: 20px 18px 18px; border-radius: var(--radius); background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.scale { position: relative; height: 54px; margin: 6px 4px 6px; }
.scale-track { position: absolute; left: 0; right: 0; top: 18px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #8FD3FF 0%, var(--blue) 45%, var(--navy) 100%); }
.scale-ticks { position: absolute; left: 0; right: 0; top: 30px; height: 8px; background: repeating-linear-gradient(90deg, var(--ink-2) 0 1px, transparent 1px calc(100% / 6)); background-size: calc(100% + 1px) 100%; }
.scale-end { position: absolute; top: 40px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.scale-end.lo { left: 0; }
.scale-end.hi { right: 0; }
.scale-cap { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-text); }
.psi-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.psi-row { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.psi-row .psi-fig { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--navy); }
.tech-aircraft { padding: 16px 18px; border-radius: var(--radius); background: var(--paper); box-shadow: inset 3px 0 0 var(--blue-text), 0 0 0 1px var(--line); color: var(--ink); line-height: 1.55; }
@media (min-width: 900px) {
  .tech-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 56px; align-items: stretch; }
  .psi-row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 16px; }
  .tech-grid > .tech-block:first-child { display: flex; flex-direction: column; }
  .tech-grid > .tech-block:first-child .tech-plate { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .tech-grid > .tech-block:first-child .tech-plate .plate-img { flex: 1 1 auto; aspect-ratio: auto; min-height: 340px; }
}

/* ---------------------------------------------------------------- franchise (deck-2 over deck) */
.franchise { padding-top: 0; background: var(--deck-2); }
.franchise-hero { position: relative; width: 100%; aspect-ratio: 21 / 9; max-height: 560px; overflow: hidden; } /* width so the 560 px cap stays full bleed above 1312 px */
.franchise-hero img { width: 100%; height: 100%; object-fit: cover; }
.franchise-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,17,52,.12) 0%, rgba(15,17,52,0) 45%, rgba(24,27,75,.72) 82%, var(--deck-2) 100%); pointer-events: none; }
.franchise-hero--photo img { object-position: 50% 68%; }
.franchise-hero--photo::after { background: linear-gradient(180deg, transparent 65%, rgba(24,27,75,.3) 87%, var(--deck-2) 100%); }
@media (max-width: 759px) { .franchise-hero--photo { aspect-ratio: 3 / 2; } }
.franchise-body { position: relative; margin-top: 8px; }
.franchise-lede { color: var(--paper); max-width: 30em; }
.manifest { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--rule-dark); }
.manifest-row { position: relative; display: grid; gap: 8px; align-content: start; padding: 18px 44px 18px 2px; border-bottom: 1px solid var(--rule-dark); }
.manifest-row h3 { font-size: 1.25rem; color: var(--paper); }
.manifest-open { all: unset; cursor: pointer; }
.manifest-open::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius); }
.manifest-open:focus-visible::after { outline: 2px solid var(--blue); outline-offset: -2px; }
.manifest-row p { color: var(--dim); }
.manifest-row .glyph { position: absolute; right: 8px; top: 22px; width: 18px; height: 18px; color: var(--sky); transition: transform .16s ease; }
.manifest-row:hover .glyph { transform: translateX(3px); }
.manifest-row:hover h3 { color: var(--sky); }
.manifest-more { padding: 18px 2px 20px; border-bottom: 1px solid var(--rule-dark); }
.manifest-group { color: var(--dim); font-size: 15px; line-height: 1.5; }
.manifest-titles { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.manifest-titles li { padding: 6px 12px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--rule-dark); color: var(--paper); font-size: 15px; font-weight: 600; line-height: 1.3; }
.manifest-fit { margin-top: 22px; font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.375rem); line-height: 1.35; color: var(--paper); max-width: 46ch; }
.franchise-cta { margin-top: clamp(36px, 4vw, 56px); display: grid; gap: 18px; }
.franchise-cta .btn { justify-self: start; }
@media (max-width: 479px) { .franchise-cta .btn { justify-self: stretch; } }
.franchise-cta .legend { color: var(--dim); font-size: var(--body-m); line-height: 1.6; max-width: 30em; }
.legend-note { font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; color: var(--fg-2); max-width: 40em; }
.franchise-cta .legend-note { margin-top: -8px; }
@media (min-width: 760px) { .franchise-cta .legend { font-size: var(--body); } }
@media (min-width: 900px) {
  .franchise-body { margin-top: 12px; }
  .manifest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-items: stretch; }
  .manifest-more, .manifest-fit { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- FAQ (paper) */
.faq-list { border-top: 1px solid var(--line); max-width: 58rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 16px;
  min-height: 56px; padding: 16px 2px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: 1.25rem; line-height: 1.3; color: var(--navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .pm { position: relative; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
.faq-item summary .pm::before, .faq-item summary .pm::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; background: var(--blue-text); }
.faq-item summary .pm::after { transform: rotate(90deg); }
.faq-item[open] summary .pm::after { transform: none; }
.faq-item summary:hover { color: var(--blue-text); }
.faq-a { padding: 0 2px 22px; color: var(--ink); max-width: 29em; }

/* ---------------------------------------------------------------- quote (mist) */
.quote-grid { display: grid; gap: 0; }
.quote-grid > * { min-width: 0; }
.quote-intro .lede { color: var(--ink); }
.quote-intro .lede a { white-space: nowrap; }
.quote-direct { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; margin-top: 22px; }
.quote-direct .kicker { flex: 1 0 100%; margin-bottom: 2px; }
.quote-direct a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
/* the closing section's own copy of the form runs the width of the container: three fields a row from 1024 px */
@media (min-width: 1024px) {
  #quote-form .form-quote-fields .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #quote-form .seg { max-width: 46rem; }
  #quote-form .form-brief-note { max-width: 46rem; }
  #quote-form .form-notice > span, #quote-form .form-consent label { max-width: 48ch; }
}

/* ---------------------------------------------------------------- print: the completed page, every answer open */
@media print {
  .band-backdrop, .wipe-range, .wipe-line { display: none !important; }
  .faq-a { display: block !important; }
}

.manifest-page { color: var(--paper); text-decoration: none; }
.manifest-page:hover { text-decoration: underline; text-underline-offset: .18em; }
.manifest-titles a { color: var(--sky); text-underline-offset: .18em; }
.franchise-index { margin-top: 28px; }
.brand img.brand-owner { display: block; width: 196px; height: 42px; object-fit: contain; }
.footer-owner-logo { display: block; width: 236px; height: auto; max-width: 100%; }
.footer-brand--foam { padding: 0; }
.form-optional { margin: 18px 0; padding-block: 14px; border-block: 1px solid var(--line); }
.form-optional summary { cursor: pointer; color: var(--blue-text); font-weight: 600; }
.form-optional .form-grid { margin-top: 16px; }
@media (max-width: 759px) { .brand img.brand-owner { width: 150px; height: 38px; } }

/* Inbox contact, with honest email delivery instead of an unattended live-chat claim. */
.message-launch { position: fixed; right: 20px; bottom: 22px; z-index: 80; display: inline-flex; align-items: center; min-height: 44px; padding: 11px 17px; border: 1px solid var(--sky); border-radius: var(--radius); color: var(--paper); background: var(--deck); box-shadow: 0 5px 20px rgba(6,47,74,.16); text-decoration: none; font-weight: 600; }
.message-launch:hover { color: var(--sky); }
.message-launch > svg { display: none; }
.message-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.message-dialog::backdrop { background: rgba(6,30,48,.7); }
.message-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.message-head h2 { font-size: 1.75rem; color: var(--navy); }
.message-head .kicker { margin-bottom: 9px; }
.message-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--navy); }
.message-close svg { width: 20px; height: 20px; }
.message-intro { margin-block: 16px 22px; color: var(--ink-2); }
.message-dialog .form-grid { grid-template-columns: minmax(0,1fr); }
.message-dialog .form-notice { display: block; margin-bottom: 18px; font-size: 12px; }
.message-dialog .form-notice svg { display: none; }
.message-status { margin-top: 16px; font-size: 15px; }
html.message-open { overflow: hidden; }
html.message-open .message-launch, html.message-open .callbar, html.dlg-open .message-launch, html.qdlg-open .message-launch { visibility: hidden; }
@media (max-width: 759px) { .message-launch { right: 16px; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 14px); width: 48px; height: 48px; padding: 12px; border-radius: 50%; justify-content: center; } .message-launch > svg { display: block; width: 24px; height: 24px; flex: none; } .message-launch > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .message-dialog { padding: 20px; } }
@media print { .message-launch, .message-dialog { display: none !important; } }
/* ==== css/forms.css ==== */
/* forms.css: the quote form, the franchise partial and modal, validation states, the consent rows, and the one
   content dialog (#dialog, dlg- classes) with its four kinds. Input borders use --ink-2 so a field's edge clears the 3:1
   non-text contrast bar on paper (--line is a hairline and carries no UI boundary). */

/* ---------------------------------------------------------------- the sheet */
.form-sheet { position: relative; padding: 22px 18px 24px; border-radius: var(--radius); background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
@media (min-width: 640px) { .form-sheet { padding: 32px 32px 34px; } }
.form-notice { display: block; margin: 12px 0; padding: 0; background: none; box-shadow: none; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.form-notice svg { display: none; }
.form-notice a { color: var(--blue-text); white-space: nowrap; }
.form-sheet fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.form-sheet legend { padding: 0; }
.form-grid { display: grid; gap: 16px 18px; grid-template-columns: minmax(0, 1fr); }
.form-grid > * { min-width: 0; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .form-field.is-wide { grid-column: 1 / -1; }
}
.form-field { display: grid; gap: 6px; align-content: start; }
.form-label { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.form-label .req { color: var(--ink-2); font-weight: 500; font-size: 13px; margin-left: 4px; }
.form-help { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.form-sheet input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-sheet select,
.form-sheet textarea {
  width: 100%; min-height: 48px; padding: 11px 13px;
  border: 1px solid var(--ink-2); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
  font-size: 16px; line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-sheet select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.form-sheet textarea { min-height: 132px; resize: vertical; }
.form-sheet input:hover, .form-sheet select:hover, .form-sheet textarea:hover { border-color: var(--navy); }
.form-sheet input:focus-visible, .form-sheet select:focus-visible, .form-sheet textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--navy); }
.form-error { display: none; gap: 6px; align-items: start; font-size: 14px; line-height: 1.4; color: var(--stop); }
.form-error svg { width: 15px; height: 15px; margin-top: 2px; flex: none; }
.form-field.is-invalid .form-error { display: flex; }
.form-field.is-invalid input, .form-field.is-invalid select, .form-field.is-invalid textarea { border-color: var(--stop) !important; box-shadow: inset 3px 0 0 var(--stop); }
.form-field.is-valid input, .form-field.is-valid select { border-color: var(--go); }

/* the company's own two-option selector */
.form-sheet .form-swap { margin: 0 0 22px; }
.form-swap .form-label { display: block; margin-bottom: 8px; }
.seg { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .seg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.seg label { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--ink-2); cursor: pointer; font-weight: 600; line-height: 1.3; color: var(--ink); background: var(--paper); transition: box-shadow .15s ease, background-color .15s ease; }
.seg input { appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border-radius: 50%; border: 2px solid var(--ink-2); background: var(--paper); display: grid; place-items: center; }
.seg input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--navy); transform: scale(0); transition: transform .12s ease; }
.seg input:checked { border-color: var(--navy); }
.seg input:checked::before { transform: scale(1); }
.seg label:has(input:checked) { box-shadow: inset 0 0 0 2px var(--navy); background: var(--mist); }
.seg input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* the consent row: one unchecked, optional box directly above the submit button */
.form-consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 20px; padding: 14px; border-radius: var(--radius); background: var(--mist); }
.form-consent input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--navy); }
.form-consent label { font-size: 14px; line-height: 1.55; color: var(--ink); }
.form-consent a { color: var(--blue-text); }
.form-actions { display: grid; gap: 12px; margin-top: 20px; }
.form-actions .btn { width: 100%; }
@media (min-width: 640px) { .form-actions { grid-template-columns: max-content minmax(0, 1fr); align-items: center; } .form-actions .btn { width: auto; min-width: 240px; } }
.form-actions .form-help { margin: 0; }
.hp { display: none !important; }

/* designed states */
.form-state { margin-top: 18px; padding: 16px 16px 16px 18px; border-radius: var(--radius); font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.form-state:focus { outline: none; }
.form-success { background: #EAF4EE; box-shadow: inset 4px 0 0 var(--go), 0 0 0 1px rgba(30,123,70,.35); }
.form-fail { background: #FBECEA; box-shadow: inset 4px 0 0 var(--stop), 0 0 0 1px rgba(179,38,30,.35); }
.form-state strong { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.form-success strong { color: var(--go); }
.form-fail strong { color: var(--stop); }
.form-state a { color: var(--blue-text); font-weight: 600; }
.form-state .form-designed { margin-top: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.form-sheet.is-sending .btn[type="submit"] { cursor: progress; }
.form-sheet.is-sending .btn[type="submit"]::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .form-sheet.is-sending .btn[type="submit"]::after { animation: dw-spin .8s linear infinite; }
}
@keyframes dw-spin { to { transform: rotate(360deg); } }

/* the franchise partial (shared by the modal and the quote form's swap) */
.form-franchise { display: grid; gap: 16px; }
.form-franchise .legend { padding: 14px 16px; border-radius: var(--radius); background: var(--mist); box-shadow: inset 3px 0 0 var(--navy); font-size: var(--body-m); line-height: 1.6; color: var(--ink); }
@media (min-width: 760px) { .form-franchise .legend { font-size: var(--body); } }
.form-intl { padding: 12px 14px; border-radius: var(--radius); background: #FFF6E5; box-shadow: inset 3px 0 0 var(--caution); color: var(--ink); font-weight: 600; }
.form-intl a { color: var(--blue-text); }
.form-franchise .form-consent { margin-top: 0; }
.form-franchise .legend-note { margin-top: -8px; color: var(--ink-2); }
.dlg-metro { margin-top: 8px; line-height: 1.55; }
.dlg-body .plate-note { margin-top: -6px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.form-field .form-help { margin: 0; }
.form-franchise .q-link { font-size: 14.5px; }

/* ---------------------------------------------------------------- the one content dialog */
.dlg {
  width: min(760px, calc(100vw - 32px)); max-width: none; max-height: min(90vh, 960px);
  padding: 0; border: 0; border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.dlg[open] { display: flex; flex-direction: column; }
.dlg-inner { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; transform-origin: 0 0; }
.dlg::backdrop { background: rgba(15,17,52,.64); }
@media (max-width: 639px) {
  .dlg { width: 100vw; height: 100%; max-height: none; margin: 0; inset: 0; border-radius: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .dlg[open] { animation: dlg-in .22s cubic-bezier(.2,.7,.2,1); }
  .dlg[open]::backdrop { animation: dlg-fade .22s ease; }
}
@keyframes dlg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dlg.is-still[open], .dlg.is-still[open]::backdrop, .dlg.is-drop[open], .dlg.is-drop[open]::backdrop { animation: none; }
@keyframes dlg-fade { from { opacity: 0; } to { opacity: 1; } }
.dlg-head {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 6px 16px; align-items: start;
  padding: 16px 16px 14px 20px; background: var(--paper); box-shadow: 0 1px 0 var(--line);
}
@media (min-width: 640px) { .dlg-head { padding: 22px 22px 16px 32px; } }
.dlg-kicker { grid-column: 1; }
.dlg-title { grid-column: 1; font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--navy); }
.dlg-title:focus { outline: none; }
.dlg-close { grid-column: 2; grid-row: 1 / span 2; align-self: start; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-2); }
.dlg-close:hover { color: var(--blue-text); box-shadow: inset 0 0 0 1px var(--blue-text); }
.dlg .drop-slot { display: none; }
/* inside a dialog a field scrolls to just under the sticky head: the scroll container's padding is the head's height (set on
   open), so the page's own anchor margin does not add to it (WCAG 2.4.11) */
dialog [id] { scroll-margin-top: 0; }
.dlg-body, .dlg-franchise { display: grid; gap: 18px; padding: 20px 20px 28px; }
@media (min-width: 640px) { .dlg-body, .dlg-franchise { padding: 26px 32px 36px; } }
.dlg-figure .plate-img { aspect-ratio: 3 / 2; }
.dlg-figure { max-width: var(--fig-max, none); }
.dlg-figure.is-wide .plate-img { aspect-ratio: 21 / 9; }
.dlg-lead p { font-size: 1.0625rem; line-height: 1.6; }
.dlg-lead p + p { margin-top: 12px; }
.dlg-quote { padding-left: 16px; border-left: 2px solid var(--blue-text); }
.dlg-quote p { line-height: 1.6; }
.dlg-quote p.quote-text::before { content: "\201C"; }
.dlg-quote p.quote-text:last-child::after { content: "\201D"; }
.dlg-quote p.quote-text + p.quote-text { margin-top: 10px; }
.dlg-list-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-text); }
.dlg-list { display: grid; gap: 0; margin-top: 8px; border-top: 1px solid var(--line); }
.dlg-list li { padding: 9px 0 9px 20px; position: relative; border-bottom: 1px solid var(--line); line-height: 1.45; }
.dlg-list li::before { content: ""; position: absolute; left: 3px; top: 1.05em; width: 7px; height: 7px; border-radius: 1px; background: var(--blue); transform: rotate(45deg); }
@media (min-width: 640px) { .dlg-list.is-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; } }
.dlg-meta { display: grid; gap: 4px; font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.5; color: var(--ink-2); }
.dlg-meta b { color: var(--ink); font-weight: 700; }
.dlg-src { font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--ink-2); }
.dlg-cta { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.dlg-cta .btn { max-width: 100%; white-space: normal; }
.dlg .tiles { background: var(--line); }
.dlg .tile { background: var(--paper); }
.dlg .tile .num { color: var(--blue-text); }
.dlg-note { padding: 6px 14px; border-radius: var(--radius); background: var(--mist); font-size: 15px; }
.dlg-note a { display: inline-flex; align-items: center; min-height: 44px; }
.dlg-quote + .dlg-src { margin-top: 8px; }

/* ---------------------------------------------------------------- the forms' finished states */
/* the Flight Brief rides in the form: one line at the top of the quote fields says so */
.form-brief-note {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start;
  margin: 0 0 18px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--mist); box-shadow: inset 3px 0 0 var(--navy);
  font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ink);
}
.form-brief-note svg { width: 18px; height: 18px; margin-top: 1px; color: var(--navy); }
/* the phone, wherever a form prints it, in the instrument face */
.form-notice a[href^="tel:"], .form-state a[href^="tel:"], .form-help a[href^="tel:"], .form-intl a[href^="tel:"] {
  font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0;
}
/* "Prefer the phone?": the number is a whole thumb target on phones (WAVE4-FIXLIST item 19) */
@media (max-width: 759px) { .form-help a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; } }
/* the long form lines held to a reading measure, counted in characters (item 11) */
.form-consent label { max-width: 48ch; }
/* a sent form: the card says what happens next, the button reads Sent, one link starts another request */
.form-reset { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--blue-text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.form-reset:hover { text-decoration-thickness: 2px; }
.form-sheet.is-sent .btn[type="submit"] { opacity: 1; background: var(--go); border-color: var(--go); color: var(--paper); cursor: default; }
/* fail-loud: the phone is the whole recovery, so it is a thumb-sized button, with the request ready to mail */
.form-fail-actions { display: grid; gap: 10px; margin-top: 14px; }
.form-state .btn { text-decoration: none; }
.form-state .btn-primary { color: var(--btn-fg); }
.form-state .btn-outline { color: var(--head); background: var(--paper); }
.form-fail-actions .btn { width: 100%; min-height: 48px; }
.form-fail-actions .form-fail-call .mono { font-weight: 500; font-variant-numeric: tabular-nums; }
@media (min-width: 640px) {
  .form-fail-actions { grid-template-columns: repeat(2, max-content); }
  .form-fail-actions .btn { width: auto; }
}

/* ---------------------------------------------------------------- the drop: the mark that flies, the slot it lands in */
.drop-slot { width: 19px; height: 26px; flex: none; }
.drop-slot .drop-mark, .drop-fly .drop-mark { display: block; width: 100%; height: 100%; }
.is-dropping .drop-slot { visibility: hidden; }
.drop-fly {
  position: fixed; inset: auto; left: 0; top: 0; width: 19px; height: 26px;
  margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible;
  pointer-events: none; transform-origin: 50% 50%;
}
.drop-fly:not(:popover-open) { display: none; }

/* ---------------------------------------------------------------- the quote sheet (#quote-dialog) and the franchise form's
   frame: one system. A deck-2 panel with a 1 px sky rim (four inset strokes, the same the drop draws while it grows), the
   mono kicker and the title on the dark head, the paper form card inside. The page behind gets the deck tint and a 10 px
   blur (a deeper tint where blur is not supported, and under Reduce Motion). */
.qdlg, .dlg[data-kind="franchise"] {
  --rim: inset 1px 0 0 0 var(--sky), inset -1px 0 0 0 var(--sky), inset 0 1px 0 0 var(--sky), inset 0 -1px 0 0 var(--sky);
  background: var(--deck-2); color: var(--paper);
  box-shadow: var(--rim), var(--shadow-lift);
  transform-origin: 0 0;
}
.qdlg {
  width: min(760px, calc(100vw - 48px)); max-width: none; max-height: min(calc(100vh - 48px), 1000px); max-height: min(calc(100dvh - 48px), 1000px);
  margin: auto; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden;
}
.qdlg[open] { display: flex; flex-direction: column; }
.qdlg::backdrop, .dlg[data-kind="franchise"]::backdrop { background: rgba(15,17,52,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .qdlg::backdrop, .dlg[data-kind="franchise"]::backdrop { background: rgba(15,17,52,.86); }
}
.qdlg.is-still::backdrop, .dlg.is-still[data-kind="franchise"]::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(15,17,52,.84); }
@media (prefers-reduced-motion: reduce) {
  .qdlg::backdrop, .dlg[data-kind="franchise"]::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(15,17,52,.84); }
}
.qdlg-inner { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; transform-origin: 0 0; }
.qdlg-head, .dlg[data-kind="franchise"] .dlg-head {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: 19px minmax(0, 1fr) 44px; column-gap: 14px; row-gap: 6px; align-items: start;
  padding: 18px 16px 16px 20px; background: var(--deck-2); box-shadow: 0 1px 0 var(--rule-dark);
}
.qdlg-head .drop-slot, .dlg[data-kind="franchise"] .drop-slot { display: block; grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.qdlg-kicker, .dlg[data-kind="franchise"] .dlg-kicker { grid-column: 2; color: var(--sky); }
.qdlg-title, .dlg[data-kind="franchise"] .dlg-title {
  grid-column: 2; font-family: var(--font-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.125rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--paper);
}
.qdlg-title:focus { outline: none; }
.qdlg-close, .dlg[data-kind="franchise"] .dlg-close { grid-column: 3; grid-row: 1 / span 2; align-self: start; color: var(--paper); box-shadow: inset 0 0 0 1px var(--rule-dark); }
.qdlg-close:hover, .dlg[data-kind="franchise"] .dlg-close:hover { color: var(--sky); box-shadow: inset 0 0 0 1px var(--sky); }
.qdlg-body { padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
.qdlg-body .form-sheet, .dlg[data-kind="franchise"] .dlg-franchise .form-sheet { box-shadow: none; }
.dlg[data-kind="franchise"] .dlg-franchise { padding-top: 16px; }
.dlg[data-kind="franchise"] .dlg-figure .plate-img { box-shadow: 0 0 0 1px var(--rule-dark); }
@media (min-width: 640px) {
  .qdlg-head, .dlg[data-kind="franchise"] .dlg-head { padding: 22px 22px 18px 28px; }
  .qdlg-body { padding: 22px 28px calc(28px + env(safe-area-inset-bottom, 0px)); }
}
/* phones: a bottom sheet, full width, up to 92 percent of the screen, sitting on the visual viewport (so the on-screen
   keyboard never covers the field in focus) */
@media (max-width: 759px) {
  .qdlg, .dlg[data-kind="franchise"] {
    inset: auto 0 var(--qdlg-kb, 0px) 0; width: 100%; max-width: 100%; height: auto; margin: 0;
    max-height: 92vh; max-height: min(92dvh, calc(var(--qdlg-vh, 100dvh) - 8px));
    border-radius: var(--radius) var(--radius) 0 0;
  }
}
/* ==== css/national.css ==== */
/* national.css: the national homepage's own layout (the mockup root only; the Colorado page never loads it). Everything else
   it shows (tokens, type, buttons, the hero frame, the tiles, the instrument scale, the FoamStream lines, the band quote, the
   map, the franchise act, the forms) is the shared stylesheets' as the Colorado page uses them. Base styles are the finished
   frame; motion.css only adds to it. */

/* ---------------------------------------------------------------- hero: the national heading */
/* Phones prioritize the action and real footage. The descriptive paragraph and method
   line follow the media; interactive focus still runs from the CTAs to the video control. */
@media (max-width: 759px) {
  .hero { padding-block: 22px 36px; }
  .hero-title--national { font-size: min(var(--h1), calc((100vw - 2 * var(--gutter)) * 0.1091)); }
  .hero-kicker { grid-row: 1; margin-bottom: 10px; }
  .hero-title { grid-row: 2; }
  .hero-copy { display: contents; }
  .hero-ctas { grid-row: 3; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 16px; }
  .hero-ctas .btn { width: 100%; min-width: 0; padding-inline: 10px; font-size: 14px; }
  .hero-media { grid-row: 4; margin-top: 18px; }
  .hero-deck { grid-row: 5; margin-top: 18px; }
  .hero-trust { grid-row: 6; margin-top: 16px; }
}
.hero-title--national .pivot { white-space: normal; }
@media (min-width: 1024px) {
  .hero-copy { grid-column: 1; grid-row: 3; }
  .hero-media { grid-column: 2; grid-row: 3 / 5; }
  .hero-trust { grid-column: 1; grid-row: 4; margin-top: 22px; align-self: start; }
}
@media (min-width: 760px) and (max-width: 1023px) {
  .hero-trust { margin-top: 22px; }
}
/* the network's standing in the fold (WAVE4-FIXLIST item 3): the status words the network rows print, each a link to its
   market, set right above the proof line as one block */
.hero-copy .hero-network + .hero-trust { margin-top: -12px; }

/* ---------------------------------------------------------------- the method (mist): one standard on every building */
.method .section-head h2 { max-width: 24ch; }
.method-head { margin: clamp(44px, 5vw, 72px) 0 20px; }
.method-pre .method-head { margin-top: 0; }
.method-pre { display: grid; gap: 28px; }
.method-pre > * { min-width: 0; }
.method-cards { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.method-cards > *, .method-rig > * { min-width: 0; }
.method-card, .rig-card {
  display: grid; gap: 10px; align-content: start;
  padding: 20px 20px 22px; border-radius: var(--radius);
  background: var(--paper); box-shadow: 0 0 0 1px var(--line);
}
.method-card { box-shadow: inset 3px 0 0 var(--blue-text), 0 0 0 1px var(--line); }
.method-card h4, .rig-card h4 { font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--navy); }
.method-card p, .rig-card p { color: var(--ink); line-height: 1.55; }
.method-roles { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.method-roles li { position: relative; padding: 8px 0 8px 22px; border-top: 1px solid var(--line); color: var(--ink); line-height: 1.4; }
.method-roles li:first-child { border-top: 0; padding-top: 2px; }
.method-roles li::before { content: ""; position: absolute; left: 2px; top: calc(50% - 4px); width: 9px; height: 5px; border-left: 2px solid var(--blue-text); border-bottom: 2px solid var(--blue-text); transform: rotate(-45deg); }
.method-roles li:first-child::before { top: calc(50% - 7px); }
.method-photo .plate-img { aspect-ratio: 16 / 9; }   /* the whole frame: the aircraft at the left, the observer at the right */
.method-photo .caption { margin-top: 10px; }
@media (min-width: 640px) { .method-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* from 1280 px the photo stands beside the cards, its top level with theirs, in a 7:6 crop of the hospital drive that still
   holds the aircraft at the left and the observer at the right, so it runs the height of the card block; from 1024 to
   1279 px the four cards take the full width and the photo follows them, so no column is left with a hole under a short
   photo (WAVE4-FIXLIST item 7) */
@media (min-width: 1280px) {
  .method-pre { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }
  .method-photo { margin-top: 46px; }
  .method-photo .plate-img { aspect-ratio: 7 / 6; }
  .method-photo .plate-img img { object-position: 55% 50%; }
}

/* the mission timeline on a light surface: the Colorado page draws it on the deck band; here the titles take the navy, the
   body the ink and the waypoint ring the text blue, and an unlit step rests at .85 (its kicker 4.8:1, its body 8.6:1 on the
   mist) instead of the band's .72 */
.method .mission { margin-bottom: 0; }
.method .mission-step h4 { color: var(--navy); }
.method .mission-step p:not(.kicker) { color: var(--ink); }
.method .mission-dot { box-shadow: inset 0 0 0 2px var(--blue-text); }
@media (prefers-reduced-motion: no-preference) {
  html.motion-on .method [data-timeline] > [data-step] { opacity: .85; }
  html.motion-on .method [data-timeline] > [data-step].is-lit { opacity: 1; }
}

/* the rig: three cards, the heated-water scale inside the middle one */
.method-rig { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.rig-card .instrument { padding: 4px 0 0; background: none; box-shadow: none; }
.rig-card .foam-lines { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); }
@media (min-width: 900px) { .method-rig { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.method .band-quote { margin-top: clamp(40px, 5vw, 64px); }

/* ---------------------------------------------------------------- proven in Colorado (paper): the four jobs */
.proof-strip { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.proof-strip > * { min-width: 0; }
.proof-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 20px 22px; border-radius: var(--radius);
  background: var(--paper); box-shadow: 0 0 0 1px var(--line);
}
.proof-place { font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-text); }
.proof-title { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: clamp(1.3125rem, 1.15rem + 0.5vw, 1.5rem); line-height: 1.15; letter-spacing: -0.012em; }
.proof-title a { color: var(--navy); text-decoration: none; }
.proof-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.16em; }
.proof-title .arrow { display: inline-block; width: 0.72em; height: 0.72em; margin-left: 0.2em; vertical-align: -0.02em; color: var(--blue-text); transition: transform .16s ease; }
.proof-title a:hover .arrow { transform: translateX(3px); }
.proof-line { color: var(--ink); line-height: 1.5; }
.proof-example { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.proof-example a { color: var(--blue-text); text-underline-offset: .18em; }
.proof-origin { margin-top: 22px; max-width: 66ch; color: var(--ink-2); font-size: 14px; }
.proof-card .tiles-wrap { margin-top: auto; padding-top: 2px; }   /* the three tile blocks end level across the row */
.proof-card--progress .status-chip { font-size: 12.5px; }
@media (min-width: 700px) { .proof-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* four across from 1100 px: each card's three tiles stack as rows (the figure over its label), so no label has to wrap
   inside a narrow column */
@media (min-width: 1100px) {
  .proof-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .proof-card .tiles { grid-template-columns: minmax(0, 1fr); }
  .proof-card .tile { padding: 12px 14px; }
  .proof-card .tile .num { font-size: clamp(22px, 11cqi, var(--num)); }
}

/* ---------------------------------------------------------------- the network (mist): the map first from 1024 px */
@media (min-width: 1024px) {
  .network .map-body { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .network .map-stage { order: -1; }
}
/* each row's Request service button lives in map.css (the Colorado page's rows carry one too) */
.network .map-root > .section-next .link-arrow { font-family: var(--font-body); }

/* ---------------------------------------------------------------- footer: the lockup on its foam patch */
.footer-brand--foam { padding: 6px 0 0 15px; }
.foot-foam-wrap { position: relative; display: inline-flex; padding: 6px 0; }
.footer-brand .foot-foam { position: absolute; z-index: 0; top: -4px; left: -15px; width: calc(100% + 31px); height: calc(100% + 8px); overflow: visible; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(15,17,52,.30)); }
.footer-brand--foam .foot-lockup { position: relative; z-index: 1; display: block; width: 196px; height: 40px; }

.method--compact .method-cards { grid-template-columns: minmax(0, 1fr); }
.method--compact .method-card h3 { font-size: 1.25rem; }
.method--compact .method-photo { margin-top: 0; }
@media (min-width: 900px) { .manifest--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ==== css/motion.css ==== */
/* Finished content stays visible. The real video loops silently with Pause;
   reduced-motion and Save-Data visitors use its photograph and manual controls. */
.hero-title .hero-beat, .hero-title .hw { display: inline-block; }
[data-reveal] { clip-path: none; opacity: 1; }
#burst, .hero-mist, .brand-sheen, .brand-glint { display: none !important; }

.hero-frame .hero-video {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  object-fit: cover; object-position: 56% 50%; opacity: 0; pointer-events: none;
}
.hero-frame .hero-video.is-visible { opacity: 1; }
.hero-video-controls {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 4;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
}
.hero-video-toggle, .hero-video-fallback {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 10px 14px; margin: 0; border: 1px solid rgba(247, 249, 251, .5);
  border-radius: var(--radius); background: var(--deck); color: var(--paper);
  font: 600 14px/1.25 var(--font-body); text-decoration: none;
}
.hero-video-toggle { width: 132px; white-space: nowrap; }
.hero-video-toggle:hover, .hero-video-fallback:hover { border-color: var(--sky); color: var(--sky); }
.hero-video-toggle:focus-visible, .hero-video-fallback:focus-visible {
  outline: 3px solid var(--sky); outline-offset: 3px;
}
.hero-video-icon {
  flex: none; width: 10px; height: 12px; background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.hero-video-toggle.is-playing .hero-video-icon {
  background: transparent; clip-path: none; border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
.hero-video-status.is-error {
  position: static; flex: 0 0 100%; margin: 0;
  padding: 10px 12px; border-radius: var(--radius); color: var(--paper); background: var(--deck);
  font-size: 14px; line-height: 1.45;
}
@media (max-width: 1023px) {
  .hero-video-controls { top: 12px; bottom: auto; }
}
@media (max-width: 759px) { .hero-frame .hero-video { object-position: 50% 50%; } }
@media (min-width: 760px) { .hero-frame .hero-video { object-position: 55% 50%; } }

/* Keep hover feedback in color and borders, without nudging content under the pointer. */
.btn:hover .arrow, .link-arrow:hover .arrow, .svc-card:hover .svc-more .arrow,
.plate-title button:hover .open-glyph, .manifest-row:hover .glyph, .proof-title a:hover .arrow { transform: none; }

@media print {
  .hero-frame .hero-video, .hero-video-controls, .hero-video-status { display: none !important; }
}
/* ==== css/site.css ==== */
/* site.css: the production site's inner pages (production P1, 2026-10-16), after the shared frame's stylesheets (fonts, tokens,
   base, sections, forms, national for the foam footer, motion). The page head band, the legal page (its contents list, the
   policy text, the questions aside), the not-found page, the footer's counsel line, and the layout the page-type skeletons
   share (the body with its aside, the closing quote band, the card list). Tokens only, no new color; nothing here animates,
   so the finished frame is the only frame. */

/* ---- the page head: the dark deck band under the header, the breadcrumb, the kicker and the page's one h1 */
.page-head { padding-block: clamp(28px, 4vw, 56px) clamp(36px, 5vw, 72px); border-bottom: 1px solid var(--rule-dark); }
.page-head-inner { display: grid; gap: 14px; }
.crumbs-list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--dim); }
.crumbs-list li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs-list li + li::before { content: ""; width: 6px; height: 6px; margin: 0 12px 0 10px; border-top: 1.5px solid var(--dim); border-right: 1.5px solid var(--dim); transform: rotate(45deg); flex: none; }
.crumbs-list a { display: inline-flex; align-items: center; min-height: 32px; color: var(--sky); text-decoration: none; }
.crumbs-list a:hover { text-decoration: underline; }
.crumbs-list [aria-current] { color: var(--paper); overflow-wrap: anywhere; }
.page-kicker { margin-top: 6px; }
.page-title { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem); line-height: 1.04; color: var(--paper); padding-bottom: 0.06em; overflow-wrap: anywhere; }
.page-lede { max-width: 36em; color: var(--dim); }
.page-lede a { color: var(--sky); }
/* the first section under a page head starts closer to it than the homepage's section rhythm */
.page-head + .section { padding-top: clamp(32px, 4vw, 64px); }

/* ---- the legal page: from 1024 px the contents list has the left column to itself (sticky under the header, so nothing can
   pass under it), the policy and then the questions aside the right one; on a phone the list, the policy, the aside */
.legal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.legal-grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .legal-grid { grid-template-columns: 264px minmax(0, 1fr); grid-template-areas: "toc doc" "toc aside"; column-gap: 72px; row-gap: 40px; }
  .legal-toc { grid-area: toc; align-self: start; position: sticky; top: calc(var(--nav-h) + 24px); }
  .legal-doc { grid-area: doc; }
  .legal-aside { grid-area: aside; max-width: 68ch; }
}
.legal-toc { padding: 18px 20px 14px; border-radius: var(--radius); background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); }
.legal-toc-title { margin-bottom: 6px; }
.legal-toc-list a { display: flex; align-items: center; min-height: 40px; padding-block: 4px; color: var(--ink); font-size: 15px; line-height: 1.35; text-decoration: none; }
.legal-toc-list a:hover { color: var(--blue-text); text-decoration: underline; }
.legal-toc-list li + li { border-top: 1px solid var(--line); }
.legal-doc { max-width: 68ch; color: var(--ink); }
.legal-doc > p:first-child { font-size: var(--lede); line-height: 1.5; color: var(--ink); }
.legal-doc h2 { margin-top: 2.1em; font-size: var(--h3); font-weight: 700; font-stretch: 100%; line-height: 1.25; letter-spacing: -0.01em; color: var(--navy); }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc p { margin-top: 0.85em; }
.legal-doc ul { margin-top: 0.85em; padding-left: 1.25em; list-style: disc; }
.legal-doc li + li { margin-top: 0.5em; }
.legal-doc li::marker { color: var(--blue-text); }
.legal-doc a { overflow-wrap: anywhere; }
.legal-doc .legal-effective { margin-top: 2.4em; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-2); }
.legal-aside { padding: 20px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 10px; }
.legal-aside-title { font-size: 1.125rem; font-weight: 700; font-stretch: 100%; line-height: 1.3; letter-spacing: -0.005em; }
.legal-aside-title + .legal-aside-text { margin-top: -4px; }
.legal-aside-text { color: var(--ink-2); font-size: 15.5px; }
.legal-aside-text a { overflow-wrap: anywhere; }
.legal-aside .legal-aside-title:not(:first-child) { margin-top: 8px; }
.legal-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---- the footer's counsel line on a legal page (beside the illustration line) */
.legal-note { color: var(--dim); font-size: 14px; line-height: 1.5; max-width: 32em; }

/* ---- the not-found page: three ways on, as cards */
.nf-title { font-size: var(--h3); font-weight: 700; font-stretch: 100%; line-height: 1.25; margin-bottom: 20px; }
.nf-list { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .nf-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nf-card { display: grid; gap: 8px; align-content: start; height: 100%; padding: 22px 22px 24px; border-radius: var(--radius); background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; }
.nf-card:hover { box-shadow: inset 0 0 0 2px var(--blue-text); }
.nf-card-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.25; color: var(--navy); }
.nf-card-title .arrow { width: 18px; height: 18px; flex: none; color: var(--blue-text); }
.nf-card-note { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }

/* ---- what the page-type skeletons share: the body with its aside, the card list, the closing quote band */
.page-body-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.page-body-grid > * { min-width: 0; }
@media (min-width: 1024px) { .page-body-grid { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 72px; align-items: start; } }
.page-prose { max-width: 68ch; }
.page-prose > * + * { margin-top: 0.9em; }
.page-body-title { font-size: var(--h2); }
.page-aside { padding: 20px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); }
.page-aside-title { font-size: 1.125rem; font-weight: 700; font-stretch: 100%; line-height: 1.3; margin-bottom: 8px; }
.page-related a { display: inline-flex; align-items: center; min-height: 44px; }
.page-cards { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .page-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .page-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.page-cta-inner { display: grid; gap: 24px; align-items: end; }
@media (min-width: 1024px) { .page-cta-inner { grid-template-columns: minmax(0, 1fr) auto; column-gap: 56px; } }
.page-cta-copy { display: grid; gap: 14px; }
.page-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }