/* =========================================================================
   Burke Heat Pump Co — site.css
   Static, self-contained. No webfonts, no external requests, no JS.
   Data URIs below are inline SVG, not network requests.
   Mobile-first: base rules target ~390px; min-width queries scale up.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --navy:#0B1B2B;
  --navy-2:#13283D;
  --navy-3:#1C3550;
  --ink:#14202C;
  --slate:#5B6470;
  --slate-on-navy:#B9C4D0;
  --accent:#E4572E;
  --accent-hover:#EE6B44;
  --accent-ink:#0B1B2B;          /* navy on orange = 4.73:1; white on orange fails */
  --link:#14456B;
  --bg:#FFFFFF;
  --soft:#F3F5F7;
  --soft-2:#E9EDF1;
  --line:#DDE2E7;                /* referenced by inline styles in the price table */
  --line-strong:#C3CBD3;
  --focus:#0B1B2B;
  --radius:10px;
  --radius-sm:6px;
  --hdr-h:60px;
  --bar-h:56px;
  --gutter:20px;
  --measure:68ch;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --phone-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
  --check-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --chev-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  color-scheme:light;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:calc(var(--hdr-h) + 16px);
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  padding-bottom:var(--bar-h);           /* room for the fixed mobile call bar */
  overflow-wrap:break-word;
}
img,svg{max-width:100%;height:auto;display:block}
p{margin:0 0 1em}
strong{font-weight:700;color:var(--navy)}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus{outline:none}
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:4px;
}
::selection{background:#CFE0EE;color:var(--navy)}

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

/* ---------- 3. Type scale ---------- */
h1,h2,h3{color:var(--navy);font-weight:750;text-wrap:balance}
h1{
  font-size:34px;
  line-height:1.08;
  letter-spacing:-.028em;
  margin:0 0 16px;
}
h2{
  font-size:26px;
  line-height:1.18;
  letter-spacing:-.02em;
  margin:0 0 18px;
}
h3{
  font-size:18px;
  line-height:1.3;
  letter-spacing:-.01em;
  margin:0 0 6px;
}

/* ---------- 4. Header ---------- */
header{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--navy);
  color:#fff;
  border-bottom:1px solid var(--navy-3);
}
.hdr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:var(--hdr-h);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  font-weight:750;
  letter-spacing:-.01em;
  color:#fff;
  line-height:1.2;
}
.brand::before{                          /* geometric fan mark; decorative, not a claim */
  content:"";
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:7px;
  background:var(--navy-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5' stroke-opacity='.45'/%3E%3Cpath d='M12 12c0-3 1.2-5 3.4-5.2M12 12c2.6 1.5 3.7 3.6 2.5 5.4M12 12c-2.6 1.5-4.9 1.4-5.9-.6'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E") center/20px 20px no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}

/* ---------- 5. Call buttons (the only orange in the UI) ---------- */
.call,
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--accent);
  color:var(--accent-ink);
  font-weight:750;
  text-decoration:none;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.005em;
  white-space:nowrap;
  border:0;
}
.call::before,
.btn-primary::before{
  content:"";
  flex:0 0 18px;
  width:18px;
  height:18px;
  background:currentColor;
  -webkit-mask:var(--phone-icon) center/contain no-repeat;
  mask:var(--phone-icon) center/contain no-repeat;
}
.call:hover,
.btn-primary:hover{background:var(--accent-hover);text-decoration:none}
.call:active,
.btn-primary:active{transform:translateY(1px)}

/* Mobile: the header call button becomes a full-width fixed bottom bar.
   No markup change needed; one tap from anywhere on the page. */
.call{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  height:calc(var(--bar-h) + env(safe-area-inset-bottom,0px));
  padding:0 20px env(safe-area-inset-bottom,0px);
  font-size:19px;
  border-radius:0;
  box-shadow:0 -1px 0 rgba(11,27,43,.25),0 -8px 24px rgba(11,27,43,.18);
}
.call:focus-visible{outline-offset:-6px;outline-color:var(--navy)}

