/* ==========================================================================
   RIDGELINE MECHANICAL — Brand layer (Tier 1 · Brochure)
   Register: INDUSTRIAL-BOLD. Oversized, deliberate, dark.
   Type: Bricolage Grotesque (display, wdth 75–90) · Satoshi (body) · Azeret Mono (labels, numbers).
   Motion (3 ideas, all in motion.css): scroll reveals · pinned services stack · card hover.
   Signature: the HAZARD RULE — a 2px safety-orange left rule on every block that
   carries a number or a promise. Orange appears otherwise only on header tel,
   the hero em-word, and the bottom action bar.
   Load order: base.css → motion.css → brand.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TYPE TOKENS
   -------------------------------------------------------------------------- */
:root {
  --font-display: 'Bricolage Grotesque', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Satoshi', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Azeret Mono', ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Six sizes in the system: mono 12 · body 17–18 · lead 18–22 · h3 22–30 · h2 32–56 · h1/display (hero 48–128, giant 112–224) */
  --t-mono: 0.75rem;
  --t-h3: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --t-h2: clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
  --t-h1: clamp(2.75rem, 1.8rem + 4.2vw, 5.5rem);
  --t-hero: clamp(3rem, 1.8rem + 6.5vw, 8rem);
  --t-giant: clamp(7rem, 4rem + 14vw, 14rem);

  --lh-h1: 0.9;
  --lh-h2: 0.92;
  --lh-h3: 1;
  --tr-h1: 0.01em;        /* large caps need little tracking */
  --tr-h2: 0.01em;
  --tr-h3: 0.005em;
  --tr-eyebrow: 0.08em;   /* caps labels */

  /* Radius ladder: 0 (rows) · 2px (controls, chips) · 4px (cards). Less rounding reads more confident. */
  --r-xs: 2px; --r-sm: 2px; --r-md: 2px;
  --r-lg: 4px; --r-xl: 4px; --r-2xl: 4px;
  --r-full: 2px;
}

body { font-variant-numeric: tabular-nums; }

h1, h2, h3, .display-face {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-variation-settings: "wdth" 85, "opsz" 96;
}
h1 { font-variation-settings: "wdth" 80, "opsz" 96; font-weight: 800; }
h3 { font-variation-settings: "wdth" 90; font-weight: 600; }

/* Mono role: labels, numbers, phone, captions */
.mono, .eyebrow, .label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  line-height: 1.5;
}
.eyebrow { color: var(--muted); }
.mono--caps-off { text-transform: none; letter-spacing: 0; }

/* Signature: the hazard rule */
.hz { border-left: 2px solid var(--accent); padding-left: var(--sp-4); }

/* Arrow link — the utilitarian text link */
.arrow-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px;
  font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
}
.arrow-link::after { content: "→"; font-family: var(--font-body); font-size: 1.125em; transition: transform var(--duration-fast) var(--ease-ui); }

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   2. COLOUR — near-black + safety orange. Neutrals are an alpha ramp of --fg,
   re-declared on each band so one scale works on paper and on ink.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  --ink-950: oklch(0.17 0.012 258);
  --ink-900: oklch(0.21 0.012 258);
  --paper:   oklch(0.965 0.005 250);
  --safety:  oklch(0.70 0.19 44);

  --bg: var(--paper);
  --fg: var(--ink-950);
  --elev: oklch(0.985 0.003 250);                              /* cards: lighter than paper */
  --surface: oklch(0.985 0.003 250);
  --surface-2: color-mix(in oklab, var(--fg) 6%, transparent);
  --muted: color-mix(in oklab, var(--fg) 66%, transparent);
  --border: color-mix(in oklab, var(--fg) 12%, transparent);
  --border-strong: color-mix(in oklab, var(--fg) 30%, transparent);
  --accent: var(--safety);
  --accent-fg: var(--ink-950);
  --accent-text: oklch(0.55 0.17 42);
  --focus: var(--ink-950);
  --danger: oklch(0.52 0.19 27);
  --band: var(--ink-950);          /* dark sections */
  --band-deep: var(--ink-950);     /* footer */

  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23555' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ink-950);
    --fg: oklch(0.93 0.005 258);
    --elev: oklch(0.25 0.012 258);
    --surface: var(--ink-900);
    --surface-2: color-mix(in oklab, var(--fg) 7%, transparent);
    --muted: color-mix(in oklab, var(--fg) 66%, transparent);
    --border: color-mix(in oklab, var(--fg) 13%, transparent);
    --border-strong: color-mix(in oklab, var(--fg) 30%, transparent);
    --accent: oklch(0.75 0.17 46);
    --accent-fg: var(--ink-950);
    --accent-text: oklch(0.78 0.16 48);
    --focus: oklch(0.85 0.12 46);
    --band: var(--ink-900);
    --band-deep: oklch(0.13 0.012 258);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23aaa' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}
[data-theme="dark"] {
  --bg: var(--ink-950);
  --fg: oklch(0.93 0.005 258);
  --elev: oklch(0.25 0.012 258);
  --surface: var(--ink-900);
  --surface-2: color-mix(in oklab, var(--fg) 7%, transparent);
  --muted: color-mix(in oklab, var(--fg) 66%, transparent);
  --border: color-mix(in oklab, var(--fg) 13%, transparent);
  --border-strong: color-mix(in oklab, var(--fg) 30%, transparent);
  --accent: oklch(0.75 0.17 46);
  --accent-fg: var(--ink-950);
  --accent-text: oklch(0.78 0.16 48);
  --focus: oklch(0.85 0.12 46);
  --band: var(--ink-900);
  --band-deep: oklch(0.13 0.012 258);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23aaa' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Ink bands — the same ramp, paper on ink. Works in both themes. */
.section--dark, .hero--ridgeline, .stats-band, .site-footer, .cta-bar {
  --fg: oklch(0.94 0.005 258);
  --elev: oklch(0.24 0.012 258);
  --surface: oklch(0.22 0.012 258);
  --surface-2: color-mix(in oklab, var(--fg) 8%, transparent);
  --muted: color-mix(in oklab, var(--fg) 66%, transparent);
  --border: color-mix(in oklab, var(--fg) 14%, transparent);
  --border-strong: color-mix(in oklab, var(--fg) 32%, transparent);
  --focus: var(--fg);
  --bg: var(--band);                       /* filled buttons read --bg for their text colour */
  color: var(--fg);
}
.section--dark, .cta-bar { background: var(--band); }
.site-footer { --bg: var(--band-deep); background: var(--band-deep); }
.hero--ridgeline { --bg: var(--ink-950); background: var(--ink-950); }

/* --------------------------------------------------------------------------
   3. HEADER
   -------------------------------------------------------------------------- */
.logo {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 80, "opsz" 24;
  font-weight: 800; font-size: 1.25rem;
  letter-spacing: 0.01em; text-transform: uppercase;
  line-height: 1;
}
.logo__sub {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.12em; color: var(--muted);
}
@media (max-width: 479px) { .logo__sub { display: none; } }

.nav-visible a, .nav-desktop a {
  font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
}
/* Tight pair, away from the logo: the two links hug each other so the
   logo's auto margin gets every free pixel between wordmark and nav. */
.nav-visible { gap: 0; }
.nav-visible a { padding-inline: var(--sp-1); }
@media (max-width: 429px) {
  .nav-visible a { font-size: 0.6875rem; letter-spacing: 0.05em; }
  .logo { font-size: 1.125rem; }          /* phones: the wordmark gives, not the menu */
  .menu-btn { flex-shrink: 0; }
}
.nav-desktop a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: var(--sp-3); border-radius: var(--r-sm);
  color: var(--muted); text-decoration: none;
  transition: color var(--duration-fast) var(--ease-ui), background-color var(--duration-fast) var(--ease-ui);
}
.nav-desktop a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--fg); }

