:root{
    --bg:#0a0d14; --panel:#121826; --line:#1f2a3d;
    --ink:#ffffff; --body:#b9c6d8; --mut:#7b8ba3;
    --cold:#3d8ff5; --hot:#e33b21;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:var(--bg);color:var(--body);
       font:17px/1.65 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
       -webkit-font-smoothing:antialiased}
  .wrap{max-width:1060px;margin:0 auto;padding:0 20px}
  h1,h2,h3{font-family:"Barlow Condensed",Impact,sans-serif;color:var(--ink);
           text-transform:uppercase;letter-spacing:.01em;line-height:1.02;margin:0 0 14px}
  h1{font-size:clamp(40px,8.5vw,78px);font-weight:800}
  h2{font-size:clamp(27px,4.6vw,40px);font-weight:700}
  h3{font-size:20px;font-weight:700;letter-spacing:.02em}
  p{margin:0 0 15px}
  a{color:var(--cold)}

  /* Top call bar. On a phone this is the whole point of the site. */
  .bar{position:sticky;top:0;z-index:60;background:rgba(10,13,20,.96);
       border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
  .bar-in{display:flex;align-items:center;gap:14px;padding:11px 20px;max-width:1060px;margin:0 auto}
  .mark{display:flex;align-items:center;gap:10px;font-family:"Barlow Condensed",sans-serif;
        font-weight:800;font-size:22px;text-transform:uppercase;color:#fff;letter-spacing:.03em;
        white-space:nowrap}
  .mark picture{display:flex}
  .mark img{width:38px;height:38px;display:block}
  .mark i{font-style:normal;color:#e9eef6}
  .bar .tel{margin-left:auto;background:var(--hot);color:#fff;text-decoration:none;
            font-weight:700;padding:11px 17px;border-radius:8px;white-space:nowrap;font-size:16px}

  .hero{position:relative;padding:64px 0 54px;
        background:
          radial-gradient(760px 400px at 12% 8%, rgba(61,143,245,.20), transparent 62%),
          radial-gradient(760px 400px at 88% 24%, rgba(227,59,33,.20), transparent 62%),
          var(--bg);
        border-bottom:1px solid var(--line)}
  .eyebrow{color:var(--mut);font-weight:700;font-size:13px;letter-spacing:.2em;
           text-transform:uppercase;margin-bottom:16px;display:flex;flex-wrap:wrap;
           align-items:center;gap:0 7px;line-height:1.7}
  .eyebrow b{font-weight:800}
  .eyebrow .hot{color:var(--hot)}
  .eyebrow .cold{color:var(--cold)}
  .eyebrow .plumb{color:#e9eef6}
  .eyebrow .drop{width:11px;height:11px;display:block;margin:0 -2px}
  /* His own emblem, lifted off the card photo and masked to a circle so the card's grey
     background does not sit as a box on the near-black page. */
  .hero picture{display:block}
  .crest{width:100%;height:auto;display:block;margin:0 0 22px;border-radius:12px;
         border:1px solid var(--line);
         filter:drop-shadow(0 12px 34px rgba(0,0,0,.6))}
  @media(min-width:860px){
    .hero-in{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
    .crest{width:470px;margin:0}
  }
  .hero h1 span{color:#dfe7f2}
  .lede{font-size:clamp(17px,2.3vw,20px);max-width:56ch;margin:18px 0 26px}
  .cta{display:flex;flex-wrap:wrap;gap:12px}
  .btn{display:inline-block;text-decoration:none;font-weight:700;border-radius:9px;
       padding:16px 24px;font-size:17px;border:2px solid transparent}
  .btn-hot{background:var(--hot);color:#fff}
  .btn-out{border-color:#2b3a52;color:#dce6f3}
  .free{margin-top:16px;font-size:14.5px;color:var(--mut);letter-spacing:.03em;
        text-transform:uppercase;font-weight:600}

  .strip{background:var(--panel);border-bottom:1px solid var(--line);padding:15px 0}
  .strip-in{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:center;
            font-size:14.5px;color:var(--mut)}
  .strip b{color:#e6edf7}
  .strip .hot,.services .hot{color:var(--hot)}
  .strip .cold,.services .cold{color:var(--cold)}

  section{padding:56px 0}
  .lead-2{max-width:62ch;margin-bottom:30px}

  .grid{display:grid;gap:16px;grid-template-columns:1fr}
  @media(min-width:700px){.grid{grid-template-columns:1fr 1fr}}
  @media(min-width:980px){.grid{grid-template-columns:repeat(3,1fr)}}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:22px}
  .card.cold{border-top:3px solid var(--cold)}
  /* A heat pump does both, so its rule is half and half with a hard edge, the way his logo
     splits ice from fire. A fade would be the rainbow Steve just asked me to remove. */
  /* border-image paints ALL FOUR sides, so the first attempt outlined the whole card blue on
     the left and red on the right instead of drawing a top rule. Use an absolutely positioned
     strip instead, which only ever covers the top edge. */
  .card.both{position:relative;border-top:3px solid transparent}
  .card.both::before{content:"";position:absolute;left:-1px;right:-1px;top:-3px;height:3px;
    border-radius:13px 13px 0 0;
    background:linear-gradient(90deg,var(--cold) 0 50%,var(--hot) 50% 100%)}
  .services h3.hot{color:var(--hot)}
  .services h3.cold{color:var(--cold)}
  .services h3.both{color:#e9eef6}
  .card.hot{border-top:3px solid var(--hot)}
  .card p{margin:0;font-size:15.5px;color:#a8b8cd}

  .split{display:grid;gap:26px;grid-template-columns:1fr}
  @media(min-width:860px){.split{grid-template-columns:1.15fr .85fr}}
  .why{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:26px}
  .why ul{margin:0;padding-left:20px}
  .why li{margin-bottom:11px;color:#a8b8cd}
  .why li b{color:#fff}

  .areas{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
  .areas span{background:var(--panel);border:1px solid var(--line);border-radius:99px;
              padding:8px 15px;font-size:14.5px;color:#cad6e6}

  .final{background:
      linear-gradient(90deg, rgba(61,143,245,.14), rgba(227,59,33,.14)), var(--panel);
      border-top:1px solid var(--line);border-bottom:1px solid var(--line);
      padding:52px 0;text-align:center}
  .final h2{margin-bottom:10px}
  .final .cta{justify-content:center}
  .bignum{font-family:"Barlow Condensed",sans-serif;font-weight:800;
          font-size:clamp(38px,7.5vw,62px);color:#fff;text-decoration:none;display:inline-block;
          margin:6px 0 4px;letter-spacing:.02em}

  footer{padding:34px 0 44px;font-size:15px;color:var(--mut)}
  footer a{color:#cad6e6;text-decoration:none}
  .frow{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:12px}

  .shots{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
  @media(min-width:860px){.shots{grid-template-columns:repeat(4,1fr)}}
  .shots figure{margin:0}
  .shots img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;
             border-radius:11px;border:1px solid var(--line)}
  .shots figcaption{margin-top:8px;font-size:14px;color:var(--mut);line-height:1.4}
  .rig{border-top:1px solid var(--line)}
  .rig img{width:100%;height:auto;display:block}
  .rig-cap{max-width:1060px;margin:0 auto;padding:14px 20px 0;color:var(--mut);font-size:15px}
  .demo{background:#1a1205;border-top:1px solid #3d2b0c;color:#e6c98a;
        font-size:13.5px;padding:14px 0;text-align:center}

  /* ---------------------------------------------------------------------------
     Service pages. Added 2026-08-28 when the ten services off the back of the
     card each got their own page. Everything above this line is the homepage as
     Steve tuned it, moved out of the <style> block so ten pages share one file
     instead of carrying ten copies of it.
     --------------------------------------------------------------------------- */

  /* The wordmark is a link home on every page now, so it must not look like body copy. */
  a.mark{text-decoration:none;color:#fff}
  a.mark:hover i{color:#fff}

  .crumb{font-size:13.5px;color:var(--mut);padding:16px 0 0;letter-spacing:.02em}
  .crumb a{color:#8fa6c2;text-decoration:none}
  .crumb a:hover{color:#cad6e6;text-decoration:underline}
  .crumb span{color:#55627a;padding:0 7px}

  /* Service hero is the homepage hero without the big image, so the H1 and the
     phone number are the whole of the first screen on a phone. */
  .hero.svc{padding:26px 0 46px}
  .hero.svc h1{font-size:clamp(34px,7.2vw,62px)}
  .hero.svc .lede{margin-bottom:24px}

  /* Colour of the H1 accent word follows the same rule as everything else:
     red makes heat, blue makes cold or moves water, and a service that does both
     stays silver the way the heat pump card heading already does.
     NOTE the .hero prefix. Without it these lose to `.hero h1 span` above, which
     is more specific, and every service H1 renders silver. Caught by looking at a
     render, not by reading the file. */
  .hero h1 span.hot,h2 .hot,h3 .hot{color:var(--hot)}
  .hero h1 span.cold,h2 .cold,h3 .cold{color:var(--cold)}
  .hero h1 span.both{color:#e9eef6}

  .checks{list-style:none;margin:0;padding:0}
  .checks li{position:relative;padding-left:30px;margin-bottom:13px;color:#a8b8cd}
  .checks li b{color:#fff}
  .checks li::before{content:"";position:absolute;left:6px;top:.62em;width:9px;height:9px;
    border-radius:2px;transform:rotate(45deg);background:var(--mut)}
  .checks.hot li::before{background:var(--hot)}
  .checks.cold li::before{background:var(--cold)}

  /* "Call us when" list. These are the words a homeowner types into a phone at 6am. */
  /* auto-fit rather than a viewport media query: these sit in the NARROW half of
     a two column split at 1440, so a viewport based "two up" crammed them into
     ~170px boxes with three line wraps. Let the container decide. */
  .signs{display:grid;gap:12px;margin-top:4px;
         grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .signs div{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--mut);
    border-radius:0 10px 10px 0;padding:14px 17px;font-size:15.5px;color:#b3c2d6}
  .signs.hot div{border-left-color:var(--hot)}
  .signs.cold div{border-left-color:var(--cold)}

  .panel{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:24px 26px}
  .panel h3{margin-bottom:12px}
  .panel p:last-child{margin-bottom:0}

  .faq{border-top:1px solid var(--line)}
  .faq dl{margin:0}
  .faq dt{font-family:"Barlow Condensed",Impact,sans-serif;text-transform:uppercase;
    font-size:21px;font-weight:700;color:var(--ink);letter-spacing:.02em;margin:0 0 8px}
  .faq dd{margin:0 0 26px;color:#a8b8cd;max-width:70ch}
  .faq dd:last-child{margin-bottom:0}

  /* Cross links. Same card shape as the homepage services grid so the whole site
     reads as one thing, and the same colour rule decides the top rule. */
  .related{border-top:1px solid var(--line)}
  a.card{display:block;text-decoration:none}
  a.card h3{margin-bottom:8px}
  a.card:hover{border-color:#33455f;background:#161e2f}
  a.card .go{display:block;margin-top:11px;font-size:14px;color:var(--mut);font-weight:600;
    letter-spacing:.03em;text-transform:uppercase}

  /* Footer sitemap. This is what makes all ten pages reachable from every page,
     since the sticky bar stays at logo plus phone number and nothing else. */
  .fnav{display:grid;gap:8px 26px;grid-template-columns:1fr 1fr;margin:22px 0 4px;
    padding:20px 0 0;border-top:1px solid var(--line);font-size:15px}
  @media(min-width:760px){.fnav{grid-template-columns:repeat(3,1fr)}}
  .fnav a{color:#9fb0c6;text-decoration:none}
  .fnav a:hover{color:#dce6f3;text-decoration:underline}

  .shots.two{grid-template-columns:repeat(2,1fr)}
  @media(min-width:860px){.shots.two{grid-template-columns:repeat(2,1fr);max-width:760px}}
  /* A lone photo must not stretch across a four column grid. */
  .shots.one{grid-template-columns:1fr;max-width:420px}