/* ---------- 6. Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:14px 22px;
  border-radius:var(--radius-sm);
  font-size:17px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  text-align:center;
}
.btn-primary{min-height:56px;font-size:19px;padding:14px 24px}
.btn-ghost{
  background:transparent;
  color:var(--navy);
  box-shadow:inset 0 0 0 1.5px var(--line-strong);
}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--navy);text-decoration:none}
.cta-row{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:24px;
}
.cta-row .btn{width:100%}

/* ---------- 7. Hero ---------- */
/* Base: a navy panel inside .wrap (works in every browser).
   With :has(), the wrapping .wrap goes full-bleed (see section 7b). */
.hero{
  position:relative;
  isolation:isolate;
  margin:0 calc(var(--gutter) * -1);
  padding:36px var(--gutter) 32px;
  color:var(--slate-on-navy);
  background-color:var(--navy);
  background-image:
    radial-gradient(120% 90% at 100% 0%,rgba(84,140,190,.22) 0%,rgba(84,140,190,0) 60%),
    radial-gradient(80% 70% at 0% 100%,rgba(28,53,80,.9) 0%,rgba(28,53,80,0) 70%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:auto,auto,32px 32px,32px 32px;
  background-position:0 0,0 0,-1px -1px,-1px -1px;
}
.hero::after{                            /* fine cold-air flow lines, bottom right; decorative only */
  content:"";
  position:absolute;
  z-index:-1;
  right:0;
  bottom:0;
  width:min(520px,70%);
  height:100%;
  pointer-events:none;
  opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 300' fill='none' stroke='%23ffffff' stroke-opacity='.10' stroke-width='1.25'%3E%3Cpath d='M0 260c80 0 120-40 200-40s120 40 200 40 90-30 120-30'/%3E%3Cpath d='M0 230c80 0 120-40 200-40s120 40 200 40 90-30 120-30'/%3E%3Cpath d='M0 200c80 0 120-40 200-40s120 40 200 40 90-30 120-30'/%3E%3Cpath d='M0 170c80 0 120-40 200-40s120 40 200 40 90-30 120-30'/%3E%3Cpath d='M0 140c80 0 120-40 200-40s120 40 200 40 90-30 120-30'/%3E%3C/svg%3E") right bottom/100% auto no-repeat;
}
.hero h1{color:#fff;max-width:20ch}
.hero p{
  font-size:18px;
  line-height:1.55;
  color:var(--slate-on-navy);
  max-width:60ch;
  margin:0;
}
.hero .btn-ghost{
  color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);
}
.hero .btn-ghost:hover{box-shadow:inset 0 0 0 2px #fff}
.hero :focus-visible{outline-color:#fff}

/* 7b. Full-bleed hero where :has() is supported */
.wrap:has(> .hero){
  max-width:none;
  padding:0;
  background-color:var(--navy);
}
.wrap:has(> .hero) > .hero{
  margin:0;
  padding-left:max(var(--gutter),calc((100% - 1160px) / 2 + var(--gutter)));
  padding-right:max(var(--gutter),calc((100% - 1160px) / 2 + var(--gutter)));
}

/* ---------- 8. Trust strip (markup edit 1) ---------- */
.trust{
  background:var(--navy-2);
  border-top:1px solid rgba(255,255,255,.08);
  color:#fff;
}
.trust ul{
  list-style:none;
  margin:0 auto;
  max-width:1160px;
  padding:14px var(--gutter);
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.trust li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:600;
  line-height:1.35;
  color:#fff;
}
.trust li::before{
  content:"";
  flex:0 0 18px;
  width:18px;
  height:18px;
  background:#8FB8DA;
  -webkit-mask:var(--check-icon) center/contain no-repeat;
  mask:var(--check-icon) center/contain no-repeat;
}

/* ---------- 9. On-page navigation for long pages (markup edit 4) ---------- */
.toc{
  border-bottom:1px solid var(--line);
  background:#fff;
}
.toc ol{
  list-style:none;
  margin:0 auto;
  max-width:1160px;
  padding:10px var(--gutter);
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.toc li{flex:0 0 auto;scroll-snap-align:start}
.toc a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 14px;
  border-radius:999px;
  background:var(--soft);
  color:var(--navy);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.toc a:hover{background:var(--soft-2)}
.toc-label{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* ---------- 10. Sections and long-form rhythm ---------- */
section{
  padding:48px 0;
  border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--hdr-h) + 8px);
}
main > .wrap + section,
.trust + section,
.toc + section{border-top:0}

section .wrap > p,
section .wrap > ul,
section .wrap > ol,
section .wrap > dl,
section .wrap > details{max-width:var(--measure)}

section h2{position:relative;padding-top:14px}
section h2::before{                      /* short navy rule above every H2: a landing point for the eye */
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:32px;
  height:3px;
  border-radius:2px;
  background:var(--navy);
}

/* Paragraphs that open with a bold label (installation, seasonal timing) */
section .wrap > p > strong:first-child{display:block;margin-bottom:2px;font-size:17px}

/* Lead paragraph directly after a heading reads slightly larger */
section h2 + p{font-size:18px;color:var(--ink)}

/* ---------- 11. Service cards ---------- */
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:8px;
}
.card{
  position:relative;
  padding:20px 20px 20px 22px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.card::before{                           /* navy spine, gives each card a clear edge without color noise */
  content:"";
  position:absolute;
  left:-1px;
  top:18px;
  bottom:18px;
  width:3px;
  border-radius:0 2px 2px 0;
  background:var(--navy);
}
.card h3{font-size:19px}
.card p{margin:0;color:var(--slate);font-size:16px;line-height:1.55}
.card:first-child{                       /* core service gets the heavy treatment */
  background:var(--navy);
  border-color:var(--navy);
}
.card:first-child::before{background:#8FB8DA}
.card:first-child h3{color:#fff}
.card:first-child p{color:var(--slate-on-navy)}

/* ---------- 12. Lists ---------- */
ul.clean{
  list-style:none;
  padding:0;
  margin:8px 0 20px;
  border-top:1px solid var(--line);
}
ul.clean li{
  position:relative;
  padding:16px 0 16px 30px;
  border-bottom:1px solid var(--line);
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
}
ul.clean li::before{
  content:"";
  position:absolute;
  left:0;
  top:20px;
  width:16px;
  height:16px;
  background:var(--navy);
  -webkit-mask:var(--check-icon) center/contain no-repeat;
  mask:var(--check-icon) center/contain no-repeat;
}
ul.clean li > strong:first-child{display:block;margin-bottom:2px;font-size:17px;line-height:1.4}

/* ---------- 13. Price table ---------- */
/* Inline styles in the generated table set padding and alignment; the
   !important flags here are deliberate and only override those. */
section:has(table){background:var(--soft)}
section table{
  width:100% !important;
  margin:20px 0 24px !important;
  border-collapse:separate !important;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  font-variant-numeric:tabular-nums lining-nums;
  max-width:820px;
}
section table tr{border:0 !important}
section table th,
section table td{
  padding:14px 12px !important;
  border-bottom:1px solid var(--line);
  vertical-align:baseline;
}
section table tr:last-child td{border-bottom:0}
section table th{
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--slate);
  background:var(--soft);
}
section table th:last-child{text-align:right !important}
section table td:first-child{
  font-size:16px;
  line-height:1.4;
  color:var(--ink);
}
section table td:last-child{
  text-align:right;
  font-size:18px;
  font-weight:750;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--navy);
  white-space:nowrap;
}
/* The diagnostic row (always first data row): the page's one accent emphasis */
section table tr:nth-child(2) td{background:#FFF6F2}
section table tr:nth-child(2) td:first-child{box-shadow:inset 4px 0 0 var(--accent);font-weight:700;color:var(--navy)}
section table tr:nth-child(2) td:last-child{font-size:16px;font-weight:700;white-space:normal;min-width:9.5em}

/* ---------- 14. FAQ ---------- */
/* Current markup: <dl class="faq"><dt><dd>. Also styles <details> (markup edit 3). */
.faq{margin:8px 0 0;border-top:1px solid var(--line)}
.faq dt{
  margin:0;
  padding:18px 0 4px;
  font-size:18px;
  font-weight:700;
  line-height:1.35;
  color:var(--navy);
}
.faq dd{
  margin:0;
  padding:0 0 18px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:56px;
  padding:14px 0;
  font-size:18px;
  font-weight:700;
  line-height:1.35;
  color:var(--navy);
  cursor:pointer;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";
  flex:0 0 20px;
  width:20px;
  height:20px;
  background:var(--slate);
  -webkit-mask:var(--chev-icon) center/contain no-repeat;
  mask:var(--chev-icon) center/contain no-repeat;
  transition:transform .15s ease;
}
.faq details[open] > summary::after{transform:rotate(180deg)}
.faq details > p{margin:0;padding:0 0 18px}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* ---------- 15. Closing CTA band ("Book a visit", and markup edit 5) ---------- */
section:has(> .wrap > .cta-row),
.cta-band{
  background:var(--navy);
  border-top:0;
  color:var(--slate-on-navy);
}
section:has(> .wrap > .cta-row) h2,
.cta-band h2{color:#fff}
section:has(> .wrap > .cta-row) h2::before,
.cta-band h2::before{background:#8FB8DA}
section:has(> .wrap > .cta-row) p,
.cta-band p{color:var(--slate-on-navy)}
section:has(> .wrap > .cta-row) strong,
.cta-band strong{color:#fff}
section:has(> .wrap > .cta-row) :focus-visible,
.cta-band :focus-visible{outline-color:#fff}
.cta-inline{margin:4px 0 28px}           /* repeated call button after the price table (markup edit 5) */
.cta-inline .btn{width:100%}

/* ---------- 16. Footer and lead form ---------- */
footer{
  background:var(--navy);
  color:var(--slate-on-navy);
  padding:40px 0 32px;
  font-size:15px;
  line-height:1.7;
}
footer p{margin:0 0 14px}
footer strong{color:#fff}
footer a{
  color:#fff;
  text-decoration-color:rgba(255,255,255,.35);
  display:inline-block;
  padding:8px 0;                         /* 44px-ish tap rows on mobile */
}
footer a:hover{text-decoration-color:#fff}
footer :focus-visible{outline-color:#fff}

.lead{
  margin:0 0 36px;
  padding:22px 20px;
  background:#fff;
  border-radius:var(--radius);
  color:var(--ink);
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.25);
}
.lead :focus-visible{outline-color:var(--navy)}
.lead h3{margin:0 0 14px;font-size:20px;color:var(--navy)}
.lead label{
  display:block;
  margin:0 0 4px;
  font-size:14px;
  font-weight:600;
  color:var(--navy);
}
.lead-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
}
.lead-row:last-child{margin-bottom:0}
.lead-field{flex:1 1 160px;min-width:0}
.lead-field > input,
.lead-field > select{margin-top:4px}
.lead-row button{align-self:flex-end}
.lead input,
.lead select{
  flex:1 1 160px;
  width:100%;
  min-width:0;
  min-height:48px;
  padding:11px 12px;
  border:1.5px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:16px;                        /* 16px prevents iOS zoom on focus */
  line-height:1.3;
}
.lead select{
  -webkit-appearance:none;
  appearance:none;
  padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),linear-gradient(135deg,var(--slate) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.lead input::placeholder{color:#6B7480;opacity:1}   /* 4.6:1 on white */
.lead input:focus,
.lead select:focus{border-color:var(--navy)}
.lead input:focus-visible,
.lead select:focus-visible{outline:3px solid var(--navy);outline-offset:1px}
.lead button{
  flex:1 1 100%;
  min-height:52px;
  padding:12px 20px;
  border:0;
  border-radius:var(--radius-sm);
  background:var(--navy);
  color:#fff;
  font:inherit;
  font-size:17px;
  font-weight:700;
  cursor:pointer;
}
.lead button:hover{background:var(--navy-3)}

/* ---------- 17. Tablet: 600px+ ---------- */
@media (min-width:600px){
  :root{--gutter:28px}
  h1{font-size:44px}
  h2{font-size:30px}
  .cta-row{flex-direction:row;flex-wrap:wrap}
  .cta-row .btn{width:auto}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .trust ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
  .cta-inline .btn{width:auto}
  .lead{padding:26px 26px}
  .lead button{flex:0 0 auto}
}

/* ---------- 18. Desktop: 900px+ ---------- */
@media (min-width:900px){
  :root{--hdr-h:68px;--bar-h:0px}
  body{font-size:18px;padding-bottom:0}
  h1{font-size:56px;letter-spacing:-.032em}
  h2{font-size:32px}

  /* Call returns to the header, top right */
  .call{
    position:static;
    height:auto;
    min-height:46px;
    padding:0 18px;
    border-radius:var(--radius-sm);
    font-size:17px;
    box-shadow:none;
  }
  .call:focus-visible{outline-color:#fff;outline-offset:3px}
  .brand{font-size:19px}

  .hero{padding-top:72px;padding-bottom:64px}
  .hero p{font-size:20px}

  .trust ul{grid-template-columns:repeat(4,minmax(0,1fr));padding-top:16px;padding-bottom:16px}

  /* Sticky on-page nav under the header on long pages */
  .toc{position:sticky;top:var(--hdr-h);z-index:30;box-shadow:0 1px 0 var(--line)}
  html:has(.toc){scroll-padding-top:calc(var(--hdr-h) + 80px)}
  html:has(.toc) section{scroll-margin-top:calc(var(--hdr-h) + 72px)}

  section{padding:72px 0}

  /* Two-column long-form: heading pinned left while its section scrolls.
     This is what makes a 4,200-word page navigable without JS. */
  section > .wrap{
    display:grid;
    grid-template-columns:minmax(0,300px) minmax(0,1fr);
    column-gap:64px;
    align-items:start;
  }
  section > .wrap > *{grid-column:2}
  section > .wrap > h2{
    grid-column:1;
    grid-row:1 / span 60;
    position:sticky;
    top:calc(var(--hdr-h) + 28px);
    margin:0;
    font-size:28px;
  }
  html:has(.toc) section > .wrap > h2{top:calc(var(--hdr-h) + 92px)}
  section > .wrap > :nth-child(2){margin-top:0}
  section h2 + p{font-size:19px}

  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .card{padding:24px 24px 24px 26px}

  section table{margin-top:4px !important}
  section table th,
  section table td{padding:16px 22px !important}
  section table td:last-child{font-size:21px}

  /* Closing CTA band stays single column and centred on its own weight */
  section:has(> .wrap > .cta-row) > .wrap,
  .cta-band > .wrap{display:block}
  section:has(> .wrap > .cta-row) h2,
  .cta-band h2{position:relative;top:auto;font-size:34px;margin-bottom:14px}
  section:has(> .wrap > .cta-row) .cta-row{margin-top:24px}

  footer{padding:56px 0 40px}
  footer a{padding:2px 0}
  .lead{padding:28px 30px}
}

/* ---------- 19. Wide: 1200px+ ---------- */
@media (min-width:1200px){
  h1{font-size:62px}
  section > .wrap{grid-template-columns:minmax(0,320px) minmax(0,1fr);column-gap:80px}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- 20. Print ---------- */
@media print{
  header,.call,.toc,.lead,.cta-inline,.cta-row{display:none !important}
  body{padding:0;font-size:12pt;color:#000}
  .hero,.wrap:has(> .hero),section,footer{background:none !important;color:#000 !important}
  .hero h1,.hero p,h2,footer a{color:#000 !important}
  section > .wrap{display:block !important}
  a[href^="tel:"]::after{content:" (" attr(href) ")"}
}


/* =========================================================================
   Springfield Heat Pump Co — brand theme
   Appended after site.css. Colours and type follow the November 2026 brand
   kit: Spruce primary, Brass accent, Iron text, Bone light ground.
   Layout, spacing, and responsive behaviour stay in site.css.
   ========================================================================= */

@font-face{
  font-family:"Barlow";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/Barlow-Regular.ttf") format("truetype");
}
@font-face{
  font-family:"Barlow";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/assets/Barlow-SemiBold.ttf") format("truetype");
}
@font-face{
  font-family:"Barlow";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/assets/Barlow-Bold.ttf") format("truetype");
}
@font-face{
  font-family:"Barlow Condensed";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/assets/BarlowCondensed-Bold.ttf") format("truetype");
}
@font-face{
  font-family:"Barlow Condensed";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("/assets/BarlowCondensed-ExtraBold.ttf") format("truetype");
}

:root{
  --spruce:#1F3A2E;
  --brass:#C9A24E;
  --iron:#16191A;
  --bone:#EFEADF;
  --sage:#8DA596;
  --steel:#5C6663;
  --paper:#F7F4EE;

  /* Remap the shared tokens onto the Springfield palette. */
  --navy:var(--spruce);
  --navy-2:#254736;
  --navy-3:#2E5744;
  --ink:var(--iron);
  --slate:var(--steel);
  --slate-on-navy:#DDD6C8;
  --accent:var(--brass);
  --accent-hover:#D8B366;
  --accent-ink:var(--iron);
  --link:#24513E;
  --bg:#FFFFFF;
  --soft:var(--paper);
  --soft-2:#EDE6D8;
  --line:#DFD6C7;
  --line-strong:#C9BEA9;
  --focus:var(--iron);
  --font:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Barlow Condensed","Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body{font-family:var(--font)}

/* Condensed signage type for every heading. */
h1,h2,h3{
  font-family:var(--display);
  text-transform:uppercase;
  font-weight:800;
  color:var(--iron);
}
h1{letter-spacing:.008em;line-height:1.02}
h2{letter-spacing:.012em;line-height:1.02}
h3{font-weight:700;letter-spacing:.02em;line-height:1.12}

strong{color:var(--spruce)}
::selection{background:#DCE6DF;color:var(--spruce)}

/* Header: Spruce field, the reversed horizontal logo, a Brass hairline. */
header{
  background:var(--spruce);
  border-bottom:0;
  box-shadow:inset 0 -1px 0 rgba(201,162,78,.6);
}
.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  min-height:44px;
  min-width:44px;
}
.brand::before{display:none}
.brand img{width:auto}
.brand .logo-full{display:none}
.brand .logo-mark{display:block;height:38px}
.brand:focus-visible{outline-color:var(--brass)}

/* Hero: Spruce with a Brass glow instead of the shared blue gradients. */
.hero{
  background-color:var(--spruce);
  background-image:
    radial-gradient(100% 85% at 100% 0%,rgba(201,162,78,.20) 0%,rgba(201,162,78,0) 62%),
    radial-gradient(85% 75% at 0% 100%,rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 72%),
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:auto,auto,32px 32px,32px 32px;
  background-position:0 0,0 0,-1px -1px,-1px -1px;
}
.wrap:has(> .hero){background-color:var(--spruce)}
.hero h1{color:#fff;letter-spacing:.008em}
.hero p{color:var(--slate-on-navy)}
.hero .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(239,234,223,.5)}
.hero .btn-ghost:hover{box-shadow:inset 0 0 0 2px #fff}

/* Trust strip: a darker Spruce band with Brass checks. */
.trust{background:var(--navy-2)}
.trust li::before{background:var(--brass)}

/* Section rules and the opening H2 tick are Brass. */
section h2::before{background:var(--brass);width:40px;height:3px}
section h2{color:var(--iron)}

/* Cards: Spruce spine, and the first card becomes the dark feature card. */
.card{border-radius:var(--radius)}
.card::before{background:var(--spruce);width:3px}
.card h3{font-family:var(--display);font-size:22px;letter-spacing:.02em}
.card:first-child{background:var(--spruce);border-color:var(--spruce)}
.card:first-child::before{background:var(--brass)}
.card:first-child p{color:var(--slate-on-navy)}

/* TOC pills: warm Bone. */
.toc a{color:var(--spruce)}
.toc a:hover{background:var(--soft-2)}

/* Diagnostic row: a warm Brass tint instead of the shared coral tint. */
section table tr:nth-child(2) td{background:#FBF6EA}
section table tr:nth-child(2) td:first-child{box-shadow:inset 4px 0 0 var(--brass)}
section table td:last-child{color:var(--spruce)}

/* CTA band and footer: dark Spruce. */
section:has(> .wrap > .cta-row),
.cta-band{background:var(--spruce)}
section:has(> .wrap > .cta-row) h2::before,
.cta-band h2::before{background:var(--brass)}
footer{background:var(--spruce)}
footer a{text-decoration-color:rgba(201,162,78,.5)}
footer a:hover{text-decoration-color:var(--brass)}
footer .brand-address{color:var(--slate-on-navy)}
.lead button{background:var(--spruce)}
.lead button:hover{background:var(--navy-3)}

/* Call and primary buttons: Brass with Iron text, the brand's accent rule. */
.call,
.btn-primary{background:var(--brass);color:var(--iron)}
.call:hover,
.btn-primary:hover{background:var(--accent-hover)}
.call:focus-visible{outline-color:var(--iron)}
.btn-ghost{color:var(--spruce);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--spruce)}

/* A slightly tighter display rhythm on phones. */
@media (max-width:899px){
  footer a{display:inline;padding:13px 0}
}
@media (max-width:599px){
  h1{line-height:.98}
  h2{line-height:1}
}
@media (min-width:900px){
  :root{--hdr-h:76px}
  .brand .logo-full{display:block;height:56px}
  .brand .logo-mark{display:none}
}