/* ==================================================================
   Twin Ports Heating and Cooling
   One stylesheet, no framework, no build step.

   ------------------------------------------------------------------
   DESIGN NOTES

   The first pass was a generic contractor template in navy: flat
   gradient hero, no imagery, no sense of place, and a mobile header
   that ate ~490px before any content appeared. This is the rebuild.

   The palette was originally derived from the place — lake water,
   taconite ore rust, birch paper. It is now derived from the CLIENT'S
   LOGO instead, because the logo arrived after the site was built and
   the two did not agree: an ore-rust accent and warm paper sat under a
   vivid orange-and-sky-blue emblem and read as two brands sharing a
   page. The logo wins; see the measured token block below.

     harbour   #16305c, the navy of the bridge in the emblem
     flame     #f2461a, the flame — decorative fill only, it cannot
               carry text at AA
     taconite  the measured, accessible step down from the flame. Every
               button and call to action.
     steel-lt  #29a3ef, the snowflake and the crest of the wave
     ice       #9ad8f8, the body of the wave — the COOLING half
     basalt    body text, now cool-grey rather than warm

   Texture is Lake Superior bathymetric contours and the Aerial Lift
   Bridge in silhouette (assets/, generated by scripts/make-art.mjs).
   Both are authentically local, and neither can read as clip art —
   which is the usual failure mode of a "themed" local site.
   ------------------------------------------------------------------ */

:root {
  /* ------------------------------------------------------------------
     PALETTE — derived from the logo, not from a swatch library.

     Four colours are sampled straight off the emblem and are the brand:
       #16305c  the navy of the bridge
       #f2461a  the flame
       #29a3ef  the snowflake and the crest of the wave
       #9ad8f8  the body of the wave

     Everything else is a ramp built around them. Where a brand colour
     could not carry text at AA it is kept for FILL and a measured
     darker step does the text, rather than the brand colour being
     quietly dulled everywhere:

       flame       #f2461a  3.71 on white — decoration only, never text
       taconite    #d4360d  4.85 white-on-fill, 4.52 as text. Buttons.
       taconite-dk #a82c0c  6.46 — hover and small text
       steel       #1a72ab  4.84 — links. The logo's #29a3ef is 2.77 on
                             white and cannot be a link colour.
       steel-lt    #29a3ef  6.00 on the dark navy, where it is used

     The neutrals were warm (birch paper, #d9d1c5 rules). Against a cool
     blue logo that read as two brands sharing a page, so the greys are
     now cool. Measured on the page background: ink 11.54, ink-2 6.53,
     headings 12.14.
     ------------------------------------------------------------------ */

  /* brand, straight off the emblem */
  --flame:     #f2461a;
  --harbour:   #16305c;
  --steel-lt:  #29a3ef;
  --ice:       #9ad8f8;

  /* the ramp around them */
  --lake:      #0b1e3b;
  --harbour-2: #1e4176;
  --steel:     #1a72ab;
  --ice-mid:   #bde4fa;
  --ice-pale:  #dcf0fd;

  --taconite:    #d4360d;
  --taconite-dk: #a82c0c;
  --taconite-lt: #fde9e2;

  /* neutrals — cool, to sit with the logo rather than against it */
  --birch:   #f5f7fa;
  --birch-2: #e9eef4;
  --white:   #ffffff;
  --basalt:  #131c2b;
  --ink:     #2a3546;
  --ink-2:   #4c5a6e;
  --ink-3:   #64738a;
  --line:    #d5dee8;
  --line-2:  #e6ecf3;

  /* type */
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* metrics */
  --wrap: 1200px;
  --narrow: 740px;
  --r: 3px;
  --r-lg: 6px;
  --sh: 0 1px 2px rgba(11, 30, 59, .08), 0 3px 10px rgba(11, 30, 59, .06);
  --sh-lg: 0 2px 6px rgba(11, 30, 59, .10), 0 14px 38px rgba(11, 30, 59, .14);
  --hd-h: 66px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--birch);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--steel); text-decoration-color: rgba(26, 114, 171, .34); text-underline-offset: 2px; }
a:hover { color: var(--taconite-dk); text-decoration-color: currentColor; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--taconite); color: #fff; padding: .7rem 1.2rem;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700; line-height: 1.06;
  letter-spacing: -.008em;
  color: var(--lake);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 5.4vw, 3.5rem); }
h2 { font-size: clamp(1.62rem, 3.5vw, 2.3rem); }
h3 { font-size: clamp(1.22rem, 2.2vw, 1.48rem); }
p { margin: 0 0 1.05em; text-wrap: pretty; }

/* ====================================================== buttons === */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--display);
  font-size: 1.08rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase;
  padding: .82rem 1.5rem;
  border: 2px solid transparent; border-radius: var(--r);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .08s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn--lg { font-size: 1.17rem; padding: 1rem 1.9rem; }
.btn--sm { font-size: .94rem; padding: .58rem 1.05rem; }

.btn--primary { background: var(--taconite); color: #fff; border-color: var(--taconite); }
.btn--primary:hover { background: var(--taconite-dk); border-color: var(--taconite-dk); color: #fff; }

.btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.5); }
.btn--ghost:hover { background: #fff; color: var(--lake); border-color: #fff; }

.btn--outline { background: transparent; color: var(--lake); border-color: var(--lake); }
.btn--outline:hover { background: var(--lake); color: #fff; }

/* ======================================================= header === */

.hd { position: relative; z-index: 100; background: var(--white); }

/* --- utility strip --- */
.hd__strip { background: var(--lake); color: #a6c3dd; font-size: .8rem; }
.hd__strip-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem 1.5rem; padding: .44rem 20px; min-height: 30px;
}
.hd__strip p { margin: 0; }
.hd__strip-a { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.hd__strip-a strong { color: var(--ice); font-weight: 700; }
.hd__sep { opacity: .45; }
.hd__strip-b { color: #7b93b0; white-space: nowrap; }

/* A slow pulse on the 24/7 indicator. Tiny, purposeful, and disabled
   by the prefers-reduced-motion guard above. */
.hd__pulse {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: #58c98a; flex: 0 0 auto;
  animation: pulse 2.8s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(88, 201, 138, .6); }
  70%  { box-shadow: 0 0 0 7px rgba(88, 201, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(88, 201, 138, 0); }
}

/* --- the bar --- */
.hd__bar { border-bottom: 1px solid var(--line); background: var(--white); }
.hd__bar-in {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--hd-h);
  padding-top: .5rem; padding-bottom: .5rem;
}

.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: 0 0 auto; margin-right: auto; }
.brand__mark { border-radius: var(--r); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--display); font-size: 1.52rem; font-weight: 700;
  color: var(--lake); letter-spacing: -.012em;
}
.brand__sub {
  font-family: var(--body); font-size: .705rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--taconite-dk);
  margin-top: .15rem;
}