.menu-btn, .drawer__close {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  transition: border-color var(--duration-fast) var(--ease-ui), background-color var(--duration-fast) var(--ease-ui);
}

/* Header phone — the highest-value element on an emergency-trade site (orange use 1 of 3) */
.header-tel {
  display: none;
  align-items: center; gap: var(--sp-2);
  min-height: 44px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--accent-fg);
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-ui);
}
@media (min-width: 560px) { .header-tel { display: inline-flex; } }

.theme-btn {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: color var(--duration-fast) var(--ease-ui), background-color var(--duration-fast) var(--ease-ui);
}
@media (max-width: 479px) { .theme-btn { display: none; } }   /* system preference still applies */
.theme-btn svg + svg { display: none; }
[data-theme="dark"] .theme-btn svg:first-child,
:root:not([data-theme="light"]) .theme-btn svg:first-child { display: none; }
[data-theme="dark"] .theme-btn svg + svg,
:root:not([data-theme="light"]) .theme-btn svg + svg { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-btn svg:first-child { display: block; }
  :root:not([data-theme="dark"]) .theme-btn svg + svg { display: none; }
}

/* Drawer — poster-scale nav */
.drawer-nav a, .acc__btn {
  font-family: var(--font-display); font-variation-settings: "wdth" 85;
  font-weight: 700; font-size: 1.5rem; letter-spacing: 0.01em; text-transform: uppercase;
}
.acc__panel a { font-family: var(--font-body); font-weight: 500; text-transform: none; letter-spacing: 0; }
.drawer-nav a[aria-current="page"] { color: var(--fg); border-left: 2px solid var(--accent); padding-left: var(--sp-3); }   /* the hazard rule marks "you are here" */
.drawer__note { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--muted); text-align: center; }

/* --------------------------------------------------------------------------
   4. BUTTONS — square, condensed caps
   -------------------------------------------------------------------------- */
/* Filled = ink on paper (paper on ink inside bands). Orange is reserved for the bottom bar. */
.btn {
  --btn-bg: var(--fg);
  --btn-fg: var(--bg);
  --btn-bg-hover: color-mix(in oklab, var(--btn-bg) 85%, var(--btn-fg));
  font-family: var(--font-display);
  font-variation-settings: "wdth" 85;
  font-weight: 700; font-size: 1rem;
  letter-spacing: 0.03em; text-transform: uppercase;
  border-radius: var(--r-sm);
  transition: transform var(--dur-1) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-ui),
              border-color var(--duration-fast) var(--ease-ui),
              color var(--duration-fast) var(--ease-ui);
}
.btn--lg { font-size: 1.125rem; }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--fg); border-width: 1px; border-color: var(--border-strong); }
.hero--ridgeline .btn--outline, .band-cta .btn--outline, .cta-bar .btn--outline { --btn-bg: transparent; --btn-fg: var(--fg); border-color: var(--border-strong); }

/* Accent stays off form chrome and nav markers */
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--fg); }
.nav-visible a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--fg); }

/* --------------------------------------------------------------------------
   5. HERO — type-led, flush-left, no photo. Full-field 32px blueprint grid.
   -------------------------------------------------------------------------- */
.hero--ridgeline { min-height: 78svh; align-items: stretch; }
.hero--ridgeline::after { display: none; }
.hero--ridgeline::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(oklch(1 0 0 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.hero--ridgeline .hero__content {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(4rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
  color: var(--fg);
}
.hero--ridgeline h1 { text-shadow: none; }

.hero__urgency {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  align-self: flex-start;
  color: var(--muted);
  margin-bottom: var(--sp-6);
}
.hero__urgency::before { content: ""; width: 8px; height: 8px; background: var(--fg); }

.hero__title {
  font-size: var(--t-hero);
  line-height: 0.88;
  letter-spacing: 0.01em;
  font-variation-settings: "wdth" 80, "opsz" 96;
  margin-bottom: var(--sp-6);
  text-wrap: wrap;                        /* greedy: "WE'RE ON IT" / "TODAY." — not balanced */
}
.hero__title > span { display: block; text-wrap: wrap; }
.hero__title em { font-style: normal; color: var(--accent); }   /* orange use 2 of 3 */

.hero__sub {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: color-mix(in oklab, var(--fg) 84%, transparent);
  max-width: 38ch;
  margin-bottom: var(--sp-8);
}

.hero__actions { display: grid; gap: var(--sp-3); }
@media (min-width: 480px) { .hero__actions { grid-auto-flow: column; grid-auto-columns: max-content; } }
.hero--ridgeline .btn--outline { --btn-fg: var(--fg); }

.hero__proof {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   6. PINNED SERVICES STACK — motion idea 2 (motion.css .pin-stage)
   -------------------------------------------------------------------------- */
.svc-stage { --panels: 3; background: var(--bg); }
.svc-panel { background: var(--bg); }
/* One extra viewport of runway so each panel gets a full viewport of scroll
   (the contain range is stage height minus one viewport). Guarded so the
   no-support / reduced-motion fallbacks keep height: auto. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .svc-stage { height: calc((var(--panels) + 1) * 100svh); }
  }
}
.svc-panel:nth-child(1) { --from: 0%;     --to: 33.34%; }
.svc-panel:nth-child(2) { --from: 33.33%; --to: 66.67%; }
.svc-panel:nth-child(3) { --from: 66.66%; --to: 100%; }

/* First panel is visible before the stage pins; last stays visible after it unpins */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .svc-panel:nth-child(1) { animation-name: rl-panel-first; }
    .svc-panel:nth-child(3) { animation-name: rl-panel-last; }
  }
}
@keyframes rl-panel-first { 0%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-24px); } }
@keyframes rl-panel-last  { 0% { opacity: 0; transform: translateY(24px); } 15%, 100% { opacity: 1; transform: none; } }
/* Keyboard users: a focused panel wins, whatever the scroll position */
.svc-panel:focus-within { animation: none !important; opacity: 1 !important; transform: none !important; z-index: 3; }

