/* =============================================================================
   HTR — STYLESHEET

   Lineage: this is Korban's original stylesheet, evolved. His design tokens
   (:root custom properties), component naming (.container/.section/.btn/
   .service-card/.why-item/.back-to-top) and the red-on-navy rescue palette all
   carry forward unchanged in spirit. What changed in the production pass:

     - mobile-first breakpoints (his were desktop-first max-width queries)
     - a night-highway scene replaces the flat hero gradient, and the hero is
       built to host a video without a layout shift
     - a persistent click-to-call bar on phones
     - the placeholder/unconfirmed fact treatment
     - the instant-answer tool components
     - focus-visible, reduced-motion, and contrast fixes
     - Font Awesome CDN dropped for an inline SVG sprite (one less network hop,
       no render-blocking third-party CSS)
   ============================================================================= */

/* --- RESET & BASE -------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Brand — sampled from the remastered HTR logo: the hook-and-flame orange,
     the near-black of the range, and the steel blue-grey it sits on. Korban's
     original scheme was rescue red on navy; this replaces it at the owner's
     request so the site matches what is painted on the trucks. */
  --primary: #e16a26;          /* logo orange — sampled #e16a26 */
  --primary-hover: #f2823f;    /* lighter on hover, so dark button text stays readable */
  --primary-dark: #a8480f;     /* small orange text on light backgrounds (5.8:1 on white) */
  --primary-light: #ff9a52;    /* small orange text on dark backgrounds */
  --amber: #d8a12a;
  --secondary: #38414c;
  --secondary-dark: #0d1013;   /* the range's near-black */
  --night: #06080a;

  /* Neutrals */
  --white: #ffffff;
  --off-white: #f5f7f9;
  --light-gray: #e3e7ec;
  --steel: #b6c0ca;            /* the logo plate's blue-grey */
  --mid-gray: #9aa4b0;
  --dark-gray: #4b535c;
  --text: #14171b;
  --text-light: #59616b;

  --font-heading: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  --section-pad: 64px;
  --container-max: 1180px;
  --header-h: 64px;
  --callbar-h: 62px;

  --shadow-sm: 0 2px 8px rgba(13, 16, 19, .09);
  --shadow-md: 0 6px 20px rgba(13, 16, 19, .13);
  --shadow-lg: 0 14px 40px rgba(13, 16, 19, .18);

  --radius: 12px;
  --transition: .25s ease;
}

/* Horizontal-overflow containment — a GUARD, not the fix.
   Anything that actually overflows is a layout bug and has to be corrected at
   the source (see the mobile nav drawer, and the assertion in tests/layout.js
   that fails the build if the document ever grows wider than the viewport).
   This is here so that a future regression degrades into a hidden sliver
   rather than a page a phone user can drag sideways off the edge of.

   `clip` is declared after `hidden` and wins wherever it is supported: unlike
   `hidden` it does not turn the element into a scroll container, so the sticky
   header, smooth scrolling and scroll-spy all keep working untouched. Browsers
   without `clip` (Safari < 16) simply keep the `hidden` line above it. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
  /* room for the sticky call bar on phones */
  padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom, 0px));
}

