/* ===========================================================================
   Dr. P's HVAC — Design System
   DNA Hash: 0264c84301b7
   Typography: tall-narrow-condensed (Oswald + Open Sans)
   Components: medical-clean | Texture: glassmorphic | Color: complementary-clash
   Hero: duotone-dramatic | Button: oversized-statement
   Do not hand-edit values that mirror design-dna.yml — regenerate via the engine.
   =========================================================================== */

:root {
  /* Typography */
  --font-heading: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --font-mono: 'B612 Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --scale-ratio: 1.333;
  --heading-weight: 800;
  --heading-case: uppercase;
  --heading-ls: 0em;
  --heading-lh: 1.0;
  --body-lh: 1.65;
  --body-ls: 0.005em;
  --max-line: 68ch;

  /* Fluid type scale (base 16, ratio 1.333) */
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.83rem);
  --step-0:  1rem;
  --step-1:  clamp(1.15rem, 1.05rem + 0.5vw, 1.33rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.8vw, 1.78rem);
  --step-3:  clamp(1.85rem, 1.6rem + 1.3vw, 2.37rem);
  --step-4:  clamp(2.3rem, 1.9rem + 2.2vw, 3.16rem);
  --step-5:  clamp(2.9rem, 2.2rem + 3.6vw, 4.2rem);
  --display: clamp(2.5rem, 1.5rem + 5.2vw, 5.6rem);

  /* Real Dr. P's brand, pulled from drpshvac.com (Elementor kit + live site):
     red #CC132D, navy #0A2980 / #141B38, cyan #2CADDD / #0096CC, gold #FDC520.
     The frost <-> heat seasonal duality maps onto brand blue vs brand gold/flame. */
  /* Ground is now the bright logo sky-blue (client wants bright, not dark navy).
     These vars keep their names for compatibility but hold blue values now. */
  --navy:        #1596dd;   /* dominant bright logo blue (the banner blue) */
  --navy-deep:   #0d6aa3;   /* deeper sky, for text-bearing bands: header, trust, footer */
  --navy-soft:   #3aa6e6;   /* lighter sky highlight */
  --ink-navy:    #0a2b47;   /* a genuinely dark blue, kept for the one 'critical' emergency card */
  --frost:       #4aa8dc;   /* light sky-blue sampled from the Dr. P's logo (was the darker #0096cc) */
  --frost-bright:#7cc7ec;   /* lighter logo highlight, for accents on dark backgrounds */
  --frost-deep:  #2a7cae;   /* deeper logo blue for button fills, so white text stays readable */
  --frost-pale:  #cfe8f6;
  --frost-ice:   #eaf5fc;
  --heat:        #f7941d;   /* warm channel, the mascot's flames */
  --heat-deep:   #e0561a;
  --gold:        #fdc520;   /* brand gold: badges, stars */
  --heat-pale:   #fff4d8;
  --red:         #cc132d;   /* brand primary red = 24/7 CTA */
  --red-deep:    #a30f24;
  --paper:       #e4f1fb;   /* light sky wash for content sections (was near-white) */
  --white:       #ffffff;
  --ink:         #1c2333;   /* near-navy ink */
  --ink-soft:    #434960;   /* brand slate text */
  --line:        rgba(10, 41, 128, 0.14);
  --line-on-dark:rgba(255, 255, 255, 0.16);

  /* Semantic surface roles (light default) */
  --bg-base: var(--paper);
  --bg-panel: var(--white);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --accent: var(--red);

  /* Components — medical-clean + glassmorphic */
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(0, 40, 80, 0.07);
  --shadow-md: 0 10px 30px rgba(0, 40, 80, 0.10);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);

  /* Motion — animation craft floor */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 640ms;

  /* Spacing — progressive-expansion rhythm */
  --pad-x: clamp(1.15rem, 5vw, 5rem);
  --sec-y: clamp(3.5rem, 7vw, 8rem);
  --gap: clamp(1rem, 2.5vw, 2rem);
  --maxw: 1200px;
  --maxw-wide: 1400px;

  /* Header + fixed control heights */
  --header-h: 84px;
  --z-content: 1;
  --z-frost: 60;
  --z-vignette: 61;
  --z-header: 100;
  --z-callbar: 110;
  --z-offer: 120;
  --z-menu: 130;
}

/* ---- Reset (Tailwind preflight is disabled; we own the reset) -------------
   Wrapped in @layer base so any Tailwind utility class still wins over the
   element-level resets (utilities are unlayered and beat layered rules). */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: var(--body-lh);
    letter-spacing: var(--body-ls);
    color: var(--text);
    background: var(--bg-base);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip; /* clip, not hidden: hidden breaks sticky/scroll */
  }
  img, svg, canvas, video { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; }
  h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: var(--heading-weight);
    text-transform: var(--heading-case);
    letter-spacing: var(--heading-ls);
    line-height: var(--heading-lh);
    margin: 0;
  }
  p { margin: 0; }
  /* UA defaults give these a 40px side margin; with Tailwind preflight off we must zero them. */
  figure, blockquote { margin: 0; }
  :focus-visible { outline: 3px solid var(--frost-bright); outline-offset: 3px; border-radius: 4px; }
}

/* ---- Layout helpers ------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.wrap-wide { max-width: var(--maxw-wide); }
.section { padding-block: var(--sec-y); position: relative; }
.eyebrow {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  font-size: var(--step--1);
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--navy-deep);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: currentColor; display: inline-block;
}
.lead { font-size: var(--step-1); color: var(--text-soft); max-width: var(--max-line); }
.measure { max-width: var(--max-line); }

/* Section titles */
.h-xl { font-size: var(--step-5); }
.h-lg { font-size: var(--step-4); }
.h-md { font-size: var(--step-3); }
.h-sm { font-size: var(--step-2); }

/* Dark section variant */
.on-dark {
  --bg-base: var(--navy);
  --bg-panel: rgba(255,255,255,0.14);
  --text: #ffffff;
  --text-soft: #e4f1fc;
  --line: var(--line-on-dark);
  background: var(--navy);
  color: #ffffff;
}
.on-navy-deep { background: var(--navy-deep); }

/* ---- Site-wide texture ---------------------------------------------------
   A faint film grain over the whole page so no section reads as a flat fill,
   plus airflow contour lines baked into the bright-blue bands. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: 0.06; mix-blend-mode: soft-light;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
@media (prefers-reduced-motion: reduce) { body::after { display: none; } }
/* reusable airflow contour data-URI, reused by the blue bands below */

/* ---- Buttons (oversized-statement archetype) ----------------------------- */
.btn {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-width: 220px;
  padding: 18px 40px;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 3px solid transparent;
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(204,19,45, 0.35);
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
  will-change: transform;
}
.btn i { font-size: 1.1em; }
.btn.big { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.35rem); padding: 22px 46px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 30px rgba(204,19,45, 0.45); }
}
.btn:active { transform: scale(0.97); }
.btn.btn-frost { --btn-bg: var(--frost-deep); box-shadow: 0 6px 18px rgba(74,168,220, 0.35); }
@media (hover: hover) and (pointer: fine) { .btn.btn-frost:hover { box-shadow: 0 12px 30px rgba(74,168,220, 0.5); } }
.btn.btn-ghost {
  background: transparent; color: var(--text); border-color: currentColor;
  box-shadow: none; min-width: 200px;
}
.on-dark .btn.btn-ghost { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .btn.btn-ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,0.06); }
}
/* motion-language: buttons "warm up" (heat) or "cool down" (frost) on hover */
@media (hover: hover) and (pointer: fine) {
  .btn.warm-hover:hover { background: var(--heat-deep); box-shadow: 0 12px 30px rgba(224,86,26,0.45); }
  .btn.cool-hover:hover { background: var(--frost-deep); box-shadow: 0 12px 30px rgba(74,168,220,0.45); }
}
.btn-full { width: 100%; }
.textlink {
  font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; font-size: var(--step--1); color: var(--frost);
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: gap var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .textlink:hover { gap: 0.85rem; border-color: currentColor; }
}

/* ---- Chips / badges ------------------------------------------------------ */
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 600; font-size: var(--step--1);
  padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--bg-panel);
  color: var(--text-soft);
}
.chip.pulse-24 { color: #fff; background: var(--red); border-color: transparent; }
.chip.pulse-24 .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }

/* ---- Glass card (glassmorphic texture) ----------------------------------- */
.glass {
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}
/* Medical-clean white panel (used on light sections) */
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* =========================================================================
   TOP UTILITY BAR — Carrier (larger) + Save Soil mission, above the nav
   ========================================================================= */
