/* ============================================================
   NORDHAVEN HEATING & COOLING — Black Gallery-Mono
   Showcase Build by SimpliTechPro (fictional demo brand)
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* plates */
  --black:      #0B0B0B;   /* true neutral black — zero blue cast */
  --plate:      #F4F2ED;   /* off-white gallery plate */

  /* ink */
  --ink:        #F0EDE6;   /* text on black */
  --ink-dim:    rgba(240, 237, 230, 0.60);
  --ink-faint:  rgba(240, 237, 230, 0.38);
  --ink-dark:   #131311;   /* text on plate */
  --ink-dark-dim: rgba(19, 19, 17, 0.62);

  /* hairlines */
  --line:       rgba(240, 237, 230, 0.16);  /* on black */
  --line-dark:  rgba(11, 11, 11, 0.16);     /* on plate */

  /* climate accents — car climate-control language: red = heat, blue = cool */
  --heat:       #E2472E;
  --heat-soft:  rgba(226, 71, 46, 0.14);
  --cool:       #2E7FE2;
  --cool-soft:  rgba(46, 127, 226, 0.14);

  /* type — CEO-picked set */
  --font-display: "Stardos Stencil", system-ui, sans-serif;  /* headlines */
  --font-body:    "Michroma", sans-serif;                     /* body copy — wide technical face */
  --font-logo:    "Orbitron", sans-serif;                     /* wordmark main */
  --font-logo-sub:"Michroma", sans-serif;                     /* HEATING & COOLING line */
  --font-ui:      "Google Sans Flex", system-ui, sans-serif;  /* menu + buttons */
  --font-mono:    "Space Mono", ui-monospace, monospace;      /* eyebrows / tags / technical */

  /* rhythm */
  --container:  1200px;
  --pad-x:      clamp(20px, 4vw, 48px);
  --plate-pad:  clamp(72px, 10vw, 140px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--black);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;      /* Michroma runs very wide — normal sizes read big */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::selection { background: var(--heat); color: var(--plate); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Plates ---------- */
.plate-black { background: var(--black); color: var(--ink); }
.plate-light { background: var(--plate); color: var(--ink-dark); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 11, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 68px;
}

.wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.wordmark-main {
  font-family: var(--font-logo);
  font-weight: 800;
  font-size: 23px;   /* +30% */
  letter-spacing: 0.1em;
}
.wordmark-sub {
  font-family: var(--font-logo-sub);
  font-size: 10.5px; /* +30% with the main line */
  letter-spacing: 0.26em;
  margin-top: 4px;
}
/* climate-control colour language in the logo itself */
.wm-heat { color: var(--heat); }
.wm-cool { color: var(--cool); }
.wm-amp  { color: var(--ink-faint); }

.site-nav {
  display: flex;
  gap: 26px;
  margin-left: auto;
}
.site-nav a {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: 20px; }
.header-phone {
  font-size: 12px;
  color: var(--ink-dim);
  transition: color 0.25s var(--ease);
}
.header-phone:hover { color: var(--ink); }

/* ============================================================
   BUTTONS — car climate-control language (red = heat, blue = cool)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 30px;
  border-radius: 999px;
  border: 1px solid;
  position: relative;
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}

/* indicator LED — like a lit climate button in a dash */
.btn::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}

.btn-heat {
  border-color: var(--heat);
  color: var(--ink);
  /* subtle top-light sheen over the tinted fill — dash-button depth */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 46%), var(--heat-soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),          /* crisp inner top edge */
    0 0 16px rgba(226, 71, 46, 0.30),                 /* near glow */
    0 0 42px rgba(226, 71, 46, 0.16);                 /* ambient halo */
}
.btn-heat::before { background: var(--heat); box-shadow: 0 0 10px var(--heat), 0 0 20px rgba(226, 71, 46, 0.55); }
.btn-heat:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 46%), var(--heat);
  color: #FFF6F2;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 24px rgba(226, 71, 46, 0.55),
    0 0 64px rgba(226, 71, 46, 0.28);
}
.btn-heat:hover::before { background: #FFF6F2; box-shadow: 0 0 10px #FFF6F2; }

.btn-cool {
  border-color: var(--cool);
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 46%), var(--cool-soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 16px rgba(46, 127, 226, 0.30),
    0 0 42px rgba(46, 127, 226, 0.16);
}
.btn-cool::before { background: var(--cool); box-shadow: 0 0 10px var(--cool), 0 0 20px rgba(46, 127, 226, 0.55); }
.btn-cool:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 46%), var(--cool);
  color: #F2F8FF;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 24px rgba(46, 127, 226, 0.55),
    0 0 64px rgba(46, 127, 226, 0.28);
}
.btn-cool:hover::before { background: #F2F8FF; box-shadow: 0 0 10px #F2F8FF; }

.btn-sm { padding: 10px 20px; font-size: 11px; }

.btn-arrow { font-family: var(--font-display); transition: transform 0.3s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }

.btn-icon { width: 15px; height: 15px; flex: none; }

/* focus ring — keyboard visibility, on-theme */
.btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--cool);
  outline-offset: 3px;
}