.svc-panel__in {
  --num: clamp(7.5rem, 26vw, 24rem);
  position: relative;
  height: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--sp-6)) var(--gutter) var(--sp-10);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: var(--gutter);
  align-content: center;
}
.svc-panel__num {
  grid-column: 1 / -1; grid-row: 1;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 75, "opsz" 96;
  font-weight: 800;
  font-size: var(--num);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: color-mix(in oklab, var(--fg) 8%, transparent);
  user-select: none;
}
.svc-panel__body {
  grid-column: 1 / -1; grid-row: 2;
  margin-top: calc(var(--num) * -0.34);   /* the overlap: headline crosses the numeral */
  position: relative;
}
@media (min-width: 768px) {
  .svc-panel__num  { grid-column: 1 / 8; }
  .svc-panel__body { grid-column: 3 / 13; }   /* headline sits over the numeral's lower-right quadrant */
}
.svc-panel__body .eyebrow { margin-bottom: var(--sp-4); }
.svc-panel__name {
  font-size: clamp(2.75rem, 1.9rem + 4.4vw, 6rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  font-variation-settings: "wdth" 80, "opsz" 96;
  font-weight: 800;
}
.svc-panel__text { max-width: 40ch; margin-top: var(--sp-5); font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--muted); }
.svc-panel__links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-6); }
.svc-panel__links .arrow-link { color: var(--fg); }
.svc-panel__links .arrow-link.is-call::after { content: none; }
.svc-panel__links .arrow-link b { font-weight: 600; }

/* --------------------------------------------------------------------------
   7. THE VOID — one mono line, alone. The runway for the "90".
   -------------------------------------------------------------------------- */
.void { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(5rem, 11vw, 9rem); }
.void p { color: var(--muted); max-width: 40ch; }

/* --------------------------------------------------------------------------
   8. STATS BAND — 7/5. Giant "90" (blend-diff) overhangs the band's top edge
   into the void: one element crossing a section boundary, auto-inverting.
   The section must NOT form a stacking context, so grain lives on an inner layer.
   -------------------------------------------------------------------------- */
.stats-band { position: relative; padding-block: 0 clamp(3.5rem, 7vw, 6rem); }
.stats-band__bg { position: absolute; inset: 0; background: var(--band); }   /* + .grain */
.stats-band .wrap { position: relative; display: grid; gap: var(--sp-10); align-items: start; }
@media (min-width: 900px) {
  .stats-band .wrap { grid-template-columns: 7fr 5fr; column-gap: var(--gutter); }
  .stat-list { padding-top: clamp(3.5rem, 7vw, 6rem); }
}
.stat-hero__num {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 75, "opsz" 96;
  font-weight: 800;
  font-size: var(--t-giant);
  line-height: 0.8;
  letter-spacing: -0.02em;
  margin-top: -0.3em;                     /* the overhang: top third rises into the void above */
}
.stat-hero__cap { margin-top: var(--sp-5); color: var(--muted); }
.stat-list { display: grid; gap: var(--sp-5); }
.stat-list li { display: grid; gap: var(--sp-1); }
.stat-list b {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 80, "opsz" 48;
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
}
.stat-list span { color: var(--muted); }

/* --------------------------------------------------------------------------
   9. GENERIC SPLITS — 4/8 and 5/7 (refuses the symmetric three-up)
   -------------------------------------------------------------------------- */
.split { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .split { grid-template-columns: 4fr 8fr; column-gap: var(--gutter); }
  .split--57 { grid-template-columns: 5fr 7fr; }
}
.split__aside { display: grid; gap: var(--sp-2); align-content: start; color: var(--muted); }
.split__aside .eyebrow { color: var(--fg); }
@media (min-width: 900px) { .split__aside { position: sticky; top: calc(var(--header-h) + var(--sp-6)); } }

.sec-head { margin-bottom: var(--sp-8); }
.sec-head .eyebrow { margin-bottom: var(--sp-4); }
.sec-head h2 { font-size: var(--t-h2); }
.sec-head p, .sec-head-p { color: var(--muted); margin-top: var(--sp-5); }
.lede { font-size: var(--t-lead); line-height: var(--lh-lead); max-width: 44ch; }

/* --------------------------------------------------------------------------
   10. SERVICE AREAS TEASER — 4/8, hairline list
   -------------------------------------------------------------------------- */
