@charset "utf-8";

/* =====================================================================
   IRONCLAD HOME SERVICES — styles.css
   Property token group: "iron"

   The root token block below is GENERATED from design-system/tokens.json.
   Order: primitives (primitive.iron) -> semantic roles (semantic.iron)
          -> shared scales (scales.*).
   Do not hand-edit values here. Edit tokens.json and regenerate.
   Every rule past that block consumes var(--semantic-role) only.

   Design language: bold utilitarian trust. Navy and amber, hard 2px
   corners, flat 2px shadows with zero blur, dense scannable blocks,
   badge and seal motifs drawn as inline SVG. Information density is
   the point — whitespace here is unsold real estate.
   ===================================================================== */

:root {

  /* --- PRIMITIVES — tokens.json > primitive.iron -------------------- */
  --iron-navy-950: #0B1B3A;
  --iron-navy-800: #1E3A8A;
  --iron-navy-700: #23459F;
  --iron-amber-700: #B45309;
  --iron-amber-500: #F59E0B;
  --iron-slate-050: #F8FAFC;
  --iron-slate-100: #E9EEF5;
  --iron-slate-300: #CBD5E1;
  --iron-slate-500: #64748B;
  --iron-slate-600: #475569;
  --iron-slate-900: #0F172A;
  --iron-white: #FFFFFF;

  /* --- SEMANTIC ROLES — tokens.json > semantic.iron ------------------
     slate-300 measures 1.41:1 and is a DECORATIVE DIVIDER ONLY.
     Interactive borders always resolve to border-interactive (slate-500). */
  --bg: var(--iron-slate-050);
  --surface: var(--iron-white);
  --surface-raised: var(--iron-slate-100);
  --surface-inverse: var(--iron-navy-950);
  --border-subtle: var(--iron-slate-300);
  --border-interactive: var(--iron-slate-500);
  --border-strong: var(--iron-slate-900);
  --text-primary: var(--iron-slate-900);
  --text-muted: var(--iron-slate-600);
  --text-on-inverse: var(--iron-white);
  --action-primary: var(--iron-amber-700);
  --action-primary-hover: var(--iron-navy-800);
  --on-action-primary: var(--iron-white);
  --action-secondary: var(--iron-navy-800);
  --accent-graphic: var(--iron-amber-500);
  --focus-ring: var(--iron-amber-700);

  /* --- SHARED SCALES — tokens.json > scales.space ------------------- */
  --space-0: 0;
  --space-px: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* --- tokens.json > scales.type ------------------------------------ */
  --type-xs: 12px;
  --type-sm: 14px;
  --type-base: 16px;
  --type-md: 18px;
  --type-lg: 20px;
  --type-xl: 24px;
  --type-2xl: 30px;
  --type-3xl: 36px;
  --type-4xl: 48px;
  --type-5xl: 60px;
  --type-6xl: 72px;
  --type-7xl: 96px;

  /* --- tokens.json > scales.leading --------------------------------- */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 1.75;

  /* --- tokens.json > scales.weight ---------------------------------- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* --- tokens.json > scales.radius ----------------------------------
     Ironclad binds xs and sm only. Hard, engineered corners. */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-full: 999px;

  /* --- tokens.json > scales.motion ----------------------------------
     Ironclad runs at "fast" (180ms). Snappy, minimal, no parallax. */
  --motion-instant: 120ms;
  --motion-fast: 180ms;
  --motion-base: 240ms;
  --motion-slow: 320ms;
  --motion-slower: 480ms;
  --motion-slowest: 640ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- tokens.json > scales.z --------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 20;
  --z-overlay: 40;
  --z-modal: 100;
  --z-toast: 1000;

  /* --- tokens.json > scales.container ------------------------------- */
  --container-prose: 680px;
  --container-narrow: 880px;
  --container-default: 1160px;
  --container-wide: 1360px;

  /* --- tokens.json > typography.iron -------------------------------- */
  --font-display: 'Lexend', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* --- COMPOSED CONSTANTS — derived from the tokens above ------------
     Ironclad elevation is one flat 2px offset with no blur and no spread. */
  --shadow-flat: var(--space-px) var(--space-px) 0 0 var(--surface-inverse);
  --shadow-flat-pressed: 1px 1px 0 0 var(--surface-inverse);
  --shadow-flat-amber: var(--space-px) var(--space-px) 0 0 var(--action-primary);
  --shadow-flat-light: var(--space-px) var(--space-px) 0 0 var(--border-interactive);
  --focus-halo: 0 0 0 var(--space-px) var(--surface);
  --rule-weight: var(--space-px);
  --callbar-h: calc(var(--space-16) - var(--space-2)); /* 56px, per page spec */
  --hazard-stripe: var(--space-3); /* one band of the diagonal hazard rule */
}