/* Tap-to-call, deliberately OUTSIDE the collapsed menu — calling is the
   primary conversion on every page and must never be behind a tap. */
.hd__call {
  display: flex; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--lake);
  padding: .3rem .1rem; flex: 0 0 auto;
}
.hd__call:hover { color: var(--taconite-dk); }
.hd__call-ico {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--taconite-lt); color: var(--taconite-dk);
  flex: 0 0 auto; transition: background-color .14s, color .14s;
}
.hd__call:hover .hd__call-ico { background: var(--taconite); color: #fff; }
.hd__call-txt { display: flex; flex-direction: column; line-height: 1.05; }
.hd__call-lbl {
  font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--taconite-dk);
}
.hd__call-num { font-family: var(--display); font-size: 1.3rem; font-weight: 700; }

.hd__quote { flex: 0 0 auto; }

/* --- hamburger --- */
.hd__cb { position: absolute; opacity: 0; width: 1px; height: 1px; }

.hd__burger {
  display: none; align-items: center; gap: .45rem;
  cursor: pointer; flex: 0 0 auto;
  padding: .5rem .2rem .5rem .6rem;
  color: var(--lake);
  -webkit-tap-highlight-color: transparent;
}
.hd__burger-bars { display: grid; gap: 4px; width: 22px; }
.hd__burger-bars i {
  display: block; height: 2.5px; border-radius: 2px;
  background: currentColor; transition: transform .18s, opacity .18s;
}
.hd__burger-txt {
  font-family: var(--display); font-size: .96rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.hd__burger-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* The checkbox takes focus; the visible ring belongs on its label. */
.hd__cb:focus-visible + .hd__bar .hd__burger {
  outline: 3px solid var(--taconite); outline-offset: 2px; border-radius: var(--r);
}
/* open: bars become an X */
.hd__cb:checked + .hd__bar .hd__burger-bars i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hd__cb:checked + .hd__bar .hd__burger-bars i:nth-child(2) { opacity: 0; }
.hd__cb:checked + .hd__bar .hd__burger-bars i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ========================================================== nav === */

.nav { background: var(--white); border-bottom: 1px solid var(--line); }
.nav__wrap { position: relative; }
.nav__list { display: flex; flex-wrap: wrap; gap: 0 .1rem; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__item > a {
  display: flex; align-items: center; gap: .32rem;
  font-family: var(--display); font-size: 1.05rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--lake); text-decoration: none;
  padding: .72rem; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.nav__item > a:hover,
.nav__item > a[aria-current] { color: var(--taconite-dk); border-bottom-color: var(--taconite); }
.nav__caret {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .5;
}
.nav__item--cta > a { color: var(--steel); }

/* Mega panel, CSS-only via hover + :focus-within so every link stays
   crawlable and keyboard reachable. */
.nav__panel {
  position: absolute; top: 100%; left: 0; z-index: 120;
  min-width: 330px; max-width: 560px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .13s, transform .13s, visibility .13s;
}
.nav__panel-in {
  background: var(--white);
  border: 1px solid var(--line); border-top: 3px solid var(--taconite);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 1rem 1.15rem 1.05rem;
}
.nav__item--menu:hover .nav__panel,
.nav__item--menu:focus-within .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__panel-h {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .13em; color: var(--ink-3); margin: 0 0 .6rem;
}
.nav__panel-list {
  list-style: none; margin: 0 0 .7rem; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .05rem 1rem;
}
.nav__panel-list a {
  display: block; padding: .34rem .4rem; border-radius: 3px;
  font-size: .92rem; color: var(--ink-2); text-decoration: none;
}
.nav__panel-list a:hover { background: var(--taconite-lt); color: var(--taconite-dk); }
.nav__panel-all {
  display: block; border-top: 1px solid var(--line-2); padding-top: .62rem;
  font-family: var(--display); font-size: .97rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--taconite-dk); text-decoration: none;
}
.nav__panel-all:hover { color: var(--lake); }

/* ================================================== breadcrumbs === */

.crumbs { background: var(--birch-2); border-bottom: 1px solid var(--line-2); font-size: .85rem; }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: .58rem 0; }
.crumbs__list li + li::before { content: "\203A"; color: var(--ink-3); margin: 0 .5rem; }
.crumbs__list a { color: var(--ink-2); }
.crumbs__list span { color: var(--ink-3); }

/* ========================================================= hero === */

.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% -20%, rgba(140, 194, 220, .2), transparent 60%),
    linear-gradient(172deg, var(--lake) 0%, var(--harbour) 62%, var(--harbour-2) 100%);
  color: #fff;
  padding: clamp(2.3rem, 5.6vw, 4rem) 0 clamp(4.6rem, 8vw, 6.4rem);
}

/* Lake Superior bathymetric contours. This is the texture that makes
   the page feel of-this-place rather than generic. */
.hero::before {
  content: ""; position: absolute; inset: -12% -6%;
  background: url("/assets/contours-dark.svg?v=7ebd11ea26") center / cover no-repeat;
  opacity: .5; pointer-events: none;
}