/* ============================================================
   ① HERO — split industrial: type left, full-height B&W photo right
   ============================================================ */
.hero { padding: 0; }

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  min-height: calc(100vh - 68px);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 96px);
  padding-right: clamp(32px, 5vw, 72px);
  /* left edge aligns with the .container grid */
  padding-left: max(var(--pad-x), calc((100vw - var(--container)) / 2));
}

/* ---------- the climate dial — the hero's signature ---------- */
.hero-dial {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 5vw, 72px);
}

.dial-wrap {
  --glow: rgba(138, 155, 184, 0.28);  /* JS interpolates cool↔heat */
  position: relative;
  width: min(460px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 90px var(--glow), 0 0 220px var(--glow);
  transition: box-shadow 0.25s linear;
  touch-action: none;
  cursor: crosshair;
}

.dial-svg { width: 100%; height: 100%; }

.dial-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  pointer-events: none;
}

.dial-temp {
  font-family: var(--font-logo);   /* Orbitron — instrument readout */
  font-weight: 800;
  font-size: clamp(44px, 4.6vw, 60px);
  line-height: 1;
  letter-spacing: 0.02em;
}

.dial-label {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--ink-dim);
}

.dial-status {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.dial-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #37B26C;
  box-shadow: 0 0 8px #37B26C;
  animation: led-pulse 2.6s ease-in-out infinite;
}

@keyframes led-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.eyebrow {
  font-size: 12px;
  color: var(--ink-dim);
  margin-bottom: clamp(20px, 3vw, 32px);
}

.hero-headline {
  font-size: clamp(40px, 5.4vw, 72px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.01em;   /* stencil forms need air, not negative tracking */
  position: relative;
  padding-bottom: clamp(22px, 3vw, 34px);
}

/* headline climate colours — cool / neutral / heat */
.hl-cool { color: var(--cool); }
.hl-ink  { color: var(--ink); }
.hl-heat { color: var(--heat); }

/* the hairline that draws itself under the headline on load */
.headline-rule {
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
}

.hero-sub {
  font-size: clamp(14px, 1.3vw, 16px);  /* Michroma runs wide — modest size reads substantial */
  font-weight: 400;
  color: var(--ink-dim);
  line-height: 1.75;
  max-width: 600px;
  margin-top: clamp(22px, 3vw, 32px);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: clamp(30px, 4vw, 44px);
}

/* JS reveal: elements start hidden only when JS is running (class set on <html>) */
.js [data-reveal] { opacity: 0; }

/* ============================================================
   ② TRUST BAR
   ============================================================ */
.trust-bar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}

.trust-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 28px;
  font-size: 11.5px;
  color: var(--ink-dim);
}

.trust-list li { display: flex; align-items: center; gap: 8px; }

/* mono separator dots between items on wide screens */
.trust-list li + li::before {
  content: "·";
  color: var(--ink-faint);
  margin-right: 28px;
}

.star { color: var(--ink); font-size: 13px; }

/* ============================================================
   SECTIONS — shared plate rhythm
   ============================================================ */
.section {
  padding-top: var(--plate-pad);
  padding-bottom: var(--plate-pad);
  scroll-margin-top: 68px;   /* sticky header must not cover anchored sections */
}

.sec-head { margin-bottom: clamp(40px, 5vw, 64px); }

.sec-num {
  font-size: 11px;
  letter-spacing: 0.2em;
  margin-bottom: 14px;
}
.plate-light .sec-num { color: var(--ink-dark-dim); }
.plate-black .sec-num { color: var(--ink-dim); }