.areas { padding-block: clamp(5rem, 11vw, 9rem); }
.area-list {
  display: grid; grid-template-columns: minmax(0, 1fr);
  column-gap: var(--gutter);
  border-top: 1px solid var(--border);
  margin-top: var(--sp-8);
}
.area-list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 56px;
  padding-inline: var(--sp-1);
  border-bottom: 1px solid var(--border);
  text-decoration: none; font-weight: 500;
  transition: background-color var(--duration-fast) var(--ease-ui);
}
.area-list a::after { content: "→"; color: var(--muted); transition: transform var(--duration-fast) var(--ease-ui); }
@media (min-width: 480px) { .area-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.area-list a:active { background: var(--surface-2); }
.areas .arrow-link { margin-top: var(--sp-6); }

/* --------------------------------------------------------------------------
   11. REVIEWS — motion idea 3: card hover (hairline → ink, 4px lift), pointer-fine
   -------------------------------------------------------------------------- */
.reviews { padding-block: clamp(4rem, 9vw, 7rem) clamp(9rem, 16vw, 13rem); }
.reviews .sec-head { margin-bottom: var(--sp-6); }
.card {
  background: var(--elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: border-color var(--duration-fast) var(--ease-ui), transform var(--duration-fast) var(--ease-ui);
}
.card::before { display: none; }          /* hairlines, never shadows */
.review { display: flex; flex-direction: column; gap: var(--sp-4); height: 100%; }
.review__stars { display: flex; gap: 2px; color: var(--fg); }
.review blockquote { font-size: 1.0625rem; line-height: 1.5; flex: 1; }
.review__who { color: var(--muted); }
.review__who strong { display: block; color: var(--fg); margin-bottom: 2px; }
.rail-nav button {
  border-radius: var(--r-sm);
  transition: border-color var(--duration-fast) var(--ease-ui), background-color var(--duration-fast) var(--ease-ui), color var(--duration-fast) var(--ease-ui);
}
.rail-nav button:disabled { opacity: 0.35; cursor: not-allowed; }

.placeholder-note {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   12. QUOTE — 5/7. Card and intro share the same top edge.
   -------------------------------------------------------------------------- */
.quote { padding-block: 0 clamp(4rem, 9vw, 7rem); }
.form-split { display: grid; gap: var(--sp-10); }
@media (min-width: 900px) {
  .form-split { grid-template-columns: 5fr 7fr; column-gap: calc(var(--gutter) * 2); align-items: start; }
}
.quote-card {
  background: var(--elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
}
@media (min-width: 768px) { .quote-card { padding: var(--sp-10); } }
.quote-card .field input, .quote-card .field select { background: var(--bg); border-width: 1px; border-color: var(--border-strong); }
.quote-card .field label { font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; }
.quote-card .hint { font-size: 0.875rem; }
.quote__fine { margin-top: var(--sp-4); color: var(--muted); font-size: 0.8125rem; }

/* Promise list — 4/8 label/text rows with hairlines; every row is a promise → hazard rule */
.promise { margin-top: var(--sp-8); border-top: 1px solid var(--border); }
.promise li {
  display: grid; gap: var(--sp-1) var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 560px) { .promise li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.promise li b { color: var(--fg); align-self: start; padding-top: 3px; }
.promise li span { font-size: 1rem; color: var(--muted); }

.tel { margin-top: var(--sp-8); align-items: center; }
.tel__num { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; letter-spacing: 0; }
.tel__sub { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; font-weight: 500; }

.form-success {
  padding: var(--sp-8) var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--elev);
}
.form-success h3 { margin-bottom: var(--sp-3); }
.form-success p { color: var(--muted); }
.form-success .btn { margin-top: var(--sp-5); }

/* SMS consent — TCPA: unchecked, unbundled, full disclosure */
.consent {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start;
  margin-block: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
}
.consent input[type="checkbox"] { width: 24px; height: 24px; min-height: 24px; margin-top: 2px; accent-color: var(--fg); }
.consent label { font-size: 0.8125rem; line-height: 1.5; color: var(--muted); font-weight: 400; }

/* --------------------------------------------------------------------------
   13. BOTTOM ACTION BAR — orange use 3 of 3
   -------------------------------------------------------------------------- */
.cta-bar { border-top-color: var(--border); }
.cta-bar .btn:not(.btn--outline) { --btn-bg: var(--accent); --btn-fg: var(--accent-fg); --btn-bg-hover: color-mix(in oklab, var(--accent) 86%, black); }

/* --------------------------------------------------------------------------
   14. FOOTER — oversized. The wordmark at display scale, then the columns.
   -------------------------------------------------------------------------- */
.site-footer { border-top: none; padding-block: clamp(4rem, 9vw, 7rem) var(--sp-8); }
.footer-mark {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 75, "opsz" 96;
  font-weight: 800;
  font-size: clamp(3.5rem, 0.5rem + 19.5vw, 19rem);
  line-height: 0.8;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.footer-grid { gap: var(--sp-8); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 5fr 3fr 4fr; column-gap: var(--gutter); } }
.footer-grid h3 { font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--muted); font-variation-settings: normal; }
.footer-grid li a { color: var(--muted); transition: color var(--duration-fast) var(--ease-ui); }
.footer-about p { color: var(--muted); max-width: 34ch; margin-top: var(--sp-2); }
.footer-about address { font-style: normal; color: var(--muted); font-size: var(--t-sm); line-height: 1.6; margin-top: var(--sp-5); }
.footer-about .tel { margin-top: var(--sp-5); }
.legal { margin-top: clamp(2.5rem, 6vw, 4rem); gap: var(--sp-4); }
.license-line { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); color: var(--muted); }
.site-footer .concept-chip { color: var(--fg); border-color: var(--border-strong); font-family: var(--font-mono); font-weight: 500; }
.site-footer .disclosure { font-style: normal; }

/* --------------------------------------------------------------------------
   15. SUBPAGES — intro, breadcrumb, CTA band, void
   -------------------------------------------------------------------------- */
.page-intro { padding-block: var(--sp-4) clamp(2.5rem, 6vw, 4rem); }
.page-intro .sec-head { margin-top: var(--sp-6); margin-bottom: var(--sp-8); }
.page-intro h1 { font-size: var(--t-h1); line-height: var(--lh-h1); max-width: 16ch; }
.breadcrumb {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px;
  color: var(--muted);
  text-decoration: none; white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-ui);
}

.band-cta { padding-block: clamp(4rem, 10vw, 8rem); }
.band-cta h2 { font-size: var(--t-h2); }
.band-cta p { color: var(--muted); max-width: 44ch; font-size: var(--t-lead); line-height: var(--lh-lead); }
.band-cta .hero__actions { margin-top: var(--sp-8); }
.band-cta .btn--outline { --btn-fg: var(--fg); }

/* --------------------------------------------------------------------------
   16. SERVICES PAGE — 01–06 at large scale, hairline separators, sticky index
   -------------------------------------------------------------------------- */
.jump {
  display: flex; gap: var(--sp-2);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1);
  padding-block: var(--sp-2) var(--sp-4);
  scrollbar-width: none;
}
.jump::-webkit-scrollbar { display: none; }
.jump a {
  flex: none; display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: var(--sp-4);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: border-color var(--duration-fast) var(--ease-ui), background-color var(--duration-fast) var(--ease-ui);
}
.jump a:active { background: var(--surface-2); }

.svc-blocks { border-bottom: 1px solid var(--border); }
.svc-block {
  display: grid; gap: var(--sp-4);
  padding-block: clamp(2.5rem, 6vw, 5rem);
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}
@media (min-width: 900px) { .svc-block { grid-template-columns: 4fr 8fr; column-gap: var(--gutter); } }
.svc-block__num {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 75, "opsz" 96;
  font-weight: 600;
  font-size: clamp(4.5rem, 2.5rem + 8vw, 10rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  align-self: start;
}
@media (min-width: 900px) { .svc-block__num { position: sticky; top: calc(var(--header-h) + var(--sp-6)); } }
.svc-block h2 { font-size: var(--t-h2); margin-bottom: var(--sp-5); }
.svc-block > div > p.measure { color: var(--muted); font-size: var(--t-lead); line-height: var(--lh-lead); }
.svc-list { margin-top: var(--sp-6); border-top: 1px solid var(--border); max-width: 60ch; }
.svc-list li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
}
.svc-list li::before { content: "—"; color: var(--muted); }
.price-note { display: inline-block; margin-top: var(--sp-6); font-weight: 500; }

/* --------------------------------------------------------------------------
   17. SERVICE-AREAS PAGE — giant 42, search, county groups as 4/8
   -------------------------------------------------------------------------- */
.areas-h1 { display: grid; gap: var(--sp-4); }
.areas-h1__num {
  display: block;
  font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: var(--t-giant);
  line-height: 0.8;
  letter-spacing: -0.02em;
}
.areas-h1__text { display: block; font-size: var(--t-h2); line-height: var(--lh-h2); max-width: 16ch; }