img, svg, video { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; transition: color var(--transition); }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }
.section { padding: var(--section-pad) 0; }
.section--dark { background: var(--secondary-dark); color: var(--white); }
.section--muted { background: var(--off-white); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon { width: 1.15em; height: 1.15em; flex: none; }
.icon--xl { width: 44px; height: 44px; }

/* --- ACCESSIBILITY ------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--primary); color: var(--secondary-dark);
  padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* =============================================================================
   UNCONFIRMED-FACT TREATMENT
   Any business fact that has not been confirmed by the owner renders inside
   this. It must be unmistakable at a glance and survive a screenshot.
   ============================================================================= */
.unconfirmed {
  /* Deliberately cool and off-brand. The brand is orange now, so an amber
     placeholder chip would read as decoration instead of a warning. */
  display: inline-block;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .9em;
  letter-spacing: .01em;
  color: #2f3d52;
  background: rgba(120, 145, 180, .20);
  border-bottom: 2px dotted rgba(90, 115, 150, .9);
  border-radius: 3px 3px 0 0;
  padding: 0 .35em;
  white-space: nowrap;
  cursor: help;
}
.section--dark .unconfirmed,
.footer .unconfirmed,
.hero .unconfirmed {
  color: #cddcf0;
  background: rgba(140, 165, 200, .22);
  border-bottom-color: rgba(180, 200, 230, .9);
}
/* the sample chip inside the staging banner */
.unconfirmed-demo {
  font-family: ui-monospace, Consolas, monospace;
  background: rgba(140, 165, 200, .24);
  border-bottom: 2px dotted rgba(180, 200, 230, .9);
  padding: 0 .3em;
}
/* a link whose target fact is unconfirmed must not look clickable */
.is-inert {
  cursor: not-allowed;
  opacity: .82;
}

/* --- STAGING BANNER ------------------------------------------------------ */
.staging-banner {
  background: linear-gradient(90deg, #2b2214, #3a2c14);
  border-bottom: 2px solid var(--amber);
  color: #f6e6c4;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 10px 0;
  position: relative;
  z-index: 1100;
}
.staging-banner__inner { display: flex; gap: 10px; align-items: flex-start; }
.staging-banner .icon { color: var(--amber); margin-top: 3px; }
.staging-banner strong { color: var(--amber); }
.staging-banner__count { display: block; opacity: .8; margin-top: 2px; }

/* --- BUTTONS ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px;
  border-radius: 10px;
  font-weight: 700; font-size: 16px; line-height: 1.2;
  border: 2px solid transparent;
  transition: transform var(--transition), background var(--transition),
              border-color var(--transition), box-shadow var(--transition);
  text-align: center;
}
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-lg { padding: 17px 30px; font-size: 17px; }
.btn-block { width: 100%; }

.btn-primary { background: var(--primary); color: var(--secondary-dark); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn:disabled,
.btn[disabled] {
  background: var(--light-gray);
  border-color: var(--light-gray);
  color: var(--dark-gray);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn:disabled:hover { background: var(--light-gray); border-color: var(--light-gray); transform: none; box-shadow: none; }

.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: var(--white); }

.btn-call { background: var(--primary); color: var(--secondary-dark); padding: 10px 16px; font-size: 15px; border-radius: 8px; }
.btn-call:hover { background: var(--primary-hover); }

/* --- HEADER -------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(13, 16, 19, .95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--primary);
}
.nav-container {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--header-h);
}
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--white); }
.logo-mark { width: 32px; height: 31px; color: #dfe4ea; flex: none; }
.logo-text { font-family: var(--font-heading); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.logo-text b { color: var(--white); }
.logo-text > span { color: var(--primary); margin-left: 5px; }

.nav { display: none; }
.nav-list { display: flex; gap: 26px; }
.nav-link { color: var(--mid-gray); font-size: 15px; font-weight: 600; position: relative; padding: 4px 0; }
.nav-link:hover, .nav-link.active { color: var(--white); }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--primary); transition: width var(--transition);
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

.header-call { display: none; }

.hamburger { display: flex; flex-direction: column; gap: 5px; padding: 8px; }
.hamburger span { display: block; width: 26px; height: 3px; background: var(--white); border-radius: 3px; transition: all var(--transition); }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

/* =============================================================================
   HERO — night highway. Built to accept a video without reflow: the scene
   below is a real fallback, not a loading state, so the page never waits.
   ============================================================================= */
.hero {
  position: relative;
  background: radial-gradient(120% 100% at 50% 0%, #1b1f25 0%, var(--secondary-dark) 45%, var(--night) 100%);
  color: var(--white);
  padding: 56px 0 44px;
  overflow: hidden;
  isolation: isolate;
}
.hero-grid { position: relative; z-index: 1; display: grid; gap: 30px; }

/* The photo panel. Framed at close to native resolution rather than stretched
   full-bleed — the source is 680px wide, and a sharp small photo of the real
   truck beats a soft big one. */
.hero-figure { margin: 0; }
.hero-media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  background: #0e1a28;
  aspect-ratio: 4 / 3;
}
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  /* A very slow drift. Cheaper, safer, and honestly most of what a generated
     hero video would have bought us — and it cannot invent a detail that isn't
     in the photograph. Disabled wholesale by the reduced-motion block below. */
  transform-origin: 58% 60%;
  animation: hero-drift 32s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.2%, -0.8%, 0); }
}
/* a video, when one exists, layers over the still — same box, no reflow */
.hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero-figure figcaption {
  margin-top: 10px;
  font-size: 13px; color: var(--mid-gray);
  letter-spacing: .01em;
}