/* =====================================================================
   RESET AND BASE
   ===================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-bottom: var(--callbar-h); /* reserved for the sticky call bar */
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--type-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table, fieldset {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, svg { max-width: 100%; }

a { color: inherit; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

table { border-collapse: collapse; }

[hidden] { display: none !important; }

[id] { scroll-margin-top: var(--space-20); }

/* Focus is declared globally, never left to the browser default, and never
   suppressed by the reset. The white halo guarantees the amber ring stays
   visible on navy and on amber surfaces alike. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--space-px) solid var(--focus-ring);
  outline-offset: var(--space-px);
  box-shadow: var(--focus-halo);
  border-radius: var(--radius-xs);
}

/* Landmarks and sections are focus targets for the skip link and in-page
   nav, not controls. The scroll itself is the visual signal, so they do
   not draw the ring — every actual control still does. */
main:focus,
main:focus-visible,
.section:focus,
.section:focus-visible {
  outline: none;
  box-shadow: none;
}

/* =====================================================================
   TYPOGRAPHY ROLES
   ===================================================================== */

.eyebrow {
  margin-bottom: var(--space-3);
  color: var(--action-primary);
  font-family: var(--font-display);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow--onDark { color: var(--accent-graphic); }

/* action-primary (amber-700) measures 4.28:1 on surface-raised, under the
   4.5:1 floor, so a raised panel swaps it for the navy action token
   (8.89:1) exactly the way --onDark swaps in amber-500 over navy. */
.eyebrow--onRaised { color: var(--action-secondary); }

.section__title {
  max-width: 22ch;
  margin-bottom: var(--space-4);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--type-2xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
}

.section__lede {
  max-width: 68ch;
  color: var(--text-muted);
  font-size: var(--type-md);
  line-height: var(--leading-relaxed);
}

.figures {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.link {
  color: var(--action-primary);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness var(--motion-fast) var(--motion-ease-out);
}

.link:hover { text-decoration-thickness: 3px; }

.link--onDark { color: var(--accent-graphic); }

.link--onRaised { color: var(--action-secondary); }

/* A phone number in prose is the emergency target on this page, so it gets
   a 44px hit area. The pseudo-element carries it instead of padding, which
   would push the line box open and break the paragraph rhythm. */
.link[href^="tel:"] {
  position: relative;
  white-space: nowrap;
}

.link[href^="tel:"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block: calc(var(--space-3) * -1);
}

.link--arrow {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--type-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.link--arrow::after {
  content: "\2192";
  margin-left: var(--space-2);
  transition: transform var(--motion-fast) var(--motion-ease-out);
}

.link--arrow:hover::after { transform: translateX(4px); }

/* =====================================================================
   LAYOUT — container, section shell, utilities
   ===================================================================== */

.container {
  width: 100%;
  max-width: var(--container-default);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container--narrow { max-width: var(--container-narrow); }

.section {
  padding-block: var(--space-12);
  border-top: var(--rule-weight) solid var(--border-subtle);
}

.section__head { margin-bottom: var(--space-8); }

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skiplink {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  transform: translateY(-200%);
  background-color: var(--action-primary);
  color: var(--on-action-primary);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  text-decoration: none;
  border-radius: var(--radius-xs);
  transition: transform var(--motion-fast) var(--motion-ease-out);
}

.skiplink:focus-visible { transform: translateY(0); }

/* The hazard rule is the site's structural motif: a machined diagonal
   stripe that separates the navy bands from the working surfaces. */
.hazard {
  height: var(--space-2);
  background-image: repeating-linear-gradient(
    135deg,
    var(--accent-graphic) 0 var(--hazard-stripe),
    var(--surface-inverse) var(--hazard-stripe) calc(var(--hazard-stripe) * 2)
  );
}

.hazard--footer {
  height: var(--space-1);
  margin-top: var(--space-5);
  max-width: var(--space-40);
}

/* =====================================================================
   ICONS
   ===================================================================== */

.icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm { width: var(--space-5); height: var(--space-5); }
.icon--md { width: var(--space-6); height: var(--space-6); }

.icon__accent { stroke: var(--action-primary); }

/* On the navy bands the brighter amber-500 graphic token is the legible
   one; on white surfaces it drops below 3:1, so those keep amber-700. */
.hero__copy .icon__accent,
.quote__aside .icon__accent { stroke: var(--accent-graphic); }

/* =====================================================================
   BUTTONS
   Contract: default / hover / active / focus-visible / disabled.
   Sizes md 44px, lg 52px. 44px is the mobile floor.
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-inline: var(--space-5);
  border: var(--rule-weight) solid transparent;
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
  font-size: var(--type-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--motion-ease-out),
    color var(--motion-fast) var(--motion-ease-out),
    box-shadow var(--motion-fast) var(--motion-ease-out),
    transform var(--motion-fast) var(--motion-ease-out);
}

.btn--md { min-height: 44px; }

.btn--lg {
  min-height: 52px;
  padding-inline: var(--space-6);
  font-size: var(--type-base);
}

.btn--block { width: 100%; }

.btn--primary {
  background-color: var(--action-primary);
  border-color: var(--action-primary);
  color: var(--on-action-primary);
  box-shadow: var(--shadow-flat);
}

.btn--primary:hover {
  background-color: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
}

.btn--primary:active {
  transform: translate(1px, 1px);
  box-shadow: var(--shadow-flat-pressed);
}

.btn--primary:focus-visible { box-shadow: var(--focus-halo), var(--shadow-flat); }

.btn--ghostOnDark {
  background-color: transparent;
  border-color: var(--text-on-inverse);
  color: var(--text-on-inverse);
}

.btn--ghostOnDark:hover {
  background-color: var(--text-on-inverse);
  color: var(--surface-inverse);
}

.btn--ghostOnDark:active { transform: translate(1px, 1px); }

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* =====================================================================
   FIELDS
   Every field has a visible label tied by "for". Placeholders never
   stand in for labels. Input height 48px, font-size 16px so iOS does
   not zoom on focus. Borders use border-interactive, never the
   decorative border-subtle.
   ===================================================================== */

.field { margin-bottom: var(--space-4); }

.field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--type-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}

.field__input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3);
  background-color: var(--surface);
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-xs);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--type-base);
  line-height: var(--leading-normal);
  transition:
    border-color var(--motion-fast) var(--motion-ease-out),
    box-shadow var(--motion-fast) var(--motion-ease-out);
}

.field__input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.field__input:hover { border-color: var(--text-muted); }

.field__input:focus-visible {
  border-color: var(--action-primary);
  outline: var(--space-px) solid var(--focus-ring);
  outline-offset: var(--space-px);
}

.field__input--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-10);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 1px),
    calc(100% - 16px) calc(50% - 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.field__input--textarea {
  min-height: var(--space-32);
  resize: vertical;
}

/* No danger role exists in semantic.iron, so the error state borrows
   action-primary and leans on weight plus a bar for the signal. */
.field__input.is-invalid {
  border-color: var(--action-primary);
  border-width: var(--rule-weight);
}

.field__error {
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  border-left: var(--rule-weight) solid var(--action-primary);
  color: var(--text-primary);
  font-size: var(--type-sm);
  font-weight: var(--weight-semibold);
}

.field__hint {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--type-sm);
  line-height: var(--leading-normal);
}

