/* ==========================================================================
   Pro Jet design system. Version A ("Pressure").
   Six colour roles, one accent, two type families, 4px spacing base.
   ========================================================================== */

:root {
  /* colour roles */
  --canvas: #0B0F14;
  --canvas-2: #0E141B;
  --surface: #131A22;
  --surface-2: #192230;
  --line: rgba(157, 170, 184, 0.16);
  --edge: rgba(255, 255, 255, 0.06);
  --ink: #EEF2F6;
  --ink-soft: #9DAAB8;
  --ink-mute: #7B8896;
  --accent: #1F7AE0;
  --accent-hi: #4D9BF0;
  --accent-strong: #1866C4;
  --red-hi: #FF6B57;
  --price-bg: #A32820;
  --price-ink: #FFECE9;
  --accent-ink: #06111F;
  --accent-soft: rgba(31, 122, 224, 0.14);
  --danger: #D9534F;

  /* type */
  --font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-text: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-md: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --t-lg: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --t-xl: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --t-2xl: clamp(3rem, 2rem + 5vw, 6.25rem);
  --t-hero: clamp(2.9rem, 1.6rem + 4.6vw, 5.6rem);

  --track-tight: -0.02em;
  --track-display: -0.01em;
  --track-label: 0.12em;

  /* spacing (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 12rem;
  --section: clamp(4rem, 3rem + 6vw, 9rem);
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 62ch;
  --container: 84rem;

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px;
  --e1: 0 1px 0 var(--edge) inset, 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --e2: 0 1px 0 var(--edge) inset, 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  --e3: 0 1px 0 var(--edge) inset, 0 40px 90px -30px rgba(3, 10, 20, 0.85);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --header-h: 72px;
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Reset + base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* ScrollTrigger refreshes must set scroll positions synchronously. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
main[id], section[id], article[id], h2[id], h3[id] { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
main[tabindex="-1"]:focus { outline: none; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-base);
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
p { margin: 0 0 var(--s-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.2em; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 3px; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: var(--track-display);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
  text-transform: uppercase;
}
h1 { font-size: var(--t-2xl); letter-spacing: var(--track-tight); }
h2 { font-size: var(--t-xl); letter-spacing: var(--track-tight); }
h3 { font-size: var(--t-lg); line-height: 1.02; }
h4 { font-size: var(--t-md); line-height: 1.1; }
.lede { font-size: var(--t-md); color: var(--ink-soft); max-width: var(--measure); line-height: 1.55; }
.label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-hi);
}
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--accent-strong); color: #fff; padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm); font-weight: 600;
}
.skip-link:focus { top: var(--s-4); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), 60rem); margin-inline: auto; }
.grain {
  pointer-events: none; position: fixed; inset: 0; z-index: 90; opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent-strong); --btn-ink: #fff; --btn-line: transparent;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.95rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-ink);
  border: 1px solid var(--btn-line); border-radius: var(--r-sm);
  font-family: var(--font-display); font-weight: 700; font-size: 1.125rem;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  line-height: 1; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset;
  transition: transform 140ms var(--ease-out), background-color 140ms var(--ease-out), border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn:active { transform: scale(0.97); }
.btn--secondary { --btn-bg: transparent; --btn-ink: var(--ink); --btn-line: rgba(238,242,246,0.28); }
.btn--ghost { --btn-bg: transparent; --btn-ink: var(--ink-soft); --btn-line: transparent; padding-inline: var(--s-3); }
.btn--lg { padding: 1.15rem 1.9rem; font-size: 1.25rem; }
.btn--block { width: 100%; justify-content: center; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); background: var(--accent-hi); }
  .btn--secondary:hover { background: rgba(238,242,246,0.06); border-color: rgba(238,242,246,0.5); }
  .btn--ghost:hover { background: rgba(238,242,246,0.05); color: var(--ink); }
}
.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 80; height: var(--header-h);
  display: flex; align-items: center;
  background: linear-gradient(to bottom, rgba(11,15,20,0.92), rgba(11,15,20,0.72));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header .container { display: flex; align-items: center; gap: var(--s-5); }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.site-header .brand { padding-block: 5px; }
.brand__mark { width: 40px; height: 40px; }
.brand__word { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; white-space: nowrap; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; }
.brand__word small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 0.6rem; letter-spacing: 0.16em; color: var(--ink-soft); margin-top: 3px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-1); }
.nav a { padding: var(--s-2) var(--s-3); white-space: nowrap; text-decoration: none; color: var(--ink-soft); font-weight: 500; font-size: var(--t-sm); border-radius: var(--r-sm); transition: color 140ms var(--ease-out), background-color 140ms var(--ease-out); }
.nav a[aria-current="page"], .nav a:hover { color: var(--ink); background: rgba(238,242,246,0.05); }
.nav .btn { margin-left: var(--s-3); padding: 0.7rem 1.1rem; font-size: 1rem; }
.nav .nav__phone { display: none; }
@media (max-width: 960px) { .nav .nav__phone { display: block; } }
.header-phone { display: inline-flex; white-space: nowrap; align-items: center; gap: var(--s-2); text-decoration: none; font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink); padding: var(--s-2) var(--s-3); }
.header-phone svg { width: 16px; height: 16px; color: var(--accent-hi); }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; border-radius: var(--r-sm); position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 12px; width: 20px; height: 2px; background: var(--ink); transition: transform 200ms var(--ease-out), opacity 200ms; }
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -6px; left: 0; }
.nav-toggle span::after { top: 6px; left: 0; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .header-phone { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 79;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s-5) var(--gutter) var(--s-9);
    background: var(--canvas); border-top: 1px solid var(--line);
    transform: translateX(100%); opacity: 0; visibility: hidden;
    transition: transform 260ms var(--ease-out), opacity 200ms, visibility 0s 260ms;
    overflow-y: auto;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; transition: transform 260ms var(--ease-out), opacity 200ms; }
  .nav a { font-family: var(--font-display); font-size: 2rem; text-transform: uppercase; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); }
  .nav .btn { margin: var(--s-5) 0 0; justify-content: center; font-size: 1.25rem; padding: 1rem; border: 0; }
  .nav .nav__phone { font-family: var(--font-mono); font-size: 1rem; text-transform: none; color: var(--ink-soft); }
}

/* Mobile sticky call bar.
   The phone call is the money action, so .callbar__call is the widest item and
   the only filled one. Flex, not grid, so the bar takes either the two-item
   markup (Call, Request a Quote) or the three-item markup (Call with digits,
   Text, Quote) without a layout change. */
.callbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 85;
  display: none; flex-wrap: nowrap; gap: 1px;
  background: var(--line); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar a {
  flex: 1 1 0; min-width: min-content; min-height: 52px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  gap: var(--s-2); padding: 0.8rem 0.5rem;
  background: var(--surface); color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-size: clamp(1rem, 4.4vw, 1.15rem);
  text-transform: uppercase; font-weight: 700; letter-spacing: 0.03em;
  line-height: 1.05; white-space: nowrap;
}
.callbar a svg { width: 18px; height: 18px; flex: none; }
/* Primary. The second selector keeps the legacy unclassed "Call" link primary
   until the three-item markup lands. */
.callbar a.callbar__call, .callbar a:not([class]) {
  flex-grow: 2.6; background: var(--accent-strong); color: #fff;
  letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
}
.callbar a.callbar__text { flex-grow: 0.85; }
/* Secondary. white-space normal lets the legacy "Request a Quote" label wrap
   rather than force the bar wide; the shipped "Quote" label never wraps. */
.callbar a.callbar__quote { flex-grow: 1.15; background: var(--surface); color: var(--ink); white-space: normal; }
@media (max-width: 960px) {
  .callbar { display: flex; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   Hero (layered)
   -------------------------------------------------------------------------- */
.hero {
  position: relative; min-height: 100dvh; min-height: 100svh;
  display: grid; align-items: end; overflow: clip;
  padding-top: var(--header-h);
  isolation: isolate;
}
.hero__layer { position: absolute; inset: -6% -4%; will-change: transform; pointer-events: none; }
.hero__bg { z-index: 0; }
.hero__bg img, .hero__bg video { width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; }
.hero__mascot {
  position: absolute; z-index: 6; right: clamp(-2.5rem, -2vw, -1rem); bottom: -1.5rem;
  width: clamp(20rem, 31vw, 32rem); height: auto; pointer-events: none;
  filter: drop-shadow(0 30px 38px rgba(0,0,0,0.58));
}
.hero__mascot-mobile { display: none; }
.hero__content { position: relative; z-index: 5; padding-block: var(--s-8) var(--s-9); max-width: 44rem; }
.hero__content h1 { font-size: var(--t-hero); margin-bottom: var(--s-5); line-height: 0.94; max-width: 12ch; }
.hero__content h1 em { font-style: normal; color: var(--accent-hi); }
.hero__content h1 em.em-red { font-style: normal; color: var(--red-hi); }
.hero__content .lede { margin-bottom: var(--s-6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.hero__meta { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); color: var(--ink-soft); font-size: var(--t-sm); }
.hero__meta span { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero__meta svg { width: 16px; height: 16px; color: var(--accent-hi); }
@media (max-width: 960px) {
  .hero { align-items: start; }
  .hero > .hero__mascot { display: none; }
  .hero__mascot-mobile {
    display: block; width: clamp(10.5rem, 46vw, 13rem); height: auto;
    margin: 0 -1.25rem 0 auto; pointer-events: none;
    filter: drop-shadow(0 22px 30px rgba(0,0,0,0.58));
  }
  .hero__content { max-width: none; padding-top: var(--s-6); padding-bottom: 48vw; }
  .hero__content h1 { font-size: clamp(3rem, 14vw, 5rem); }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--surface { background: var(--canvas-2); }
.section--light { --canvas: #EEF2F6; --surface: #FFFFFF; --ink: #0B0F14; --ink-soft: #4A5663; --ink-mute: #7A8794; --line: rgba(11,15,20,0.12); --edge: rgba(255,255,255,0.7); --accent-hi: #135FB8; background: var(--canvas); color: var(--ink); color-scheme: light; }
.section--light .label { color: #135FB8; }
.section--light ::selection { background: #135FB8; color: #fff; }
.section__head { display: grid; gap: var(--s-4); margin-bottom: var(--s-8); max-width: 52rem; }
.section__head h2 { margin: 0; }
.section__head .lede { max-width: 48rem; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.split--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--reverse > :first-child { order: 2; }
@media (max-width: 900px) { .split, .split--reverse { grid-template-columns: 1fr; } .split--reverse > :first-child { order: 0; } }
.sticky { position: sticky; top: calc(var(--header-h) + var(--s-6)); }

/* Stakes list */
.stakes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
@media (max-width: 900px) { .stakes { grid-template-columns: 1fr; } }
.stakes__media { position: relative; border-radius: var(--r-lg); overflow: clip; box-shadow: var(--e3); aspect-ratio: 4 / 5; margin: 0; background: var(--surface); }
.stakes__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stakes__media figcaption { position: absolute; left: var(--s-4); bottom: var(--s-4); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-soft); letter-spacing: 0.06em; }
.symptoms { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.symptoms li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s-4); align-items: baseline; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); font-size: var(--t-md); }
.symptoms li .num { color: var(--accent-hi); font-size: var(--t-sm); }
.symptoms li span:last-child { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); letter-spacing: 0.01em; line-height: 1; }

/* --------------------------------------------------------------------------
   Signature act: THE LINE (pinned pipe cross-section)
   -------------------------------------------------------------------------- */
.line-act { position: relative; background: var(--canvas); isolation: isolate; clip-path: inset(0); }
.line-act__stage { position: relative; background: var(--canvas); min-height: 100svh; display: grid; align-content: center; gap: var(--s-6); padding-block: calc(var(--header-h) + var(--s-6)) var(--s-8); }
.line-act__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-6); }
.line-act__head h2 { margin: 0; max-width: 14ch; }
.gauge { text-align: right; }
.gauge__value { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 2rem + 5vw, 6rem); line-height: 0.9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.gauge__unit { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); color: var(--accent-hi); text-transform: uppercase; }
.pipe { width: 100%; height: auto; border-radius: var(--r-md); margin: 0; }
.pipe svg { width: 100%; height: auto; display: block; }
.line-act__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.step { padding: var(--s-4) 0 0; border-top: 2px solid var(--line); transition: border-color 300ms var(--ease-out), color 300ms var(--ease-out); color: var(--ink-mute); }
.step.is-active { border-top-color: var(--accent); color: var(--ink); }
.step h3 { font-size: var(--t-lg); margin: 0 0 var(--s-1); color: inherit; }
.step p { font-size: var(--t-sm); margin: 0; max-width: 34ch; }
.line-act__note { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-mute); letter-spacing: 0.04em; }
@media (max-width: 760px) {
  .pipe svg { height: 38vw; }
  .line-act__head { grid-template-columns: 1fr; }
  .gauge { text-align: left; }
  .line-act__steps { grid-template-columns: 1fr; gap: var(--s-3); }
  .step p { display: none; }
  .step.is-active p { display: block; }
}

/* --------------------------------------------------------------------------
   Services (asymmetric)
   -------------------------------------------------------------------------- */
.services { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-auto-rows: auto; gap: var(--s-5); }
.service { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-4); padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e1); overflow: clip; text-decoration: none; color: inherit; min-height: 22rem; isolation: isolate; }
.service--feature { grid-row: span 2; min-height: 34rem; }
.service__bg { position: absolute; inset: 0; z-index: -1; }
.service__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.88; transition: transform 700ms var(--ease-out), opacity 300ms var(--ease-out); }
.service__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(19,26,34,0.98) 20%, rgba(19,26,34,0.62) 58%, rgba(19,26,34,0.62)); }
.service h3 { margin: 0; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); }
.service p { color: var(--ink-soft); max-width: 42ch; margin: 0; align-self: end; }
.service__go { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-hi); }
.service__go svg { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .service:hover .service__bg img { transform: scale(1.04); opacity: 1; }
  .service:hover .service__go svg { transform: translateX(4px); }
}
@media (max-width: 900px) { .services { grid-template-columns: 1fr; } .service--feature { grid-row: auto; min-height: 26rem; } }