/* Ambient background loop — quiet, but it has to be visible enough to read as
   footage. Nothing on the page depends on it and it never loads on phones.

   Two dials control how much of it reaches the eye, and the SCRIM is by far
   the bigger one: at the old .24 opacity under a .74 scrim, 6% of the frame
   was getting through, so raising opacity alone would have bought very little.
   Both moved together — .24 -> .44 opacity, scrim .95/.84/.74 -> .93/.82/.68 —
   which is 14% of the frame reaching the viewer, 2.3x what it was.

   The text still wins, by a bound rather than by eye. Worst case is a frame
   that is pure white behind the copy — brighter than saturate(.5)/contrast(.88)
   can actually produce — at the most transparent point of the scrim any hero
   text sits over, plus the red scene glow on top. Under those assumptions:

     h1 (white)                      14.43:1   (AA large needs 3.0)
     .hero-subtitle #c3cddb 19px      8.98:1   (AA needs 4.5)
     .hero-note / .stat-label
       / figcaption --mid-gray        5.71:1   (AA needs 4.5)  <- the tight one

   --mid-gray at 11.5px is the binding constraint. It holds 1.27x of headroom
   over AA, so real footage has room to spare. If the scrim is ever eased
   further, re-run that bound before shipping — do not eyeball it. */
.hero-ambient { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero-ambient video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .44;
  filter: saturate(.5) contrast(.88);
}
.hero-ambient::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(6,8,10,.93) 0%, rgba(6,8,10,.82) 42%, rgba(6,8,10,.68) 100%),
    linear-gradient(180deg, rgba(6,8,10,.6) 0%, transparent 34%, rgba(6,8,10,.8) 100%);
}

.hero-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-scene__road {
  position: absolute; left: -10%; right: -10%; bottom: -30%; height: 60%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 60px, transparent 60px 160px) center 42% / 100% 4px no-repeat,
    linear-gradient(180deg, transparent, rgba(255,255,255,.045));
  transform: perspective(420px) rotateX(64deg);
  opacity: .55;
}
.hero-scene__glow { position: absolute; border-radius: 50%; filter: blur(70px); }
.hero-scene__glow--red { width: 46vmax; height: 46vmax; left: -14vmax; top: -12vmax; background: rgba(225,106,38,.22); }
.hero.has-ambient .hero-scene { opacity: .45; }
.hero-scene__glow--amber { width: 34vmax; height: 34vmax; right: -10vmax; bottom: -14vmax; background: rgba(182,192,202,.10); }
.hero-scene__beacon {
  position: absolute; right: 8%; top: 14%;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(225,106,38,.42) 0%, transparent 66%);
  animation: beacon 3.4s ease-in-out infinite;
}
@keyframes beacon { 0%, 100% { opacity: .25; transform: scale(.9); } 50% { opacity: .75; transform: scale(1.12); } }

.hero-content { max-width: 660px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(225,106,38,.16);
  border: 1px solid rgba(225,106,38,.6);
  border-radius: 999px;
  padding: 7px 16px 7px 12px;
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  margin-bottom: 20px;
}
.pulse-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--primary);
  box-shadow: 0 0 0 0 rgba(225,106,38,.7);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(225,106,38,.7); }
  70%  { box-shadow: 0 0 0 12px rgba(225,106,38,0); }
  100% { box-shadow: 0 0 0 0 rgba(225,106,38,0); }
}

.hero h1 {
  font-size: clamp(34px, 8.5vw, 66px);
  font-weight: 900; line-height: 1.04; letter-spacing: -.025em;
  margin-bottom: 18px;
}
.hero-h1-accent { color: var(--primary); }

.hero-subtitle {
  font-size: clamp(16px, 4vw, 19px);
  color: #c3cddb;
  max-width: 40em;
  margin-bottom: 26px;
}

.hero-actions { display: flex; flex-direction: column; gap: 12px; }
.btn-block-mobile { width: 100%; }

.hero-note { font-size: 13.5px; color: var(--mid-gray); margin-top: 14px; }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: 26px;
  margin-top: 34px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.stat { display: flex; flex-direction: column; gap: 3px; }
.stat-number { font-size: 26px; font-weight: 800; color: var(--primary); line-height: 1.15; }
.stat-number--sm { font-size: 17px; letter-spacing: -.01em; }
.stat-label { font-size: 11.5px; color: var(--mid-gray); text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }

/* --- QUICK TRIAGE BAR ---------------------------------------------------- */
.quickbar { background: var(--night); border-bottom: 1px solid rgba(255,255,255,.07); padding: 22px 0 26px; }
.quickbar__title { color: var(--white); font-size: 15px; font-weight: 700; margin-bottom: 12px; letter-spacing: .01em; }
.quickbar__row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.quickchip {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #dbe3ec;
  padding: 10px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  transition: all var(--transition);
}
.quickchip .icon { color: var(--primary); }
.quickchip:hover { background: rgba(225,106,38,.16); border-color: var(--primary); color: var(--white); }

/* --- SECTION HEADERS ----------------------------------------------------- */
.section-header { max-width: 640px; margin-bottom: 34px; }
.eyebrow {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; color: var(--primary-dark); margin-bottom: 10px;
}
.section-header h2 {
  font-size: clamp(27px, 6vw, 40px);
  font-weight: 900; line-height: 1.12; letter-spacing: -.02em;
  color: var(--secondary-dark); margin-bottom: 12px;
}
.section--dark .eyebrow { color: var(--primary-light); }
.section--dark .section-header h2 { color: var(--white); }
.section-subtitle { font-size: 16.5px; color: var(--text-light); }
.section--dark .section-subtitle { color: #aebbc9; }

/* --- SERVICES ------------------------------------------------------------ */
.services-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.service-card {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
  padding: 26px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.service-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 12px;
  background: rgba(225,106,38,.12); color: var(--primary);
  margin-bottom: 16px;
}
.service-icon .icon { width: 26px; height: 26px; }
.service-card h3 { font-size: 19px; font-weight: 800; color: var(--secondary-dark); margin-bottom: 8px; }
.service-card p { color: var(--text-light); font-size: 15.5px; }

/* =============================================================================
   INSTANT-ANSWER TOOLS
   ============================================================================= */
.tool-tabs {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow: hidden;
}
.tool-tabs__list { display: flex; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,.10); }
.tool-tab {
  flex: 1 0 auto; white-space: nowrap;
  padding: 15px 20px;
  font-size: 14.5px; font-weight: 700;
  color: var(--mid-gray);
  border-bottom: 3px solid transparent;
  transition: all var(--transition);
}
.tool-tab:hover { color: var(--white); background: rgba(255,255,255,.04); }
.tool-tab[aria-selected="true"] { color: var(--white); border-bottom-color: var(--primary); background: rgba(225,106,38,.12); }
.tool-panel__body { padding: 24px 20px 28px; }
.tool-noscript { color: #d7dee7; }

.tool-step { display: flex; flex-direction: column; gap: 16px; }
.tool-q { font-size: 19px; font-weight: 800; color: var(--white); line-height: 1.3; }
.tool-hint { font-size: 14px; color: var(--mid-gray); margin-top: -8px; }

.tool-options { display: grid; grid-template-columns: 1fr; gap: 10px; }
.tool-option {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 14px 16px;
  color: #e2e8ef; font-size: 15.5px; font-weight: 600;
  transition: all var(--transition);
}
.tool-option:hover { background: rgba(225,106,38,.16); border-color: var(--primary); color: var(--white); transform: translateX(3px); }
.tool-option .icon { color: var(--primary); width: 20px; height: 20px; }
.tool-option.is-selected { background: rgba(225,106,38,.22); border-color: var(--primary); color: var(--white); }
.tool-option__sub { display: block; font-size: 13px; font-weight: 500; color: var(--mid-gray); margin-top: 2px; }

.tool-field { display: flex; flex-direction: column; gap: 7px; }
.tool-field label { font-size: 13px; font-weight: 700; color: #c3cddb; text-transform: uppercase; letter-spacing: .06em; }
.tool-field input, .tool-field select {
  background: rgba(255,255,255,.07);
  border: 2px solid rgba(255,255,255,.16);
  border-radius: 9px;
  padding: 12px 14px;
  color: var(--white); font-size: 16px; font-family: inherit;
  transition: border-color var(--transition);
}
.tool-field input::placeholder { color: #7d8b9b; }
.tool-field input:focus, .tool-field select:focus { outline: none; border-color: var(--primary); background: rgba(255,255,255,.1); }
.tool-field select option { background: var(--secondary-dark); color: var(--white); }

.tool-slider-row { display: flex; align-items: center; gap: 14px; }
.tool-slider-row input[type="range"] { flex: 1; accent-color: var(--primary); }
.tool-slider-value { font-size: 20px; font-weight: 800; color: var(--primary); min-width: 4.5em; text-align: right; }

.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.tool-back {
  font-size: 14px; font-weight: 700; color: var(--mid-gray);
  padding: 10px 4px;
}
.tool-back:hover { color: var(--white); }

.tool-result {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-left: 4px solid var(--primary);
  border-radius: 10px;
  padding: 20px;
}
.tool-result--spaced { margin-top: 18px; }
.tool-result h4 { font-size: 20px; font-weight: 800; color: var(--white); margin-bottom: 8px; }
.tool-result p { color: #c3cddb; font-size: 15.5px; margin-bottom: 12px; }
.tool-result p:last-child { margin-bottom: 0; }
.tool-result ul { display: flex; flex-direction: column; gap: 9px; margin: 12px 0; }
.tool-result li { display: flex; gap: 10px; align-items: flex-start; color: #d3dbe4; font-size: 15px; }
.tool-result li .icon { color: var(--primary); margin-top: 4px; }

.tool-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(225,106,38,.18); border: 1px solid rgba(225,106,38,.5);
  color: #ffcfae; border-radius: 999px;
  padding: 5px 13px; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 12px;
}
.tool-badge--calm { background: rgba(255,176,32,.16); border-color: rgba(255,176,32,.5); color: #ffdb9b; }
.tool-badge--ok { background: rgba(64,180,120,.16); border-color: rgba(64,180,120,.5); color: #a6e7c4; }

.tool-note {
  font-size: 13.5px; color: var(--mid-gray);
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 12px; margin-top: 14px;
}
.tool-breakdown { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.tool-breakdown__row {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 14.5px; color: #c3cddb;
  padding: 7px 0; border-bottom: 1px dashed rgba(255,255,255,.1);
}
.tool-breakdown__row:last-child { border-bottom: none; }
.tool-breakdown__row b { color: var(--white); }

.tool-progress { display: flex; gap: 6px; margin-bottom: 4px; }
.tool-progress span { height: 4px; flex: 1; border-radius: 2px; background: rgba(255,255,255,.14); }
.tool-progress span.is-done { background: var(--primary); }

/* --- WHY US -------------------------------------------------------------- */
.why-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.why-item { display: flex; flex-direction: column; gap: 8px; }
.why-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(225,106,38,.12); color: var(--primary); margin-bottom: 4px;
}
.why-icon .icon { width: 24px; height: 24px; }
.why-item h3 { font-size: 18px; font-weight: 800; color: var(--secondary-dark); }
.why-item p { color: var(--text-light); font-size: 15.5px; }
.why-proof {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--light-gray);
  font-size: 15px; color: var(--text-light);
}

/* --- SERVICE AREA -------------------------------------------------------- */
.area-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.area-list-wrap h3 { font-size: 20px; font-weight: 800; color: var(--secondary-dark); margin-bottom: 16px; }
.area-list { display: flex; flex-direction: column; gap: 11px; }
.area-list li { display: flex; align-items: center; gap: 11px; font-size: 16px; font-weight: 600; }
.area-list li .icon { color: var(--primary); }
.area-list__empty { color: var(--text-light); font-weight: 500; }
.area-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 20px; padding: 14px 16px;
  background: var(--white); border: 1px solid var(--light-gray); border-radius: 10px;
  font-size: 14px; color: var(--text-light);
}
.area-note .icon { color: var(--amber); margin-top: 3px; }
.map-placeholder {
  background: var(--light-gray);
  border: 2px dashed var(--mid-gray);
  border-radius: var(--radius);
  min-height: 260px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--dark-gray); text-align: center; padding: 24px;
}
.map-placeholder p { font-size: 17px; font-weight: 700; }

/* --- CONTACT ------------------------------------------------------------- */
/* `minmax(0, 1fr)`, not `1fr`. A bare `1fr` is `minmax(auto, 1fr)`, so the
   track refuses to shrink below its content's min-content width and the grid
   pushes past its container instead — which is what these cards were doing at
   320px, 14px past the viewport. The same reasoning puts `min-width: 0` on the
   card's text column: a flex item defaults to `min-width: auto` and will not
   shrink below its longest unbreakable run either. Between them, a long word
   now wraps or ellipses instead of widening the page. */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.contact-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.contact-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--light-gray);
  border-radius: 10px; padding: 18px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.contact-card > span { min-width: 0; }
.contact-card--primary { border-color: var(--primary); background: rgba(225,106,38,.05); }
.contact-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 10px;
  background: rgba(225,106,38,.12); color: var(--primary); flex: none;
}
.contact-card__label {
  display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-light); margin-bottom: 3px;
}
.contact-card__value { display: block; font-size: 16px; font-weight: 700; color: var(--secondary-dark); font-style: normal; }
/* the "further out when needed" half of the service-area line — supporting
   copy, so it steps down out of the value's weight rather than competing.
   `block`, not `inline-block`: an inline-block is an atomic inline, so its
   min-content contribution is the WHOLE phrase on one line and it would drag
   the card wider than a 320px phone. */