.area-search { position: relative; max-width: 36rem; margin-top: var(--sp-8); }
.area-search input {
  appearance: none; -webkit-appearance: none;
  min-height: 3.5rem; width: 100%;
  padding: 0.875rem 1rem 0.875rem var(--sp-12);
  font-size: 1rem;
  background: var(--elev); color: var(--fg);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  transition: border-color var(--duration-fast) var(--ease-ui);
}
.area-search input:focus { border-color: var(--fg); }
.area-search svg { position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.area-count { margin-top: var(--sp-5); color: var(--muted); }
.area-count strong { color: var(--fg); font-weight: 600; }

.area-groups { margin-top: var(--sp-10); border-bottom: 1px solid var(--border); }
.area-group { display: grid; gap: var(--sp-5); padding-block: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--border); }
@media (min-width: 900px) { .area-group { grid-template-columns: 4fr 8fr; column-gap: var(--gutter); } }
.area-group__aside { align-self: start; }
@media (min-width: 900px) { .area-group__aside { position: sticky; top: calc(var(--header-h) + var(--sp-6)); } }
.area-group h2 { font-size: var(--t-h3); font-variation-settings: "wdth" 85; font-weight: 700; }
.area-group__resp { margin-top: var(--sp-3); color: var(--muted); }
/* Per-cell hairlines (not the gap trick) so a short last row leaves no tinted remainder */
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.area-grid a {
  display: flex; align-items: center;
  min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--bg);
  text-decoration: none;
  font-size: 1rem; font-weight: 500;
  transition: background-color var(--duration-fast) var(--ease-ui), color var(--duration-fast) var(--ease-ui);
}
.area-grid a:active { background: var(--surface-2); }

.area-empty { margin-top: var(--sp-8); padding-block: var(--sp-4); max-width: 44ch; }
.area-empty .btn { margin-top: var(--sp-5); }

/* --------------------------------------------------------------------------
   18. HOVER STATES — pointer-fine only. One curve (ease-ui), one duration (180ms).
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: var(--fg); transform: translateY(-4px); }
  .area-list a:hover { background: var(--surface-2); }
  .area-list a:hover::after { transform: translateX(4px); }
  .arrow-link:hover::after { transform: translateX(4px); }
  .arrow-link:hover { text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px; }
  .area-grid a:hover { background: var(--fg); color: var(--bg); }
  .jump a:hover { border-color: var(--fg); }
  .rail-nav button:hover:not(:disabled) { border-color: var(--fg); background: var(--fg); color: var(--bg); }
  .header-tel:hover { background: color-mix(in oklab, var(--accent) 86%, black); }
  .nav-desktop a:hover { color: var(--fg); background: var(--surface-2); }
  .theme-btn:hover, .menu-btn:hover, .drawer__close:hover { color: var(--fg); background: var(--surface-2); }
  .menu-btn:hover, .drawer__close:hover { border-color: var(--fg); }
  .footer-grid li a:hover, .breadcrumb:hover { color: var(--fg); }
  .site-footer .disclosure a:hover, .consent a:hover { color: var(--fg); }
  .drawer-nav a:hover, .acc__btn:hover, .acc__panel a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 0.2em; }
}

@media (prefers-reduced-motion: reduce) {
  .card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   14. HEADER POLISH (client request 2026-08-24)
   Logo pop via a layered ember glow (hue-matched, low alpha — not flat
   orange, which would blow the 3-accent budget). One-shot motions only:
   an underline that draws on load, and a single ember sweep along the
   header hairline each time it condenses. No infinite animation — the
   craft floor (WCAG 2.2.2) stays intact.
   -------------------------------------------------------------------------- */
.logo {
  position: relative;
  color: var(--fg);
  text-shadow:
    0 0 16px color-mix(in oklab, var(--accent) 32%, transparent),
    0 1px 0  color-mix(in oklab, var(--accent) 16%, transparent);
  transition: text-shadow var(--duration-fast) var(--ease-ui);
}
.logo__sub { text-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .logo:hover {
    text-shadow:
      0 0 10px color-mix(in oklab, var(--accent) 55%, transparent),
      0 0 26px color-mix(in oklab, var(--accent) 30%, transparent);
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo {
    color: oklch(0.97 0.004 258);
    text-shadow:
      0 0 12px color-mix(in oklab, var(--accent) 48%, transparent),
      0 0 30px color-mix(in oklab, var(--accent) 22%, transparent);
  }
}
[data-theme="dark"] .logo {
  color: oklch(0.97 0.004 258);
  text-shadow:
    0 0 12px color-mix(in oklab, var(--accent) 48%, transparent),
    0 0 30px color-mix(in oklab, var(--accent) 22%, transparent);
}

/* Hazard underline: draws once on load — the header's "slight motion" */
.logo::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -5px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 55%, transparent 100%);
  transform: scaleX(1); transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .logo::after { animation: rl-logo-draw 700ms var(--ease-out-expo) 150ms both; }
}
@keyframes rl-logo-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Ember sweep on the condensed header's hairline — one pass per condense,
   finite (1.1s), then rests as the normal border. 1px paint area: cheap. */
.site-header { position: sticky; }
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; opacity: 0;
  background: linear-gradient(90deg,
    transparent 0%, var(--accent) 35%,
    oklch(0.85 0.15 60) 50%,
    var(--accent) 65%, transparent 100%);
  background-size: 220% 100%;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .site-header[data-scrolled]::after { animation: rl-ember-sweep 1.1s var(--ease-inout-expo) both; }
}
@keyframes rl-ember-sweep {
  0%   { opacity: 0;   background-position: 120% 0; }
  25%  { opacity: 0.9; }
  100% { opacity: 0;   background-position: -20% 0; }
}

/* Phone: from orange block to hazard pill — hairline, mono digits, fills on
   hover. Still 44px, still the loudest thing a thumb can find. */
.header-tel {
  background: transparent;
  color: var(--accent-text);
  border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent);
  border-radius: var(--r-full);
  padding-inline: var(--sp-4);
  transition: background-color var(--duration-fast) var(--ease-ui),
              color var(--duration-fast) var(--ease-ui),
              border-color var(--duration-fast) var(--ease-ui),
              transform var(--duration-fast) var(--ease-ui);
}
.header-tel svg { color: currentColor; }
.header-tel:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .header-tel:hover {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: var(--accent);
  }
}

/* --------------------------------------------------------------------------
   15. COMPRESSION + PROOF STRIP + SHEEN (client request 2026-08-24)
   -------------------------------------------------------------------------- */
/* Pinned stack: ~25% less scroll travel, numerals down from 26vw */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .svc-stage { height: calc(var(--panels) * 72svh + 100svh); }
  }
}
.svc-panel__in { --num: clamp(6rem, 17vw, 14rem); }

/* Bottom of the page tightens: reviews lose their oversized tail */
.reviews { padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(4rem, 8vw, 6.5rem); }
.quote { padding-block: clamp(3.5rem, 7vw, 6rem); }

/* Compact areas line inside the quote column (replaces the old section) */
.quote-areas { margin-top: var(--sp-6); font-size: var(--t-mono); color: var(--muted); }
.quote-areas a { color: var(--accent-text); text-decoration: none; font-weight: 600; }

/* Proof strip: the 90-minute promise restated at the close. Static by design —
   a marquee would need a pause control and reads louder than "not too poppy". */