.topbar { background: #ffffff; border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; gap: 1.6rem; padding-block: 0.55rem; }
.tb-carrier img { height: 60px; width: auto; display: block; }
.tb-mission { display: flex; align-items: center; gap: 0.6rem; }
.tb-soil { height: 54px; width: auto; }
.tb-mission span { font-size: 0.9rem; color: var(--text-soft); }
.tb-mission b { color: #2e8b3d; }
.tb-meta { margin-left: auto; font-size: 0.82rem; color: var(--ink-soft); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.06em; }
.tb-meta i { color: var(--frost-deep); }
@media (max-width: 820px) { .tb-meta { display: none; } .topbar .wrap { justify-content: center; gap: 1rem; } }
@media (max-width: 460px) { .tb-mission span { display: none; } .tb-carrier img { height: 48px; } .tb-soil { height: 44px; } }

/* =========================================================================
   HEADER + NAVIGATION (sticky, live thermostat, persistent call)
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(13,106,163,0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-on-dark);
  color: #fff;
}
.site-header .wrap { display: flex; align-items: center; gap: 1rem; width: 100%; max-width: var(--maxw-wide); }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; margin-right: auto; }
.brand .logo { width: 72px; height: 72px; flex: none; object-fit: contain; }
.brand .brand-name {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 1.2rem; line-height: 1.05; color: #fff;
  white-space: nowrap; /* keep DR. P'S HVAC on one line */
}
.brand .brand-name b { color: #ffffff; }
.brand .brand-sub { display:block; white-space: nowrap; font-family: var(--font-body); text-transform: none; letter-spacing: 0.02em; font-size: 0.62rem; color: var(--frost-pale); font-weight: 600; }
.brand-wordmark { height: 30px; width: auto; display: block; margin-bottom: 3px; }
.site-footer .brand-wordmark { height: 34px; }
@media (max-width: 900px) { .brand-wordmark { height: 26px; } }
@media (max-width: 560px) { .brand-wordmark { height: 22px; } }
@media (max-width: 900px) { .brand .logo { width: 58px; height: 58px; } .brand .brand-name { font-size: 1.1rem; } }
@media (max-width: 560px) { .brand .logo { width: 50px; height: 50px; } }
.primary-nav { display: flex; align-items: center; gap: 1.6rem; }
.primary-nav a {
  font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 500; font-size: 0.95rem; color: #f2f9ff; position: relative; padding: 4px 0;
  transition: color var(--t-fast) var(--ease-out);
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: var(--frost-bright); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .primary-nav a:hover { color: #fff; } .primary-nav a:hover::after { transform: scaleX(1); } }
.primary-nav a[aria-current="page"] { color: #fff; }
.primary-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* header thermostat pill */
.thermo-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.04em;
  background: rgba(255,255,255,0.08); border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-pill); padding: 6px 12px; color: #fff; font-size: 0.9rem;
}
.thermo-pill .thermo-ico { color: #d7ecfb; transition: color .2s linear; }
.thermo-pill.is-heat .thermo-ico { color: #ff8a3d; }
.thermo-pill.is-cold .thermo-ico { color: #2caddd; }
.thermo-pill .thermo-val { font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right; }

.header-schedule {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #ffffff; color: var(--navy-deep); border-radius: var(--radius);
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 10px 18px; font-size: 1.0rem; box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.header-schedule { white-space: nowrap; }
@media (max-width: 1280px) { .header-schedule .sched-word { display: none; } }
.header-schedule .fa-calendar-check { color: var(--red); }
/* the temperature pill is decorative; drop it before the header gets crowded */
@media (max-width: 1180px) { .thermo-pill { display: none; } }
.header-schedule .dd-caret { color: var(--frost-deep); font-size: 0.72em; margin-left: 1px; transition: transform var(--t-fast) var(--ease-out); }
.schedule-dd.open .header-schedule .dd-caret { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .header-schedule:hover { transform: translateY(-1px); background: var(--frost-ice); } }
.header-schedule:active { transform: scale(0.97); }

/* Scheduling dropdown panel */
.schedule-dd { position: relative; }
.schedule-panel {
  position: absolute; top: calc(100% + 12px); right: 0; width: min(360px, 92vw);
  background: #fff; color: var(--ink); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(6,66,112,0.30); padding: 1.2rem 1.3rem 1.3rem;
  z-index: var(--z-menu); text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
}
.schedule-dd.open .schedule-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.schedule-panel::before { content:""; position:absolute; top:-8px; right: 26px; width:16px; height:16px; background:#fff; transform: rotate(45deg); box-shadow: -3px -3px 8px rgba(6,66,112,0.06); }
.schedule-panel .sp-head strong { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.15rem; color: var(--ink); display:block; }
.schedule-panel .sp-head span { font-size: 0.85rem; color: var(--text-soft); }
.schedule-panel form { display: grid; gap: 0.6rem; margin-top: 0.9rem; }
.schedule-panel input, .schedule-panel select {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  padding: 11px 13px; border-radius: var(--radius); border: 1.5px solid rgba(0,80,160,0.25);
}
.schedule-panel input:focus, .schedule-panel select:focus { outline: none; border-color: var(--frost); box-shadow: 0 0 0 3px rgba(0,150,204,0.16); }
.schedule-panel .btn { min-width: 0; padding: 14px 18px; font-size: 1rem; }
.schedule-panel .sp-call { font-size: 0.85rem; color: var(--text-soft); text-align: center; margin-top: 0.5rem; }
.schedule-panel .sp-call a { color: var(--red); font-weight: 700; }
@media (max-width: 760px) { .schedule-dd { display: none; } } /* mobile uses the menu + sticky bar; red call button always stays */

.header-call {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--red); color: #fff; border-radius: var(--radius);
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 10px 18px; font-size: 1.02rem; box-shadow: 0 4px 14px rgba(204,19,45,0.4);
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .header-call:hover { transform: translateY(-1px); background: var(--red-deep); } }
.header-call:active { transform: scale(0.97); }
.header-call { white-space: nowrap; }
.header-call .lbl-sm { font-size: 0.74rem; letter-spacing: 0.08em; display:block; color: #ffe9e6; font-weight:700; text-transform: uppercase; line-height:1.05; white-space: nowrap; margin-bottom: 1px; }
.header-call .num { line-height: 1.05; white-space: nowrap; }

.nav-toggle {
  display: none; background: transparent; border: 1px solid var(--line-on-dark);
  color: #fff; width: 44px; height: 44px; border-radius: 10px; align-items: center; justify-content: center;
  font-size: 1.2rem;
}

/* Mobile nav drawer */
.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: rgba(13,106,163,0.97); backdrop-filter: blur(6px);
  display: flex; flex-direction: column; padding: calc(var(--header-h) + 1rem) var(--pad-x) 2rem;
  transform: translateY(-100%); transition: transform var(--t-med) var(--ease-drawer);
  visibility: hidden;
}
.mobile-menu.open { transform: translateY(0); visibility: visible; }
.mobile-menu a {
  font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.05em;
  color: #fff; font-size: 2rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line-on-dark);
}
.mobile-menu .menu-close { align-self: flex-end; position: absolute; top: 12px; right: var(--pad-x); background: transparent; border: none; color: #fff; font-size: 1.8rem; }

@media (max-width: 900px) {
  .primary-nav, .header-call .lbl-sm { display: none; }
  .nav-toggle { display: inline-flex; }
  .thermo-pill { display: none; }
}
@media (max-width: 560px) {
  .header-call { padding: 9px 12px; font-size: 0.9rem; }
  .brand .brand-sub { display: none; }
}

/* =========================================================================
   THE COMFORT DIAL — real frost & flame overlays, driven by the dial value.
   Every layer is fixed + pointer-events:none, so it never blocks content.
   ========================================================================= */
#temp-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; --heat: 0; --cold: 0; --cold-r: 70%; }
#temp-fx > * { position: absolute; inset: 0; }

/* Cold side: a light-blue wash + two real frost photos, revealed edge-inward. */
/* screen-blend a pale ice-blue so the dark hero lifts to a light frosty blue */
#cold-wash {
  mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(190,226,250,0.96), rgba(150,205,242,0.82));
  opacity: var(--cold); transition: opacity .2s linear;
}
.frost-layer {
  background-position: center; background-size: cover; mix-blend-mode: screen;
  opacity: calc(var(--cold) * 1.0); transition: opacity .18s linear;
  -webkit-mask: radial-gradient(120% 115% at 50% 45%, transparent var(--cold-r), #000 calc(var(--cold-r) + 26%));
          mask: radial-gradient(120% 115% at 50% 45%, transparent var(--cold-r), #000 calc(var(--cold-r) + 26%));
}
#frost-a { background-image: url(frost.jpg); }
#frost-b { background-image: url(frost2.jpg); background-size: 135% auto; opacity: calc(var(--cold) * 0.65);
  animation: frostDrift 20s ease-in-out infinite alternate; }
@keyframes frostDrift { from { transform: scale(1.03); } to { transform: scale(1.1) translateY(-1.4%); } }

/* Heat side: a red glow down from the top + real flames rising from the bottom.
   One flame layer only, with a long soft top fade so it dissolves into the page
   with no hard seam (the old flipped top layer caused the odd ceiling band). */
#heat-wash {
  background: linear-gradient(180deg, rgba(204,19,45,0.5), rgba(247,148,29,0.22) 40%, transparent 68%);
  opacity: var(--heat); transition: opacity .2s linear;
}
.flame-layer { mix-blend-mode: screen; background-repeat: no-repeat; transition: opacity .2s linear; }
#flame-top { display: none; } /* retired: flipped fire read as a ceiling band */
#flame-bottom {
  top: 0; background-image: url(flame.jpg); background-position: center bottom; background-size: cover;
  opacity: calc(var(--heat) * 1.0);
  transform: translateY(calc((1 - var(--heat)) * 20%));
  -webkit-mask: linear-gradient(180deg, transparent 0%, transparent 10%, #000 48%, #000 100%);
          mask: linear-gradient(180deg, transparent 0%, transparent 10%, #000 48%, #000 100%);
  animation: flameFlick 1.3s ease-in-out infinite;
}
@keyframes flameFlick { 0%,100% { filter: brightness(0.95) saturate(1.08); } 50% { filter: brightness(1.16) saturate(1.22); } }

/* Pause the overlay animations while the dial sits at comfort (nothing showing). */
#frost-b, .flame-layer { animation-play-state: paused; }
#temp-fx.active #frost-b, #temp-fx.active .flame-layer { animation-play-state: running; }

/* =========================================================================
   HERO (duotone-dramatic, adapted to vector/canvas — no stock photos)
   ========================================================================= */
.hero {
  position: relative; min-height: min(94vh, 900px);
  display: grid; align-items: center;
  background:
    radial-gradient(55% 48% at 80% 26%, rgba(255,255,255,0.16), transparent 60%),
    radial-gradient(55% 50% at 12% 88%, rgba(6,66,112,0.30), transparent 62%),
    radial-gradient(120% 110% at 50% 10%, #58bbf0, transparent 60%),
    linear-gradient(180deg, #24a4e4 0%, #1596dd 45%, #0d7cbf 100%);
  background-color: var(--navy);
  color: #fff; overflow: hidden;
}
.hero .hero-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero .hero-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* living-sky hero video, brand-tinted so the headline stays readable */
.hero .hero-scene .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .hero-scene .hero-video-tint { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,150,221,0.48) 0%, rgba(19,146,219,0.62) 45%, rgba(13,124,191,0.82) 100%); }
@media (prefers-reduced-motion: reduce) { .hero .hero-scene .hero-video { display: none; } }
/* drifting clouds (fallback / no-video) — a living sky behind the hero content */
.hero-scene .clouds .cloud { animation: cloudDrift linear infinite; will-change: transform; }
.hero-scene .c1 { animation-duration: 72s;  animation-delay: -12s; opacity: .18; }
.hero-scene .c2 { animation-duration: 100s; animation-delay: -50s; opacity: .13; }
.hero-scene .c3 { animation-duration: 58s;  animation-delay: -30s; opacity: .15; }
.hero-scene .c4 { animation-duration: 120s; animation-delay: -80s; opacity: .11; }
@keyframes cloudDrift { from { transform: translateX(-380px); } to { transform: translateX(1820px); } }
@media (prefers-reduced-motion: reduce) { .hero-scene .clouds { opacity: 0.5; } .hero-scene .cloud { animation: none !important; } }
.hero .hero-grid {
  position: relative; z-index: 65; /* above the temp-fx overlay (z 60) so the headline + dial stay readable */
  display: grid; grid-template-columns: 1.35fr 0.9fr; gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center; width: 100%; max-width: var(--maxw-wide); margin-inline: auto;
  padding: calc(var(--header-h) + 3vw) var(--pad-x) 7vh;
}
.hero-eyebrow { color: #eaf6ff; }
.hero h1 {
  font-size: var(--display); line-height: 1.0; letter-spacing: 0.01em; margin: 0.4em 0 0.35em;
  text-wrap: balance;
}
.hero h1 .cool { color: #ffffff; }
.hero h1 .warm { color: var(--heat); }
.hero h1 .plain { color: #fff; }
.hero .hero-sub { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.35rem); color: #eef7ff; max-width: 44ch; }
.hero .hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; align-items: center; }
.hero .hero-meta { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; }
.hero .hero-meta div { display: flex; flex-direction: column; }
.hero .hero-meta .k { font-family: var(--font-heading); font-size: 2rem; line-height: 1; color: #fff; }
.hero .hero-meta .v { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: #d7ecfb; margin-top: 4px; }

/* Hero thermostat + mascot column */
.hero-aside { position: relative; z-index: 2; display: grid; justify-items: center; gap: 1.5rem; }
.thermostat {
  --dial: 260px;
  position: relative; width: var(--dial); height: var(--dial);
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #12304f, #071528 72%);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
}
.thermostat svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.thermostat .readout { position: relative; z-index: 2; text-align: center; }
.thermostat .temp {
  font-family: var(--font-heading); font-weight: 700; font-size: 4.2rem; line-height: 1;
  color: #dfe9f4; font-variant-numeric: tabular-nums; transition: color .2s linear;
}
.thermostat.is-heat .temp { color: #ff8a3d; }
.thermostat.is-cold .temp { color: #2caddd; }
.thermostat .temp .deg { font-size: 1.6rem; vertical-align: top; }
.thermostat .mode-label { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; color: #e2f0fc; margin-top: 6px; }

/* Interactive dial affordance */
.thermostat[data-dial] { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-out); }
.thermostat[data-dial]:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.1), 0 0 0 4px rgba(90,169,238,0.18); }
.thermostat[data-dial]:focus-visible { box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 4px var(--frost-bright); }
.thermostat[data-dial].grabbing { cursor: grabbing; }
.thermostat .dial-arrows { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.thermostat .da {
  position: absolute; left: 50%; transform: translateX(-50%); pointer-events: auto;
  width: 64px; height: 40px; display: grid; place-items: center;
  background: rgba(255,255,255,0.09); border: 1px solid var(--line-on-dark); border-radius: 12px;
  color: #eef7ff; font-size: 0.95rem;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.thermostat .da.up { top: 8px; } .thermostat .da.dn { bottom: 8px; }
@media (hover: hover) and (pointer: fine) {
  .thermostat .da:hover { background: rgba(255,255,255,0.16); }
  .thermostat .da.up:hover { color: #ff8a3d; } .thermostat .da.dn:hover { color: #2caddd; }
}
.thermostat .da:active { transform: translateX(-50%) scale(0.9); }
.dial-hint {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.2rem;
  font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.72rem; color: #d7ecfb;
}
.dial-hint .pill { border: 1px solid var(--line-on-dark); border-radius: var(--radius-pill); padding: 4px 10px; color: #dfe9f4; }
.dial-hint.seen { opacity: 0.6; }
.dial-nudge { animation: dialNudge 2.4s ease-in-out 1.2s 2; }
@keyframes dialNudge { 0%,100%{transform:none} 15%{transform:translateY(-5px)} 30%{transform:translateY(3px)} 45%{transform:none} }

.hero-mascot { width: clamp(120px, 16vw, 190px); filter: drop-shadow(0 12px 20px rgba(0,0,0,0.35)); }

@media (max-width: 940px) {
  /* Mobile: headline leads at the top, the dial drops below and shrinks, and the
     mascot sits in normal flow so it never overlaps anything. */
  .hero .hero-grid { grid-template-columns: 1fr; padding: 1.75rem var(--pad-x) 5vh; gap: 1.6rem; }
  .hero-aside { order: 0; margin-top: 0.5rem; gap: 1rem; }
  .thermostat { --dial: 172px; }
  .hero-mascot { position: static; width: 122px; margin: 0.3rem auto 0; opacity: 1; }
}
.hero { min-height: 0; }
@media (min-width: 941px) { .hero { min-height: min(94vh, 900px); } }

/* =========================================================================
   TRUST BAR
   ========================================================================= */
.trustbar { background: var(--navy-deep); color: #f2f9ff; border-block: 1px solid var(--line-on-dark); }
.trustbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; padding-block: 1.1rem; }
.trust-item { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; }
.trust-item i { color: #eaf6ff; font-size: 1.05rem; }
.trust-item .stars { color: var(--gold); letter-spacing: 0.05em; }
.trust-sep { width: 1px; height: 22px; background: var(--line-on-dark); }
@media (max-width: 700px) { .trust-sep { display: none; } }

/* =========================================================================
   DIAGNOSIS & TREATMENT CARDS (varied sizes — not a 3-card monte)
   ========================================================================= */
.dx-intro { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: end; margin-bottom: clamp(2rem,4vw,3.5rem); }
@media (max-width: 800px) { .dx-intro { grid-template-columns: 1fr; } }

.dx-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(0.9rem, 1.6vw, 1.5rem); }
.dx-card {
  --dx: var(--frost); --dx-tint: rgba(74,168,220,0.10); --grid-line: rgba(10,41,128,0.05); --card-bg: var(--white);
  grid-column: span 2; position: relative;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 2.9rem clamp(1.4rem, 2.2vw, 2rem) clamp(1.4rem, 2.2vw, 2rem);
  display: flex; flex-direction: column; gap: 0.85rem; overflow: hidden;
  /* clinical chart paper */
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 22px 100%,
    var(--card-bg);
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out);
}
/* EKG heartbeat strip along the top, tinted to the card accent */
.dx-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 34px;
  background: var(--dx); opacity: 0.6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34' viewBox='0 0 120 34'%3E%3Cpath d='M0,17H24L30,17L34,7L40,27L46,4L52,17H82L88,17L92,11L98,23L102,17H120' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / auto 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34' viewBox='0 0 120 34'%3E%3Cpath d='M0,17H24L30,17L34,7L40,27L46,4L52,17H82L88,17L92,11L98,23L102,17H120' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / auto 100%;
}
/* hairline separating the monitor strip from the content */
.dx-card::after { content: ""; position: absolute; top: 34px; left: 0; right: 0; height: 1px; background: var(--line); }
.dx-card.feature { grid-column: span 3; }
.dx-card.wide { grid-column: span 4; }
.dx-card.tall { grid-row: span 2; }
@media (hover: hover) and (pointer: fine) {
  .dx-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--dx) 45%, transparent); }
  .dx-card:hover::before { opacity: 0.95; }
}
.dx-ico {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--dx-tint); color: var(--dx); font-size: 1.45rem; flex: none;
  box-shadow: 0 0 0 5px var(--dx-tint);
}
.dx-tag {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem;
  color: var(--dx); display: inline-flex; align-items: center; gap: 0.5ch; font-weight: 600;
}
.dx-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dx); box-shadow: 0 0 0 3px var(--dx-tint); }
.dx-card h3 { font-size: var(--step-2); color: var(--ink); margin-top: -0.2rem; }
.dx-symptom, .dx-treatment { font-size: 0.95rem; color: var(--text-soft); line-height: 1.55; }
.dx-symptom b, .dx-treatment b {
  display: block; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 2px;
}
.dx-symptom b { color: #c02a3a; }               /* the complaint */
.dx-treatment { border-top: 1px dashed var(--line); padding-top: 0.8rem; margin-top: 0.2rem; display: flex; gap: 0.6rem; align-items: flex-start; color: var(--ink); font-weight: 500; }
.dx-treatment b { color: #0a8f6a; }              /* the Rx */
.dx-treatment i { color: #0a8f6a; margin-top: 2px; font-size: 1.05rem; }
.dx-card .dx-foot { margin-top: auto; padding-top: 0.6rem; }

/* Critical: the emergency card is an inverted navy monitor. */
.dx-card.emergency {
  --dx: #ff6a5a; --dx-tint: rgba(255,90,70,0.16); --grid-line: rgba(255,255,255,0.055); --card-bg: #0d1f38;
  color: #eaf1f8; border-color: rgba(255,90,70,0.4);
}
.dx-card.emergency h3 { color: #fff; }
.dx-card.emergency .dx-symptom { color: #b9c8db; }
.dx-card.emergency .dx-symptom b { color: #ff8a7a; }
.dx-card.emergency .dx-treatment { color: #fff; border-top-color: rgba(255,255,255,0.16); }
.dx-card.emergency .dx-treatment b, .dx-card.emergency .dx-treatment i { color: #6fe3c0; }
.dx-card.emergency .dx-foot .textlink { color: #ff8a7a; }

@media (max-width: 900px) { .dx-grid { grid-template-columns: repeat(2, 1fr); } .dx-card, .dx-card.feature, .dx-card.wide { grid-column: span 2; } .dx-card.tall { grid-row: auto; } }
@media (max-width: 540px) { .dx-grid { grid-template-columns: 1fr; } .dx-card, .dx-card.feature, .dx-card.wide { grid-column: span 1; } }

/* =========================================================================
   COMFORT CURE (viewport-section payoff after defrost)
   ========================================================================= */
.cure {
  min-height: 82vh; display: grid; place-items: center; text-align: center; position: relative;
  background-color: var(--navy);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M-60 120 C 240 80,480 160,720 120 S 1200 80,1500 120' stroke-opacity='0.10'/%3E%3Cpath d='M-60 300 C 240 340,480 260,720 300 S 1200 340,1500 300' stroke-opacity='0.08'/%3E%3Cpath d='M-60 480 C 240 440,480 520,720 480 S 1200 440,1500 480' stroke-opacity='0.09'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(80% 80% at 50% 30%, rgba(255,255,255,0.14), transparent 60%);
  background-repeat: no-repeat; background-size: cover;
  color: #fff; overflow: hidden;
}
.cure .cure-inner { position: relative; z-index: 2; max-width: 900px; padding-inline: var(--pad-x); }
.cure .big72 {
  font-family: var(--font-heading); font-size: clamp(5rem, 18vw, 16rem); line-height: 0.95;
  color: #ffffff; letter-spacing: 0.01em;
  text-shadow: 0 0 60px rgba(74,168,220,0.4);
}
.cure .big72 .deg { font-size: 0.35em; vertical-align: super; color: #fff; }
.cure h2 { font-size: var(--step-4); margin: 0.3em 0; }
.cure p { font-size: var(--step-1); color: #eef7ff; max-width: 40ch; margin-inline: auto; }
.cure .cure-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }
.restore-btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; border-radius: var(--radius-pill); padding: 14px 26px;
  font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
  backdrop-filter: blur(8px); transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .restore-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,0.18); } }
.restore-btn.cured { background: var(--frost-deep); border-color: transparent; }

/* =========================================================================
   FINANCING band — light logo-blue, to fit the cool palette (was cream)
   ========================================================================= */
.finance { background: linear-gradient(180deg, #eef6fc, #dfeef8); }
.finance .fin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,4rem); align-items: center; }
@media (max-width: 820px) { .finance .fin-grid { grid-template-columns: 1fr; } }
.fin-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.9rem; }
.fin-list li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 1.05rem; }
.fin-list i { color: var(--frost); margin-top: 4px; }
.fin-card {
  background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow-md); padding: clamp(1.5rem,3vw,2.4rem);
}
.fin-card .fin-badge { display:inline-flex; align-items:center; gap:0.5rem; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--frost); }
.fin-card .fin-headline { font-family: var(--font-heading); font-size: var(--step-3); color: var(--ink); margin: 0.4rem 0 0.2rem; }
.fin-steps { display: grid; gap: 0.6rem; margin-top: 1.2rem; }
.fin-step { display: flex; gap: 0.8rem; align-items: center; }
.fin-step .n { width: 34px; height: 34px; border-radius: 50%; background: var(--frost-deep); color: #fff; font-family: var(--font-heading); display: grid; place-items: center; font-size: 1.05rem; flex: none; }

/* =========================================================================
   REVIEWS
   ========================================================================= */
.reviews { background: var(--paper); }
.rev-head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: end; justify-content: space-between; margin-bottom: clamp(1.6rem,3vw,2.6rem); }
.google-badge { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; }
.google-badge .g { font-family: var(--font-heading); font-size: 1.4rem; }
.google-badge .g .b{color:#4285F4}.google-badge .g .r{color:#EA4335}.google-badge .g .y{color:#FBBC05}.google-badge .g .g2{color:#34A853}
.google-badge .stars { color: #ffb400; letter-spacing: 0.08em; }
.rev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1rem,2vw,1.6rem); }
.rev-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.5vw, 2rem); position: relative; display: flex; flex-direction: column;
}
.rev-card .quote-mark { font-family: var(--font-heading); font-size: 3rem; line-height: 0.95; height: 0.7em; overflow: visible; color: var(--frost-pale); }
.rev-card p { font-size: 1.02rem; color: var(--ink); margin: 0.4rem 0 1rem; }
.rev-card .rev-stars { color: #ffb400; font-size: 0.9rem; letter-spacing: 0.06em; }
.rev-card .rev-name { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.95rem; color: var(--ink); margin-top: 0.5rem; }
.rev-card .tech-tag { display:inline-block; margin-top: 6px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--frost); font-weight: 700; }
.rev-spotlight {
  margin-top: clamp(1.6rem,3vw,2.4rem); background: var(--navy); color:#fff; border-radius: var(--radius-lg);
  padding: clamp(1.6rem,3vw,2.4rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; justify-content: space-between;
}
.rev-spotlight h3 { font-size: var(--step-2); }
.rev-spotlight .names { color: var(--frost-bright); }
@media (max-width: 640px) { .rev-grid { columns: 1; } }

/* =========================================================================
   FLEET + CARRIER (branded van showcase, Carrier as the featured brand)
   ========================================================================= */
.fleet { background: var(--paper); }
.fleet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,4rem); align-items: center; }
@media (max-width: 860px) { .fleet-grid { grid-template-columns: 1fr; } }
.fleet-media { position: relative; }
.truck-photo { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: 0 22px 44px rgba(6,66,112,0.28); border: 5px solid #fff; }
.photo-frame { margin: 0; background: #fff; padding: 8px 8px 0; border-radius: var(--radius-lg); box-shadow: 0 22px 44px rgba(6,66,112,0.22); }
.photo-frame img { width: 100%; height: auto; border-radius: calc(var(--radius-lg) - 6px); display: block; }
.photo-frame figcaption { font-size: 0.78rem; color: var(--text-soft); text-align: center; padding: 0.65rem; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .truck-photo, .photo-frame { transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
  .truck-photo:hover, .photo-frame:hover { transform: translateY(-5px) scale(1.008); box-shadow: 0 30px 60px rgba(6,66,112,0.32); }
}
.carrier-badge { display: flex; gap: 1.2rem; align-items: center; padding: 1.1rem 1.3rem; margin-top: 1.4rem; background: #fff; }
.carrier-badge img { width: 148px; flex: none; border-radius: 6px; }
.carrier-badge .cb-kicker { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--frost-deep); margin-bottom: 4px; }
.carrier-badge p { color: var(--text-soft); font-size: 0.95rem; }
.carrier-badge b { color: var(--ink); }
@media (max-width: 480px) { .carrier-badge { flex-direction: column; align-items: flex-start; } }
/* Carrier logo chip in the trust bar */
.trust-carrier { height: 30px; width: auto; background: #fff; padding: 4px 8px; border-radius: 6px; }

/* =========================================================================
   SERVICE AREA (two-state county map)
   ========================================================================= */
.area {
  background-color: var(--navy); color: #fff;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M-60 130 C 240 90,480 170,720 130 S 1200 90,1500 130' stroke-opacity='0.09'/%3E%3Cpath d='M-60 320 C 240 360,480 280,720 320 S 1200 360,1500 320' stroke-opacity='0.07'/%3E%3Cpath d='M-60 500 C 240 460,480 540,720 500 S 1200 460,1500 500' stroke-opacity='0.08'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(60% 55% at 15% 20%, rgba(255,255,255,0.10), transparent 60%);
  background-repeat: no-repeat; background-size: cover;
}
.area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
@media (max-width: 860px){ .area-grid { grid-template-columns: 1fr; } }
.county-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem; margin-top: 1.5rem; }
.county-state { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.1em; color: #eaf6ff; font-size: 0.85rem; display:flex; align-items:center; gap:0.5rem; margin-bottom: 0.6rem; }
.county-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.county-list li { display:flex; align-items:center; gap:0.5rem; color:#f2f9ff; }
.county-list i { color: #cfe8f6; font-size: 0.6rem; }
.map-frame { position: relative; }
.map-frame svg { width: 100%; height: auto; }

/* =========================================================================
   REQUEST FORM
   ========================================================================= */
.formsec { background: var(--paper); }
.form-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: start; }
@media (max-width: 860px){ .form-grid { grid-template-columns: 1fr; } }
.emergency-note {
  background: var(--navy); color:#fff; border-radius: var(--radius-lg); padding: 1.5rem; margin-top: 1.4rem;
  display:flex; gap:1rem; align-items:center;
}
.emergency-note i { font-size: 1.6rem; color: var(--red); }
.emergency-note .num { font-family: var(--font-heading); font-size: 1.5rem; color: #fff; }
.rs-form { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: clamp(1.4rem,3vw,2.2rem); }
.field { margin-bottom: 1.1rem; }
.field label { display:block; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; color: var(--text-soft); margin-bottom: 0.4rem; }
.field .req { color: var(--red); }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; color: var(--ink);
  padding: 13px 15px; border-radius: var(--radius); background:#fff;
  border: 1.5px solid rgba(0,80,160,0.25);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--frost); box-shadow: 0 0 0 3px rgba(74,168,220,0.18);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px){ .form-row { grid-template-columns: 1fr; } }
.form-status { margin-top: 1rem; font-weight: 600; display: none; }
.form-status.show { display: block; }
.form-status.ok { color: #17794a; }
.form-status.err { color: var(--red-deep); }

/* =========================================================================
   FAQ (accordion)
   ========================================================================= */
.faq { background: var(--paper); }
.faq-list { max-width: 860px; margin-top: 1.5rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: transparent; border: none; padding: 1.3rem 0;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--font-heading); text-transform: none; font-weight: 600; font-size: var(--step-1); color: var(--ink);
}
.faq-q .ico { color: var(--frost); flex: none; transition: transform var(--t-med) var(--ease-out); }
.faq-item.open .faq-q .ico { transform: rotate(45deg); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height var(--t-med) var(--ease-in-out); }
.faq-a-inner { padding: 0 0 1.3rem; color: var(--text-soft); max-width: 68ch; }
.faq-a-inner b { color: var(--ink); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { background: var(--navy-deep); color: #eef7ff; padding-block: clamp(3rem,5vw,4.5rem) 7rem; border-top: 3px solid var(--frost); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; }
@media (max-width: 860px){ .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .foot-grid { grid-template-columns: 1fr; } }
.foot-h { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; color: #fff; margin-bottom: 1rem; }
.foot-grid a { color: #eef7ff; display: inline-flex; align-items:center; gap:0.5rem; padding: 4px 0; }
@media (hover: hover) and (pointer: fine){ .foot-grid a:hover { color: #fff; } }
.foot-nap { font-style: normal; line-height: 1.9; }
.foot-nap .num { font-family: var(--font-heading); font-size: 1.5rem; color: #eaf6ff; }
.foot-social { display: flex; gap: 0.7rem; margin-top: 1rem; }
.foot-social a { width: 42px; height: 42px; border-radius: 10px; background: rgba(255,255,255,0.08); display:grid; place-items:center; font-size: 1.1rem; }
.foot-bottom { border-top: 1px solid var(--line-on-dark); margin-top: 2.5rem; padding-top: 1.5rem; display:flex; flex-wrap:wrap; gap: 0.6rem 1.5rem; justify-content: space-between; font-size: 0.85rem; color: rgba(255,255,255,0.72); }

/* =========================================================================
   STICKY MOBILE CALL BAR (navigation DNA: sticky-bottom-cta-bar)
   ========================================================================= */
.call-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-callbar);
  display: none; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-on-dark); box-shadow: 0 -6px 20px rgba(0,0,0,0.25);
}
.call-bar a { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 14px; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.call-bar .cb-call { background: var(--red); color: #fff; }
.call-bar .cb-quote { background: var(--navy); color: #fff; }
@media (max-width: 760px) { .call-bar { display: grid; } .site-footer { padding-bottom: 6rem; } }

/* =========================================================================
   OFFER TAB
   ========================================================================= */
.offer-tab {
  position: fixed; right: 0; top: 42%; z-index: var(--z-offer);
  transform: translateY(-50%) translateX(0);
  background: var(--heat-deep); color: #fff; border: none; border-radius: 12px 0 0 12px;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
  padding: 16px 10px; box-shadow: -4px 4px 16px rgba(0,0,0,0.25);
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine){ .offer-tab:hover { background: var(--heat); transform: translateY(-50%) translateX(-3px); } }
@media (max-width: 760px){ .offer-tab { top: auto; bottom: 64px; } }
.offer-modal {
  position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  background: rgba(7,21,40,0.72); backdrop-filter: blur(6px); padding: var(--pad-x);
}
.offer-modal.open { display: flex; }
.offer-panel { background: #fff; color: var(--ink); border-radius: var(--radius-lg); max-width: 460px; width: 100%; padding: clamp(1.6rem,4vw,2.6rem); position: relative; box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.offer-panel h3 { font-size: var(--step-3); }
.offer-panel .offer-close { position: absolute; top: 12px; right: 14px; background: transparent; border: none; font-size: 1.4rem; color: var(--text-soft); }
.offer-panel .offer-price { display: grid; grid-template-columns: 1fr auto; gap: 0.8rem; align-items:center; margin: 1.2rem 0; }
.offer-panel input, .offer-panel textarea { width: 100%; font: inherit; color: var(--ink); padding: 13px 15px; border-radius: var(--radius); border: 1.5px solid rgba(0,80,160,0.25); background: #fff; }
.offer-panel textarea { resize: vertical; min-height: 76px; }
.offer-panel input:focus, .offer-panel textarea:focus { outline: none; border-color: var(--frost); box-shadow: 0 0 0 3px rgba(74,168,220,0.18); }

/* =========================================================================
   Scroll reveal (progressive enhancement — visible by default)
   ========================================================================= */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
/* staggered cascade for grouped items (cards, reviews, people) */
.js [data-reveal-group] > .reveal:nth-child(2) { transition-delay: .07s; }
.js [data-reveal-group] > .reveal:nth-child(3) { transition-delay: .14s; }
.js [data-reveal-group] > .reveal:nth-child(4) { transition-delay: .21s; }
.js [data-reveal-group] > .reveal:nth-child(5) { transition-delay: .28s; }
.pfx { will-change: transform; }

/* Sub-page hero (compact) */
.page-hero {
  position: relative; color:#fff; overflow: hidden; padding: calc(var(--header-h) + 5vh) 0 6vh;
  background:
    radial-gradient(55% 60% at 82% 20%, rgba(255,255,255,0.15), transparent 60%),
    radial-gradient(55% 60% at 10% 95%, rgba(6,66,112,0.28), transparent 62%),
    linear-gradient(180deg, #24a4e4, #1596dd 55%, #0d7cbf);
}
/* faint airflow/contour lines for texture (matches the home hero) */
.page-hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M-60 120 C 240 80,480 160,720 120 S 1200 80,1500 120' stroke-opacity='0.10'/%3E%3Cpath d='M-60 260 C 240 300,480 220,720 260 S 1200 300,1500 260' stroke-opacity='0.07'/%3E%3Cpath d='M-60 400 C 240 360,480 440,720 400 S 1200 360,1500 400' stroke-opacity='0.09'/%3E%3Cpath d='M-60 540 C 240 580,480 500,720 540 S 1200 580,1500 540' stroke-opacity='0.06'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
}
.page-hero::after { content:""; position:absolute; inset:0; background: radial-gradient(120% 100% at 90% 0%, rgba(120,199,236,0.22), transparent 55%); pointer-events:none; }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero .crumbs { font-size: 0.82rem; color:#d7ecfb; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-heading); }
.page-hero .crumbs a { color: var(--frost-bright); }
.page-hero h1 { font-size: var(--step-5); }
.page-hero p { color:#eef7ff; max-width: 56ch; margin-top: 1rem; font-size: var(--step-1); }

/* Split feature rows (about/services) */
.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,4rem); align-items: center; }
.split-row + .split-row { margin-top: clamp(2.5rem,5vw,5rem); }
.split-row.flip .split-media { order: 2; }
@media (max-width: 820px){ .split-row { grid-template-columns: 1fr; } .split-row.flip .split-media { order: 0; } }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 700px){ .stat-row { grid-template-columns: repeat(2,1fr); } }
.stat { text-align: left; }
.stat .k { font-family: var(--font-heading); font-size: var(--step-4); line-height: 1; color: var(--frost); }
.on-dark .stat .k { color: var(--frost-bright); }
.stat .v { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; color: var(--text-soft); margin-top: 6px; }

/* team / people cards */
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 820px){ .people { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px){ .people { grid-template-columns: 1fr; } }
.person { text-align: center; }
.person .avatar { width: 96px; height: 96px; margin: 0 auto 0.8rem; border-radius: 50%; background: var(--frost-ice); display:grid; place-items:center; border: 2px solid var(--frost-pale); }
.person .avatar svg { width: 64px; height: 64px; }
.person h3 { font-size: var(--step-1); color: var(--ink); }
.on-dark .person h3 { color: #fff; }
.person .role { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--frost); }

/* utility */
.center { text-align: center; }
.mt-1{margin-top:0.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2.2rem}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* =========================================================================
   ✦ PUNCH-UP LAYER — "Your home's medical chart"
   Adds real value contrast (deep instrument-navy anchors), a signature live
   Home-Vitals monitor that reacts to the hero dial, and type + component
   polish over the base. Loaded last, so these rules win by source order.
   ========================================================================= */
:root {
  --ink-900: #05141f;   /* deepest console navy, near-black — the drama anchor */
  --ink-800: #08243a;   /* dark instrument panel */
  --ink-700: #0d3050;   /* raised panel on dark */
  --ink-grid: rgba(124,199,236,0.09);
  --vital:      #35e6a6; /* healthy readout green */
  --vital-dim:  rgba(53,230,166,0.16);
  --sig-warm:   #ff8a3d;
  --sig-cool:   #3ec6f5;
  --shadow-card:  0 24px 54px -26px rgba(4,40,72,0.5);
  --shadow-press: 0 4px 14px rgba(6,66,112,0.22);
  --glow-vital:   0 0 20px rgba(53,230,166,0.45);
  --console: radial-gradient(130% 150% at 50% -20%, #103457, #08243a 52%, #05141f 100%);
}

/* ---- Type polish: Big Shoulders is tall + condensed; give caps a hair of
       positive tracking so they read sharp, not cramped ---------------------- */
.h-xl, .h-lg { letter-spacing: 0.006em; }
.h-lg { line-height: 0.98; }
.hero h1 { letter-spacing: 0.005em; line-height: 0.98; font-style: italic; }
h1, h2, h3, h4 { font-weight: 800; }
/* sentence-case editorial headings for the technical / instrument sections */
.title-mixed { text-transform: none; letter-spacing: -0.022em; line-height: 0.98; }
.readout-label {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.68rem; font-weight: 600;
}

/* ---- Eyebrow: drop the dash bar (an em-dash tell); make it a status dot -- */
.eyebrow { color: var(--frost-deep); letter-spacing: 0.14em; gap: 0.55rem; }
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vital);
  box-shadow: 0 0 0 4px var(--vital-dim);
}
.on-dark .eyebrow, .area .eyebrow, .cure .eyebrow { color: #cfe8f6; }

/* ---- HERO: ground it into a lit instrument console ---------------------- */
.hero {
  background:
    radial-gradient(58% 46% at 82% 18%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(85% 70% at 14% 112%, rgba(4,18,30,0.62), transparent 60%),
    linear-gradient(180deg, #2aa8e8 0%, #1596dd 36%, #0c6aa8 72%, #06304c 100%);
  background-color: var(--navy);
}
/* the home's heartbeat: a live pulse hairline along the hero base */
.hero-pulse {
  position: absolute; left: 0; right: 0; bottom: 0; height: 82px; z-index: 3;
  pointer-events: none;
  -webkit-mask: linear-gradient(180deg, transparent, #000 55%); mask: linear-gradient(180deg, transparent, #000 55%);
}
.hero-pulse svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-pulse .ekg-base { fill: none; stroke: rgba(255,255,255,0.20); stroke-width: 2; }
.hero-pulse .ekg-live {
  fill: none; stroke: var(--vital); stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(53,230,166,0.75));
  /* travelling lit segment via stroke-dashoffset (reliable on iOS, unlike mask-position) */
  stroke-dasharray: 150 3000;
  animation: ekgSweep 3.4s linear infinite;
}
/* one lit segment sweeps the trace; pattern > path length so only one shows at a time */
@keyframes ekgSweep { from { stroke-dashoffset: 3150; } to { stroke-dashoffset: 0; } }

/* glass console cradling the dial */
.hero-aside .console {
  position: relative; width: min(340px, 100%); padding: 1.5rem 1.4rem 1.2rem; border-radius: 24px;
  background: linear-gradient(180deg, rgba(7,30,49,0.5), rgba(4,17,28,0.34));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 34px 74px -32px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.16);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  display: grid; justify-items: center; gap: 1.05rem;
}
.hero-aside .console::before {
  content: "Comfort Dial"; position: absolute; top: 12px; left: 16px;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.6rem; color: rgba(207,232,246,0.55);
}
.hero-aside .console .con-status {
  position: absolute; top: 12px; right: 16px; display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6rem; color: var(--vital);
}
.hero-aside .console .con-status::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--vital); box-shadow: var(--glow-vital); animation: vpBlink 2.4s ease-in-out infinite; }
@media (max-width: 940px){ .hero-aside .console { width: min(300px, 92%); } }

/* =========================================================================
   ✦ HOME VITALS MONITOR — the signature dark instrument section
   ========================================================================= */
.vitals { background: var(--ink-900); color: #eaf4fb; padding-block: clamp(3rem,6vw,6.5rem); position: relative; }
.vitals::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background:
    linear-gradient(var(--ink-grid) 1px, transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg, var(--ink-grid) 1px, transparent 1px) 0 0/34px 100%;
  -webkit-mask: radial-gradient(130% 100% at 50% -5%, #000, transparent 78%);
          mask: radial-gradient(130% 100% at 50% -5%, #000, transparent 78%);
}
.vitals .wrap { position: relative; z-index: 1; }
.vitals-panel {
  position: relative; border: 1px solid rgba(124,199,236,0.18); border-radius: 22px;
  background: var(--console); overflow: hidden;
  box-shadow: 0 50px 100px -46px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.06);
}
.vp-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1.4rem; border-bottom: 1px solid rgba(124,199,236,0.14); background: rgba(4,16,26,0.55);
}
.vp-live { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.72rem; color: var(--vital); }
.vp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--vital);
  box-shadow: 0 0 0 4px var(--vital-dim); animation: vpBlink 2.4s ease-in-out infinite; }
@keyframes vpBlink { 0%,100%{ opacity: 1 } 50%{ opacity: 0.3 } }
.vp-id { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  color: rgba(200,224,240,0.5); text-transform: uppercase; }
.vp-body { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(1.5rem,3.5vw,3.2rem);
  padding: clamp(1.6rem,3.4vw,2.8rem); align-items: center; }
@media (max-width: 900px){ .vp-body { grid-template-columns: 1fr; } }
.vp-title { font-size: var(--step-4); color: #fff; margin-bottom: 0.7rem; }
.vp-lead p { color: #b3cde2; max-width: 42ch; margin-bottom: 1.6rem; font-size: 1.06rem; line-height: 1.6; }
.vp-lead .btn { --btn-bg: var(--vital); color: #04231a; box-shadow: 0 10px 26px rgba(53,230,166,0.3); }
@media (hover:hover) and (pointer:fine){ .vp-lead .btn:hover { --btn-bg: #4ff0b6; box-shadow: 0 16px 34px rgba(53,230,166,0.42); } }

/* the monitor: an EKG trace over a live readout grid */
.vp-monitor { position: relative; border-radius: 16px; background: rgba(2,11,19,0.66);
  border: 1px solid rgba(124,199,236,0.16); padding: 1.1rem 1.1rem 1.15rem; }
.ekg { position: relative; height: 92px; margin-bottom: 1rem; overflow: hidden;
  border-bottom: 1px solid rgba(124,199,236,0.12); }
.ekg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ekg .ekg-base { fill: none; stroke: rgba(124,199,236,0.22); stroke-width: 2; }
.ekg .ekg-live { fill: none; stroke: var(--vital); stroke-width: 2.6;
  filter: drop-shadow(0 0 6px rgba(53,230,166,0.85));
  stroke-dasharray: 150 2600;
  animation: ekgSweep 3s linear infinite; }
.vp-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 460px){ .vp-readouts { grid-template-columns: 1fr; } }
.vp-vital { border: 1px solid rgba(124,199,236,0.14); border-radius: 12px; padding: 0.85rem 0.95rem;
  background: rgba(6,24,38,0.55); }
.vp-vital .vv-k { display: flex; align-items: center; gap: 0.55ch; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.6rem; color: rgba(185,210,230,0.7); margin-bottom: 0.4rem; }
.vp-vital .vv-k::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--vital); box-shadow: var(--glow-vital); flex: none; }
.vp-vital .vv-v { font-family: var(--font-heading); font-size: 1.75rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.vp-vital .vv-v .deg { font-size: 0.6em; vertical-align: top; }
.vp-vital .vv-s { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--vital); margin-top: 5px; }
/* the temperature card is wired to the hero dial (data-thermo) — it runs a fever with you */
.vp-vital.is-heat .vv-k::before { background: var(--sig-warm); box-shadow: 0 0 20px rgba(255,138,61,0.55); }
.vp-vital.is-heat .vv-v, .vp-vital.is-heat .vv-s { color: var(--sig-warm); }
.vp-vital.is-cold .vv-k::before { background: var(--sig-cool); box-shadow: 0 0 20px rgba(62,198,245,0.55); }
.vp-vital.is-cold .vv-v, .vp-vital.is-cold .vv-s { color: var(--sig-cool); }

/* =========================================================================
   ✦ DARK REQUEST FORM — bookends the vitals monitor at the page base
   ========================================================================= */
.formsec.is-dark { background: var(--ink-900); color: #eaf4fb; position: relative; }
.formsec.is-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background:
    linear-gradient(var(--ink-grid) 1px, transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg, var(--ink-grid) 1px, transparent 1px) 0 0/34px 100%;
  -webkit-mask: radial-gradient(130% 100% at 50% -5%, #000, transparent 78%);
          mask: radial-gradient(130% 100% at 50% -5%, #000, transparent 78%);
}
.formsec.is-dark .wrap { position: relative; z-index: 1; }
.formsec.is-dark h2 { color: #fff; }
.formsec.is-dark .lead { color: #b3cde2; }
.formsec.is-dark .rs-form { background: var(--console); border-color: rgba(124,199,236,0.2);
  box-shadow: 0 50px 100px -46px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.06); }
.formsec.is-dark .field label { color: rgba(185,210,230,0.82); }
.formsec.is-dark .field input, .formsec.is-dark .field textarea {
  background: rgba(4,16,26,0.6); border-color: rgba(124,199,236,0.24); color: #eaf4fb; }
.formsec.is-dark .field input::placeholder, .formsec.is-dark .field textarea::placeholder { color: rgba(160,190,215,0.5); }
.formsec.is-dark .field input:focus, .formsec.is-dark .field textarea:focus {
  border-color: var(--vital); box-shadow: 0 0 0 3px var(--vital-dim); }
.formsec.is-dark .emergency-note { background: rgba(204,19,45,0.15); border: 1px solid rgba(255,120,120,0.32); }
.formsec.is-dark .emergency-note .num { color: #fff; }
.formsec.is-dark .form-status.ok { color: var(--vital); }

/* ---- Diagnosis cards: sharper monitor feel + stronger hover ------------- */
.dx-card { box-shadow: var(--shadow-card); }
.dx-intro { align-items: end; }
.dx-intro .dx-kicker { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 0.7rem;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.68rem; color: var(--frost-deep); }
.dx-intro .dx-kicker::before { content:""; width: 8px; height: 8px; border-radius: 50%; background: var(--vital); box-shadow: 0 0 0 4px var(--vital-dim); }

/* ---- Reviews sit on white so the light run reads as three distinct steps - */
.reviews { background: var(--white); }
.rev-card { background: var(--paper); }

/* ---- Section-lead helper: a headline + measure without the eyebrow ------- */
.sec-lead { max-width: 62ch; }
.sec-lead .lead { margin-top: 0.9rem; }

/* ---- Sub-page heroes: ground them + carry the heartbeat signature -------- */
.page-hero {
  background:
    radial-gradient(56% 60% at 82% 16%, rgba(255,255,255,0.16), transparent 60%),
    radial-gradient(82% 85% at 12% 122%, rgba(5,22,36,0.5), transparent 60%),
    linear-gradient(180deg, #2aa8e8 0%, #1596dd 44%, #0c6aa8 100%);
}
.page-hero .hero-pulse { height: 70px; z-index: 3; }
/* the dark instrument sections reuse the home vitals surface site-wide */
.section.instrument { background: var(--ink-900); color: #eaf4fb; position: relative; }
.section.instrument::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background:
    linear-gradient(var(--ink-grid) 1px, transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg, var(--ink-grid) 1px, transparent 1px) 0 0/34px 100%;
  -webkit-mask: radial-gradient(130% 100% at 50% -5%, #000, transparent 78%);
          mask: radial-gradient(130% 100% at 50% -5%, #000, transparent 78%);
}
.section.instrument .wrap { position: relative; z-index: 1; }
.section.instrument h2 { color: #fff; }
.section.instrument .lead { color: #b3cde2; }

/* ---- Brand video (fleet showcase) --------------------------------------- */
.video-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 24px 54px -18px rgba(6,50,90,0.45); border: 5px solid #fff; background: #0a2036; }
.brand-video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.video-tag { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(5,20,31,0.72); color: #fff; padding: 7px 14px; border-radius: var(--radius-pill);
  font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.video-tag i { color: var(--vital); }

/* ---- Community outreach -------------------------------------------------- */
.community { background: var(--paper); }
.community-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,4rem); align-items: center; }
@media (max-width: 860px){ .community-grid { grid-template-columns: 1fr; } }
.sponsor-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 1.6rem; }
@media (max-width: 520px){ .sponsor-list { grid-template-columns: 1fr; } }
.sponsor { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow-sm); line-height: 1.25; }
.sponsor i { color: var(--red); width: 20px; text-align: center; flex: none; }
.community-media { display: grid; gap: 1rem; }
.community-photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 5px solid #fff;
  box-shadow: 0 24px 54px -18px rgba(6,50,90,0.4); background: #fff; }
.community-photo img { width: 100%; height: auto; display: block; }
.community-photo figcaption { text-align: center; padding: 0.65rem; font-family: var(--font-heading);
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; color: var(--text-soft); }
.community-clip { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 5px solid #fff;
  box-shadow: 0 20px 44px -18px rgba(6,50,90,0.35); background: #0a2036; }
.community-clip video { width: 100%; height: auto; display: block; }
.community-clip .video-tag { font-size: 0.72rem; left: 12px; bottom: 12px; }

/* ---- Save Soil (supported cause) — dark band, green as the one accent ---- */
.savesoil { background: var(--ink-900); color: #eaf4fb; position: relative; overflow: hidden; }
.savesoil::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 130% at 12% 20%, rgba(46,139,87,0.24), transparent 60%); }
.savesoil .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto;
  gap: clamp(1.2rem,3vw,2.8rem); align-items: center; }
@media (max-width: 780px){ .savesoil .wrap { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
.savesoil .ss-logo { width: 92px; height: auto; background: #fff; border-radius: 16px; padding: 10px; flex: none; }
.savesoil h2 { color: #fff; font-size: var(--step-3); }
.savesoil p { color: #b9d2c8; max-width: 58ch; margin-top: 0.55rem; }
.savesoil .btn { --btn-bg: #2e8b57; color: #fff; box-shadow: 0 8px 22px rgba(46,139,87,0.35); white-space: nowrap; }
@media (hover: hover) and (pointer: fine){ .savesoil .btn:hover { --btn-bg: #37a367; box-shadow: 0 14px 30px rgba(46,139,87,0.45); } }

/* ---- Promotions: featured offer + coupon ticket ------------------------- */
.promo-feature { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
@media (max-width: 860px){ .promo-feature { grid-template-columns: 1fr; } }
.promo-ticket { position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.promo-ticket .pt-head { display: flex; justify-content: space-between; align-items: center;
  background: var(--red); color: #fff; padding: 0.8rem 1.2rem; font-family: var(--font-heading);
  text-transform: uppercase; letter-spacing: 0.05em; }
.promo-ticket .pt-head span:last-child { font-size: 0.78rem; opacity: 0.9; letter-spacing: 0.16em; }
.promo-ticket .pt-body { padding: 1.4rem 1.4rem 0.4rem; }
.pt-kicker { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.68rem; color: var(--frost-deep); }
.pt-amount { font-family: var(--font-heading); font-size: clamp(2rem,4vw,2.7rem); color: var(--ink); line-height: 1; margin-top: 0.25rem; text-transform: uppercase; }
.pt-amount span { color: var(--red); }
.pt-note { color: var(--text-soft); margin-top: 0.4rem; }
.pt-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.5rem; }
.pt-list li { display: flex; gap: 0.6rem; align-items: center; font-size: 0.95rem; color: var(--ink); }
.pt-list li::before { content: "\2713"; color: #0a8f6a; font-weight: 700; }
.pt-perf { position: relative; height: 20px; margin: 0.7rem 1.4rem; border-top: 2px dashed var(--line); }
.pt-perf::before, .pt-perf::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); }
.pt-perf::before { left: -25px; } .pt-perf::after { right: -25px; }
.pt-foot { padding: 0 1.4rem 1.4rem; }
.pt-foot .btn { min-width: 0; }
.pt-fine { font-size: 0.72rem; color: var(--text-soft); margin-top: 0.7rem; text-align: center; }

/* referral steps */
.referral-steps { display: grid; gap: 0.9rem; margin: 1.6rem 0 0; }
.ref-step { display: flex; gap: 0.9rem; align-items: flex-start; }
.ref-step .n { width: 34px; height: 34px; border-radius: 50%; background: var(--vital); color: #04231a;
  font-family: var(--font-heading); display: grid; place-items: center; flex: none; font-size: 1.05rem; }
.instrument .ref-step { color: #cfe0ec; }
.ref-fine { font-size: 0.8rem; color: var(--text-soft); margin-top: 1rem; }
.instrument .ref-fine { color: rgba(160,190,215,0.72); }

/* ---- Shop / Store product cards ----------------------------------------- */
.shop-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(1rem,2vw,1.6rem); }
@media (max-width: 720px){ .shop-grid { grid-template-columns: 1fr; } }
.shop-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: clamp(1.4rem,2.5vw,2rem); display: flex; flex-direction: column; gap: 0.7rem;
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .shop-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -26px rgba(4,40,72,0.5); } }
.shop-card .sc-ico { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(74,168,220,0.12); color: var(--frost-deep); font-size: 1.5rem; }
.shop-card .sc-tag { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem; color: var(--frost-deep); }
.shop-card h3 { font-size: var(--step-2); color: var(--ink); margin-top: 0.1rem; }
.shop-card p { color: var(--text-soft); }
.shop-card .sc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.8rem; border-top: 1px dashed var(--line); }
.shop-card .sc-price { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink); font-size: 0.95rem; }
.shop-card .sc-foot .btn { min-width: 0; padding: 12px 20px; font-size: 0.95rem; }

/* ---- Readability pass: Big Shoulders reads thin below 700 on small UI.
   Many labels use the heading font with no weight (fall back to 400), so lift
   every heading-font label to a solid weight. --------------------------------- */
.primary-nav a { font-weight: 700; letter-spacing: 0.05em; }
.eyebrow, .dx-kicker, .tb-meta, .trust-item, .thermo-pill, .mode-label, .dial-hint,
.dial-hint .pill, .county-state, .foot-h, .crumbs, .page-hero .crumbs, .pt-kicker,
.sc-tag, .fin-badge, .tech-tag, .rev-name, .video-tag, .con-status, .vp-live, .vp-id,
.vv-k, .vv-s, .dx-tag, .faq-q, .schedule-panel .sp-head strong, .foot-grid a,
.field label, .stat .v, .hero-meta .v, .brand-sub { font-weight: 700; }
.btn, .header-schedule, .header-call, .cb-call, .cb-quote, .call-bar a, .offer-tab,
.restore-btn, .pt-head, .pt-amount, .sc-price, .fin-headline, .foot-nap .num,
.emergency-note .num, .hero-meta .k, .big72, .cure .big72, .thermostat .temp,
.vp-title, .vv-v, .google-badge .g { font-weight: 800; }
/* headings stay heaviest */
h1, h2, h3, h4, .h-xl, .h-lg, .h-md, .h-sm { font-weight: 800; }

/* ---- Hard-working Dr. P: paces along the bottom edge as you scroll -------
   Fixed to the bottom band, small, and below the header/CTA layers so it never
   covers the phone button or menu. Hidden over the hero (top) and the footer
   (both copy-heavy), and disabled for reduced motion + on mobile. ------------ */
.dr-runner {
  position: fixed; bottom: 10px; left: 0; z-index: 95;
  width: 74px; pointer-events: none;
  transform: translate3d(calc(var(--rx, 45vw) - 37px), 0, 0) scaleX(var(--rdir, 1));
  transition: transform 0.14s linear, opacity 0.45s ease;
  will-change: transform;
}
.dr-runner img { display: block; width: 100%; filter: drop-shadow(0 8px 10px rgba(0,0,0,0.32)); }
.dr-runner.running img { animation: drRun 0.32s ease-in-out infinite; }
@keyframes drRun { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.dr-runner.hide-top, .dr-runner.hide-foot { opacity: 0; }
@media (max-width: 760px) { .dr-runner { display: none; } }
@media (prefers-reduced-motion: reduce) { .dr-runner { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .vp-dot, .ekg .ekg-live, .hero-pulse .ekg-live, .hero-aside .console .con-status::before { animation: none !important; }
}

/* =========================================================================
   Reduced motion — gentler, not zero
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Comfort Dial stays usable (it's user-controlled, not autoplay); just kill the flicker/drift. */
  #flame-bottom, #flame-top, #frost-b { animation: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .chip.pulse-24 .dot { animation: none !important; }
}

/* Print */
@media print {
  .site-header, .call-bar, .offer-tab, #temp-fx, .hero-scene { display: none !important; }
  body { color: #000; background: #fff; }
}