/* Also-list */
.also { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-2) var(--s-6); list-style: none; padding: 0; margin: var(--s-6) 0 0; }
.also li { padding: var(--s-3) 0; border-top: 1px solid var(--line); font-weight: 500; display: flex; gap: var(--s-3); align-items: center; }
.also li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.also li a { display: inline-flex; align-items: center; min-height: 44px; }

/* --------------------------------------------------------------------------
   Process (four steps, rail on desktop)
   -------------------------------------------------------------------------- */
.process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); counter-reset: step; }
.process li { list-style: none; padding: var(--s-5) 0 0; border-top: 1px solid var(--line); position: relative; }
.process li::before { counter-increment: step; content: "0" counter(step); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--accent-hi); letter-spacing: var(--track-label); position: absolute; top: -0.6em; left: 0; background: var(--canvas); padding-right: var(--s-2); }
.section--surface .process li::before { background: var(--canvas-2); }
.process h3 { margin: var(--s-2) 0 var(--s-2); }
.process p { color: var(--ink-soft); font-size: var(--t-sm); }
@media (max-width: 900px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .process { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Proof (video + machine + truck)
   -------------------------------------------------------------------------- */
.proof { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-5); align-items: start; }
.proof__video { position: relative; border-radius: var(--r-lg); overflow: clip; background: #000; box-shadow: var(--e2); aspect-ratio: 1; margin: 0; }
.proof__video video { width: 100%; height: 100%; object-fit: cover; }
.proof__video figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-4); background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); font-size: var(--t-sm); color: var(--ink); }
.proof__stack { display: grid; grid-template-rows: 1fr auto; gap: var(--s-5); }
.proof__img { border-radius: var(--r-lg); overflow: clip; box-shadow: var(--e2); position: relative; aspect-ratio: 16 / 10; margin: 0; }
.proof__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.proof__img figcaption { position: absolute; left: var(--s-4); bottom: var(--s-4); padding: var(--s-2) var(--s-3); background: rgba(11,15,20,0.8); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.06em; }
.spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.spec div { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.spec b { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); text-transform: uppercase; line-height: 1; }
.spec span { font-size: var(--t-xs); color: var(--ink-soft); font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 900px) { .proof { grid-template-columns: 1fr; } .proof__video { aspect-ratio: 1; max-width: 32rem; } .spec { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   Reviews (rail)
   -------------------------------------------------------------------------- */
.reviews-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-6); margin-bottom: var(--s-7); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(20rem, 26rem); gap: var(--s-5); overflow-x: auto; scroll-snap-type: x proximity; padding: var(--s-1) var(--gutter) var(--s-5); margin-inline: calc(-1 * var(--gutter)); scrollbar-width: thin; scrollbar-color: var(--ink-mute) transparent; }
.rail > * { scroll-snap-align: start; }
.review { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-4); padding: var(--s-6); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e1); }
.review__stars { display: flex; gap: 2px; color: #F5B301; }
.review__stars svg { width: 16px; height: 16px; }
.review blockquote { margin: 0; font-size: var(--t-md); line-height: 1.45; text-wrap: pretty; }
.review cite { font-style: normal; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-soft); letter-spacing: 0.04em; }
.review--big { grid-column: span 1; }

/* --------------------------------------------------------------------------
   Service area
   -------------------------------------------------------------------------- */