/* The Aerial Lift Bridge along the bottom edge, so the hero always
   resolves into a horizon rather than a flat colour field. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(94px, 15vw, 168px);
  background: url("/assets/lift-bridge.svg?v=eed3a0fd82") center bottom / auto 100% no-repeat;
  opacity: .34; pointer-events: none;
}

.hero__in { position: relative; z-index: 2; max-width: 62rem; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .755rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; color: var(--ice);
  margin: 0 0 .95rem; padding: .3rem .85rem .3rem .45rem;
  background: rgba(140, 194, 220, .1);
  border: 1px solid rgba(140, 194, 220, .22);
  border-radius: 100px;
}
.hero__eyebrow::before {
  content: ""; width: 1.3rem; height: 2px; background: var(--taconite);
  border-radius: 2px; flex: 0 0 auto;
}
.hero__h1 { color: #fff; margin-bottom: .5em; }
.hero__lede {
  font-size: clamp(1.06rem, 2.1vw, 1.26rem);
  color: #cfe0ec; max-width: 60ch; margin-bottom: 1.7rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.hero__note { font-size: .9rem; color: #9db6c8; margin: 0; max-width: 56ch; }
.hero__badges { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 1.6rem 0 0; padding: 0; }
.hero__badges li {
  font-size: .795rem; font-weight: 600;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.17);
  color: #dce9f1; padding: .35rem .8rem; border-radius: 100px;
}

/* =================================================== answer box === */
/* The AEO block: the direct answer, first thing after the H1. Treated
   as an editorial standfirst, not a callout box. */

.answer-box {
  position: relative;
  background: linear-gradient(180deg, var(--taconite-lt) 0%, var(--white) 92%);
  border-bottom: 1px solid var(--line);
}
.answer-box__in {
  position: relative; z-index: 2;
  padding: clamp(1.35rem, 3.4vw, 2.5rem) 20px clamp(1.35rem, 3vw, 2.1rem);
  max-width: 920px; margin: 0 auto;
}

/* The role label. Short enough to hold one line at any width, which is
   the whole point of splitting it off the question. */
.answer-box__label {
  display: flex; align-items: center; gap: .7rem;
  font-size: .715rem; color: var(--taconite-dk); margin: 0 0 .5rem;
  font-family: var(--body); font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em;
}
.answer-box__label::after {
  content: ""; flex: 1 1 auto; height: 1px; min-width: 1.5rem;
  background: currentColor; opacity: .28;
}

/* The question, in sentence case at heading size — this is the line a
   reader scans for and the string an answer engine matches a query
   against, so it gets the prominence. */
.answer-box__q {
  font-family: var(--display);
  font-size: clamp(1.32rem, 4.2vw, 1.78rem);
  line-height: 1.2; font-weight: 700;
  color: var(--lake); margin: 0 0 .5rem; max-width: 34ch;
  text-transform: none; letter-spacing: 0;
}
.answer-box__text {
  font-size: clamp(1.02rem, 1.9vw, 1.14rem);
  line-height: 1.6; color: var(--ink); font-weight: 400;
  margin: 0; max-width: 62ch;
}

/* ======================================================== trust === */

.trust { background: var(--lake); color: #b6cad8; }
.trust__in { padding: 1.25rem 20px; }
.trust__list {
  display: grid; gap: .85rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  list-style: none; margin: 0; padding: 0; font-size: .875rem;
}
.trust__list li { position: relative; padding-left: 1.4rem; }
.trust__list li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: .95rem; height: .95rem; background: var(--ice);
  clip-path: polygon(14% 44%, 0 58%, 40% 100%, 100% 22%, 86% 8%, 38% 71%);
}
.trust__list strong { color: #fff; display: block; font-size: .95rem; }

/* ======================================================== prose === */

.prose { padding: clamp(2rem, 4.5vw, 3.2rem) 0; }
.prose--narrow { max-width: var(--narrow); margin: 0 auto; }
.prose__block { margin-bottom: 2.4rem; }
.prose__block:last-child { margin-bottom: 0; }
.prose__block h2 { margin-bottom: .6em; }
.prose__block p { max-width: 72ch; color: var(--ink-2); }
.prose__aside {
  font-size: .9rem; color: var(--ink-3);
  border-left: 2px solid var(--line-2); padding-left: .9rem; font-style: italic;
}

/* ======================================================== signs === */

.signs {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2rem);
  margin: 0 0 clamp(2rem, 4vw, 2.8rem);
}
.signs__h { margin-bottom: .8em; }
.signs__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .65rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.signs__list li { position: relative; padding-left: 1.6rem; color: var(--ink-2); font-size: .955rem; }
.signs__list li::before {
  content: ""; position: absolute; left: .3rem; top: .62em;
  width: .45rem; height: .45rem; background: var(--taconite); transform: rotate(45deg);
}

/* ==================================================== priceband === */

.pb {
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2rem);
  margin: 0 0 clamp(2rem, 4vw, 2.8rem);
}
.pb::before {
  content: ""; position: absolute; inset: 0;
  background: url("/assets/contours-light.svg?v=b4452574a5") right -30% top -40% / 62% auto no-repeat;
  opacity: .5; pointer-events: none;
}
.pb > * { position: relative; z-index: 2; }
.pb__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.4rem; margin-bottom: .9rem; }
.pb__h { margin: 0; }
.pb__figure {
  font-family: var(--display); font-size: clamp(1.8rem, 4.2vw, 2.5rem);
  font-weight: 700; color: var(--taconite-dk); margin: 0; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pb__unit { font-size: .5em; color: var(--ink-2); font-family: var(--body); font-weight: 600; }
.pb__note { color: var(--ink-2); max-width: 72ch; margin-bottom: .8rem; }
.pb__disc { font-size: .84rem; color: var(--ink-3); margin: 0; }

/* ========================================================== faq === */

.faq { margin: 0 0 clamp(2rem, 4vw, 2.8rem); }
.faq__h { margin-bottom: .8em; }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  cursor: pointer; list-style: none;
  font-family: var(--display); font-size: clamp(1.09rem, 2vw, 1.26rem); font-weight: 700;
  color: var(--lake); padding: .95rem 2.6rem .95rem 0; position: relative;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; position: absolute; right: .7rem; top: 1.55em;
  width: .6rem; height: .6rem;
  border-right: 2.4px solid var(--taconite); border-bottom: 2.4px solid var(--taconite);
  transform: rotate(45deg); transition: transform .18s;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__q:hover { color: var(--taconite-dk); }
.faq__a { padding: 0 2.6rem 1.15rem 0; }
.faq__a p { margin: 0; color: var(--ink-2); max-width: 76ch; }

/* ==================================================== link grid === */

.lg { margin: 0 0 clamp(2.2rem, 4.5vw, 3rem); }
.lg--tight { margin-bottom: 1.4rem; }
.lg__h { margin-bottom: .5em; }
.lg__intro { color: var(--ink-2); max-width: 72ch; margin-bottom: 1.3rem; }
.lg__grid {
  list-style: none; margin: 0 0 1.1rem; padding: 0;
  display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
}
.lg__card { display: flex; }
.lg__card > a {
  display: flex; flex-direction: column; gap: .3rem; width: 100%;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1rem 1.1rem; text-decoration: none;
  transition: border-color .14s, box-shadow .14s, transform .1s;
}
.lg__card > a:hover { border-color: var(--steel); box-shadow: var(--sh); transform: translateY(-2px); }
.lg__card-t {
  font-family: var(--display); font-size: 1.16rem; font-weight: 700;
  color: var(--lake); line-height: 1.14;
}
.lg__card > a:hover .lg__card-t { color: var(--taconite-dk); }
.lg__card-n { font-size: .845rem; color: var(--ink-3); line-height: 1.44; }
.lg__all, .pills__all {
  font-family: var(--display); font-size: 1.02rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--taconite-dk); text-decoration: none;
}
.lg__all:hover, .pills__all:hover { color: var(--lake); }