.proof-strip { background: var(--band); color: var(--ink-50, #f1f4f7); border-block: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); }
.proof-strip__row {
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-10);
  padding-block: var(--sp-6);
}
.proof-strip__row p { display: flex; align-items: baseline; gap: var(--sp-3); }
.proof-strip__row b { font-family: var(--font-mono); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--accent); }
.proof-strip__row span { font-size: 0.8125rem; color: color-mix(in oklab, currentColor 72%, transparent); }
.proof-strip .placeholder-note { display: block; padding-bottom: var(--sp-4); border: none; color: color-mix(in oklab, currentColor 45%, transparent); }

/* Glassy sheen: a single light sweep as each big band enters. Scroll-driven,
   finite, transform-only; invisible to reduced-motion and Firefox. */
.sheen { position: relative; overflow: clip; }
.sheen::after {
  content: ""; position: absolute; inset: -20% -60%;
  background: linear-gradient(105deg, transparent 43%, oklch(1 0 0 / 0.07) 50%, transparent 57%);
  transform: translateX(-80%);
  pointer-events: none;
}
.sheen--ink::after { background: linear-gradient(105deg, transparent 43%, color-mix(in oklab, var(--fg) 5%, transparent) 50%, transparent 57%); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sheen::after {
      animation: rl-sheen linear both;
      animation-duration: 1ms;
      animation-timeline: view();
      animation-range: entry 15% cover 60%;
    }
  }
}
@keyframes rl-sheen { from { transform: translateX(-80%); } to { transform: translateX(80%); } }
@media (prefers-reduced-motion: reduce) { .sheen::after { display: none; } }

/* --------------------------------------------------------------------------
   16. REVAMP (2026-08-24): global scale-down, integrated media rows,
   pair strip, logo mark, hero glare. Replaces the oversized story/pin.
   -------------------------------------------------------------------------- */
/* Scale discipline: everything a notch smaller, more info per viewport */
:root { --t-h1: clamp(2.25rem, 1.5rem + 3vw, 4rem); --section-y: clamp(3rem, 2rem + 4vw, 5.5rem); }
.hero--ridgeline { min-height: auto; }
.hero--ridgeline .hero__content { padding-block: clamp(4.5rem, 10vh, 7rem) clamp(2.75rem, 6vh, 4.5rem); }
.hero__title { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4.25rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); }
.stat-hero__num { font-size: clamp(4rem, 2.6rem + 6vw, 8rem); }
.footer-mark { font-size: clamp(2.75rem, 1.8rem + 5vw, 6.5rem); }

/* Logo mark: gradient ridge, draws on load, inherits the ember glow */
.logo { align-items: center; gap: 10px; }
.logo__icon { flex: none; filter: drop-shadow(0 0 1px color-mix(in oklab, var(--accent) 55%, transparent)) drop-shadow(0 0 4px color-mix(in oklab, var(--accent) 28%, transparent)) drop-shadow(0 0 11px color-mix(in oklab, var(--accent) 12%, transparent)); }
.logo__word { display: inline-flex; flex-direction: column; line-height: 1; gap: 2px; }
.logo__ridge { stroke-dasharray: 46; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .logo__ridge { animation: rl-ridge-draw 900ms var(--ease-out-expo) 120ms both; }
}
@keyframes rl-ridge-draw { from { stroke-dashoffset: 46; } to { stroke-dashoffset: 0; } }

/* Hero glare: a light pass across the headline, then a long rest.
   Governed by the same pause control as the videos (html[data-motion-paused]). */
@media (prefers-reduced-motion: no-preference) {
  .shine {
    background: linear-gradient(110deg, currentColor 44%, var(--accent) 50%, oklch(0.98 0.02 80) 53%, currentColor 59%);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rl-shine 6s var(--ease-inout-expo) 1.2s infinite;
  }
  html[data-motion-paused] .shine { animation-play-state: paused; }
}
@keyframes rl-shine { 0% { background-position: 115% 0; } 15% { background-position: -35% 0; } 100% { background-position: -35% 0; } }

/* Section head with the single motion control */
.svc2__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.motion-toggle {
  min-height: 44px; min-width: 44px; padding-inline: var(--sp-4);
  border: 1px solid var(--border-strong); border-radius: var(--r-full);
  background: transparent; color: var(--muted); cursor: pointer;
  font-size: 0.6875rem; letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
}
.svc2__note { font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in oklab, var(--fg) 38%, transparent); margin: var(--sp-2) 0 var(--sp-10); }

/* The 2am pair: two small tiles, problem -> fixed, one glance */
.pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-3); }
.pair__tile { position: relative; overflow: clip; border-radius: 4px; aspect-ratio: 16 / 9; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg) 14%, transparent); }
.pair__tile img, .pair__tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pair__tile video { opacity: 0; transition: opacity 700ms var(--ease-ui); }
.pair__tile[data-playing] video { opacity: 1; }
.pair__tile figcaption {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  padding: 4px 10px; font-size: 0.6875rem; letter-spacing: 0.06em;
  background: oklch(0.12 0.012 258 / 0.72); color: #fff;
  border-top-right-radius: var(--r-sm);
}
.pair__arrow { color: var(--accent-text); font-size: 1.25rem; }
@media (max-width: 559px) { .pair { grid-template-columns: 1fr; } .pair__arrow { justify-self: center; rotate: 90deg; } }

/* Media beside information: compact 5/7 rows, alternating */
.svcrow { display: grid; gap: var(--sp-5); padding-block: var(--sp-8); border-top: 1px solid var(--border); align-items: center; }
.svcrow__media { position: relative; overflow: clip; border-radius: 4px; aspect-ratio: 16 / 9; max-width: 430px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg) 14%, transparent); }
.svcrow__media img, .svcrow__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svcrow__media video { opacity: 0; transition: opacity 700ms var(--ease-ui); }
.svcrow__media[data-playing] video { opacity: 1; }
.svcrow__body p:not(.eyebrow) { color: var(--muted); font-size: 0.9375rem; max-width: 52ch; margin-block: var(--sp-3) var(--sp-4); }
@media (min-width: 760px) {
  .svcrow { grid-template-columns: 5fr 7fr; gap: var(--sp-10); }
  .svcrow--flip .svcrow__media { order: 2; }
}

/* Research pass (3d-video-integration.md): hairline above the media */
.pair__tile::after, .svcrow__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg) 14%, transparent); pointer-events: none; z-index: 2; }
.pair__tile, .svcrow__media { box-shadow: none; }
.svcrow__media { margin-inline: auto; }
/* --------------------------------------------------------------------------
   17. MONEY LAYER + AREA PAGES + DESKTOP PASS (local-services-conversion.md)
   -------------------------------------------------------------------------- */