.field--wide { grid-column: 1 / -1; }

.fieldset {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-xs);
}

.fieldset__legend {
  padding-inline: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--type-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
}

.choice__input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--action-primary);
  cursor: pointer;
}

.choice__label {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--type-base);
  cursor: pointer;
}

/* =====================================================================
   1. EMERGENCY BANNER
   ===================================================================== */

.alertbar {
  background-color: var(--surface-inverse);
  color: var(--text-on-inverse);
  border-bottom: var(--rule-weight) solid var(--accent-graphic);
}

.alertbar__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-3);
}

.alertbar__lead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--type-base);
  line-height: var(--leading-normal);
}

.alertbar__pulse {
  position: relative;
  width: var(--space-3);
  height: var(--space-3);
  align-self: center;
  flex: none;
  background-color: var(--accent-graphic);
  border-radius: var(--radius-full);
}

/* Radar ping: a ring leaves the solid dot, expands and fades, once every
   2s. Transform and opacity only, no layout. main.js adds .is-live once the
   banner has landed and .is-paused while the tab is hidden or the bar is
   scrolled away; without the script the dot simply sits solid. The 2.4x
   ceiling keeps the ring clear of the tag text beside it. */
.alertbar__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--rule-weight) solid var(--accent-graphic);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.alertbar__pulse.is-live::after {
  animation: radar-ping 2s var(--motion-ease-out) infinite;
}

.alertbar__pulse.is-paused::after { animation-play-state: paused; }

@keyframes radar-ping {
  0% { opacity: 1; transform: scale(1); }
  60%, 100% { opacity: 0; transform: scale(2.4); }
}

.alertbar__tag {
  font-family: var(--font-display);
  font-size: var(--type-xs);
  font-weight: var(--weight-black);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-graphic);
}

.alertbar__copy { color: var(--text-on-inverse); }

.alertbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  font-size: var(--type-base);
}

.alertbar__eta {
  font-variant-numeric: tabular-nums;
  color: var(--text-on-inverse);
}

.alertbar__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--accent-graphic);
  font-family: var(--font-display);
  font-size: var(--type-base);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.alertbar__tel:hover { text-decoration-thickness: 3px; }

@media (min-width: 768px) {
  .alertbar__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }
  .alertbar__lead { flex: 1; }
}

/* =====================================================================
   HEADER AND PRIMARY NAV
   ===================================================================== */

.siteheader {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--surface);
  border-bottom: var(--rule-weight) solid var(--border-subtle);
}

.siteheader.is-stuck { border-bottom-color: var(--border-interactive); }

.siteheader__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 64px;
  padding-block: var(--space-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  text-decoration: none;
}

.brand__mark {
  width: var(--space-8);
  height: var(--space-8);
  flex: none;
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
}

.brand__shield {
  stroke: var(--action-secondary);
  fill: var(--action-secondary);
}

.brand__bolt {
  stroke: var(--accent-graphic);
  fill: var(--accent-graphic);
  stroke-width: 1;
}

.brand__text { display: flex; flex-direction: column; }