.area { position: relative; overflow: clip; border-radius: var(--r-lg); box-shadow: var(--e3); min-height: 30rem; display: grid; align-items: end; isolation: isolate; }
.area__bg { position: absolute; inset: 0; z-index: -1; }
.area__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.area__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,15,20,0.96) 10%, rgba(28,18,11,0.55) 55%, rgba(34,22,12,0.20)); }
.area__content { padding: var(--s-7); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: end; }
.area__cities { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-5); font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.1; }
.area__cities li { padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
@media (max-width: 800px) { .area__content { grid-template-columns: 1fr; padding: var(--s-5); } }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-4); padding: var(--s-5) 0; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem); line-height: 1.05; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.5rem; color: var(--accent-hi); transition: transform 200ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__body { padding: 0 0 var(--s-5); color: var(--ink-soft); max-width: var(--measure); }
.compare { width: 100%; border-collapse: collapse; margin-top: var(--s-4); font-size: var(--t-sm); }
.compare th, .compare td { text-align: left; padding: var(--s-3) var(--s-3); border-bottom: 1px solid var(--line); vertical-align: top; }
.compare th { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-soft); font-weight: 500; }
.compare td:nth-child(2) { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band { position: relative; overflow: clip; isolation: isolate; padding-block: var(--s-10); }
.cta-band__bg { position: absolute; inset: 0; z-index: -1; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.cta-band__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 100% at 30% 50%, rgba(11,15,20,0.96), rgba(11,15,20,0.7) 60%, rgba(11,15,20,0.5)); }
.cta-band h2 { font-size: var(--t-2xl); max-width: 14ch; margin-bottom: var(--s-5); }
.cta-band .lede { margin-bottom: var(--s-6); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding: var(--s-8) 0 var(--s-7); color: var(--ink-soft); font-size: var(--t-sm); }
.site-footer .container { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--s-7); }
.site-footer h4 { color: var(--ink); font-size: 1rem; letter-spacing: 0.08em; margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.site-footer ul li { display: flex; align-items: center; min-height: 44px; }
.site-footer ul li a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.footer-brand p { max-width: 36ch; }
.footer-bottom { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); font-size: var(--t-xs); color: var(--ink-mute); }
@media (max-width: 900px) { .site-footer .container { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer .container { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Inner pages
   -------------------------------------------------------------------------- */
.page-hero { position: relative; padding: calc(var(--header-h) + var(--s-9)) 0 var(--s-8); overflow: clip; isolation: isolate; min-height: 60svh; display: grid; align-items: end; }
.page-hero__bg { position: absolute; inset: 0; z-index: -1; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.72; }
.page-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--canvas) 0%, rgba(11,15,20,0.7) 45%, rgba(11,15,20,0.25)); }
.page-hero h1 { font-size: var(--t-2xl); max-width: 16ch; }
.page-hero .lede { margin-top: var(--s-4); }
.page-hero .hero__cta { margin-top: var(--s-6); }
.crumbs { list-style: none; padding: 0; margin: 0 0 var(--s-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--ink-mute); }
.crumbs a { text-decoration: none; }
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--t-xl); margin-top: var(--s-8); }
.prose h3 { margin-top: var(--s-6); }
.prose ul li { margin-bottom: var(--s-2); }
.checks { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: var(--s-3); }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); align-items: start; }
.checks svg { width: 22px; height: 22px; color: var(--accent-hi); margin-top: 2px; }
.aside-card { padding: var(--s-6); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e1); display: grid; gap: var(--s-4); }
.aside-card h3 { margin: 0; }
.aside-card .btn { justify-content: center; }
.aside-card .num { font-size: var(--t-lg); font-family: var(--font-display); }
.aside-card .num a { display: inline-flex; align-items: center; min-height: 44px; }
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.team article { padding: var(--s-6); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e1); border-top: 3px solid var(--accent); }
.team h3 { margin-bottom: var(--s-1); }
.team .label { display: block; margin-bottom: var(--s-3); }
@media (max-width: 700px) { .team { grid-template-columns: 1fr; } }

/* Forms */
.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field label { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea { width: 100%; padding: 0.9rem 1rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-hi); box-shadow: 0 0 0 3px var(--accent-soft); }
.field textarea { min-height: 9rem; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239DAAB8' stroke-width='2'/></svg>"); background-repeat: no-repeat; background-position: right 1rem center; }
.field .error { color: #F28B85; font-size: var(--t-xs); display: none; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: var(--danger); }
.field.is-invalid .error { display: block; }
.form__note { font-size: var(--t-xs); color: var(--ink-mute); }
.honeypot { position: absolute; left: -9999px; }
.form__status { padding: var(--s-4); border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); display: none; }
.form__status.is-ok { display: block; border-color: rgba(60,180,110,0.5); }
.form__status.is-err { display: block; border-color: var(--danger); }

/* Send-failure alert on the quote page. Hidden on a normal load; revealed with
   no JavaScript by the #send-failed fragment the PHP appends to every failure
   redirect (validation, mail, rate, method), and by .is-shown for the inline
   progressive-enhancement path. Text measures 15.4:1 and the phone 17.3:1 on
   the red-tinted ground. */
.form-alert { display: none; }
.form-alert:target, .form-alert.is-shown { display: block; }
.form-alert {
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
  margin: 0 0 var(--s-5);
  padding: var(--s-5);
  background: #2A1512;
  border: 1px solid rgba(242, 139, 133, 0.5);
  border-left: 4px solid #F28B85;
  border-radius: var(--r-md);
  color: #F7ECEA;
}
.form-alert p, .form-alert li { margin: 0; color: #F7ECEA; }
.form-alert strong { display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: var(--t-lg); line-height: 1.05; color: #FFCFCB; margin-bottom: var(--s-2); }
.form-alert a { color: #FFFFFF; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.form-alert a[href^="tel:"] {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: 0.02em; color: #FFFFFF; text-decoration: none;
  border-bottom: 2px solid #F28B85;
}

/* Contact page */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); }
.contact-grid iframe { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--r-lg); filter: grayscale(0.2) contrast(1.05); }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.contact-list li { display: grid; grid-template-columns: 24px 1fr; gap: var(--s-4); align-items: start; padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.contact-list svg { width: 22px; height: 22px; color: var(--accent-hi); }
.contact-list a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-list b { display: block; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-soft); font-weight: 500; margin-bottom: 2px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Motion primitives (driven by site.js). Static-safe by default.
   -------------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(18px); }
.no-js [data-reveal], .reduced-motion [data-reveal] { opacity: 1; transform: none; }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__layer { transform: none !important; }
}
@media print {
  .site-header, .callbar, .grain, video { display: none !important; }
  body { background: #fff; color: #000; }
}

/* jets pulse (signature act) */
@keyframes jetPulse { from { stroke-opacity: 0.45; } to { stroke-opacity: 1; } }
#jets line { animation: jetPulse 380ms linear infinite alternate; }
@media (prefers-reduced-motion: reduce) { #jets line { animation: none; } }

/* subpages */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); grid-auto-flow: row; overflow: visible; padding: 0; margin: 0; }
.faq-group { margin-bottom: var(--s-8); }

/* contact map: fill its column regardless of wrapper */
iframe[src*="google.com/maps"] { display: block; width: 100%; aspect-ratio: 4 / 3; min-height: 20rem; border: 0; border-radius: var(--r-lg); filter: grayscale(0.2) contrast(1.05); }

/* QA fixes 2026-09-02 */
.nav .btn, .nav .btn:hover { color: #fff; }
.site-footer h3.footer-h { font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--s-3); }
.aside-card h2.aside-h { font-size: var(--t-lg); margin: 0; }
.rail:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 4px; }

/* blend 2026-09-03: symptom-first grid + residential/commercial paths */
.symptom-grid { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.symptom-grid a { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-decoration: none; color: inherit; min-height: 100%; transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out); }
.symptom-grid b { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); line-height: 1; letter-spacing: 0.01em; }
.symptom-grid span { font-size: var(--t-sm); color: var(--ink-soft); }
.symptom-grid em { font-style: normal; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-hi); margin-top: auto; }
.symptom-grid em::after { content: " \2192"; }
@media (hover: hover) and (pointer: fine) { .symptom-grid a:hover { border-color: var(--accent); transform: translateY(-2px); } }
@media (max-width: 520px) { .symptom-grid { grid-template-columns: 1fr; } }
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.path { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s-3); padding: var(--s-6); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e1); border-top: 3px solid var(--accent); }
.path h3 { margin: 0; }
.path p:not(.label) { color: var(--ink-soft); max-width: 46ch; }
.path .btn { justify-self: start; }
@media (max-width: 800px) { .paths { grid-template-columns: 1fr; } }

/* critique fixes 2026-09-03 */
@media (max-width: 960px) {
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(11,15,20,0.97); }
  .nav { z-index: 86; }
}
.section--light .btn--secondary { --btn-line: rgba(11,15,20,0.32); }
.section--light .btn--secondary:hover { border-color: rgba(11,15,20,0.6); }