/* Hero money card - price-anchored (skill 3.2). Desktop: fills the right void */
.money-card {
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: var(--sp-5);
  margin-block: var(--sp-6);
  max-width: 24rem;
  background: color-mix(in oklab, var(--accent) 6%, transparent);
}
.money-card__num { font-family: var(--font-display); font-variation-settings: "wdth" 82; font-weight: 700; text-transform: uppercase; font-size: 1.375rem; line-height: 1.1; }
.money-card__num b { color: var(--accent); font-size: 1.75rem; }
.money-card__fine { font-size: 0.6875rem; color: color-mix(in oklab, currentColor 62%, transparent); margin-top: var(--sp-2); }
.money-card__offer { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); font-size: 0.9375rem; }
.money-card__offer .mono { font-size: 0.6875rem; color: color-mix(in oklab, currentColor 62%, transparent); }
.money-card .arrow-link { margin-top: var(--sp-3); font-size: 0.8125rem; }

/* Offers + financing: dense, hairline, dated */
.offers { padding-block: var(--section-y); border-top: 1px solid var(--border); }
.offers__grid { display: grid; gap: var(--sp-8); margin-top: var(--sp-6); }
.offers__list { display: grid; gap: 0; border-top: 1px solid var(--border); }
.offer { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--sp-2) var(--sp-5); align-items: baseline; padding-block: var(--sp-4); border-bottom: 1px solid var(--border); }
.offer__amt { font-family: var(--font-display); font-variation-settings: "wdth" 80; font-weight: 800; text-transform: uppercase; font-size: 1.5rem; color: var(--accent-text); }
.offer__what { font-weight: 700; }
.offer__fine { grid-column: 2; font-size: 0.6875rem; color: color-mix(in oklab, var(--fg) 55%, transparent); }
.fin h3 { font-size: 1.0625rem; margin-bottom: var(--sp-4); }
.fin__table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.fin__table th, .fin__table td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); }
.fin__table th { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in oklab, var(--fg) 55%, transparent); }
.fin__table td:last-child { font-weight: 600; }
.fin__fine { font-size: 0.8125rem; color: color-mix(in oklab, var(--fg) 62%, transparent); margin-top: var(--sp-3); }
.fin__fee { margin-top: var(--sp-4); font-size: 0.75rem; padding-left: var(--sp-3); }

/* Expandable reviews (skill 6.1): preview clamped, full text in DOM */
.rev .rev__preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rev[data-open] .rev__preview { display: block; -webkit-line-clamp: none; }
.rev__more { display: block; margin-top: var(--sp-2); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: none; border: none; padding: 4px 0; min-height: 32px; cursor: pointer; text-align: left; }

/* Services FAQ */
.faq-sec { padding-block: var(--section-y); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { min-height: 52px; display: flex; align-items: center; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font-family: var(--font-mono); color: var(--accent-text); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { padding-bottom: var(--sp-4); color: color-mix(in oklab, var(--fg) 70%, transparent); max-width: 60ch; font-size: 0.9375rem; }

/* Area pages */
.area-page { padding-block: var(--sp-8) var(--section-y); }
.area-page h1 { margin-block: var(--sp-3) var(--sp-4); }
.area-page .lede { max-width: 56ch; color: color-mix(in oklab, var(--fg) 74%, transparent); }
.area-proof { margin-top: var(--sp-4); font-size: 0.75rem; }
.area-cols { display: grid; gap: var(--sp-8); margin-top: var(--sp-8); }
.area-cols h2 { font-size: 1.125rem; margin-bottom: var(--sp-3); }
.area-svc { display: grid; gap: 0; border-top: 1px solid var(--border); }
.area-svc a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--border); text-decoration: none; font-weight: 600; }
.area-emph { margin-top: var(--sp-4); font-size: 0.9375rem; color: color-mix(in oklab, var(--fg) 70%, transparent); }
.area-nap { margin-top: var(--sp-4); font-size: 0.75rem; color: color-mix(in oklab, var(--fg) 55%, transparent); }
.area-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-10); padding: var(--sp-5); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 4px; }
.area-cta .mono { font-size: 0.75rem; color: color-mix(in oklab, var(--fg) 60%, transparent); }
.area-nearby { margin-top: var(--sp-10); }
.area-nearby h2 { font-size: 1rem; margin-bottom: var(--sp-4); }
.area-nb { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.area-nb a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: var(--sp-4); border: 1px solid var(--border-strong); border-radius: 999px; text-decoration: none; font-size: 0.875rem; font-weight: 600; }
.area-back { display: none; }

/* --------------------------------------------------------------------------
   DESKTOP OPTIMIZATION PASS - the mobile-first build earns its wide layout
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .hero--ridgeline .hero__content { display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--sp-12); align-items: start; }
  .hero--ridgeline .hero__urgency, .hero--ridgeline .hero__title, .hero--ridgeline .hero__sub, .hero--ridgeline .hero__actions { grid-column: 1; }
  .hero--ridgeline .money-card { grid-column: 2; grid-row: 2 / 5; margin-block: 0; align-self: center; justify-self: end; width: 100%; }
  .hero--ridgeline .hero__proof { grid-column: 1 / -1; }

  .offers__grid { grid-template-columns: 7fr 5fr; gap: var(--sp-12); align-items: start; }
  .pair { max-width: 62rem; }
  .svcrow { grid-template-columns: 4fr 8fr; }
  .area-cols { grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
  .area-back { display: inline-flex; min-height: 40px; padding-inline: var(--sp-4); font-size: 0.75rem; }
  .faq-sec { max-width: 52rem; }

  /* Wide-viewport rhythm: quote + reviews breathe a little more at desk */
  .quote .form-split { gap: var(--sp-16); }
  .wrap { padding-inline: clamp(1.25rem, 4vw, 4rem); }
}
@media (min-width: 560px) and (max-width: 1023px) {
  .money-card { max-width: 26rem; }
  .area-cols { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   18 · Front-page interaction layer (hover-scan-choreography.md, 2026-08-24)
   ========================================================================== */

/* 18.1 · Hero coupon: full-card highlight + one-pass scan sweep on hover.
   Sweep = transform-only band, 40% wide, 105deg, skewX(-14deg), 820ms,
   peak alpha 0.22 on the dark hero band. One pass, never a loop (a looping
   sheen reads as a stuck spinner). Glow is a cross-faded pseudo-element,
   never a box-shadow transition. */
.money-card { position: relative; overflow: clip; }
.money-card::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%;
  background: linear-gradient(105deg, transparent 0%, oklch(1 0 0 / 0.22) 50%, transparent 100%);
  transform: translate3d(-130%, 0, 0) skewX(-14deg);
  pointer-events: none; z-index: 1;
}
.money-card:hover::before,
.money-card:focus-within::before {
  animation: coupon-scan 820ms cubic-bezier(.22,.61,.36,1) 1 both;
}
@keyframes coupon-scan {
  to { transform: translate3d(420%, 0, 0) skewX(-14deg); }
}
.money-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 60%, transparent),
              0 10px 32px -10px color-mix(in oklab, var(--accent) 50%, transparent);
  opacity: 0; transition: opacity 220ms var(--ease-ui);
  pointer-events: none; z-index: 0;
}
.money-card:hover::after,
.money-card:focus-within::after { opacity: 1; }
.money-card > * { position: relative; z-index: 2; }