.brand__name {
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.brand__sub {
  font-family: var(--font-display);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.navtoggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  min-width: 44px;
  padding-inline: var(--space-3);
  background-color: var(--surface);
  border: var(--rule-weight) solid var(--border-strong);
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Kept as real text rather than an icon-only control: the SVG is
   aria-hidden, so this word is the button's accessible name. */
.navtoggle__label { letter-spacing: 0.1em; }

.navtoggle__icon {
  width: var(--space-6);
  height: var(--space-6);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.navtoggle__bar {
  transition:
    transform var(--motion-fast) var(--motion-ease-out),
    opacity var(--motion-fast) var(--motion-ease-out);
  transform-origin: 50% 50%;
}

.navtoggle.is-open .navtoggle__bar--top { transform: translateY(6px) rotate(45deg); }
.navtoggle.is-open .navtoggle__bar--mid { opacity: 0; }
.navtoggle.is-open .navtoggle__bar--bot { transform: translateY(-6px) rotate(-45deg); }

.nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-overlay);
  background-color: var(--surface);
  border: var(--rule-weight) solid var(--border-strong);
  border-top: 0;
  box-shadow: var(--shadow-flat);
}

.nav.is-open { display: block; }

.nav__item { border-bottom: 1px solid var(--border-subtle); }

.nav__item:last-child { border-bottom: 0; }

.nav__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding-inline: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--type-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-primary);
  transition: background-color var(--motion-fast) var(--motion-ease-out);
}

.nav__link:hover { background-color: var(--surface-raised); }

.nav__link.is-active {
  color: var(--action-primary);
  box-shadow: inset var(--space-1) 0 0 0 var(--action-primary);
}

/* The active link is amber, which drops to 4.28:1 on surface-raised, so it
   keeps the surface behind it on hover. The inset bar is its state signal. */
.nav__link.is-active:hover { background-color: var(--surface); }

.nav__link--cta {
  background-color: var(--action-primary);
  color: var(--on-action-primary);
}

.nav__link--cta:hover { background-color: var(--action-primary-hover); }

.nav__link--cta.is-active {
  color: var(--on-action-primary);
  box-shadow: none;
}

.siteheader__call { display: none; }

@media (min-width: 768px) {
  .siteheader__call { display: inline-flex; }
  .siteheader__callnum { font-variant-numeric: tabular-nums; }
}

@media (min-width: 1024px) {
  .siteheader__inner { min-height: 72px; gap: var(--space-5); }
  .navtoggle { display: none; }

  .nav {
    display: block;
    position: static;
    flex: 1;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }

  .nav__list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
  }

  .nav__item { border-bottom: 0; }

  .nav__link {
    min-height: 44px;
    padding-inline: var(--space-3);
    font-size: var(--type-xs);
  }

  .nav__link.is-active {
    box-shadow: inset 0 calc(var(--space-1) * -1) 0 0 var(--action-primary);
  }

  .nav__item--cta { margin-left: var(--space-2); }
}

/* =====================================================================
   2. HERO + INLINE QUOTE FORM

   --- PHOTO SWAP POINTS ---------------------------------------------
   All imagery on this site is hand-authored inline SVG plus layered CSS
   gradients. Nothing is loaded from a network. To drop real photography
   in later, replace the generated art on these selectors:

     .hero__bg    -> 1920x1080 full-bleed hero plate (navy-graded, the
                     .hero__grid / .hero__glow / .hero__noise layers can
                     stay on top of it as a treatment)
     .hero__art   -> 900x640 technician-at-the-equipment shot; delete the
                     inline <svg class="schematic"> in index.html
     .svc__icon   -> 800x600 per-service photo; widen .svc__top to a
                     full-bleed figure above the card heading
     .seal__art   -> real certification badge artwork, 144x144
     .hazard      -> keep; it is a rule, not a picture

   Keep every replacement under 250KB total page weight and keep the
   aspect ratios above so no layout rule needs to change.
   ------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--surface-inverse);
  color: var(--text-on-inverse);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--surface-inverse);
  background-image:
    linear-gradient(180deg, transparent 40%, var(--surface-inverse) 100%),
    radial-gradient(120% 90% at 12% 0%, var(--action-secondary), transparent 62%);
}

.hero__grid,
.hero__glow,
.hero__noise {
  position: absolute;
  inset: 0;
  display: block;
}

.hero__grid {
  opacity: 0.09;
  background-image:
    repeating-linear-gradient(to right, var(--text-on-inverse) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to bottom, var(--text-on-inverse) 0 1px, transparent 1px 48px);
}

.hero__glow {
  opacity: 0.16;
  background-image: radial-gradient(48% 55% at 88% 8%, var(--accent-graphic), transparent 68%);
}

.hero__noise {
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.hero__inner { padding-block: var(--space-10) var(--space-12); }

.hero__title {
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--type-2xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-snug);
  letter-spacing: -0.025em;
}

.hero__title-accent { color: var(--accent-graphic); }

.hero__lead {
  max-width: 60ch;
  margin-bottom: var(--space-6);
  font-size: var(--type-md);
  line-height: var(--leading-relaxed);
}

.hero__proof {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-xs);
}

.hero__proof-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--type-base);
  line-height: var(--leading-normal);
}

.hero__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-xs);
}

.hero__stat {
  min-width: 0;
  padding: var(--space-3);
  border-right: 1px solid var(--border-interactive);
}

.hero__stat:last-child { border-right: 0; }

/* No opacity here: compositing text over the navy band manufactures a color
   that exists in no palette and was never contrast-checked. The hierarchy is
   carried by size and by the amber value beneath. */