.sec-title {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

/* hairline between two consecutive same-colour plates */
.sect-divide      { border-top: 1px solid var(--line-dark); }
.sect-divide-dark { border-top: 1px solid var(--line); }

/* ============================================================
   ③ SERVICES — editorial 4-up grid
   ============================================================ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}

.svc-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-dark);   /* the editorial hairline */
}

.svc-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #DDD9D0;
}
.svc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}
.svc-card:hover .svc-photo img {
  transform: scale(1.04);
  filter: grayscale(0.75) contrast(1.05);
}

.svc-name { font-size: 17px; letter-spacing: 0.03em; }
.svc-line {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-dark-dim);
  flex: 1;
}
.svc-go {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--ink-dark);
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: border-color 0.25s var(--ease);
}
.svc-card:hover .svc-go { border-bottom-color: var(--ink-dark); }

/* ============================================================
   ④ SYSTEM SCHEMATIC — the signature draw
   ============================================================ */
.system { border-top: 1px solid var(--line); }

.schematic { max-width: 920px; margin: 0 auto; }
.schematic svg { width: 100%; height: auto; }

.dline {
  stroke: rgba(240, 237, 230, 0.72);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.dret { stroke: rgba(240, 237, 230, 0.4); stroke-dasharray: 6 7; }

.dlabel {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  fill: rgba(240, 237, 230, 0.55);
}

/* the one colour in the drawing */
.dchip-box { stroke: url(#tempGrad); stroke-width: 1.5; }
.dchip-temp {
  font-family: var(--font-logo);
  font-size: 21px;
  font-weight: 800;
  fill: url(#tempGrad);
  letter-spacing: 0.04em;
}

.schematic-caption {
  margin-top: 26px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
}

/* ============================================================
   ⑤ PROCESS — mono-numbered steps
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  list-style: none;
  counter-reset: none;
}

.step { border-top: 1px solid var(--ink-dark); padding-top: 18px; }

.step-num {
  display: block;
  font-size: 30px;
  font-weight: 700;
  color: var(--ink-dark-dim);
  margin-bottom: 14px;
}

.step-name { font-size: 15px; margin-bottom: 10px; letter-spacing: 0.02em; }
.step-line { font-size: 12px; line-height: 1.75; color: var(--ink-dark-dim); }

.process-trust {
  margin-top: clamp(40px, 5vw, 56px);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-dark-dim);
  text-align: center;
}

/* ============================================================
   PROOF STATS — oversized band
   ============================================================ */
.stats-band {
  padding-top: clamp(48px, 6vw, 84px);
  padding-bottom: clamp(48px, 6vw, 84px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
  text-align: center;
}

.stat-big {
  display: block;
  font-family: var(--font-logo);   /* Orbitron — instrument numbers */
  font-weight: 800;
  font-size: clamp(34px, 4vw, 56px);
  margin-bottom: 10px;
}
.stat-label { font-size: 10px; letter-spacing: 0.2em; color: var(--ink-dim); }

/* ============================================================
   ⑥ REVIEWS — big pull quotes
   ============================================================ */
.star-heat { color: var(--heat); font-size: 0.7em; letter-spacing: 0.1em; }

.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
}

.review { border-top: 1px solid var(--line); padding-top: 22px; }

.review-quote {
  font-size: clamp(14px, 1.35vw, 16.5px);
  line-height: 1.85;
  color: var(--ink);
}
.review-by {
  margin-top: 18px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
}

/* ============================================================
   ⑦ SERVICE AREAS + checker
   ============================================================ */
.areas-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.towns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  font-size: 12px;
  letter-spacing: 0.14em;
}
.towns li {
  border: 1px solid var(--line-dark);
  padding: 9px 16px;
}

.areas-note {
  margin-top: 24px;
  font-size: 13px;
  color: var(--ink-dark-dim);
}

.area-check {
  border: 1px solid var(--ink-dark);
  padding: clamp(24px, 3vw, 36px);
  background: rgba(11, 11, 11, 0.02);
}
.area-check-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-dark-dim);
  margin-bottom: 18px;
}
.area-form { display: flex; gap: 12px; }
.area-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink-dark);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-dark);
  padding: 10px 2px;
  outline: none;
}
.area-input::placeholder { color: var(--ink-dark-dim); }
.area-input:focus { border-bottom-width: 2px; }
.area-btn { padding: 12px 22px; font-size: 11.5px; color: var(--ink-dark); }
.area-result {
  margin-top: 18px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  line-height: 1.8;
  min-height: 20px;
}
.area-result.is-yes { color: #1F7A4D; }
.area-result.is-no  { color: var(--heat); }

/* ============================================================
   ⑧ COMFORT CLUB
   ============================================================ */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  max-width: 900px;
}