/* 18.2 · Fix stage: one clip, plays once, settles on the crisp fixed still */
.fix-stage {
  position: relative; overflow: clip; border-radius: 4px;
  aspect-ratio: 16 / 9; max-width: 46rem; margin-inline: auto;
}
.fix-stage img, .fix-stage video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.fix-stage video { opacity: 0; transition: opacity 700ms var(--ease-ui); }
.fix-stage[data-playing] video { opacity: 1; }
.fix-stage::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg) 14%, transparent);
  pointer-events: none; z-index: 2;
}
.fix-stage figcaption {
  position: absolute; left: 0.6rem; bottom: 0.5rem; z-index: 3;
  font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.3rem 0.55rem; border-radius: 3px;
  background: oklch(0.13 0.01 250 / 0.62); color: oklch(0.97 0 0);
  backdrop-filter: blur(4px);
  transition: background-color 400ms var(--ease-ui);
}
.fix-stage[data-done] figcaption { background: color-mix(in oklab, var(--accent) 70%, oklch(0.2 0.02 250)); }

/* 18.3 · Service rows: 48px alternating fly-in (distance override for the
   shared reveal system), gradient display numbers, stair-step resting layout.
   Indent clamp(16px, 5vw, 88px)/step, zeroed below 768px, total drift 14%
   of the container. The stair lives in the LAYOUT, not the transform. */
.svc2 { --reveal-distance: 48px; }
.svc-kick { display: flex; align-items: baseline; gap: 0.6rem; }
.svc-num {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 80; font-weight: 800;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1;
  background-color: var(--accent-text);
  background-image: linear-gradient(100deg, var(--accent-text) 0%, var(--accent) 118%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (min-width: 768px) {
  .svcrow--s2 { margin-inline-start: clamp(16px, 5vw, 88px); }
  .svcrow--s3 { margin-inline-start: calc(2 * clamp(16px, 5vw, 88px)); }
}

/* 18.4 · Offers: real links to the quote form. Hovering the row lights the
   amount AND the bold description beside it — 150ms color, 12% wash,
   scaleX underline at 220ms. Hover always paired with focus-visible. */
a.offer {
  text-decoration: none; color: inherit; cursor: pointer;
  padding-inline: var(--sp-3); margin-inline: calc(-1 * var(--sp-3));
  transition: background-color 150ms var(--ease-ui);
}
a.offer:hover, a.offer:focus-visible {
  background-color: color-mix(in oklab, var(--accent) 12%, transparent);
}
a.offer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a.offer .offer__amt { transition: color 150ms var(--ease-ui); }
a.offer:hover .offer__amt, a.offer:focus-visible .offer__amt { color: var(--accent); }
a.offer .offer__what { position: relative; width: fit-content; transition: color 150ms var(--ease-ui); }
a.offer .offer__what::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 220ms var(--ease-ui);
}
a.offer:hover .offer__what, a.offer:focus-visible .offer__what { color: var(--accent-text); }
a.offer:hover .offer__what::after, a.offer:focus-visible .offer__what::after { transform: scaleX(1); }

/* 18.5 · Reduced motion: sweeps and settles become instant states */
@media (prefers-reduced-motion: reduce) {
  .money-card:hover::before, .money-card:focus-within::before { animation: none; }
  .fix-stage video { transition: none; }
  .fix-stage figcaption { transition: none; }
}

/* ==========================================================================
   19 · Heat/Cool/Water trio + inline service columns (2026-08-24 revision)
   ========================================================================== */

/* 19.1 · Three animation tiles in a line under the heading */
.trio { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 700px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio__tile {
  position: relative; overflow: clip; border-radius: 4px; margin: 0;
  aspect-ratio: 16 / 10;
}
.trio__tile img, .trio__tile video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.trio__tile video { opacity: 0; transition: opacity 700ms var(--ease-ui); }
.trio__tile[data-playing] video { opacity: 1; }
.trio__tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg) 14%, transparent);
  pointer-events: none; z-index: 2;
}
.trio__tile figcaption {
  position: absolute; left: 0.55rem; bottom: 0.5rem; z-index: 3;
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.28rem 0.55rem; border-radius: 3px;
  background: oklch(0.13 0.01 250 / 0.62); color: oklch(0.97 0 0);
  backdrop-filter: blur(4px);
}

/* 19.2 · Heating / Cooling / Plumbing: three columns in line,
   picture beside each label, service link below */
.svc3 {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-7);
  margin-top: var(--sp-9); padding-top: var(--sp-7);
  border-top: 1px solid var(--border);
}
@media (min-width: 820px) { .svc3 { grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); } }
.svc3__head { display: flex; align-items: center; gap: var(--sp-4); }
.svc3__thumb {
  width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex: none;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--fg) 14%, transparent);
}
@media (min-width: 1100px) { .svc3__thumb { width: 84px; height: 84px; } }
.svc3__col > p:not(.eyebrow) {
  color: var(--muted); font-size: 0.9375rem; max-width: 44ch;
  margin-block: var(--sp-4);
}
.svc3 .svc-kick { border-left: 0; padding-left: 0; }

/* 19.3 · Offers: highlight + underline are HOVER-ONLY — one row at a time,
   only while the mouse is over it. Keyboard keeps the focus ring but no
   persistent wash/underline. */
.offers a.offer:focus-visible { background-color: transparent; }
.offers a.offer:focus-visible .offer__amt { color: var(--accent-text); }
.offers a.offer:focus-visible .offer__what { color: inherit; }
.offers a.offer:focus-visible .offer__what::after { transform: scaleX(0); }

/* ==========================================================================
   20 · Side-by-side service rows (2026-08-24 rev 3)
   ========================================================================== */

/* 20.1 · Service rows: picture one side, text the other, close together,
   media larger and copy a step up in size */
.svcrows { display: grid; gap: var(--sp-9); }
.svcrow2 { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 820px) {
  .svcrow2 { grid-template-columns: 6fr 6fr; gap: var(--sp-8); }
  .svcrow2:nth-child(even) .svcrow2__media { order: 2; }
}
.svcrow2__media {
  position: relative; overflow: clip; border-radius: 6px; margin: 0;
  aspect-ratio: 16 / 10; width: 100%;
}
.svcrow2__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.svcrow2__media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg) 14%, transparent);
  pointer-events: none; z-index: 2;
}
.svcrow2__body p:not(.eyebrow) {
  font-size: 1.0625rem; line-height: 1.65; color: var(--muted);
  max-width: 54ch; margin-block: var(--sp-4) var(--sp-5);
}
.svcrow2 .svc-kick { border-left: 0; padding-left: 0; }

/* 20.3 · The "90": no more overhang. It sits fully inside the dark band —
   the old -0.3em top margin pushed its top third across the section seam,
   where the difference blend made it read as clipped. */
.stat-hero__num { margin-top: 0; }
.stats-band .blend-diff { mix-blend-mode: normal; }
.stats-band { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3.5rem, 7vw, 6rem); }