.hero__stat-label {
  font-size: var(--type-xs);
  line-height: var(--leading-snug);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-inverse);
}

.hero__stat-value {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  color: var(--accent-graphic);
}

.hero__panel { margin-top: var(--space-8); }

.hero__art { display: none; }

/* --- hero schematic (hand-authored line art) ----------------------- */

.schematic {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.schematic__frame > * {
  stroke: var(--text-on-inverse);
  stroke-width: 2;
  opacity: 0.5;
}

.schematic__unit > * {
  stroke: var(--text-on-inverse);
  stroke-width: 2;
  opacity: 0.8;
}

.schematic__ground > * {
  stroke: var(--accent-graphic);
  stroke-width: 2;
  opacity: 0.55;
}

.schematic__hot > * {
  stroke: var(--accent-graphic);
  stroke-width: 2;
}

.schematic__notes > * {
  stroke: var(--accent-graphic);
  stroke-width: 2;
  stroke-dasharray: 5 5;
  opacity: 0.6;
}

/* --- quote form card ----------------------------------------------- */

.quoteform {
  background-color: var(--surface);
  color: var(--text-primary);
  border: var(--rule-weight) solid var(--border-strong);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-flat-amber);
}

.quoteform--compact { padding: var(--space-5); }

.quoteform--full { padding: var(--space-5); }

.quoteform__head {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: var(--rule-weight) solid var(--border-subtle);
}

.quoteform__title {
  font-family: var(--font-display);
  font-size: var(--type-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
}

.quoteform__sub {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--type-sm);
  line-height: var(--leading-normal);
}

.quoteform__fineprint {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--type-sm);
  line-height: var(--leading-normal);
}

.formsuccess {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.formsuccess:focus-visible { outline-offset: var(--space-1); }

.formsuccess__icon {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--action-secondary);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.formsuccess__title {
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: var(--weight-black);
  line-height: var(--leading-snug);
}

.formsuccess__copy {
  color: var(--text-muted);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
}

.formsuccess__demo {
  padding: var(--space-2) var(--space-3);
  background-color: var(--surface-raised);
  border-left: var(--rule-weight) solid var(--action-primary);
  color: var(--text-muted);
  font-size: var(--type-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (min-width: 480px) {
  .hero__cta { flex-direction: row; flex-wrap: wrap; }
  .hero__cta .btn { flex: 1 1 auto; }
}

@media (min-width: 768px) {
  .hero__inner { padding-block: var(--space-16) var(--space-20); }
  .hero__title { font-size: var(--type-4xl); }
  .hero__lead { font-size: var(--type-lg); }
  .hero__stat-value { font-size: var(--type-xl); }
  .hero__art { display: block; margin-top: var(--space-10); }
  .quoteform--compact { padding: var(--space-6); }
  .quoteform--full { padding: var(--space-8); }
}

@media (min-width: 1024px) {
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8) var(--space-12);
    align-items: start;
  }
  .hero__copy { grid-column: 1; grid-row: 1 / span 2; }
  .hero__panel { grid-column: 2; grid-row: 1; margin-top: 0; }
  .hero__art { grid-column: 2; grid-row: 2; margin-top: 0; }
  .hero__title { font-size: var(--type-5xl); }
}

@media (min-width: 1280px) {
  .hero__inner { gap: var(--space-10) var(--space-16); }
}

/* =====================================================================
   3. TRUST ROW — four geometric seals
   ===================================================================== */

.trust {
  background-color: var(--surface);
  padding-block: var(--space-10);
}

.trust__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  border: 1px solid var(--border-interactive);
}

.seal {
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-interactive);
}

.seal:last-child { border-bottom: 0; }

.seal__art {
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-3);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.seal__ring {
  stroke: var(--action-secondary);
  stroke-width: 2;
}

.seal__ring--inner { opacity: 0.4; }

.seal__mark {
  stroke: var(--action-primary);
  stroke-width: 3;
  fill: none;
}

.seal__title {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--type-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

.seal__copy {
  color: var(--text-muted);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
}

@media (min-width: 480px) {
  .trust__row { grid-template-columns: repeat(2, 1fr); }
  .seal { border-right: 1px solid var(--border-interactive); }
  .seal:nth-child(2n) { border-right: 0; }
  .seal:nth-child(n + 3) { border-bottom: 0; }
}

@media (min-width: 1024px) {
  .trust { padding-block: var(--space-12); }
  .trust__row { grid-template-columns: repeat(4, 1fr); }
  .seal { border-bottom: 0; }
  .seal:nth-child(2n) { border-right: 1px solid var(--border-interactive); }
  .seal:last-child { border-right: 0; }
}

/* =====================================================================
   4. SERVICES GRID
   ===================================================================== */

.services { background-color: var(--bg); }

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.svc {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background-color: var(--surface);
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-flat-light);
  transition:
    box-shadow var(--motion-fast) var(--motion-ease-out),
    transform var(--motion-fast) var(--motion-ease-out);
}