.plan-card {
  border: 1px solid var(--line);
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.plan-card:hover { border-color: var(--cool); box-shadow: 0 0 40px rgba(46, 127, 226, 0.12); }
.plan-card-hot:hover { border-color: var(--heat); box-shadow: 0 0 40px rgba(226, 71, 46, 0.12); }

.plan-name { font-size: 17px; letter-spacing: 0.02em; }
.plan-tag { font-size: 9.5px; letter-spacing: 0.2em; color: var(--ink-dim); }

.plan-feats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-dim);
  flex: 1;
}
.plan-feats li { padding-left: 18px; position: relative; }
.plan-feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--ink-dim);
}

.plan-card .btn { align-self: flex-start; }

.plan-commercial {
  margin-top: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line);
  padding: clamp(22px, 3vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-dim);
}
.plan-comm-tag { color: var(--ink); font-size: 11px; letter-spacing: 0.18em; }
.plan-comm-link {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  transition: border-color 0.25s var(--ease);
}
.plan-comm-link:hover { border-bottom-color: var(--ink); }

/* ============================================================
   ⑨ CLOSING CTA
   ============================================================ */
.closing { border-top: 1px solid var(--line); }
.closing-inner { text-align: center; }

.closing-title {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.12;
  margin-bottom: clamp(30px, 4vw, 44px);
}

.closing-ctas { justify-content: center; margin-top: 0; }

/* ============================================================
   FOOTER — full
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--line);
  padding: clamp(48px, 6vw, 72px) 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(36px, 4vw, 52px);
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.footer-brand { display: flex; flex-direction: column; }
.footer-tagline {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink-dim);
  max-width: 260px;
}

.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col a,
.footer-col p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink-dim);
}
.footer-col a { transition: color 0.25s var(--ease); align-self: flex-start; }
.footer-col a:hover { color: var(--ink); }

.footer-head {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  margin-bottom: 4px;
}

.footer-lic { font-size: 9.5px; letter-spacing: 0.14em; color: var(--ink-faint); }

.footer-social { display: flex; gap: 18px; margin-top: 6px; }
.footer-social a { font-size: 11px; letter-spacing: 0.14em; }
.footer-honesty {
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}
.footer-honesty a {
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
  transition: color 0.25s var(--ease);
}
.footer-honesty a:hover { color: var(--ink); }

/* ============================================================
   MOBILE PINNED UTILITY BAR — Call | Book
   ============================================================ */