/* ============================================== service index === */
/* The complete residential + commercial list for one town. A plain
   two-column index rather than cards: thirteen link cards would out-
   shout the eight services the town is actually called out for, which
   sit directly above this in a card grid. */

.svcx {
  margin: 0 0 clamp(2.2rem, 4.5vw, 3rem);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.3rem, 3vw, 1.9rem);
}
.svcx__title { margin-bottom: .35em; }
.svcx__intro { color: var(--ink-2); margin-bottom: 1.25rem; max-width: 72ch; }
.svcx__grid { display: grid; gap: 1.5rem 2.4rem; grid-template-columns: 1fr 1fr; }
.svcx__h {
  font-family: var(--body); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--taconite-dk); margin: 0 0 .55rem;
  padding-bottom: .45rem; border-bottom: 1px solid var(--line-2);
}
.svcx__list { list-style: none; margin: 0; padding: 0; }
.svcx__list li + li { border-top: 1px solid var(--line-2); }
.svcx__list a {
  display: flex; align-items: center; min-height: 44px;
  padding: .45rem 0; text-decoration: none;
  color: var(--ink); font-weight: 500; line-height: 1.32;
}
.svcx__list a:hover { color: var(--taconite-dk); }

/* ======================================================== pills === */

.pills { margin: 0 0 clamp(2.2rem, 4.5vw, 3rem); }
.pills__h { margin-bottom: .5em; }
.pills__intro { color: var(--ink-2); max-width: 72ch; margin-bottom: 1.1rem; }
.pills__list { display: flex; flex-wrap: wrap; gap: .42rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.pills__list a {
  display: block; font-size: .885rem; font-weight: 500;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 100px; padding: .36rem .9rem;
  color: var(--ink-2); text-decoration: none;
  transition: background-color .13s, color .13s, border-color .13s;
}
.pills__list a:hover { background: var(--lake); border-color: var(--lake); color: #fff; }

/* ======================================================== facts === */
/* Rendered as a spec plate — the stamped data panel on a piece of
   mechanical equipment. */

.facts {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.3rem, 2.8vw, 1.85rem);
  margin: clamp(1.8rem, 3.5vw, 2.4rem) 0;
}
.facts__h { margin-bottom: .7em; }
.facts__dl { margin: 0; display: grid; }
.facts__row {
  display: grid; grid-template-columns: 210px 1fr; gap: .25rem 1.2rem;
  padding: .66rem 0; border-top: 1px solid var(--line-2);
}
.facts__row:first-child { border-top: none; padding-top: 0; }
.facts__dl dt {
  font-size: .715rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-3); padding-top: .3rem;
}
.facts__dl dd { margin: 0; color: var(--ink); font-size: .96rem; }

/* ======================================================= truths === */
/* Ice-side palette — these are the "what we actually see here" notes,
   the most locally specific content on any city page. */

.truths {
  position: relative; overflow: hidden;
  background: var(--ice-pale); border: 1px solid #c4dbe8;
  border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2rem);
  margin: 0 0 clamp(2rem, 4vw, 2.8rem);
}
.truths::before {
  content: ""; position: absolute; top: -40%; right: -10%;
  width: 60%; height: 200%;
  background: url("/assets/contours-light.svg?v=b4452574a5") center / cover no-repeat;
  opacity: .45; pointer-events: none;
}
.truths > * { position: relative; z-index: 2; }
.truths__h { margin-bottom: .8em; }
.truths__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.truths__list li { position: relative; padding-left: 1.9rem; color: var(--ink-2); font-size: .965rem; }
.truths__list li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 1.05rem; height: 1.05rem; background: var(--steel);
  clip-path: polygon(14% 44%, 0 58%, 40% 100%, 100% 22%, 86% 8%, 38% 71%);
}

/* ===================================================== rebates === */

.rebates {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2rem);
  margin: 0 0 clamp(2rem, 4vw, 2.8rem);
}
.rebates__h { margin-bottom: .55em; }
.rebates__intro { color: var(--ink-2); max-width: 72ch; }
.rebates__list { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: .7rem; }
.rebates__item {
  display: grid; gap: .18rem;
  padding: .85rem 1rem; background: var(--birch);
  border: 1px solid var(--line-2); border-radius: var(--r);
}
.rebates__name { font-family: var(--display); font-size: 1.12rem; font-weight: 700; color: var(--lake); }
.rebates__scope {
  font-size: .73rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--taconite-dk);
}
.rebates__note { font-size: .885rem; color: var(--ink-2); }
.rebates__disc { font-size: .85rem; color: var(--ink-3); margin: 0; }

/* ========================================================== why === */

.why { padding: clamp(2rem, 4.5vw, 3.2rem) 0; }
.why__h { margin-bottom: 1.2em; }
.why__grid { display: grid; gap: 1.6rem 2.3rem; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); }
.why__item h3 { margin-bottom: .38em; }
.why__item h3::before {
  content: ""; display: block; width: 2.2rem; height: 3px;
  background: var(--taconite); margin-bottom: .75rem;
}
.why__item p { font-size: .955rem; color: var(--ink-2); margin: 0; }

/* ===================================================== climate === */
/* Real, checkable numbers presented as a data band. The single most
   "we actually work in this climate" element on the site. */

