/* Cold Front Heating & Air
   Tone: the back of a work van at nine at night. Dark, high contrast, nothing
   decorative. One idea: the phone number is the largest object on the page,
   larger than the name of the business, because nobody reads an HVAC site at
   noon in July. They are looking for a number that dials.
   Type: Barlow Condensed for anything shouted and Barlow for anything read.
   One superfamily, which is what trade signage actually does.
   Palette: #0d1c2e a night sky over a parking lot, #f06a1e the orange on the
   compressor warning label, #c8d6e4 for everything secondary. */

:root{
  --bg:#0d1c2e;
  --bg-2:#112538;
  --ink:#ffffff;
  --ink-soft:#c8d6e4;
  --line:#26405a;
  --accent:#f06a1e;
  --accent-ink:#1b0d03;
  --display:"Barlow Condensed","Helvetica Neue",Arial,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --thumb-h:0px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;padding-bottom:var(--thumb-h)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
h1,h2,.brand,.call-num,.n{font-family:var(--display);font-weight:700;letter-spacing:-.01em;text-transform:uppercase}
.inner{max-width:1120px;margin:0 auto;padding:0 clamp(18px,5vw,56px)}

/* ---------- hero ----------
   Photograph, scrim, then the number. The scrim is a hard diagonal rather than a
   flat wash so the type sits on the dark side and the equipment still reads on
   the right. */
.hero{position:relative;min-height:min(86vh,720px);display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.85)}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(9,18,30,.96) 44%,rgba(9,18,30,.6) 76%,rgba(9,18,30,.34))}
.hero-body{position:relative;max-width:1120px;margin:0 auto;width:100%;padding:clamp(40px,7vw,88px) clamp(18px,5vw,56px)}
.brand{margin:0 0 .5em;font-size:clamp(1rem,2.2vw,1.25rem);letter-spacing:.16em;color:var(--accent)}
.hero h1{font-size:clamp(2.6rem,7vw,5rem);line-height:.96;margin:0 0 .3em;max-width:14ch}
.status{margin:0 0 1.4em;color:var(--ink-soft);max-width:44ch;font-size:1.06rem}

/* The number. Set as a block you cannot miss and cannot mistake for text: it is
   a tap target 64px tall at its smallest, with the label above it so nobody has
   to guess that a big number is a button. */
.call{display:inline-flex;flex-direction:column;gap:2px;text-decoration:none;background:var(--accent);color:var(--accent-ink);padding:14px clamp(20px,3vw,32px) 16px;border-radius:4px;transition:background .15s ease}
.call:hover{background:#ff7d33}
.call-label{font-family:var(--body);font-weight:600;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;opacity:.78}
.call-num{font-size:clamp(2.1rem,6.4vw,3.6rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.under{margin:1.4em 0 0;color:var(--ink-soft);max-width:40ch;font-size:.98rem}

/* ---------- rates ---------- */
.rates{background:var(--bg-2);border-top:1px solid var(--line);padding:clamp(44px,7vw,88px) 0}
.rates h2,.area h2,.ask h2{font-size:clamp(1.7rem,3.8vw,2.6rem);line-height:1.05;margin:0 0 .4em}
.rates-lede{color:var(--ink-soft);max-width:54ch;margin:0 0 2em}
.rate-list{list-style:none;margin:0;padding:0}
.rate-list li{display:grid;grid-template-columns:1fr auto;gap:2px 20px;padding:18px 0;border-bottom:1px solid var(--line)}
.rate-list b{font-family:var(--display);font-size:clamp(1.1rem,2.4vw,1.4rem);font-weight:600;text-transform:uppercase;letter-spacing:.01em}
.rate-list .n{font-size:clamp(1.3rem,3vw,1.8rem);color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.1}
.rate-list em{grid-column:1/-1;font-style:normal;color:var(--ink-soft);font-size:.96rem;max-width:56ch}

/* ---------- area ---------- */
.area{padding:clamp(44px,7vw,88px) 0}
.area-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,72px)}
.area p{color:var(--ink-soft);max-width:46ch}
.hours-line{border-left:3px solid var(--accent);padding-left:16px;margin-top:1.4em;color:var(--ink)}
.creds{list-style:none;margin:0;padding:0;align-self:start}
.creds li{padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:1rem}
.creds b{color:var(--ink);font-weight:500}

/* ---------- ask ---------- */
.ask{background:var(--bg-2);border-top:1px solid var(--line);padding:clamp(44px,7vw,88px) 0}
.ask-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,72px)}
.ask-lead p{color:var(--ink-soft);max-width:40ch}
.ask-or{margin-top:1.4em;color:var(--ink)}
.ask-or a{color:var(--accent);font-family:var(--display);font-size:1.3rem;font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums}
.ask-or a:hover{text-decoration:underline}
.ask-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin:0}
.f{margin:0}
.f-wide{grid-column:1/-1}
.ask-form label{display:block;font-family:var(--body);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);margin-bottom:7px}
.ask-form input,.ask-form textarea{width:100%;font:400 1rem/1.5 var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:13px 14px}
.ask-form input:focus,.ask-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.ask-form button{font:700 1.05rem var(--display);letter-spacing:.06em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);border:0;border-radius:4px;padding:15px 34px;min-height:50px;cursor:pointer}
.ask-form button:hover{background:#ff7d33}
.form-status{grid-column:1/-1;margin:0;color:var(--accent);font-size:.98rem;max-width:52ch}

/* ---------- foot ---------- */
.foot{padding:clamp(32px,5vw,56px) 0;border-top:1px solid var(--line);color:var(--ink-soft);font-size:.96rem}
.foot-mark{font-family:var(--display);font-size:1.3rem;text-transform:uppercase;color:var(--ink);margin:0 0 .3em}
.foot p{margin:0}
.foot a{color:var(--accent)}

.thumb{display:none}
@media (max-width:860px){
  .area-grid,.ask-grid,.ask-form{grid-template-columns:1fr}
  .area p,.ask-lead p,.rates-lede{max-width:none}
}
@media (max-width:600px){
  .hero{min-height:0}
  .hero-body{padding-top:30px;padding-bottom:36px}
  .hero h1{font-size:2.5rem}
  :root{--thumb-h:74px}
  .thumb{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:98;padding:11px 14px;padding-bottom:calc(11px + env(safe-area-inset-bottom));background:var(--bg-2);border-top:1px solid var(--line)}
  .thumb-call{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:52px;font:700 1.15rem var(--display);letter-spacing:.02em;text-transform:uppercase;text-decoration:none;background:var(--accent);color:var(--accent-ink);border-radius:4px;font-variant-numeric:tabular-nums}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.call{transition:none}}