.util-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  border-top: 1px solid var(--line);
  background: rgba(11, 11, 11, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.util-bar a {
  flex: 1;
  text-align: center;
  padding: 16px 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.util-call { color: var(--heat); border-right: 1px solid var(--line); }  /* call = emergency = red */
.util-book { color: var(--cool); }                                       /* book = blue */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .site-nav { display: none; }
}

@media (max-width: 900px) {
  /* hero stacks: type first, photo beneath as a wide band */
  .hero-inner { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy {
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }
  .hero-dial {
    padding: 40px var(--pad-x) 56px;
  }
  .dial-wrap { width: min(340px, 88vw); }
}

@media (max-width: 640px) {
  .header-phone { display: none; }
  .header-actions .btn-sm { display: none; }

  .util-bar { display: flex; }
  body { padding-bottom: 52px; } /* room for the pinned bar */

  .hero-ctas { justify-content: center; }

  .trust-list { justify-content: flex-start; }
  .trust-list li + li::before { display: none; }
}

/* ============================================================
   QUOTE PAGE — 4-step wizard + confirmation
   ============================================================ */
.quote { min-height: calc(100vh - 68px); }
.quote-wrap { max-width: 760px; }

.quote-head { margin-bottom: clamp(36px, 5vw, 56px); }
.quote-head .sec-title { font-size: clamp(26px, 3.4vw, 44px); }

.quote-progress {
  margin-top: clamp(24px, 3vw, 36px);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-dim);
}

.qbar { display: flex; gap: 8px; margin-top: 12px; }
.qbar-seg {
  height: 2px;
  flex: 1;
  background: var(--line);
  transition: background 0.4s var(--ease);
}
.qbar-seg.is-on { background: linear-gradient(90deg, var(--cool), var(--heat)); }

.qstep { border: none; }

.qlegend {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  margin-bottom: 22px;
}
.qlegend-b { margin-top: 34px; }

/* option buttons — dash-panel switches */
.opt-grid { display: grid; gap: 14px; }
.opt-grid-2 { grid-template-columns: repeat(2, 1fr); }
.opt-grid-3 { grid-template-columns: repeat(3, 1fr); }
.opt-grid-4 { grid-template-columns: repeat(4, 1fr); }

.opt {
  font-family: var(--font-ui);
  text-align: left;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.opt:hover { border-color: var(--ink-dim); }

.opt-name { font-weight: 600; font-size: 13.5px; letter-spacing: 0.1em; }
.opt-sub { font-family: var(--font-body); font-size: 10.5px; line-height: 1.6; color: var(--ink-dim); }

.opt-slim { padding: 14px 18px; align-items: center; flex-direction: row; justify-content: center; }

/* selected = lit switch; heating/emergency lean red, cooling leans blue */
.opt.is-selected {
  border-color: var(--ink);
  background: rgba(240, 237, 230, 0.05);
  box-shadow: 0 0 22px rgba(240, 237, 230, 0.12);
}
.opt-heat.is-selected {
  border-color: var(--heat);
  background: var(--heat-soft);
  box-shadow: 0 0 26px rgba(226, 71, 46, 0.28);
}
.opt-cool.is-selected {
  border-color: var(--cool);
  background: var(--cool-soft);
  box-shadow: 0 0 26px rgba(46, 127, 226, 0.28);
}

/* emergency shortcut strip */
.q-emg {
  margin-top: 26px;
  border: 1px solid var(--heat);
  background: var(--heat-soft);
  padding: 16px 20px;
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 2;
}
.q-emg-call {
  color: var(--heat);
  border-bottom: 1px solid var(--heat);
  white-space: nowrap;
}

/* fields */
.qfield { margin-bottom: 26px; }
.qgrid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }

.qlabel {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  margin-bottom: 10px;
}

.qinput {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 10px 2px;
  outline: none;
  transition: border-color 0.25s var(--ease);
}
.qinput:focus { border-bottom-color: var(--ink); }
.qinput::placeholder { color: var(--ink-faint); }
select.qinput { appearance: none; cursor: pointer; }
select.qinput option { background: var(--black); color: var(--ink); }
.qarea { resize: vertical; }

.q-fineprint { font-size: 9px; letter-spacing: 0.18em; color: var(--ink-faint); margin-top: 8px; }

/* wizard nav */
.qnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(30px, 4vw, 44px);
}
.qback {
  font-size: 11px;
  letter-spacing: 0.16em;
  background: none;
  border: none;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 10px 0;
  transition: color 0.25s var(--ease);
}
.qback:hover { color: var(--ink); }
.qnav .btn { margin-left: auto; }

.qerror {
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--heat);
}

/* confirmation */
.qdone { text-align: center; padding-top: clamp(20px, 3vw, 40px); }
.qdone-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #37B26C;
  box-shadow: 0 0 14px #37B26C;
  margin: 0 auto 26px;
  animation: led-pulse 2.6s ease-in-out infinite;
}
.qdone-title { font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 20px; }
.qdone-ref { font-size: 12px; letter-spacing: 0.2em; color: var(--ink-dim); margin-bottom: 14px; }
.qdone-ref span { color: var(--ink); }
.qdone-summary { font-size: 12px; line-height: 1.9; color: var(--ink-dim); max-width: 520px; margin: 0 auto; }
.qdone-ctas { justify-content: center; margin-top: 34px; }

/* ============================================================
   RESPONSIVE — section grids
   ============================================================ */
@media (max-width: 1020px) {
  .svc-grid, .steps { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: 1fr; max-width: 640px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .areas-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .svc-grid, .steps, .plans-grid, .footer-grid { grid-template-columns: 1fr; }
  .area-form { flex-direction: column; align-items: stretch; }
  .area-btn { justify-content: center; }
  .opt-grid-2, .opt-grid-3, .opt-grid-4 { grid-template-columns: 1fr 1fr; }
  .qgrid-2 { grid-template-columns: 1fr; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] { opacity: 1; }
  .headline-rule { transform: scaleX(1); }
}