/* --------------------------------------------------------------------------
   Light zoning. `.section--light` already flips the colour roles; these rules
   cover the controls that carry hard-coded dark-theme colour: form fields,
   the select chevron, error text, table cells and FAQ accordions.
   Body copy in a light section is measured at 4.5:1 or better.
   -------------------------------------------------------------------------- */
.section--light {
  /* #7A8794 on #EEF2F6 measures 3.26:1 and fails. #5F6B78 measures 4.83:1. */
  --ink-mute: #5F6B78;
  --danger: #B3261E;
  --accent-soft: rgba(19, 95, 184, 0.14);
}
.section--light .field input,
.section--light .field select,
.section--light .field textarea { background: var(--surface); color: var(--ink); border-color: rgba(11,15,20,0.28); }
.section--light .field input::placeholder,
.section--light .field textarea::placeholder { color: #5F6B78; opacity: 1; }
.section--light .field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%234A5663' stroke-width='2'/></svg>");
}
.section--light .field input:focus,
.section--light .field select:focus,
.section--light .field textarea:focus { border-color: #135FB8; box-shadow: 0 0 0 3px var(--accent-soft); }
.section--light .field .error { color: var(--danger); }
.section--light .form__status { background: var(--surface); border-color: rgba(11,15,20,0.18); }
.section--light .form__status.is-ok { border-color: rgba(22,120,70,0.6); }
.section--light .form__status.is-err { border-color: var(--danger); }
.section--light .compare th { color: var(--ink-soft); }
.section--light .compare td,
.section--light .compare th { border-bottom-color: rgba(11,15,20,0.14); }
.section--light .compare td:nth-child(2) { color: var(--ink); }
.section--light .faq,
.section--light .faq details { border-color: rgba(11,15,20,0.16); }
.section--light .faq summary { color: var(--ink); }
.section--light .faq summary::after { color: #135FB8; }
.section--light .faq .faq__body { color: var(--ink-soft); }
.section--light .btn--ghost:hover { background: rgba(11,15,20,0.05); color: var(--ink); }
.section--light :focus-visible { outline-color: #135FB8; }
.section--light .rail { scrollbar-color: var(--ink-mute) transparent; }

/* --------------------------------------------------------------------------
   Price block. Owner asked for red and for the writing to be unmistakable, so
   every colour here is measured against #A32820: white 7.29:1, #FFECE9 6.39:1.
   The blue accent is switched off inside the block because #4D9BF0 measures
   3.71:1 on this red and #FF6B57 measures 3.83:1. Both fail body text.
   -------------------------------------------------------------------------- */
.section--price {
  --canvas: var(--price-bg);
  --canvas-2: var(--price-bg);
  --surface: #8E211A;
  --surface-2: #8E211A;
  --ink: #FFFFFF;
  --ink-soft: var(--price-ink);
  --ink-mute: var(--price-ink);
  --line: rgba(255, 255, 255, 0.3);
  --edge: rgba(255, 255, 255, 0.18);
  --accent: #FFFFFF;
  --accent-hi: #FFFFFF;
  --accent-soft: rgba(255, 255, 255, 0.2);
  --danger: #FFECE9;
  /* keep the inset hairline, drop the dark drop shadows that muddy the red */
  --e1: 0 1px 0 var(--edge) inset;
  --e2: 0 1px 0 var(--edge) inset;
  --e3: 0 1px 0 var(--edge) inset;
  background: var(--price-bg);
  color: #FFFFFF;
  color-scheme: dark;
  padding-block: 5rem;
}
/* Silk band: WebGL canvas behind the red section (js/silk-band.js). Red stays as the fallback. */
.section--price { position: relative; isolation: isolate; overflow: clip; }
.price-band__silk { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; }
.section--price > .container { position: relative; z-index: 1; }
.reduced-motion .price-band__silk { display: none; }
@media (prefers-reduced-motion: reduce) { .price-band__silk { display: none; } }
@media print { .price-band__silk { display: none; } }
.section--price > .container > :first-child { margin-top: 0; }
.section--price .section__head > :first-child { margin-top: 0; }
.section--price .section__head { gap: var(--s-2); margin-bottom: var(--s-7); }
.section--price h1, .section--price h2, .section--price h3, .section--price h4 { color: #FFFFFF; }
.section--price p, .section--price li, .section--price td, .section--price dd { color: #FFFFFF; }
.section--price .lede, .section--price .form__note, .section--price figcaption,
.section--price .compare th, .section--price cite, .section--price small { color: var(--price-ink); }
.section--price .label { color: #FFFFFF; }
.section--price a:not(.btn) { color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, 0.6); }
.section--price ::selection { background: #FFFFFF; color: var(--price-bg); }
.section--price :focus-visible { outline-color: #FFFFFF; }
.section--price .also li::before,
.section--price .symptom-grid em { color: #FFFFFF; }
.section--price .also li::before { background: #FFFFFF; }
.section--price .compare th,
.section--price .compare td { border-bottom-color: rgba(255, 255, 255, 0.3); }
.section--price .compare td:nth-child(2) { color: #FFFFFF; }
.section--price .faq, .section--price .faq details { border-color: rgba(255, 255, 255, 0.3); }
.section--price .faq summary, .section--price .faq summary::after { color: #FFFFFF; }
.section--price .faq .faq__body { color: var(--price-ink); }
/* Buttons: white fill with dark red ink is the same 7.29:1 inverted. */
.section--price .btn { --btn-bg: #FFFFFF; --btn-ink: var(--price-bg); --btn-line: transparent; }
.section--price .btn--secondary { --btn-bg: transparent; --btn-ink: #FFFFFF; --btn-line: rgba(255, 255, 255, 0.72); }
.section--price .btn--ghost { --btn-bg: transparent; --btn-ink: #FFFFFF; --btn-line: transparent; }
/* Call button: blue fill. #1667C4 gives white 5.57:1. The blue is only 1.31:1
   against the red ground, so the white outline is what satisfies SC 1.4.11. */
/* Both in-card CTAs match, so the two cards do not read as a bug: white fill,
   red ink (7.29:1), 2px white edge against the navy card. */
.section--price .price-card .btn,
.section--price .price-card .btn--secondary { --btn-bg: #FFFFFF; --btn-ink: var(--price-bg); --btn-line: #FFFFFF; border-width: 2px; }
/* Only the phone link goes blue. #1667C4 gives white 5.57:1. The blue is 1.31:1
   against the red ground, so the 2px white outline is what satisfies SC 1.4.11. */
.section--price a[href^="tel:"].btn { --btn-bg: #1667C4; --btn-ink: #FFFFFF; --btn-line: rgba(255,255,255,0.9); border-width: 2px; }
@media (hover: hover) and (pointer: fine) {
  .section--price .btn:hover { background: var(--price-ink); }
  .section--price .price-card .btn:hover,
  .section--price .price-card .btn--secondary:hover { background: var(--price-ink); border-color: #FFFFFF; }
  .section--price a[href^="tel:"].btn:hover { background: #1257A8; border-color: #FFFFFF; }  /* white 7.11:1 */
  .section--price .btn--secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: #FFFFFF; }
  .section--price .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
}
/* The numbers are the point of the block, so set them at display scale. */
.price-figure {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 1.8rem + 6vw, 6rem); line-height: 0.88;
  letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums;
  color: #FFFFFF; text-transform: uppercase;
}
.price-figure small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--price-ink); margin-top: var(--s-2); }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s-6); align-items: start; }
.price-grid > * { padding-top: var(--s-4); border-top: 2px solid rgba(255, 255, 255, 0.45); }
.section--price .compare { font-size: var(--t-base); }
.section--price .compare th, .section--price .compare td { padding-block: var(--s-4); }

/* Price cards. Panels are translucent white over the red so the ground still
   reads as one block: white measures 6.26:1 on the plain panel and 5.77:1 on
   the feature panel, #FFECE9 measures 5.50:1 and 5.07:1. */
.price-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: var(--s-5); align-items: start; }
.price-card {
  display: grid; gap: var(--s-4); align-content: start;
  padding: var(--s-6); border-radius: var(--r-lg);
  /* brand navy interior: white measures 16.10:1 on #082141, --price-ink 14.13:1.
     The light border stays, because navy on this red is only 2.21:1 and the
     border is what defines the card edge (SC 1.4.11). */
  background: #082141;
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.price-card--feature { border-width: 2px; border-color: #FFFFFF; }
.price-card .label { margin: 0; }
.price-card .btn { justify-self: start; }
.price-card__figure {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.75rem, 0.8rem + 5.4vw, 5rem); line-height: 0.86;
  letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums;
  color: #FFFFFF; white-space: nowrap;
}
.price-card__figure span { font-weight: 400; padding-inline: 0.06em; }
.price-card__facts { margin: 0; display: grid; gap: 0; }
.price-card__fact { display: grid; grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.price-card__fact dt { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--price-ink); }
.price-card__fact dd { margin: 0; color: #FFFFFF; font-size: var(--t-sm); }
.price-band__note { margin: var(--s-6) 0 0; max-width: 58ch; color: var(--price-ink); }
.price-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.price-cards > *, .price-card > * { min-width: 0; }
@media (max-width: 560px) { .price-card__fact { grid-template-columns: 1fr; gap: 2px; } }
@media (max-width: 420px) {
  .price-card { padding: var(--s-5); }
  /* the long in-card CTA label is wider than a 320px card if it cannot wrap */
  .price-card .btn { white-space: normal; text-align: center; padding-inline: var(--s-4); }
}

/* Alias for the same figure treatment outside a price card. */
.price-figure { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 0.8rem + 5.4vw, 5rem); line-height: 0.86; letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums; color: inherit; white-space: nowrap; }

/* Radio groups in the quote form. The whole label is the target, and the
   control itself is 24px so it clears WCAG 2.2 SC 2.5.8 on its own. */
.field--choice { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.field--choice legend { padding: 0; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--s-2); }
.choices { display: grid; gap: var(--s-2); }
.choices--inline { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
@media (max-width: 520px) { .choices--inline { grid-auto-flow: row; } }
.choice {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 48px; padding: var(--s-2) var(--s-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; font-size: var(--t-sm); line-height: 1.25;
  transition: border-color 140ms var(--ease-out);
}
.choice input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--accent-strong); }
.choice:focus-within { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .choice:hover { border-color: rgba(238,242,246,0.4); } }
.section--light .choice { background: var(--surface); border-color: rgba(11,15,20,0.28); }
@media (hover: hover) and (pointer: fine) { .section--light .choice:hover { border-color: rgba(11,15,20,0.55); } }
.req, .opt { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.04em; text-transform: none; }
.opt { color: var(--ink-mute); }

/* Emergency line under the symptom lede. */
.emergency-line {
  margin: var(--s-4) 0 0; padding-left: var(--s-4);
  border-left: 3px solid var(--danger);
  font-size: var(--t-sm); color: var(--ink-soft);
}
.emergency-line a { color: var(--ink); font-weight: 600; }
.emergency-line a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-mono); }

/* Owner photo slots on /about/. */
.team-member__photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-md); margin-bottom: var(--s-4); }
.brand__word small { font-size: 0.7rem; }
.also li::before { background: var(--ink-mute); }
.team article, .path { border-top: 0; }
.team article { box-shadow: var(--e1), inset 0 1px 0 var(--edge); }

/* Added: footer legal links (privacy/accessibility) */
.footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-legal { display: inline-flex; align-items: center; flex-wrap: wrap; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }

/* Added: proof lines near CTAs, reviews note (2026-09-03) */
.proof-line { border-left: 2px solid var(--accent); padding-left: var(--s-4); margin: var(--s-4) 0 0; max-width: 40rem; }
.proof-line blockquote { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.4; }
.proof-line figcaption { margin-top: var(--s-1); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-soft); letter-spacing: var(--track-label); text-transform: uppercase; }
@media (min-width: 700px) { .proof-line blockquote { white-space: nowrap; } }
.proof-line--band { margin-top: var(--s-5); }
.reviews-note { margin: 0; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-soft); }

.reviews-head__actions { display: flex; align-items: center; gap: var(--s-4); }
.reviews-head__actions .reviews-note { max-width: 18rem; }

/* JET brand panel: separate from the truck hero */
.mascot-intro { position: relative; overflow: clip; background: var(--surface); border-block: 1px solid var(--line); }
.mascot-intro__inner { min-height: 0; display: grid; grid-template-columns: minmax(14rem, 22rem) minmax(0, 42rem); gap: var(--s-8); align-items: center; padding-block: var(--s-8); }
.mascot-intro__inner > img { align-self: center; width: 100%; max-width: 22rem; height: auto; margin: 0; filter: drop-shadow(0 24px 30px rgba(0,0,0,0.45)); }
.mascot-intro__inner h2 { margin-bottom: var(--s-4); }
.mascot-intro__inner p:last-child { color: var(--ink-soft); max-width: 58ch; }
@media (max-width: 700px) { .mascot-intro__inner { min-height: 0; grid-template-columns: 8.5rem 1fr; gap: var(--s-4); } .mascot-intro__inner > img { width: 8.5rem; margin-top: var(--s-4); } .mascot-intro__inner h2 { font-size: clamp(1.65rem, 7vw, 2.25rem); } }

/* Added: JET mascot placements (2026-09-03), Pro Jet branding pass */
.team-mascot { display: block; width: 100%; max-width: 22rem; margin-top: var(--s-6); }
.cta-band__mascot { position: absolute; right: 0; bottom: 0; width: clamp(18rem, 32vw, 34rem); height: auto; z-index: -1; opacity: 0.35; pointer-events: none; }
@media (min-width: 700px) { .cta-band__mascot { opacity: 1; } }
.page-hero--404 { text-align: center; }
.page-hero--404 .mascot-404 { display: block; width: min(100%, 18rem); margin: 0 auto var(--s-6); }
.aside-card__mascot { display: block; width: min(100%, 13rem); margin: 0 auto var(--s-4); }

/* Official Pro Jet lockup: header + footer brand mark (2026-09-03).
   Dark header and dark footer, so the white lockup is used in both.
   Sized by height so the 400x147 art keeps its aspect ratio. */
.brand__mark--lockup { width: auto; height: 46px; max-width: 100%; }
.site-footer .brand__mark--lockup { height: 56px; }
@media (max-width: 960px) { .site-header .brand__mark--lockup { height: 40px; } }
@media (max-width: 420px) { .site-header .brand__mark--lockup { height: 34px; } }

/* Landscape mascot art (jet-stance is now 900x682, was 900x1613 portrait). */
@media (max-width: 700px) {
  .mascot-intro__inner { grid-template-columns: 1fr; gap: var(--s-5); padding-block: var(--s-7); }
  .mascot-intro__inner > img { width: min(100%, 18rem); margin-inline: 0; }
}

/* ---------- Hero balance fix, 2026-09-03 ----------
   .hero__content was both the centred .container AND capped at 44rem, so the
   text block centred itself in the viewport, left a dead gutter each side and
   sat on top of the truck. Let the container keep page alignment, then pin the
   text to the LEFT edge of it. The truck also had a negative right inset that
   cropped it off screen; bring it back in. */
.hero__content { max-width: none; }
.hero__content > * { max-width: 44rem; margin-inline-end: auto; }
@media (min-width: 961px) {
  .hero__content h1 { max-width: 15ch; }
  .hero__content .lede { max-width: 34rem; }
}
@media (min-width: 1200px) {
  .hero__content > * { max-width: 40rem; }
}

/* Pre-existing 12px horizontal scroll on mobile: the reviews header actions and
   note sat outside the gutter. Keep them inside it. */
@media (max-width: 700px) {
  .reviews-head__actions, .reviews-note { max-width: 100%; box-sizing: border-box; }
  .reviews-head__actions { flex-wrap: wrap; }
}

/* Hero trailer replaces the truck cutout, 2026-09-03. Owner: put the trailer up
   there instead of the truck. The abandoned truck layer has been retired. */

/* --------------------------------------------------------------------------
   Commercial page: lighter, cleaner treatment.
   Owner directive 2026-09-04: this page does not have to match the dark
   concept of the others. Show the stainless steel, keep it natural and
   professional. The full dark wash is replaced by a scrim sized to where the
   text actually sits, measured rather than assumed: at 1440 the headline ends
   at 54% and the lede at 61%, so the right side can stay clean. Below 961
   the text runs full width, so there the scrim has to be vertical.
   -------------------------------------------------------------------------- */
.page-commercial .page-hero__bg img { opacity: 1; }
.page-commercial .page-hero__bg::after {
  background: linear-gradient(to top, var(--canvas) 0%, rgba(11,15,20,0.88) 30%, rgba(11,15,20,0.78) 62%, rgba(11,15,20,0.80));
}
@media (min-width: 961px) {
  .page-commercial .page-hero__bg::after {
    background:
      linear-gradient(to right, rgba(11,15,20,0.93) 0%, rgba(11,15,20,0.89) 44%, rgba(11,15,20,0.74) 62%, rgba(11,15,20,0.18) 80%, rgba(11,15,20,0) 92%),
      linear-gradient(to top, var(--canvas) 0%, rgba(11,15,20,0.30) 18%, rgba(11,15,20,0) 44%);
  }
}


/* ==========================================================================
   PRICE BAND v2 (motion candidate). Editorial split over the silk shader:
   copy left, two staggered optical-glass cards right. Cards: translucent
   navy + backdrop blur + cursor-lit spectral edge. Figures count up on
   reveal; each card carries a pipe cross-section that animates the
   difference between jetting (full bore) and snaking (a hole).
   ========================================================================== */
.section--price { padding-block: clamp(4rem, 8vw, 7rem); }
.price-band__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.price-band__copy { position: sticky; top: calc(var(--header-h, 72px) + 2rem); }
.price-band__copy .section__head { margin-bottom: var(--s-6); }
.section--price h2 { font-size: clamp(2.6rem, 1.4rem + 4.2vw, 4.6rem); line-height: .92; max-width: 12ch; text-wrap: balance; }
.section--price .lede { color: #FFF3F0; }
.price-band__note { margin-top: 0; }
.price-band__actions { margin-top: var(--s-5); }

.price-cards { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: start; }
@media (min-width: 900px) {
  .price-cards { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .price-card--feature { margin-top: 0; }
  .price-card:not(.price-card--feature) { margin-top: var(--s-8); }
}
.price-card.glass {
  position: relative; overflow: hidden;
  --mx: 50%; --my: 50%;
  /* Opaque brand navy. Translucency over the red reads as purple, so no glass here. */
  background: #082141;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255,255,255,.18) inset;
  transform-style: preserve-3d; will-change: transform;
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.price-card.glass::before { /* cursor-lit edge */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(138, 209, 255, 0.22), transparent 55%);
  opacity: 0; transition: opacity 320ms var(--ease-out);
}
.price-card.glass::after { /* spectral hairline */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; padding: 1px;
  background: radial-gradient(300px circle at var(--mx) var(--my), rgba(255,255,255,.9), rgba(138,209,255,.35) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 320ms var(--ease-out);
}
.price-card.glass:hover::before, .price-card.glass:hover::after, .price-card.glass:focus-within::after { opacity: 1; }
.price-card.glass > * { position: relative; z-index: 1; }
.price-card--feature.glass { border-color: rgba(255,255,255,.6); background: #061B38; }
.price-card__pill {
  margin: 0; justify-self: start; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-label);
  text-transform: uppercase; color: #082141; background: #8AD1FF; padding: .35rem .6rem; border-radius: 999px;
}
.price-card__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label xsec" "figure figure"; gap: var(--s-2) var(--s-4); align-items: end; }
.price-card__top .label { grid-area: label; align-self: end; }
.price-card__top .xsec { grid-area: xsec; }
.price-card__top .price-card__figure { grid-area: figure; }
.section--price .price-card__figure { font-size: clamp(2.1rem, 0.9rem + 3vw, 3.6rem); }

.price-card__figure .dash { font-weight: 400; padding-inline: .04em; opacity: .7; }
.price-card__fact { transform: translateX(0); }
.price-card__fact dd { transition: color 200ms; }

/* Pipe cross-section */
.xsec { margin: 0; width: clamp(72px, 7vw, 96px); aspect-ratio: 1; display: grid; place-items: center; }
.xsec svg { width: 100%; height: 100%; overflow: visible; }
.xsec__water { opacity: 0; transition: opacity 600ms var(--ease-out) 700ms; }
.xsec__gunk { transform-origin: 60px 60px; transition: stroke-width 1100ms cubic-bezier(.6,0,.2,1) 250ms, opacity 500ms 900ms; }
.xsec__hole { transition: r 700ms var(--ease-out) 500ms; }
.xsec__nozzle { transform-origin: 60px 60px; opacity: 0; }
.xsec__jets { transform-origin: 60px 60px; }
.xsec.is-run.xsec--jet .xsec__gunk { stroke-width: 0; opacity: 0; }
.xsec.is-run.xsec--jet .xsec__water { opacity: 1; }
.xsec.is-run.xsec--jet .xsec__nozzle { opacity: 1; animation: xsec-spin 1200ms linear 200ms 1; }
.xsec.is-run.xsec--jet .xsec__jets { animation: xsec-jets 1200ms linear 200ms 1; }
.xsec.is-run.xsec--snake .xsec__hole { r: 13; }
.xsec.is-run.xsec--snake .xsec__nozzle { opacity: 1; r: 4; animation: xsec-poke 900ms var(--ease-out) 300ms 1; }
@keyframes xsec-spin { from { transform: rotate(0deg) } to { transform: rotate(540deg) } }
@keyframes xsec-jets { 0% { opacity: 0; transform: rotate(0deg) scale(.3) } 15% { opacity: 1 } 85% { opacity: 1 } 100% { opacity: 0; transform: rotate(540deg) scale(1.05) } }
@keyframes xsec-poke { 0% { transform: translateY(-46px) } 60% { transform: translateY(0) } 100% { transform: translateY(0) } }
.reduced-motion .xsec--jet .xsec__gunk { stroke-width: 0; opacity: 0; }
.reduced-motion .xsec--jet .xsec__water { opacity: 1; }
.reduced-motion .xsec--snake .xsec__hole { r: 13; }
.reduced-motion .price-card.glass { transform: none !important; }

/* Reveal choreography inside the card */
[data-reveal] .price-card .price-card__fact { opacity: 0; transform: translateX(-10px); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); }
[data-reveal].is-in .price-card .price-card__fact { opacity: 1; transform: none; }
[data-reveal].is-in .price-card .price-card__fact:nth-child(1) { transition-delay: 350ms; }
[data-reveal].is-in .price-card .price-card__fact:nth-child(2) { transition-delay: 450ms; }
[data-reveal].is-in .price-card .price-card__fact:nth-child(3) { transition-delay: 550ms; }
.no-js .price-card__fact, .reduced-motion .price-card__fact { opacity: 1 !important; transform: none !important; }

@media (max-width: 899px) {
  .price-band__grid { grid-template-columns: 1fr; }
  .price-band__copy { position: static; }
  .price-band__actions { display: none; } /* the sticky Call/Text/Quote dock covers this on phones */
}
@media (max-width: 420px) { .xsec { width: 72px; } }


/* ==========================================================================
   COMMERCIAL v2 (motion candidate). A clean, light, professional treatment
   that stays inside the palette: cool paper ground, navy type, jet blue
   accent, hairline structure, sentence-case headings. Header, footer and
   callbar stay dark so the site still reads as one system.
   ========================================================================== */
.page-commercial { --c-paper: #F5F7FA; --c-paper-2: #FFFFFF; --c-navy: #082141; --c-ink: #0B1B33; --c-ink-soft: #4A5A70; --c-ink-mute: #7C8AA0; --c-line: rgba(8, 33, 65, 0.12); --c-accent: #1F7AE0; --c-accent-deep: #135FB8; }
.page-commercial main { background: var(--c-paper); color: var(--c-ink); color-scheme: light; }
.page-commercial main h1, .page-commercial main h2, .page-commercial main h3 { text-transform: none; letter-spacing: -0.01em; color: var(--c-navy); }
.page-commercial main h1 { font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4.2rem); line-height: 1.02; max-width: 16ch; text-wrap: balance; }
.page-commercial main h2 { font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem); line-height: 1.08; max-width: 22ch; text-wrap: balance; }
.page-commercial main h3 { font-size: 1.35rem; line-height: 1.15; }
.page-commercial main .lede { color: var(--c-ink-soft); }
.page-commercial main .label { color: var(--c-accent-deep); }
.page-commercial main .crumbs, .page-commercial main .crumbs a { color: var(--c-ink-mute); }
.page-commercial main a:not(.btn) { color: var(--c-accent-deep); text-decoration-color: rgba(19,95,184,.4); }
.page-commercial main .btn { --btn-bg: var(--c-accent); --btn-ink: #FFFFFF; --btn-line: transparent; }
.page-commercial main .btn--secondary { --btn-bg: #FFFFFF; --btn-ink: var(--c-navy); --btn-line: rgba(8, 33, 65, 0.25); }
@media (hover: hover) and (pointer: fine) {
  .page-commercial main .btn:hover { background: var(--c-accent-deep); }
  .page-commercial main .btn--secondary:hover { background: #FFFFFF; border-color: var(--c-navy); }
}
.page-commercial main :focus-visible { outline-color: var(--c-accent-deep); }
.page-commercial main [data-reveal] { transform: translateY(12px); }
.page-commercial .grain { display: none; }

.c-hero { padding: calc(var(--header-h, 72px) + clamp(2.5rem, 6vw, 5rem)) 0 0; background: var(--c-paper-2); border-bottom: 1px solid var(--c-line); }
.c-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.c-hero__copy .label { margin-bottom: var(--s-3); }
.c-hero__copy .lede { max-width: 52ch; margin-top: var(--s-4); }
.c-hero__copy .hero__cta { margin-top: var(--s-6); }
.c-hero__media { position: relative; margin: 0; }
.c-hero__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; box-shadow: 0 30px 60px -30px rgba(8, 33, 65, 0.35); }
.c-hero__stat { position: absolute; left: -1.5rem; bottom: 1.5rem; background: var(--c-navy); color: #FFFFFF; padding: var(--s-4) var(--s-5); border-radius: 8px; display: grid; gap: 2px; max-width: 16rem; box-shadow: 0 20px 40px -20px rgba(8, 33, 65, 0.6); }
.c-hero__stat strong { font-family: var(--font-display); font-size: 2rem; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.c-hero__stat span { font-size: var(--t-sm); color: rgba(255,255,255,.78); line-height: 1.35; }
.c-strip { list-style: none; margin: 0; padding: var(--s-5) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); border-top: 1px solid var(--c-line); }
.c-strip li { display: grid; gap: 2px; padding-left: var(--s-4); border-left: 2px solid var(--c-accent); }
.c-strip strong { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.05; color: var(--c-navy); font-variant-numeric: tabular-nums; }
.c-strip span { font-size: var(--t-sm); color: var(--c-ink-soft); }

.c-section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.c-section--alt { background: var(--c-paper-2); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.c-section .section__head { margin-bottom: var(--s-7); }

.ind-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; }
.ind { background: var(--c-paper-2); padding: var(--s-6); display: grid; gap: var(--s-3); align-content: start; transition: background 200ms var(--ease-out); }
.ind:hover { background: #F9FBFD; }
.ind__icon { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: rgba(31, 122, 224, 0.10); color: var(--c-accent-deep); }
.ind__icon svg { width: 24px; height: 24px; }
.ind h3 { margin: 0; font-size: 1.2rem; }
.ind p { margin: 0; color: var(--c-ink-soft); font-size: var(--t-sm); }

.c-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); position: relative; }
.c-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 1px; background: var(--c-line); }
.c-steps li { position: relative; padding-top: var(--s-6); display: grid; gap: var(--s-2); align-content: start; }
.c-steps__n { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--c-navy); color: #FFFFFF; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; box-shadow: 0 0 0 6px var(--c-paper-2); }
.c-steps h3 { margin: var(--s-3) 0 0; font-size: 1.25rem; }
.c-steps p { margin: 0; color: var(--c-ink-soft); font-size: var(--t-sm); }

.c-checks { gap: 0; margin: 0; }
.c-checks li { padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line); align-items: center; color: var(--c-ink); }
.c-checks li:first-child { border-top: 1px solid var(--c-line); }
.c-checks svg { color: var(--c-accent-deep); margin-top: 0; }
.page-commercial .split > div > .checks + .btn { margin-top: var(--s-5); }

.c-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.c-plan { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 12px; padding: var(--s-6); display: grid; gap: var(--s-4); align-content: start; }
.c-plan--feature { background: var(--c-navy); color: #FFFFFF; border-color: var(--c-navy); }
.c-plan--feature h3, .c-plan--feature .label { color: #FFFFFF; }
.c-plan.c-plan--feature p { color: rgba(255,255,255,.85); }
.c-plan--feature .c-plan__list li { border-color: rgba(255,255,255,.18); color: #FFFFFF; }
.c-plan--feature .c-plan__list li::before { color: #8AD1FF; }
.c-plan h3 { margin: 0; }
.c-plan p { margin: 0; color: var(--c-ink-soft); }
.c-plan__list { list-style: none; margin: 0; padding: 0; display: grid; }
.c-plan__list li { padding: var(--s-2) 0 var(--s-2) 1.4rem; border-top: 1px solid var(--c-line); position: relative; font-size: var(--t-sm); }
.c-plan__list li::before { content: "\2713"; position: absolute; left: 0; color: var(--c-accent-deep); }
.c-plan .btn { justify-self: start; margin-top: var(--s-2); }
.c-note { margin: var(--s-5) 0 0; color: var(--c-ink-soft); font-size: var(--t-sm); }

.c-quote { margin: 0; background: var(--c-paper-2); border: 1px solid var(--c-line); border-left: 4px solid var(--c-accent); border-radius: 12px; padding: var(--s-6); display: grid; gap: var(--s-5); align-self: start; }
.c-quote blockquote { margin: 0; font-size: var(--t-md); line-height: 1.5; color: var(--c-ink); text-wrap: pretty; }
.c-quote figcaption { display: grid; gap: 2px; font-size: var(--t-sm); color: var(--c-ink-soft); }
.c-quote figcaption strong { color: var(--c-navy); }
.c-quote figcaption a { margin-top: var(--s-2); }

.c-faq { border-top-color: var(--c-line); }
.c-faq details { border-bottom-color: var(--c-line); }
.c-faq summary { text-transform: none; font-family: var(--font-text); font-weight: 600; font-size: 1.1rem; color: var(--c-navy); padding: var(--s-4) 0; }
.c-faq summary::after { color: var(--c-accent-deep); }
.c-faq .faq__body { color: var(--c-ink-soft); }

.c-cta { background: var(--c-navy); color: #FFFFFF; padding-block: clamp(3.5rem, 7vw, 6rem); }
.page-commercial .c-cta h2, .page-commercial .c-cta .label { color: #FFFFFF; }
.page-commercial .c-cta .lede { color: rgba(255,255,255,.8); }
.c-cta__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: center; }
.c-cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: flex-end; }
.page-commercial .c-cta .btn--secondary { --btn-bg: transparent; --btn-ink: #FFFFFF; --btn-line: rgba(255,255,255,.5); }

@media (max-width: 960px) {
  .c-hero__grid, .c-cta__grid { grid-template-columns: 1fr; }
  .c-hero__media { order: -1; }
  .c-hero__stat { left: 1rem; bottom: 1rem; }
  .c-strip, .c-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-steps::before { display: none; }
  .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-cta__actions { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .c-strip, .c-steps, .ind-grid, .c-plans { grid-template-columns: 1fr; }
  .c-hero__media img { aspect-ratio: 4 / 3; }
}

.section--price h2 .em-blue { font-style: normal; color: #8AD1FF; } /* light jet blue: 7.3:1 on the brand red */

/* ---- Site-wide polish pass (motion candidate) ---- */
/* Contact: map fills its column instead of a small tile with dead space under it. */
.contact-grid > div:last-child { display: grid; grid-template-rows: auto auto; gap: var(--s-3); align-self: start; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.contact-grid iframe, .contact-grid iframe[src*="google.com/maps"] { width: 100%; height: 30rem; min-height: 0; aspect-ratio: auto; }
@media (max-width: 760px) { .contact-grid > div:last-child { position: static; } .contact-grid iframe { height: 20rem; } }
/* About: equipment gallery, both photos the same height. */
.equip-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-4); margin-top: var(--s-7); }
.equip-grid figure { margin: 0; }
.equip-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); aspect-ratio: 3 / 2; display: block; }
.equip-grid figure:last-child img { aspect-ratio: auto; }
@media (max-width: 760px) { .equip-grid { grid-template-columns: 1fr; } .equip-grid figure:last-child img { aspect-ratio: 4 / 3; } }
/* Process steps everywhere: numbered rings on a track instead of tiny mono labels. */
.process { position: relative; }
.process::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 1px; background: var(--line); }
.process li { border-top: 0; padding-top: var(--s-7); }
.process li::before { content: counter(step); counter-increment: step; position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; padding: 0; letter-spacing: 0; box-shadow: 0 0 0 6px var(--canvas); }
.section .process li::before, .section--surface .process li::before { background: var(--accent); }
.section--surface .process li::before { box-shadow: 0 0 0 6px var(--canvas-2); }
@media (max-width: 760px) { .process::before { display: none; } }

/* Pricing band polish: vignette to the corners, glass sheen on cards, cross-sections and the blue button. */
.section--price::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, rgba(11,15,20,0) 35%, rgba(11,15,20,0.28) 70%, rgba(11,15,20,0.62) 100%); }
.price-card.glass {
  background: linear-gradient(165deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 28%, rgba(255,255,255,0) 55%), #082141;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.28) inset, 0 -1px 0 rgba(0,0,0,0.35) inset;
}
.price-card--feature.glass { background: linear-gradient(165deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 28%, rgba(255,255,255,0) 55%), #061B38; }
.xsec { position: relative; }
.xsec::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(138,209,255,0.35), rgba(138,209,255,0) 70%); z-index: -1; }
.xsec .xsec__wall { stroke: rgba(255,255,255,0.75); }
.xsec__gloss { mix-blend-mode: screen; }
.section--price a[href^="tel:"].btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 45%, rgba(0,0,0,0) 46%), #1667C4;
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 12px 24px -12px rgba(0,0,0,0.6);
}
.section--price .price-card .btn { box-shadow: 0 10px 20px -12px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.6) inset; }

/* ==========================================================================
   SURPRISES (motion candidate): JET flyby + Clog Monster ambush. js/surprises.js
   ========================================================================== */
.flyby { position: fixed; left: 0; top: 22vh; z-index: 90; pointer-events: none; width: clamp(9rem, 18vw, 18rem);
  animation: flyby 2600ms cubic-bezier(.35,0,.25,1) forwards; will-change: transform; }
.flyby__jet { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); animation: flyby-bob 600ms ease-in-out infinite alternate; }
.flyby__trail { position: absolute; right: 78%; top: 44%; height: 6px; width: 60vw; border-radius: 999px; transform-origin: right center;
  background: linear-gradient(90deg, rgba(138,209,255,0) 0%, rgba(138,209,255,.55) 60%, rgba(255,255,255,.95) 100%); filter: blur(1.5px); animation: flyby-trail 2600ms linear forwards; }
@keyframes flyby { 0% { transform: translate3d(-40vw, 6vh, 0) rotate(-6deg); } 45% { transform: translate3d(35vw, -4vh, 0) rotate(2deg); } 100% { transform: translate3d(140vw, -14vh, 0) rotate(-4deg); } }
@keyframes flyby-bob { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
@keyframes flyby-trail { 0% { opacity: 0; transform: scaleX(.2); } 20% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.2); } }

.cta-band { overflow: clip; }
.cta-band.is-ambush .cta-band__mascot { opacity: 0; transition: opacity 300ms; }
.ambush { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: none; }
.ambush.is-on { display: block; }
/* Scene lives in the right half of the band, clear of the copy and buttons. */
.ambush__monster { position: absolute; bottom: -4%; right: -30%; width: clamp(9rem, 16vw, 15rem); height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 12px 18px rgba(0,0,0,.6)); }
.ambush.s-walk .ambush__monster { animation: monster-walk 2300ms ease-out forwards, monster-waddle 380ms ease-in-out 6 alternate; }
.ambush.s-scream .ambush__monster { right: 34%; animation: monster-flinch 500ms ease-out; }
.ambush.s-blast .ambush__monster { right: 34%; animation: monster-shake 120ms linear infinite; }
.ambush.s-melt .ambush__monster { right: 34%; animation: monster-melt 1300ms ease-in forwards; }
@keyframes monster-walk { from { right: -30%; } to { right: 34%; } }
@keyframes monster-waddle { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(4deg) translateY(-6px); } }
@keyframes monster-flinch { 0% { transform: scale(1); } 40% { transform: scale(1.12) translateY(-10px); } 100% { transform: scale(1); } }
@keyframes monster-shake { 0% { transform: translateX(-4px) rotate(-2deg); } 100% { transform: translateX(4px) rotate(2deg); } }
@keyframes monster-melt { 0% { transform: scaleY(1) scaleX(1); opacity: 1; } 60% { transform: scaleY(.55) scaleX(1.25); opacity: .9; } 100% { transform: scaleY(.05) scaleX(1.6); opacity: 0; } }
.ambush__puddle { position: absolute; bottom: 2%; right: 30%; width: clamp(12rem, 20vw, 20rem); height: 2.2rem; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(63,169,245,.7), rgba(63,169,245,.25) 55%, rgba(63,169,245,0) 75%); opacity: 0; transform: scaleX(.3); }
.ambush.s-blast .ambush__puddle { animation: puddle 900ms ease-out forwards; }
.ambush.s-melt .ambush__puddle { opacity: 1; transform: scaleX(1); }
.ambush.s-exit .ambush__puddle { opacity: 1; transform: scaleX(1); animation: puddle-fade 1400ms ease-in forwards; }
@keyframes puddle { to { opacity: 1; transform: scaleX(1); } }
@keyframes puddle-fade { to { opacity: 0; } }
/* JET comes in from the top-right and hovers to the right of the monster, nozzle pointing left. */
.ambush__jet { position: absolute; bottom: 16%; right: -40%; width: clamp(12rem, 22vw, 22rem); height: auto; transform: scaleX(-1); filter: drop-shadow(0 16px 22px rgba(0,0,0,.6)); }
.ambush.s-scream .ambush__jet { animation: jet-in 700ms cubic-bezier(.2,.8,.2,1) forwards; }
.ambush.s-blast .ambush__jet, .ambush.s-melt .ambush__jet { right: 4%; animation: jet-hover 500ms ease-in-out infinite alternate; }
.ambush.s-exit .ambush__jet { right: 4%; animation: jet-out 1200ms cubic-bezier(.5,0,.8,.2) forwards; }
@keyframes jet-in { from { right: -40%; bottom: 60%; transform: scaleX(-1) rotate(10deg); } to { right: 4%; bottom: 16%; transform: scaleX(-1) rotate(0); } }
@keyframes jet-hover { from { transform: scaleX(-1) translateY(-5px); } to { transform: scaleX(-1) translateY(5px); } }
@keyframes jet-out { to { right: 30%; bottom: 140%; transform: scaleX(-1) rotate(-25deg); opacity: 0; } }
/* Water: from JET's nozzle (left edge of the flipped sprite) leftward into the monster. */
.ambush__blast { position: absolute; bottom: 27%; right: 24%; height: 14px; width: 0; border-radius: 999px; transform-origin: right center; background: linear-gradient(270deg, #FFFFFF 0%, rgba(138,209,255,.9) 40%, rgba(138,209,255,0) 100%); filter: blur(1px); opacity: 0; }
.ambush.s-blast .ambush__blast { animation: blast 900ms ease-out forwards; }
@keyframes blast { 0% { width: 0; opacity: 0; } 25% { opacity: 1; } 100% { width: 20%; opacity: 1; } }
.ambush.s-melt .ambush__blast { opacity: 1; width: 20%; animation: blast-flicker 140ms linear infinite alternate; }
@keyframes blast-flicker { from { filter: blur(1px) brightness(1); } to { filter: blur(2px) brightness(1.3); } }
.ambush.s-exit .ambush__blast { animation: blast-off 300ms ease-in forwards; }
@keyframes blast-off { to { width: 0; opacity: 0; } }
@media (max-width: 700px) {
  .ambush__monster { width: 7.5rem; } .ambush__jet { width: 10rem; bottom: 22%; }
  .ambush.s-scream .ambush__monster, .ambush.s-blast .ambush__monster, .ambush.s-melt .ambush__monster { right: 46%; }
  @keyframes monster-walk { from { right: -60%; } to { right: 46%; } }
  .ambush.s-blast .ambush__jet, .ambush.s-melt .ambush__jet, .ambush.s-exit .ambush__jet { right: 2%; }
  @keyframes jet-in { from { right: -60%; bottom: 60%; transform: scaleX(-1); } to { right: 2%; bottom: 22%; transform: scaleX(-1); } }
  .ambush__blast { right: 28%; bottom: 32%; } .ambush__puddle { right: 40%; width: 11rem; }
}
.reduced-motion .flyby, .reduced-motion .ambush { display: none !important; }


/* --------------------------------------------------------------------------
   Hero: no overlay. 2026-09-04, owner directive.
   The mist layer and the full-bleed scrim are both gone. The mist was a
   screen-blended image inset from the left, so its hard edge painted a
   vertical line down the middle of the hero and a milky cast on one side.
   In their place: one elliptical pool of shade that hugs the copy and
   falls to zero on every side, so nothing draws a straight edge. Tuned
   against the brightest frame of the trailer, which is a sunlit living room.
   -------------------------------------------------------------------------- */
.hero__content { position: relative; }
.hero-pool {
  position: absolute; z-index: -1; pointer-events: none;
  left: -16%; right: -46%; top: -22%; bottom: -22%;
  background:
    radial-gradient(52% 40% at 27% 72%, rgba(3,6,11,.95) 0%, rgba(3,6,11,.86) 44%, rgba(3,6,11,.45) 70%, rgba(3,6,11,0) 88%),
    radial-gradient(58% 52% at 27% 48%, rgba(3,6,11,.96) 0%, rgba(3,6,11,.88) 42%, rgba(3,6,11,.5) 68%, rgba(3,6,11,0) 88%);
}
.hero__content h1 { text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.hero__content .lede { color: #EAF0F7; }
.hero__content .lede,
.hero .proof-line blockquote,
.hero .proof-line figcaption,
.hero__meta { text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 2px 14px rgba(0,0,0,.85); }
@media (max-width: 960px) {
  .hero-pool { left: -10%; right: -10%; top: -8%; bottom: -8%;
    background:
      radial-gradient(70% 34% at 44% 74%, rgba(3,6,11,.94) 0%, rgba(3,6,11,.78) 46%, rgba(3,6,11,.32) 70%, rgba(3,6,11,0) 88%),
      radial-gradient(82% 48% at 44% 40%, rgba(3,6,11,.95) 0%, rgba(3,6,11,.84) 44%, rgba(3,6,11,.44) 68%, rgba(3,6,11,0) 88%);
  }
}
@media (prefers-reduced-motion: reduce) { .hero-pool { display: block; } }

/* Shared navigation refinement: keep the mark legible as space narrows. */
.site-header .brand { flex-shrink: 0; }
.site-header .brand__mark--lockup { width: 170px; height: auto; }
.nav a { min-height: 44px; display: inline-flex; align-items: center; }
.nav .btn { color: #FFFFFF; }
@media (min-width: 961px) and (max-width: 1100px) {
  .site-header .container { gap: 12px; }
  .site-header .brand__mark--lockup { width: 145px; }
  .nav a { padding-inline: 8px; }
  .header-phone { padding-inline: 0; font-size: .8125rem; }
}
@media (max-width: 960px) {
  .site-header .brand__mark--lockup { width: 145px; }
  .nav a { display: flex; }
}