.svc:hover {
  box-shadow: var(--shadow-flat);
  transform: translate(-1px, -1px);
}

.svc__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--rule-weight) solid var(--border-subtle);
}

.svc__icon {
  width: 44px;
  height: 44px;
  flex: none;
  fill: none;
  stroke: var(--action-secondary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svc__price {
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

.svc__price strong {
  display: block;
  font-size: var(--type-xl);
  font-weight: var(--weight-black);
  color: var(--action-primary);
}

.svc__price-unit {
  display: block;
  font-size: var(--type-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.svc__title {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

.svc__copy {
  margin-bottom: var(--space-4);
  color: var(--text-muted);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
}

.svc__list {
  margin-bottom: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--type-sm);
  font-variant-numeric: tabular-nums;
}

.svc__list li {
  position: relative;
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  line-height: var(--leading-normal);
}

.svc__list li::before {
  content: "";
  position: absolute;
  top: var(--space-3);
  left: 0;
  width: var(--space-3);
  height: var(--space-px);
  background-color: var(--action-primary);
}

.svc .link--arrow { margin-top: auto; }

.services__note {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background-color: var(--surface-raised);
  border-left: var(--space-1) solid var(--action-primary);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
}

@media (min-width: 768px) {
  .section { padding-block: var(--space-16); }
  .section__title { font-size: var(--type-3xl); }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .section { padding-block: var(--space-20); }
  .services__grid { grid-template-columns: repeat(3, 1fr); }
}

/* =====================================================================
   5. SERVICE AREAS
   ===================================================================== */

.areas { background-color: var(--surface-raised); }

/* One column at 360px: a 16px row needs ~170px and two columns leave 158,
   which breaks the longest names across two lines. The multi-column density
   returns at 480px, where the columns are actually wide enough to hold it. */
.areas__list {
  columns: 1;
  column-gap: var(--space-6);
  border-top: var(--rule-weight) solid var(--border-interactive);
}

.areas__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  break-inside: avoid;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--type-base);
}

.areas__name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

.areas__zip { color: var(--text-muted); }

.areas__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.fact {
  padding: var(--space-4);
  background-color: var(--surface);
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-xs);
}

.fact__title {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--type-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--action-secondary);
}

.fact__copy {
  color: var(--text-muted);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
}

@media (min-width: 480px) {
  .areas__list { columns: 2; }
}

@media (min-width: 768px) {
  .areas__list { columns: 3; }
  .areas__facts { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .areas__list { columns: 4; }
}

/* =====================================================================
   6. WHY US
   ===================================================================== */

.why { background-color: var(--surface); }

.why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.compare {
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-xs);
}

.compare__n {
  font-family: var(--font-display);
  font-size: var(--type-sm);
  font-weight: var(--weight-black);
  letter-spacing: 0.12em;
  color: var(--action-primary);
}

.compare__title {
  margin: var(--space-1) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

.compare__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-subtle);
}

.compare__tag {
  font-family: var(--font-display);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.compare__row--them .compare__tag { color: var(--text-muted); }

/* The "us" row sits on surface-raised, where amber measures 4.28:1. Navy is
   the brand's other action color and clears the floor at 8.89:1. */
.compare__row--us .compare__tag { color: var(--action-secondary); }

.compare__row--us {
  margin-inline: calc(var(--space-5) * -1);
  padding-inline: var(--space-5);
  background-color: var(--surface-raised);
  border-top-color: var(--border-interactive);
}

.compare__copy {
  color: var(--text-muted);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
}

.compare__row--us .compare__copy { color: var(--text-primary); }

@media (min-width: 768px) {
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .compare__row {
    grid-template-columns: var(--space-24) 1fr;
    gap: var(--space-4);
    align-items: baseline;
  }
}

/* =====================================================================
   7. FINANCING
   ===================================================================== */

.financing { background-color: var(--bg); }

.tablewrap {
  overflow-x: auto;
  border: var(--rule-weight) solid var(--border-strong);
  border-radius: var(--radius-xs);
  background-color: var(--surface);
  box-shadow: var(--shadow-flat-amber);
}

/* No min-width: the money columns are nowrap and set their own floor, and
   the typical-job column below declares the room it needs to wrap. Between
   them they decide how far the wrapper scrolls at 360px. */
.ftable {
  width: 100%;
  font-size: var(--type-sm);
}

.ftable__caption {
  padding: var(--space-4);
  border-bottom: var(--rule-weight) solid var(--border-subtle);
  color: var(--text-muted);
  font-size: var(--type-sm);
  line-height: var(--leading-normal);
  text-align: left;
}

.ftable thead th {
  padding: var(--space-3);
  background-color: var(--surface-inverse);
  border-right: 1px solid var(--border-interactive);
  color: var(--text-on-inverse);
  font-family: var(--font-display);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
  vertical-align: bottom;
}

.ftable thead th:first-child { text-align: left; }

.ftable thead th:last-child { border-right: 0; }

.ftable__rate {
  display: block;
  margin-top: var(--space-1);
  color: var(--accent-graphic);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: none;
}

.ftable tbody th {
  padding: var(--space-3);
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-size: var(--type-base);
  font-weight: var(--weight-black);
  text-align: left;
  white-space: nowrap;
}

.ftable tbody td {
  padding: var(--space-3);
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  text-align: right;
  white-space: nowrap;
}

.ftable tbody td:last-child { border-right: 0; }

.ftable tbody tr:last-child th,
.ftable tbody tr:last-child td { border-bottom: 0; }

.ftable tbody tr:nth-child(2n) th,
.ftable tbody tr:nth-child(2n) td { background-color: var(--surface-raised); }

/* The typical-job column is what turns a dollar figure into a decision, so
   it stays in the DOM at every width and scrolls with the rest of the table
   rather than being display:none'd off the phone. */
.ftable thead th.ftable__typical,
.ftable tbody td.ftable__typical {
  min-width: var(--space-40);
  text-align: left;
  white-space: normal;
}

.ftable tbody td.ftable__typical {
  color: var(--text-muted);
  font-size: var(--type-sm);
}

.financing__notes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.financing__note {
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface);
  border-left: var(--space-1) solid var(--action-secondary);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.financing__note strong { color: var(--text-primary); }

@media (min-width: 768px) {
  .financing__notes { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ftable { font-size: var(--type-base); }
  .financing__notes { grid-template-columns: repeat(4, 1fr); }
}

/* =====================================================================
   8. PROCESS
   ===================================================================== */

.process { background-color: var(--surface-raised); }

.process__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.step {
  position: relative;
  padding: var(--space-5);
  background-color: var(--surface);
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-xs);
  border-top: var(--space-1) solid var(--action-primary);
}

.step__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-3);
  background-color: var(--surface-inverse);
  color: var(--text-on-inverse);
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: var(--weight-black);
  line-height: 1;
}