.contact-card__sub { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 500; color: var(--text-light); }

.contact-form {
  background: var(--white); border: 1px solid var(--light-gray);
  border-radius: var(--radius); padding: 24px 20px;
  box-shadow: var(--shadow-md);
}
.contact-form h3 { font-size: 21px; font-weight: 800; color: var(--secondary-dark); margin-bottom: 4px; }
.form-intro { font-size: 14px; color: var(--text-light); margin-bottom: 20px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13.5px; font-weight: 700; color: var(--dark-gray); margin-bottom: 6px; }
.req { color: var(--primary-dark); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px;
  border: 2px solid var(--light-gray); border-radius: 9px;
  font-size: 16px; font-family: inherit; color: var(--text);
  background: var(--off-white);
  transition: border-color var(--transition), background var(--transition);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--primary); background: var(--white);
}
.form-group input[aria-invalid="true"], .form-group select[aria-invalid="true"] { border-color: var(--primary-dark); background: #fff5f5; }
.field-error { display: block; font-size: 13px; color: var(--primary-dark); font-weight: 600; margin-top: 5px; }

.form-status { margin-top: 14px; font-size: 14.5px; font-weight: 600; }
.form-status:empty { margin-top: 0; }
.form-status.is-ok { color: #17693f; background: #e6f7ee; border: 1px solid #b6e6cd; border-radius: 8px; padding: 11px 14px; }
.form-status.is-err { color: #8f1620; background: #fdeaec; border: 1px solid #f5c2c7; border-radius: 8px; padding: 11px 14px; }

.form-disclaimer {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--light-gray);
  font-size: 13.5px; color: var(--text-light);
}
.form-disclaimer .icon { color: var(--primary); margin-top: 3px; flex: none; }
.inline-call { color: var(--primary-dark); font-weight: 700; }

/* --- FOOTER -------------------------------------------------------------- */
.footer { background: var(--secondary-dark); color: var(--mid-gray); padding-top: 44px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 30px; padding-bottom: 34px; }
.footer-logo { margin-bottom: 12px; }
.footer-tagline { font-size: 15px; line-height: 1.7; margin-bottom: 16px; max-width: 34em; }
.footer-nav h4 {
  color: var(--white); font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px;
}
.footer-nav ul { display: flex; flex-direction: column; gap: 10px; }
.footer-nav li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; }
.footer-nav li .icon { color: var(--primary); flex: none; }
.footer-nav a:hover { color: var(--primary-light); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 0 24px;
  font-size: 13px; color: var(--mid-gray);
}
.footer-bottom p { margin-bottom: 6px; }
.footer-note { color: var(--mid-gray); font-size: 12px; line-height: 1.5; max-width: 62em; opacity: .85; }
.footer-credit { color: var(--mid-gray); }
.footer-credit a { color: #c3cddb; text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { color: var(--primary-light); }

/* =============================================================================
   STICKY CALL BAR — the single most important element on a phone.

   `left/right: 0` resolves against the viewport, so the bar is only ever as
   wide as the screen — PROVIDED nothing else has made the document wider than
   the screen. When the mobile nav drawer was parking itself off-canvas, this
   bar was the visible symptom: the page could be dragged sideways and the bar
   ran off the edge of it. That bug is fixed at its source, and `max-width:
   100vw` is the seatbelt — 100vw is the screen, not the document, so the bar
   cannot outgrow the glass even if something downstream overflows again.
   ============================================================================= */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  max-width: 100vw;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: calc(var(--callbar-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 12px env(safe-area-inset-bottom, 0px);
  background: var(--primary);
  color: var(--secondary-dark);
  font-weight: 800;
  box-shadow: 0 -6px 22px rgba(0,0,0,.28);
  border-top: 1px solid rgba(255,255,255,.18);
}
.callbar:hover { background: var(--primary-hover); }
.callbar .icon { width: 21px; height: 21px; }
.callbar__text {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.15; min-width: 0;
}
.callbar__label { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .9; }
.callbar__num { font-size: 17px; font-weight: 800; white-space: nowrap; }
/* Availability pill. Removed from the markup while `hours` is unconfirmed —
   restore the span in index.html once the owner confirms them. */
.callbar__sub {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; flex: none;
  background: rgba(0,0,0,.16); border-radius: 999px; padding: 3px 9px;
}
/* the marked-placeholder chip needs to stay legible on the red bar */
.callbar .unconfirmed { color: #2a2f38; background: rgba(255,255,255,.62); border-bottom-color: rgba(0,0,0,.5); }

.nowrap { white-space: nowrap; }

/* --- BACK TO TOP --------------------------------------------------------- */
.back-to-top {
  position: fixed; right: 16px;
  bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 1150;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--secondary-dark); color: var(--white);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all var(--transition);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--primary); color: var(--secondary-dark); border-color: var(--primary); }


/* =============================================================================
   PROOF GALLERY — the owner's own photographs of his own jobs.
   Sources are 680x510, so tiles are sized to stay at or below native width and
   never upscale. That is the whole reason this is a grid of framed tiles rather
   than full-bleed banners.
   ============================================================================= */
.work-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.work-item {
  /* flex column so the caption always gets the height it needs — an equal-row
     grid plus overflow:hidden will happily clip the last line otherwise */
  display: flex; flex-direction: column;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.work-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.work-item--wide { border-color: var(--primary); }
.work-item--wide figcaption strong { color: var(--primary-dark); }
.work-item img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover; object-position: center;
  background: var(--light-gray);
  flex: none;
}
.work-item figcaption {
  flex: 1;
  padding: 14px 16px 16px;
  font-size: 14.5px; color: var(--text-light); line-height: 1.55;
}
.work-item figcaption strong { color: var(--secondary-dark); display: block; margin-bottom: 3px; }

/* --- 404 ----------------------------------------------------------------- */
.notfound {
  min-height: 76vh;
  display: flex; align-items: center;
  background: radial-gradient(120% 100% at 50% 0%, #14243a 0%, var(--secondary-dark) 45%, var(--night) 100%);
  color: var(--white);
  padding: 60px 0;
}
.notfound__code {
  color: var(--primary-light); font-size: 13px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px;
}
.notfound h1 { font-size: clamp(32px, 8vw, 58px); font-weight: 900; line-height: 1.05; margin-bottom: 14px; letter-spacing: -.025em; }
.notfound__body { color: #c3cddb; font-size: 17px; max-width: 34em; margin-bottom: 26px; }

/* --- SCROLL REVEAL ------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* =============================================================================
   BREAKPOINTS — mobile-first
   ============================================================================= */
@media (min-width: 600px) {
  :root { --section-pad: 76px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-info { grid-template-columns: repeat(2, 1fr); }
  .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .btn-block-mobile { width: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .tool-options { grid-template-columns: repeat(2, 1fr); }
  .tool-panel__body { padding: 30px 28px 34px; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  :root { --section-pad: 96px; --header-h: 72px; --callbar-h: 0px; }

  body { padding-bottom: 0; }
  .callbar { display: none; }
  .back-to-top { right: 28px; bottom: 28px; }

  .nav { display: block; }
  .hamburger { display: none; }
  .header-call { display: inline-flex; }

  .hero { padding: 84px 0 72px; }
  .hero-grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 48px; }
  .hero-stats { gap: 34px; }
  .stat-number { font-size: 32px; }
  .stat-number--sm { font-size: 19px; }

  .work-grid { grid-template-columns: repeat(3, 1fr); }

  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(4, 1fr); }
  .area-grid { grid-template-columns: 1.05fr .95fr; align-items: center; }
  .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .contact-info { grid-template-columns: 1fr; }
  .contact-form { padding: 34px 30px; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 40px; }
  .section-header { margin-bottom: 46px; }
  .quickbar__row { flex-wrap: wrap; overflow: visible; }
}

/* --- MOBILE NAV DRAWER (below 900px only) --------------------------------
   The closed drawer is hidden IN PLACE, never parked off-canvas.

   It used to close with `transform: translateX(101%)`, which pushed a
   `position: fixed` element one whole viewport-width to the right. A fixed
   element is laid out against the viewport, not the body, so `body {
   overflow-x: hidden }` never contained it: it added its own width to the
   document's scrollable area and gave every phone ~380px of blank space to
   drag into. It was also still focusable out there — a keyboard user tabbing
   past the hamburger landed in an invisible menu.

   `visibility` carries both jobs: it takes the links out of the tab order and
   out of the accessibility tree while closed, and it is animatable (delayed on
   the way out so the fade still plays, immediate on the way in).
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .nav {
    display: block;
    position: fixed; top: var(--header-h); left: 0; right: 0;
    background: rgba(13, 16, 19, .985);
    backdrop-filter: blur(14px);
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: transform var(--transition), opacity var(--transition),
                visibility 0s linear var(--transition);
    border-bottom: 1px solid rgba(255,255,255,.1);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: transform var(--transition), opacity var(--transition),
                visibility 0s;
  }
  .nav-list { flex-direction: column; gap: 4px; }
  .nav-link { display: block; padding: 13px 4px; font-size: 17px; }
  .nav-link::after { display: none; }
}

/* --- REDUCED MOTION ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --- PRINT --------------------------------------------------------------- */
@media print {
  .header, .callbar, .back-to-top, .quickbar, .help-now, .staging-banner { display: none !important; }
  body { padding-bottom: 0; color: #000; }
  .hero { background: none; color: #000; }
}

/* =============================================================================
   CALL PANEL — replaced the contact form.

   The owner has no email address he checks, so a "request a call back" form had
   nowhere to deliver. A form that cannot send is worse than no form: it looks
   like a working channel. This panel does the job the form was pretending to —
   it tells you exactly what to have ready so the call itself is short.
   ============================================================================= */
.callpanel {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-top: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 26px 22px 24px;
  box-shadow: var(--shadow-md);
}
.callpanel h3 { font-size: 21px; font-weight: 800; color: var(--secondary-dark); margin-bottom: 8px; }
.callpanel__intro { font-size: 15.5px; color: var(--text-light); margin-bottom: 20px; }
.callpanel__sub {
  font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-light); margin: 24px 0 14px;
}
.callpanel__list { display: flex; flex-direction: column; gap: 14px; }
.callpanel__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--text-light); line-height: 1.55; }
.callpanel__list .icon { color: var(--primary-dark); margin-top: 4px; width: 18px; height: 18px; }
.callpanel__list strong { color: var(--secondary-dark); }
.callpanel__note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--light-gray);
  font-size: 14px; color: var(--text-light);
}
.callpanel__note .icon { color: var(--primary-dark); margin-top: 3px; flex: none; }
.callpanel__note strong { color: var(--secondary-dark); }

@media (min-width: 900px) {
  .callpanel { padding: 32px 30px 30px; }
}

/* Coverage panel — replaced the "map embeds later" placeholder once the service
   area was confirmed. Deliberately not a Google Maps iframe: that is a
   third-party request in the critical path of an emergency page and it would
   force `default-src 'self'` open in the CSP. A real embed can be added later
   if the owner wants one; see docs/FACT-CHECKLIST.md. */
.area-panel {
  background: var(--secondary-dark);
  color: var(--white);
  border-radius: var(--radius);
  padding: 26px 24px;
  border-left: 4px solid var(--primary);
}
.area-panel__eyebrow {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--primary-light); margin-bottom: 10px;
}
.area-panel__addr { font-size: 19px; font-weight: 700; line-height: 1.45; margin-bottom: 18px; }
/* the reach line under "Baker City, OR" — #c3cbd4 on --secondary-dark is
   9.9:1, the same value the panel's other supporting copy already uses */
.area-panel__reach { display: block; margin-top: 6px; font-size: 14.5px; font-weight: 500; color: #c3cbd4; line-height: 1.5; }
.area-panel__line {
  display: flex; gap: 10px; align-items: center;
  font-size: 15px; color: #c3cbd4; padding: 7px 0;
}
.area-panel__line .icon { color: var(--primary); flex: none; }
.area-panel__foot {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 14px; color: var(--mid-gray);
}
.area-panel__foot a { color: var(--primary-light); text-decoration: underline; text-underline-offset: 2px; }