.climate { position: relative; overflow: hidden; background: var(--harbour); color: #cfe0ec; }
.climate::before {
  content: ""; position: absolute; inset: -30% -5%;
  background: url("/assets/contours-dark.svg?v=7ebd11ea26") center / cover no-repeat;
  opacity: .4; pointer-events: none;
}
.climate__in { position: relative; z-index: 2; padding: clamp(2rem, 4.5vw, 3rem) 20px; }
.climate__h { color: #fff; margin-bottom: .32em; }
.climate__lede { color: #a6c3dd; max-width: 66ch; margin-bottom: 1.8rem; }
.climate__grid { display: grid; gap: 1.4rem 2rem; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); }
.climate__stat { border-top: 2px solid rgba(140, 194, 220, .3); padding-top: .85rem; }
.climate__fig {
  font-family: var(--display); font-size: clamp(1.9rem, 4.4vw, 2.6rem);
  font-weight: 700; color: var(--ice); line-height: 1; margin: 0 0 .3rem;
  font-variant-numeric: tabular-nums;
}
.climate__lbl {
  font-size: .73rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .11em; color: #fff; margin: 0 0 .35rem;
}
.climate__note { font-size: .855rem; color: #9db6c8; margin: 0; }

/* ======================================================= areas === */

.areas__tier, .areas__state { margin: 0 0 clamp(2.2rem, 4.5vw, 3rem); }
.areas__tier-h, .areas__state-h { margin-bottom: .4em; }
.areas__count {
  font-family: var(--body); font-size: .73rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--taconite-dk); background: var(--taconite-lt);
  padding: .24rem .64rem; border-radius: 100px;
  vertical-align: middle; margin-left: .5rem; white-space: nowrap;
}
.areas__tier-p, .areas__state-p { color: var(--ink-2); max-width: 76ch; }
.areas__counties { font-size: .87rem; color: var(--ink-3); }
.areas__grid {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: grid; gap: .55rem; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
}
.areas__item > a {
  display: flex; flex-direction: column; gap: .14rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: .7rem .88rem; text-decoration: none;
  transition: border-color .14s, box-shadow .14s, transform .1s;
}
.areas__item > a:hover { border-color: var(--steel); box-shadow: var(--sh); transform: translateY(-1px); }
.areas__name { font-family: var(--display); font-size: 1.1rem; font-weight: 700; color: var(--lake); }
.areas__item > a:hover .areas__name { color: var(--taconite-dk); }
.areas__meta { font-size: .765rem; color: var(--ink-3); }

/* ======================================================= cross === */

.cross { position: relative; overflow: hidden; background: var(--lake); color: #fff; }
.cross::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 76px;
  background: url("/assets/pines.svg?v=b0ffcf2826") left bottom / auto 100% repeat-x;
  opacity: .12; pointer-events: none;
}
.cross__in {
  position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto;
  padding: clamp(2rem, 4.5vw, 3rem) 20px clamp(3.4rem, 6vw, 4.2rem);
}
.cross__eyebrow {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .15em; color: var(--ice); margin: 0 0 .55rem;
}
.cross__h { color: #fff; margin-bottom: .45em; max-width: 26ch; }
.cross__p { color: #bed2df; max-width: 70ch; margin-bottom: 1.4rem; }

/* ========================================================= cta === */

.cta {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(140deg, var(--taconite) 0%, var(--taconite-dk) 100%);
}
.cta::after {
  content: ""; position: absolute; right: -6%; top: -60%;
  width: 46%; height: 260%;
  background: url("/assets/contours-light.svg?v=b4452574a5") center / cover no-repeat;
  opacity: .14; pointer-events: none;
}
.cta__in {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
  align-items: center; justify-content: space-between;
  padding: clamp(2rem, 4.5vw, 2.9rem) 20px;
}
.cta__text { flex: 1 1 380px; }
.cta__h { color: #fff; margin-bottom: .3em; }
.cta__p { color: #fbe2d6; margin: 0; max-width: 60ch; font-size: 1.02rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.cta .btn--primary { background: #fff; color: var(--taconite-dk); border-color: #fff; }
.cta .btn--primary:hover { background: var(--lake); color: #fff; border-color: var(--lake); }
.cta .btn--outline { color: #fff; border-color: rgba(255,255,255,.65); }
.cta .btn--outline:hover { background: #fff; color: var(--taconite-dk); border-color: #fff; }

/* ====================================================== deeper === */

.deeper {
  background: var(--birch-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.3rem, 2.8vw, 1.85rem);
  margin: 0 0 clamp(2rem, 4vw, 2.8rem);
}
.deeper__h { margin-bottom: .4em; }
.deeper p { color: var(--ink-2); max-width: 70ch; }

/* ======================================================= howto === */

.howto { margin: clamp(1.8rem, 3.5vw, 2.4rem) 0; }
.howto__h { margin-bottom: 1em; }
.howto__list { counter-reset: s; list-style: none; margin: 0; padding: 0; }
.howto__step {
  counter-increment: s; position: relative;
  padding: .1rem 0 1.5rem 3.5rem; margin: 0;
  border-left: 2px solid var(--line);
}
.howto__step:last-child { border-left-color: transparent; padding-bottom: 0; }
.howto__step::before {
  content: counter(s);
  position: absolute; left: -1.1rem; top: 0;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--taconite); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 1.12rem;
  display: flex; align-items: center; justify-content: center;
}
.howto__step-h { font-size: 1.17rem; margin-bottom: .28em; }
.howto__step p { color: var(--ink-2); margin: 0; max-width: 70ch; }

/* ======================================================== plans === */

.plans { padding: clamp(1.8rem, 4vw, 2.6rem) 0; }
.plans__grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.plans__card {
  background: var(--white); border: 1px solid var(--line);
  border-top: 4px solid var(--taconite);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.plans__h { margin-bottom: .22em; }
.plans__sub { color: var(--ink-3); font-size: .915rem; margin-bottom: 1.2rem; }
.plans__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .55rem; }
.plans__list li { position: relative; padding-left: 1.6rem; font-size: .945rem; color: var(--ink-2); }
.plans__list li::before {
  content: ""; position: absolute; left: .1rem; top: .45em;
  width: .95rem; height: .95rem; background: var(--steel);
  clip-path: polygon(14% 44%, 0 58%, 40% 100%, 100% 22%, 86% 8%, 38% 71%);
}

/* ======================================================= price === */

.price-head { padding: clamp(1.8rem, 4vw, 2.5rem) 0 0; }
.price-head__grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.price-head__card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.35rem 1.45rem;
}
.price-head__label {
  font-size: .725rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-3); margin: 0 0 .32rem;
}
.price-head__fig {
  font-family: var(--display); font-size: 2.3rem; font-weight: 700;
  color: var(--lake); line-height: 1; margin: 0 0 .58rem;
  font-variant-numeric: tabular-nums;
}
.price-head__note { font-size: .875rem; color: var(--ink-2); margin: 0; }

.price-t-wrap { padding: clamp(2rem, 4.5vw, 3rem) 0 0; overflow-x: auto; }
.price-t { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 620px; }
.price-t caption { text-align: left; color: var(--ink-3); font-size: .85rem; padding-bottom: .9rem; caption-side: top; }
.price-t th, .price-t td { text-align: left; padding: .82rem .9rem; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.price-t thead th {
  font-family: var(--body); font-size: .725rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); border-bottom: 2px solid var(--line);
}
.price-t tbody th { font-weight: 600; color: var(--lake); }
.price-t tbody tr:hover { background: var(--white); }
.price-t__fig {
  font-family: var(--display); font-size: 1.18rem; font-weight: 700;
  color: var(--taconite-dk); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.price-t td:last-child { color: var(--ink-2); font-size: .885rem; }

/* ===================================================== contact === */

.contact {
  display: grid; gap: 2.4rem;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .95fr);
  padding: clamp(2rem, 4.5vw, 3rem) 0;
}
.contact__h { margin-bottom: .3em; }
.contact__p { color: var(--ink-2); margin-bottom: 1.6rem; }

.form { display: grid; gap: 1.05rem; }
.form__row { display: grid; gap: .32rem; }
.form__grid { display: grid; gap: 1.05rem; grid-template-columns: 1fr 1fr; }
.form__label { font-size: .84rem; font-weight: 700; color: var(--lake); }
.form__label span { color: var(--taconite-dk); }
.form__input {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: .7rem .82rem; width: 100%;
}
.form__input:focus { border-color: var(--steel); }
.form__textarea { resize: vertical; min-height: 7.5rem; }
.form__row--check { display: flex; align-items: center; gap: .55rem; }
.form__check { width: 1.15rem; height: 1.15rem; accent-color: var(--taconite); flex: 0 0 auto; }
.form__check-label { font-size: .945rem; color: var(--ink-2); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__submit { justify-self: start; }
.form__note { font-size: .84rem; color: var(--ink-3); margin: 0; }
.form__status { font-size: .95rem; font-weight: 600; margin: 0; min-height: 1.4em; }
.form__status--ok { color: #1b6b3a; }
.form__status--err { color: #a5281c; }

.contact__side { display: grid; gap: 1rem; align-content: start; }
.contact__card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.15rem 1.3rem; }
.contact__card p { font-size: .925rem; color: var(--ink-2); margin: 0 0 .5rem; }
.contact__card p:last-child { margin-bottom: 0; }
.contact__card-label {
  font-size: .72rem !important; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-3) !important; margin-bottom: .45rem !important;
}
.contact__card-note { font-size: .85rem !important; color: var(--ink-3) !important; }
.contact__card--call { background: var(--lake); border-color: var(--lake); }
.contact__card--call .contact__card-label { color: var(--ice) !important; }
.contact__card--call p { color: #bed2df; }
.contact__card--call .contact__card-note { color: #9db6c8 !important; }
.contact__bignum {
  display: block; font-family: var(--display);
  font-size: clamp(1.9rem, 4.2vw, 2.35rem); font-weight: 700;
  color: #fff; text-decoration: none; line-height: 1.04; margin-bottom: .6rem;
}
.contact__bignum:hover { color: var(--ice); }
.contact__card--warn { background: #fff8e8; border-color: #efdcb0; }

/* ======================================================= legal === */

.legal h2 { font-size: 1.34rem; margin-top: 1.9em; }
.legal p, .legal li { color: var(--ink-2); }
.legal__date { font-size: .87rem; color: var(--ink-3); }
.legal__placeholder {
  background: #fff8e8; border: 1px solid #efdcb0;
  border-radius: var(--r); padding: 1rem 1.15rem; font-size: .9rem; margin-top: 2.5rem;
}

/* ========================================================== art === */

.art__meta { font-size: .85rem; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 1.1rem; margin-top: 1.5rem; }
.ty { padding: clamp(2.4rem, 5vw, 3.6rem) 0; }
.ty__lede { font-size: 1.14rem; color: var(--ink-2); }
.ty ul { color: var(--ink-2); }
.ty li { margin-bottom: .5rem; }

/* ======================================================= footer === */

.foot {
  position: relative; overflow: hidden;
  background: var(--lake); color: #a3bac9; font-size: .91rem;
  padding: clamp(2.4rem, 5vw, 3.4rem) 0 1.4rem;
}
.foot .wrap { position: relative; z-index: 2; }
.foot__top {
  display: grid; gap: 2.4rem;
  grid-template-columns: minmax(0, .85fr) minmax(0, 2.15fr);
  padding-bottom: 2.2rem; border-bottom: 1px solid rgba(255,255,255,.09);
}
.brand--foot .brand__name { color: #fff; }
.brand--foot .brand__sub { color: var(--ice); }
.foot__blurb { margin: 1rem 0; max-width: 40ch; }
.foot__nap { margin-bottom: 1rem; }
.foot__phone { font-family: var(--display); font-size: 1.62rem; font-weight: 700; color: #fff; text-decoration: none; }
.foot__phone:hover { color: var(--ice); }
.foot__nap a { color: var(--ice); }
.foot__hours, .foot__lic { font-size: .85rem; color: #859cad; }
.foot__hours strong, .foot__lic strong { color: #b3c7d4; }

.foot__cols { display: grid; gap: 1.6rem 1.8rem; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }
.foot__head {
  font-family: var(--display); font-size: 1.02rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: #fff; margin: 0 0 .7rem;
}
.foot__list { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .34rem; }
.foot__list a, .foot__inline a { color: #a3bac9; text-decoration: none; font-size: .875rem; }
.foot__list a:hover, .foot__inline a:hover { color: #fff; text-decoration: underline; }
.foot__more {
  font-size: .765rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--taconite); text-decoration: none;
}
.foot__more:hover { color: #fff; }

.foot__reading { padding: 1.6rem 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.foot__inline { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; list-style: none; margin: 0; padding: 0; }

.foot__bottom {
  display: flex; flex-wrap: wrap; gap: .6rem 1.8rem;
  align-items: center; justify-content: space-between;
  padding-top: 1.4rem; font-size: .83rem; color: #78909f;
}
.foot__bottom p { margin: 0; }
.foot__legal { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; list-style: none; margin: 0; padding: 0; }
.foot__legal a { color: #78909f; text-decoration: none; }
.foot__legal a:hover { color: #fff; }

/* ================================================= mobile call === */

.mobile-call { display: none; }

/* ==================================================== responsive === */

/* ---- below the desktop nav breakpoint: collapse to a drawer ---- */
@media (max-width: 1000px) {
  .hd__burger { display: flex; }
  .hd__quote { display: none; }

  /* The drawer OVERLAYS the page rather than pushing it down, and
     animates transform + opacity only.
   *
     The first version animated max-height from 0. That is a layout
     animation: every frame forced the browser to re-lay-out the whole
     page below the header — on a phone that is ~1000px of nav plus the
     entire homepage, recalculated 60 times a second. Transform and
     opacity are composited, so this costs no layout at all.
   *
     Overlaying is also the better behaviour. The old version shoved the
     hero down when the menu opened and yanked it back on close; an
     overlay leaves the page exactly where the reader left it, which is
     what a mobile nav is expected to do.
   *
     `.nav` is absolutely positioned out of flow, so `.hd` collapses to
     strip + bar and `top: 100%` lands precisely under the bar.
     `visibility` is in the transition so the links are not focusable
     while the drawer is shut, but they stay in the DOM for crawlers. */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 130;
    max-height: 78vh; overflow-y: auto;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-lg);
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: transform .22s ease, opacity .18s ease, visibility .22s;
  }
  .hd__cb:checked ~ .nav {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .nav__list { display: block; padding: .35rem 0 .9rem; }
  .nav__item { border-top: 1px solid var(--line-2); }
  .nav__item:first-child { border-top: 0; }
  .nav__item > a { padding: .86rem .2rem; font-size: 1.12rem; border-bottom: 0; }
  .nav__item > a[aria-current] { color: var(--taconite-dk); }
  .nav__caret { margin-left: auto; }

  /* Sub-panels stay expanded in the drawer. A nested disclosure would
     make a service page two taps away, and getting there in one tap is
     the entire point of this nav. */
  .nav__panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; max-width: none;
  }
  .nav__panel-in {
    border: 0; box-shadow: none; border-radius: 0;
    padding: 0 0 .7rem .2rem; background: transparent;
  }
  .nav__panel-h { display: none; }
  .nav__panel-list { grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
  .nav__panel-list a { padding: .42rem .3rem; font-size: .9rem; }
  .nav__panel-list li:nth-child(n+9) { display: none; }
  .nav__panel-all { border-top: 0; padding-top: .3rem; font-size: .88rem; }
}

/* Four climate stats in a three-column grid leaves one orphaned on its
   own row. Force a clean 2x2 below the width where three fit well. */
@media (max-width: 940px) {
  .climate__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .climate__grid { grid-template-columns: 1fr; }
}

@media (max-width: 1080px) {
  .contact { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  body { font-size: 16.5px; }
  .facts__row { grid-template-columns: 1fr; gap: .1rem; }
  .trust__list { grid-template-columns: 1fr; }
  .form__grid { grid-template-columns: 1fr; }
  .hd__strip-b { display: none; }

  .mobile-call {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    position: fixed; inset: auto 0 0 0; z-index: 200;
    background: var(--taconite); color: #fff;
    font-family: var(--display); font-size: 1.16rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    padding: .85rem 1rem; text-decoration: none;
    box-shadow: 0 -2px 16px rgba(11, 30, 59, .26);
  }
  .mobile-call:hover, .mobile-call:focus { background: var(--taconite-dk); color: #fff; }
  .foot { padding-bottom: 4.8rem; }
  .cta__in { flex-direction: column; align-items: stretch; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .cta__actions .btn, .hero__actions .btn { width: 100%; }

  /* ---------------------------------------------------------------- *
   * Get the answer above the fold.
   *
   * On a 375x812 phone the hero alone was 592px and the short answer
   * started at 788px — the one block written to be read first, and the
   * one the speakable schema points at, was entirely off-screen. Every
   * rule below buys vertical space back.
   * ---------------------------------------------------------------- */

  /* The phone number is already in the sticky bottom bar AND in the
     header on mobile. A third copy in the hero cost ~72px to say the
     same thing a thumb's width from where it already says it. */
  .hero__actions [data-cta="hero-phone"] { display: none; }

  .hero { padding-top: 1.7rem; padding-bottom: 3.1rem; }
  .hero__lede { margin-bottom: 1.15rem; font-size: 1.04rem; }
  /* The eyebrow is a pill on desktop, plain text here.
     A pill is a single-line device: these labels wrap to two lines on a
     phone, and a two-line pill with the rule floating in the top row
     reads as a rendering fault rather than a badge. Dropping the border
     and the background makes the same two lines look deliberate — and
     saves the vertical space the padding was eating. */
  .hero__eyebrow {
    display: block;
    font-size: .68rem; letter-spacing: .09em; line-height: 1.5;
    margin-bottom: .55rem; padding: 0;
    background: none; border: 0; border-radius: 0;
  }
  .hero__eyebrow::before { display: none; }
  .hero__badges { margin-top: 1.1rem; gap: .35rem; }
  .hero__badges li { font-size: .74rem; padding: .3rem .65rem; }

  /* The bridge is decoration; it does not get to push the content that
     ranks a third of the way down the screen. */
  .hero::after { height: 58px; opacity: .26; }

  /* ---------------------------------------------------------------- *
   * Touch targets.
   *
   * The link lists were all around 37px tall, which clears the WCAG 2.2
   * minimum but sits under the 44px both platform guidelines and
   * Lighthouse ask for — and these are lists of a dozen near-identical
   * town names, which is exactly where a thumb mis-taps. Padding, not
   * font size, so the type scale is untouched.
   * ---------------------------------------------------------------- */
  .nav__panel-list a,
  .lg__card > a {
    display: flex; align-items: center; min-height: 44px;
  }

  /* The breadcrumb is a wrapping INLINE list whose separators are
     ::before on each li. Making the links flex boxes with a min-height
     pulled the labels out of the inline flow and left the chevrons
     stranded on their own line — "Home › › › Furnace Installation"
     with the middle labels overlapping underneath. Padding grows the
     target without touching the layout. */
  .crumbs__list a { padding: .55rem 0; }
  .crumbs__list { padding: .2rem 0; }

  /* The footer is 74 links. At 44px each that is ~700px of extra scroll
     under every page on the site, which is a worse trade than it looks:
     a footer link farm is a low-consequence, deliberate-scroll context,
     not the primary navigation. 40px is still a comfortable target and
     well clear of the 24px accessibility floor. The nav drawer above
     keeps the full 44 — that IS the primary navigation, and it is a
     list of near-identical town names, which is where a thumb slips. */
  .foot__list a,
  .foot__legal a,
  .foot__inline a {
    display: flex; align-items: center; min-height: 40px;
  }

  /* Claw back the rest of the difference from the footer's own rhythm
     rather than from its links. */
  .foot__cols { gap: 1.2rem 1.6rem; }
  .foot__head { margin-bottom: .3rem; }
  .foot__list { margin-bottom: .3rem; }

  /* The town service index goes single-column. Two columns at this
     width gives each link ~150px, and "Furnace Installation in Cloquet"
     then wraps to three lines with the two columns' rules no longer
     lining up — unreadable, and it looked broken. */
  .svcx__grid { grid-template-columns: 1fr; gap: 1.3rem; }

  /* ---------------------------------------------------------------- *
   * The pricing table becomes one card per service.
   *
   * It has a 620px min-width, so on a 375px phone the pricing page --
   * the page people arrive on FROM a "how much does X cost" search --
   * could only be read by dragging it sideways. The <table> element
   * stays: this is genuinely tabular data, and the row/column
   * relationships still need to exist for assistive tech and for the
   * crawler. Only the visual box model changes, with each cell
   * labelled from its data-label.
   * ---------------------------------------------------------------- */
  .price-t-wrap { overflow-x: visible; }
  .price-t { min-width: 0; display: block; }
  .price-t thead { position: absolute; left: -9999px; }
  .price-t tbody, .price-t tr, .price-t th, .price-t td { display: block; }
  .price-t caption { display: block; }

  .price-t tbody tr {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: .9rem 1rem;
    margin-bottom: .8rem;
  }
  .price-t tbody th {
    padding: 0 0 .15rem;
    border-bottom: 0;
    font-family: var(--display);
    font-size: 1.22rem;
  }
  .price-t tbody th a { text-decoration: none; }
  .price-t td { padding: 0; border-bottom: 0; }
  .price-t__fig { margin-bottom: .5rem; }
  .price-t td:last-child::before {
    content: attr(data-label);
    display: block;
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--ink-3);
    margin-bottom: .1rem;
  }
  .pills__list a { padding-top: .6rem; padding-bottom: .6rem; }
  .hd__burger { min-height: 44px; min-width: 44px; }

  /* The trailing "See all →" links were 19-28px — the smallest targets
     on the page, on the link that opens a whole section. */
  .lg__all, .pills__all, .nav__panel-all, .foot__more {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  /* ---------------------------------------------------------------- *
   * The footer was 2,063px on a phone — two and a half screens of
   * chrome under every page, and the two long town lists were the bulk
   * of it. Every link stays (the footer is what guarantees all 66 city
   * pages are two clicks from anywhere); the long lists just stop
   * running single file.
   *
   * Note .foot__cols is deliberately NOT overridden here: its auto-fit
   * already gives two columns of sections at this width, and forcing it
   * to one made the footer 2,605px — worse than the problem.
   * ---------------------------------------------------------------- */
  .foot__list--dense {
    grid-template-columns: 1fr 1fr;
    gap: 0 .9rem;
  }
  .foot__list--dense a { font-size: .845rem; }
  .foot__col { min-width: 0; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .hd__strip-in { padding-left: 16px; padding-right: 16px; }
  .answer-box__in { padding-left: 16px; padding-right: 16px; }
  .answer-box__q { max-width: none; }
  /* The strip wrapped to two lines here. The licence claim is the least
     urgent of the three and it is repeated in the footer and the
     JSON-LD, so it is the one that goes. */
  .hd__strip-lic { display: none; }
  .hd__call-lbl { display: none; }
  .hd__call-num { font-size: 1.18rem; }
  .brand__name { font-size: 1.3rem; }
  .brand__sub { font-size: .645rem; letter-spacing: .11em; }
  .lg__grid, .areas__grid, .signs__list { grid-template-columns: 1fr; }
  .price-head__grid, .plans__grid, .why__grid { grid-template-columns: 1fr; }
}

/* Very narrow: drop the tagline and the "Menu" word, but keep the
   wordmark — a header with no business name on a 375px phone (the most
   common width there is) was the wrong trade. */
@media (max-width: 420px) {
  .brand__sub { display: none; }
  .hd__burger-txt { display: none; }
}
@media (max-width: 340px) {
  .brand__text { display: none; }
}

/* ========================================================= print === */

@media print {
  .hd__strip, .nav, .hd__call, .hd__quote, .hd__burger,
  .cta, .cross, .mobile-call, .foot__cols, .foot__reading, .crumbs { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .hero { background: #fff !important; color: #000; padding: 0 0 1rem; }
  .hero::before, .hero::after { display: none; }
  .hero__h1, .hero__lede, .hero__eyebrow, .hero__note { color: #000 !important; }
  .foot { background: #fff; color: #000; }
  a { text-decoration: underline; color: #000; }
  .faq__item { break-inside: avoid; }
  .faq__a { display: block !important; }
  .answer-box { background: #fff !important; border: 1px solid #999; }
  .pb::before, .truths::before, .climate::before, .cta::after { display: none; }
}