.step__title {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--type-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.step__copy {
  color: var(--text-muted);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
}

@media (min-width: 768px) {
  .process__list {
    grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-24) * 2), 1fr));
  }
}

/* =====================================================================
   9. FAQ ACCORDION
   ===================================================================== */

.faq { background-color: var(--surface); }

.accordion {
  border-top: var(--rule-weight) solid var(--border-strong);
  border-bottom: var(--rule-weight) solid var(--border-strong);
}

.accordion__item { border-bottom: 1px solid var(--border-subtle); }

.accordion__item:last-child { border-bottom: 0; }

.accordion__heading { margin: 0; }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 56px;
  padding: var(--space-4) 0;
  background-color: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  text-align: left;
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease-out);
}

.accordion__trigger:hover { color: var(--action-primary); }

.accordion__q {
  font-family: var(--font-display);
  font-size: var(--type-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

.accordion__sign {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  border: var(--rule-weight) solid var(--action-primary);
  border-radius: var(--radius-xs);
}

.accordion__sign::before,
.accordion__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--space-3);
  height: var(--space-px);
  background-color: var(--action-primary);
  transform: translate(-50%, -50%);
  transition: transform var(--motion-fast) var(--motion-ease-out);
}

.accordion__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.accordion__trigger[aria-expanded="true"] .accordion__sign::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.accordion__panel {
  padding: 0 0 var(--space-5);
  color: var(--text-muted);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
}

.accordion__panel p { max-width: 72ch; }

@media (min-width: 768px) {
  .accordion__q { font-size: var(--type-md); }
  .accordion__trigger { padding: var(--space-5) 0; }
}

/* =====================================================================
   10. FULL QUOTE SECTION
   ===================================================================== */

.quote {
  background-color: var(--surface-inverse);
  color: var(--text-on-inverse);
  border-top: var(--space-1) solid var(--accent-graphic);
}

.quote__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.quote__title {
  max-width: 20ch;
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--type-2xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
}

.quote__lead {
  margin-bottom: var(--space-6);
  font-size: var(--type-md);
  line-height: var(--leading-relaxed);
}

/* min-width:0 keeps a long email address from forcing the grid wider
   than the viewport at 360px. */
.quote__formwrap { min-width: 0; }

.quote__facts {
  border-top: 1px solid var(--border-interactive);
}

.quote__fact {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-interactive);
}

.quote__fact-label {
  font-family: var(--font-display);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-graphic);
}

.quote__fact-value {
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  word-break: break-word;
}

.quote__fact-value a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (min-width: 768px) {
  .quote__title { font-size: var(--type-3xl); }
  .quote__fact { grid-template-columns: var(--space-40) 1fr; gap: var(--space-4); }
}

@media (min-width: 1024px) {
  .quote__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-12);
    align-items: start;
  }
  .quoteform--full .quoteform__fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--space-4);
  }
  .quoteform--full .fieldset,
  .quoteform--full .btn--block,
  .quoteform--full .quoteform__fineprint { grid-column: 1 / -1; }
}

/* =====================================================================
   FOOTER
   ===================================================================== */

.sitefooter {
  padding-block: var(--space-12) var(--space-8);
  background-color: var(--surface);
  border-top: var(--rule-weight) solid var(--border-strong);
}

