:root{
    --navy:#0d2340;
    --navy-2:#143257;
    --navy-3:#1d4373;
    --orange:#f26a1b;
    --orange-dk:#d4550c;
    --ink:#1b2430;
    --muted:#5a6675;
    --line:#dfe4ea;
    --bg:#f4f6f9;
    --card:#ffffff;
    --good:#1e7a4b;
    --radius:10px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:17px;
    line-height:1.6;
  }
  .wrap{max-width:1080px;margin:0 auto;padding:0 20px}
  .wrap-narrow{max-width:760px;margin:0 auto;padding:0 20px}
  a{color:var(--navy-3)}
  h2{color:var(--navy);line-height:1.25}
  .eyebrow{
    font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--orange);font-weight:700;margin:0 0 10px;
  }
  .section{padding:56px 0}
  .section h2{font-size:1.7rem;margin:0 0 8px}
  .section .lede{margin:0 0 32px;color:var(--muted);max-width:62ch;font-size:1.02rem}

  /* ---------- topbar ---------- */
  .topbar{background:var(--navy);color:#fff}
  .topbar .wrap{
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap;
  }
  .logo{font-weight:800;font-size:1.12rem;color:#fff;text-decoration:none;letter-spacing:-.01em}
  .logo span{color:var(--orange)}
  .topnav{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
  .topnav a{color:#cfdcec;text-decoration:none;font-size:.95rem}
  .topnav a:hover{color:#fff;text-decoration:underline}
  .phonebtn{
    background:var(--orange);color:#fff;text-decoration:none;font-weight:700;
    padding:9px 16px;border-radius:var(--radius);white-space:nowrap;font-size:.98rem;
  }
  .phonebtn:hover{background:var(--orange-dk)}

  /* ---------- hero ---------- */
  .hero{background:var(--navy);color:#fff;padding:44px 0 52px}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
  .hero h1{margin:0 0 16px;font-size:2.3rem;line-height:1.18;letter-spacing:-.015em}
  .hero p.sub{margin:0 0 22px;color:#cfdcec;font-size:1.1rem;max-width:46ch}
  .hero ul{margin:0 0 26px;padding:0;list-style:none}
  .hero ul li{
    position:relative;padding-left:26px;margin-bottom:9px;color:#e3ecf6;font-size:1rem;
  }
  .hero ul li::before{
    content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
    background:var(--orange);border-radius:2px;
  }
  .hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  .btn-primary{
    display:inline-block;background:var(--orange);color:#fff;text-decoration:none;
    font-weight:700;padding:13px 22px;border-radius:var(--radius);font-size:1.05rem;
  }
  .btn-primary:hover{background:var(--orange-dk)}
  .btn-ghost{
    display:inline-block;border:1px solid #4a6b96;color:#fff;text-decoration:none;
    font-weight:600;padding:12px 20px;border-radius:var(--radius);font-size:1.02rem;
  }
  .hero .hours{margin:16px 0 0;color:#9fb6d4;font-size:.9rem}

  /* ---------- form card ---------- */
  .formcard{
    background:#fff;color:var(--ink);border-radius:12px;padding:26px 24px 24px;
    box-shadow:0 12px 30px rgba(0,0,0,.22);
  }
  .formcard h2{margin:0 0 4px;font-size:1.32rem}
  .formcard .fsub{margin:0 0 20px;color:var(--muted);font-size:.94rem}
  .field{margin-bottom:15px}
  .field label{display:block;font-weight:700;font-size:.92rem;color:var(--navy);margin-bottom:5px}
  .field label .req{color:var(--orange)}
  .field .note{font-weight:400;color:var(--muted);font-size:.85rem}
  .field input,.field select,.field textarea{
    width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;
    border:1px solid #c6cfda;border-radius:8px;padding:11px 12px;
  }
  .field textarea{min-height:92px;resize:vertical}
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,106,27,.18);
  }
  .btn-submit{
    width:100%;font:inherit;font-size:1.06rem;font-weight:700;color:#fff;
    background:var(--orange);border:0;border-radius:var(--radius);
    padding:14px 18px;cursor:pointer;
  }
  .btn-submit:hover{background:var(--orange-dk)}
  .formfoot{margin:13px 0 0;font-size:.86rem;color:var(--muted);line-height:1.5}
  .hp{
    position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
  }

  /* ---------- trust bar ---------- */
  .trustbar{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .trustbar .wrap{
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    padding-top:0;padding-bottom:0;
  }
  .trust{
    padding:22px 20px;border-left:1px solid var(--line);
  }
  .trust:first-child{border-left:0;padding-left:0}
  .trust strong{display:block;color:var(--navy);font-size:1rem;margin-bottom:3px}
  .trust span{display:block;color:var(--muted);font-size:.89rem;line-height:1.45}

  /* ---------- services ---------- */
  .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .svc{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:24px 22px;display:flex;flex-direction:column;
  }
  .svc h3{margin:0 0 8px;font-size:1.18rem;color:var(--navy)}
  .svc p{margin:0 0 16px;color:var(--muted);font-size:.98rem;flex-grow:1}
  .svc a.more{
    color:var(--orange-dk);font-weight:700;text-decoration:none;font-size:.96rem;
    align-self:flex-start;
  }
  .svc a.more:hover{text-decoration:underline}
  .svc .tag{
    display:inline-block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);font-weight:700;margin-bottom:10px;
  }

  /* ---------- how it works ---------- */
  .how{background:var(--navy);color:#fff}
  .how h2{color:#fff}
  .how .lede{color:#cfdcec}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .step{
    background:var(--navy-2);border:1px solid var(--navy-3);border-radius:var(--radius);
    padding:24px 22px;
  }
  .stepnum{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:50%;background:var(--orange);
    color:#fff;font-weight:800;font-size:1.05rem;margin-bottom:14px;
  }
  .step h3{margin:0 0 8px;font-size:1.1rem;color:#fff}
  .step p{margin:0;color:#cfdcec;font-size:.96rem}
  .how .after{
    margin:30px 0 0;color:#9fb6d4;font-size:.95rem;max-width:70ch;
    border-top:1px solid var(--navy-3);padding-top:20px;
  }

  /* ---------- cost band ---------- */
  .cost{background:#fff}
  .costgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px}
  .costcell{border:1px solid var(--line);border-radius:var(--radius);padding:20px}
  .costcell h3{margin:0 0 6px;font-size:1.05rem;color:var(--navy)}
  .range{
    display:block;font-size:1.28rem;font-weight:800;color:var(--orange-dk);
    margin:0 0 8px;letter-spacing:-.01em;
  }
  .costcell p{margin:0;font-size:.93rem;color:var(--muted)}
  .drivers{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 34px}
  .driver h4{margin:0 0 5px;font-size:1rem;color:var(--navy)}
  .driver p{margin:0;font-size:.95rem;color:var(--muted)}
  .honest{
    margin:30px 0 0;background:#fff7f1;border-left:4px solid var(--orange);
    padding:18px 20px;border-radius:0 var(--radius) var(--radius) 0;
  }
  .honest p{margin:0;font-size:.98rem}
  .honest p + p{margin-top:10px}

  /* ---------- financing ---------- */
  .fin{background:var(--navy-2);color:#fff}
  .fin-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
  .fin h2{color:#fff;font-size:1.6rem;margin:0 0 12px}
  .fin p{color:#cfdcec;margin:0 0 14px}
  .fin ul{margin:0 0 22px;padding-left:20px;color:#cfdcec}
  .fin ul li{margin-bottom:7px}
  .fin .finbox{
    background:var(--navy);border:1px solid var(--navy-3);border-radius:var(--radius);
    padding:24px 22px;text-align:center;
  }
  .fin .finbox strong{display:block;font-size:1.15rem;color:#fff;margin-bottom:8px}
  .fin .finbox p{font-size:.93rem;margin:0 0 18px;color:#9fb6d4}
  .fin .finbox .btn-primary{width:100%;box-sizing:border-box}
  .fin .disclosure{font-size:.84rem;color:#9fb6d4;margin:14px 0 0;line-height:1.5}

  /* ---------- repair vs replace teaser ---------- */
  .rvr{background:var(--bg)}
  .rvr-inner{
    background:#fff;border:1px solid var(--line);border-left:5px solid var(--orange);
    border-radius:var(--radius);padding:30px 28px;
    display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  }
  .rvr h2{margin:0 0 8px;font-size:1.45rem}
  .rvr p{margin:0;color:var(--muted);max-width:64ch}
  .rvr .rvr-cta{white-space:nowrap}

  /* ---------- service area ---------- */
  .area{background:#fff}
  .arealist{
    display:grid;grid-template-columns:repeat(4,1fr);gap:10px 20px;
    margin:0 0 22px;padding:0;list-style:none;
  }
  .arealist li{
    color:var(--ink);font-size:.97rem;padding-left:16px;position:relative;
  }
  .arealist li::before{
    content:"";position:absolute;left:0;top:10px;width:6px;height:6px;
    background:var(--orange);border-radius:50%;
  }
  .counties{color:var(--muted);font-size:.95rem;margin:0}

  /* ---------- closing CTA ---------- */
  .close{background:var(--navy);color:#fff;text-align:center;padding:60px 0}
  .close h2{color:#fff;font-size:1.9rem;margin:0 0 14px}
  .close p{color:#cfdcec;max-width:56ch;margin:0 auto 26px;font-size:1.06rem}
  .close .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .close .btn-alt{
    display:inline-block;border:1px solid #4a6b96;color:#fff;text-decoration:none;
    font-weight:600;padding:13px 22px;border-radius:var(--radius);font-size:1.05rem;
  }
  .close .btn-alt:hover{background:var(--navy-2)}

  /* ---------- footer ---------- */
  footer{background:#08182e;color:#8ea6c2;padding:34px 0 40px;font-size:.92rem}
  .footgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px;margin-bottom:26px}
  footer h4{color:#fff;font-size:.95rem;margin:0 0 10px}
  footer a{color:#cfdcec;text-decoration:none;display:block;margin-bottom:6px}
  footer a:hover{text-decoration:underline}
  footer .bottom{border-top:1px solid #16304f;padding-top:18px;font-size:.86rem}
  footer p{margin:0 0 8px}

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;gap:34px}
    .hero h1{font-size:1.95rem}
    .trustbar .wrap{grid-template-columns:repeat(2,1fr)}
    .trust{border-left:0;padding-left:0;border-top:1px solid var(--line)}
    .trust:nth-child(1),.trust:nth-child(2){border-top:0}
    .trust:nth-child(2){padding-left:20px}
    .trust:nth-child(4){padding-left:20px}
    .cards{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr}
    .costgrid{grid-template-columns:1fr}
    .drivers{grid-template-columns:1fr}
    .fin-grid{grid-template-columns:1fr;gap:26px}
    .rvr-inner{grid-template-columns:1fr;gap:18px}
    .arealist{grid-template-columns:repeat(2,1fr)}
    .footgrid{grid-template-columns:1fr;gap:22px}
    .topnav{display:none}
  }
  @media (max-width:520px){
    body{font-size:16px}
    .hero h1{font-size:1.7rem}
    .section{padding:42px 0}
    .arealist{grid-template-columns:1fr 1fr}
  }

/* ---- price match section (2026-08-07) ---------------------------------- */
/* Sticky header is ~72px; without this an anchor jump hides the heading. */
#pricematch{scroll-margin-top:96px}
.section.pricematch{background:#f7f8f9;border-top:1px solid #e3e7ea}
.pm-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:start}
@media(max-width:900px){.pm-grid{grid-template-columns:1fr;gap:26px}}
.pm-promise{background:#fff;border-left:4px solid #c8102e;border-radius:0 8px 8px 0;
            padding:20px 22px;margin:24px 0 18px}
.pm-promise h3{margin:0 0 12px;font-size:17px}
.pm-promise .trust{margin:0}
.pm-note{font-size:14.5px;color:#5b6670;margin:0}
.pm-card{align-self:start}
@media(max-width:620px){.pm-card{padding:22px 18px}}

/* form */
.pm-form .pm-req{color:#c8102e;font-weight:600}
.pm-form .pm-hint{display:block;font-size:13.5px;color:#5b6670;margin-top:6px;font-weight:400}
/* 16px stops iOS Safari zooming the page when a field takes focus. */
.pm-form input[type=text],.pm-form input[type=tel],.pm-form input[type=email],
.pm-form textarea{font-size:16px;min-height:48px}
.pm-form textarea{min-height:92px}
.pm-form input[type=file]{display:block;width:100%;margin-top:6px;padding:14px;
    border:1px dashed #c3cbd1;border-radius:6px;background:#fafbfb;font-size:15px;
    min-height:52px}
/* `.quote-form label` is display:grid, which stacked the checkbox above its text
   and centred it. Two explicit columns instead. */
.quote-form .pm-consent{display:grid;grid-template-columns:22px 1fr;gap:12px;
    align-items:start;margin:18px 0 16px;font-size:13.5px;line-height:1.55;
    color:#4a545d;font-weight:400}
.quote-form .pm-consent input[type=checkbox]{width:22px;height:22px;margin:1px 0 0;
    accent-color:#c8102e}
.pm-form button[type=submit]{width:100%;min-height:52px;font-size:16px}
.pm-status{margin:12px 0 0;font-size:14.5px;min-height:1em}
.pm-status.pm-err{color:#b3402c;font-weight:600}
.pm-ok{background:#fff;border:1px solid #cfe3d6;border-left:4px solid #2f7d5f;
    border-radius:0 8px 8px 0;padding:22px 24px}
.pm-ok h3{margin:0 0 10px;font-size:19px}
.pm-ok p:last-child{margin-bottom:0}

/* The topbar and header stack on mobile, making the sticky block ~184px tall —
   measured, not guessed. 96px would leave the heading underneath it. */
@media(max-width:900px){#pricematch{scroll-margin-top:196px}}

/* The fields sit inside <label>, which the theme styles at font-weight:800 —
   without this the placeholder text renders bold and reads as filled-in. */
.pm-form input,.pm-form textarea,.pm-form select{font-weight:400;color:#1a2026}
.pm-form ::placeholder{color:#8a939b;font-weight:400;opacity:1}

/* The texting ask — a benefit sentence above the legal one, because nobody
   opts in to a compliance paragraph. Asked, never required. */
.pm-smsask{background:#fffaf0;border:1px solid #f0dfae;border-radius:6px;
    padding:11px 13px;margin:14px 0 4px;font-size:14px;line-height:1.5;color:#1a2026}

/* data-plate section — same layout language as price match */
#dataplate{scroll-margin-top:96px}
@media(max-width:900px){#dataplate{scroll-margin-top:196px}}
.section.dataplate{background:#fff;border-top:1px solid #e3e7ea}

/* ---- warranty + credentials (2026-08-07) ------------------------------- */
#warranty{scroll-margin-top:96px}
#credentials{scroll-margin-top:96px}
@media(max-width:900px){#warranty,#credentials{scroll-margin-top:196px}}
.section.warranty{background:#fff;border-top:1px solid #e3e7ea}
.section.creds{background:#f7f8f9;border-top:1px solid #e3e7ea}
.warr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:30px 0 26px}
@media(max-width:900px){.warr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.warr-grid{grid-template-columns:1fr}}
.warr-card{background:#f7f8f9;border:1px solid #e3e7ea;border-radius:10px;padding:22px 20px}
.warr-card h3{margin:0 0 8px;font-size:17px}
.warr-card p{margin:0;font-size:14.5px;color:#4a545d;line-height:1.55}
.warr-highlight{background:#fff8ec;border-color:#f0dfae;border-left:4px solid #c8102e}
.warr-num{font-size:40px;font-weight:800;line-height:1;color:#0f2540;margin-bottom:10px}
.warr-num span{font-size:16px;font-weight:700;margin-left:3px;color:#5b6670}
.warr-highlight .warr-num{color:#c8102e}
.warr-note{background:#f7f8f9;border-left:4px solid #0f2540;border-radius:0 8px 8px 0;padding:22px 24px}
.warr-note h3{margin:0 0 12px;font-size:18px}
.warr-note p{font-size:15px;line-height:1.6;color:#3d474f}
.cred-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:28px 0 22px}
@media(max-width:900px){.cred-grid{grid-template-columns:1fr;gap:18px}}
.cred-col h3{margin:0 0 10px;font-size:16px;color:#0f2540}
.cred-badges{display:flex;flex-wrap:wrap;gap:10px}
.cbadge{background:#fff;border:1px solid #d8dee3;border-radius:100px;padding:9px 16px;
  font-size:14px;font-weight:600;color:#243746}


/* ---------------------------------------------------------------
   Mobile above-the-fold recovery (2026-08-15)
   Measured on a 390x844 viewport: the header occupies 184px, then
   .hero adds 44px and .hero-grid another 52px of padding before any
   copy starts. The result put the primary call-to-action at y=815 on
   an 844px screen -- technically on the page, practically invisible,
   and most local HVAC traffic is mobile. Tightening the stacked
   paddings lifts the button into view without touching the headline,
   the sub-copy or the three proof points, which are the reason the
   page converts at all. Desktop is unaffected.
   --------------------------------------------------------------- */
@media (max-width: 760px){
  .hero{padding-top:20px;padding-bottom:34px}
  .hero-grid{padding-top:0;gap:26px}
  .hero h1{font-size:1.95rem;margin-bottom:12px}
  .hero p.sub{margin-bottom:16px;font-size:1.02rem}
  .hero ul{margin-bottom:18px}
  .hero ul li{margin-bottom:8px}
  /* Primary action should read as the obvious next step, full width. */
  .hero-cta{gap:9px}
  .hero-cta .btn-primary{width:100%;text-align:center}
}