.sitefooter__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.sitefooter__col { min-width: 0; }

.sitefooter__brand {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: var(--weight-black);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.sitefooter__copy {
  max-width: 42ch;
  color: var(--text-muted);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
}

.sitefooter__lic {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--type-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sitefooter__title {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--action-secondary);
}

.sitefooter__list { font-size: var(--type-sm); }

.sitefooter__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  overflow-wrap: anywhere;
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--motion-fast) var(--motion-ease-out);
}

.sitefooter__link:hover {
  color: var(--action-primary);
  text-decoration-thickness: 3px;
}

.sitefooter__plain {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.sitefooter__plain--hi {
  color: var(--text-primary);
  font-weight: var(--weight-bold);
}

.sitefooter__legal {
  max-width: 78ch;
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: var(--type-xs);
  line-height: var(--leading-relaxed);
}

@media (min-width: 480px) {
  .sitefooter__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .sitefooter__grid { grid-template-columns: repeat(3, 1fr); }
  .sitefooter__col--brand { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .sitefooter__grid {
    grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
    gap: var(--space-6);
  }
  .sitefooter__col--brand { grid-column: auto; }
}

/* =====================================================================
   STICKY CALL BAR — the highest-converting element on a contractor site.
   Under 768px only. 56px tall. body reserves matching bottom padding.
   ===================================================================== */

.callbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  height: var(--callbar-h);
  background-color: var(--action-primary);
  border-top: var(--rule-weight) solid var(--surface-inverse);
}

.callbar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  height: 100%;
  color: var(--on-action-primary);
  text-decoration: none;
}

/* The bar's own background IS action-primary, so the global amber ring would
   be painted amber-on-amber. Inverting it — navy ring inset, white hairline
   inside — is the only treatment that survives on this surface. The white
   --focus-halo cannot help here: it draws outside a bar pinned to the
   viewport edge, so three of its four sides are off-screen. */
.callbar__link:focus-visible {
  outline: var(--space-px) solid var(--surface-inverse);
  outline-offset: calc(var(--space-px) * -2);
  box-shadow: inset 0 0 0 var(--space-px) var(--text-on-inverse);
}

.callbar__icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.callbar__text {
  display: flex;
  flex-direction: column;
  line-height: var(--leading-tight);
}

.callbar__label {
  font-family: var(--font-display);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.callbar__num {
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: var(--weight-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .callbar { display: none; }
}

/* =====================================================================
   CREDIT STRIP — identical markup and class names across all four demos
   ===================================================================== */

.credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background-color: var(--surface-inverse);
  color: var(--text-on-inverse);
  text-align: center;
}

.credit__text {
  font-size: var(--type-sm);
  letter-spacing: 0.02em;
}

.credit__text strong { font-weight: var(--weight-bold); }

.credit__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent-graphic);
  font-family: var(--font-display);
  font-size: var(--type-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness var(--motion-fast) var(--motion-ease-out);
}

.credit__link:hover { text-decoration-thickness: 3px; }

@media (min-width: 768px) {
  .credit {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-5);
  }
}

/* =====================================================================
   LOAD CHOREOGRAPHY AND VIEW TRANSITIONS
   main.js runs the page-load timeline with the Web Animations API. CSS
   only hides what that timeline animates, only while <html> carries
   .is-loading (set by the inline head script), and the failsafe shows
   everything at 2.5s if the script never arrives. Same-origin page
   navigations crossfade natively; unsupported browsers just navigate.
   ===================================================================== */

@view-transition { navigation: auto; }

/* Arriving crossfade at house speed, so it clears before most of the load
   timeline plays instead of blurring it under a slower default fade. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: var(--motion-fast); }

.is-loading [data-load] { opacity: 0; }

.is-loading [data-load] { animation: load-failsafe 0s 2.5s forwards; }

@keyframes load-failsafe { to { opacity: 1; } }

/* The headline is split into words for the load snap. inline-block lets a
   transform apply while each word still wraps at the same space it did as
   plain text; main.js puts the original markup back once the words land. */
.hero__word { display: inline-block; }

/* Count-up figures. main.js locks the box at the final figure's width for
   the frames it counts, so the unit beside it never moves. It only counts
   once the webfonts have settled, so a font swap cannot resize the box. */
[data-count] {
  display: inline-block;
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}

/* =====================================================================
   REDUCED MOTION — transforms and animations off, nothing else changes
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  @view-transition { navigation: none; }

  /* Nothing is held back for a timeline that will not run. */
  .is-loading [data-load] {
    opacity: 1;
    animation: none;
  }

  .alertbar__pulse.is-live::after { animation: none; }
  .skiplink { transition: none; }
  .skiplink:focus-visible { transform: none; top: var(--space-2); }

  .svc:hover,
  .btn--primary:active,
  .btn--ghostOnDark:active { transform: none; }

  .link--arrow:hover::after { transform: none; }

  .navtoggle.is-open .navtoggle__bar--top,
  .navtoggle.is-open .navtoggle__bar--bot { transform: none; }

  .navtoggle.is-open .navtoggle__bar--mid { opacity: 1; }
}