@charset "utf-8";
/* ===========================================================================
   VANDERKAMP HEATING & COOLING — Livonia, Michigan
   Built to DESIGN_SYSTEM.md v1.0.  Context A4 · B4 · C2 · D5 · E5.

   THE SHOP IS THE VAN. No storefront, no waiting room — one licensed mechanic
   and a stocked ProMaster covering the tri-county. The whole site is built for
   somebody standing in a cold house holding a phone: B4 means the number is in
   the first viewport and follows you down the page, nothing lives behind a
   reveal, and motion is interaction feedback only.

   THE PALETTE IS THE CLIENT'S — blue, red, silver — and it is doing ENCODING,
   not decoration. Red is heat. Blue is cool. Every gauge set in the trade
   already says so, which is why the hero photograph is a manifold with one red
   dial and one blue one: the palette existed in the van before it existed on
   the site. Because red and blue sit at almost identical luminance (1.21:1),
   the temperature is ALWAYS carried by the word as well — color is never the
   only cue. Silver is the metal everything else is screwed to.
     ink #14181C on silver: 15.37 · ink-2 7.48
     blue #0B4FA4 on silver 6.78, white on blue 7.40 (AAA)
     red #A61B0B on silver 6.50, white on red 7.10 (AAA)
     steel section #22262C: text 12.72 · text-2 6.71 · blue-lt 6.30 · red-lt 6.62

   THE EXPRESSIVE CHANNEL IS THE OBLIQUE. Barlow has true italics at every
   weight and width, and on this site anything IN MOTION leans: the calls to
   action, the response promises, the van itself. Facts stand upright. Eighth
   channel in the series — width, weight, numeral, alignment, case, size set,
   optical size came before it.

   THE INTERACTION SIGNATURE: IT KICKS ON. Hover or focus a control and its
   temperature color sweeps in from the left like a burner lighting; press and
   it fills. Resolves on :active, so touch — which is most of this audience —
   gets the full signature.

   THE TEXTURAL SIGNATURE IS THE LOUVER — the register grille. Slatted divider
   bands where other sites put a rule, present in the first viewport. It is the
   object this trade actually bolts to your wall, not a decoration (§12.0a: no
   decorative grids — a louver is lines with a referent, used as the divider
   idiom only).
   =========================================================================== */

:root {
  --silver:  #EDEEF0;
  --panel:   #F7F8F9;
  --sunk:    #E0E2E5;
  --steel:   #22262C;
  --steel-2: #2B3037;
  --ink:     #14181C;
  --ink-2:   #454C55;
  --line:    #C4C9CE;
  --blue:    #0B4FA4;
  --blue-hi: #0A55B1;
  --red:     #A61B0B;
  --red-hi:  #B7200E;
  --on-steel:   #E9EBED;
  --on-steel-2: #A6ADB6;
  --blue-lt: #6FAAF2;
  --red-lt:  #FF8A76;

  --f-d: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-t: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* perfect fourth, 1.333, six steps; condensed display runs big for free */
  --t-1: 0.8125rem;
  --t0:  1.0625rem;
  --t1:  1.375rem;
  --t2:  1.875rem;
  --t3:  clamp(2rem, 1.2rem + 3.4vw, 2.75rem);
  --t4:  clamp(3.25rem, 1.6rem + 7vw, 5rem);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --ease: cubic-bezier(.25, .7, .3, 1);
  --fast: 130ms; --mid: 240ms;

  --edge: 1140px;
  --band-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--silver); color: var(--ink);
  font-family: var(--f-t); font-size: var(--t0); line-height: 1.55;
  font-variant-numeric: lining-nums tabular-nums;
}
img { max-width: 100%; height: auto; }   /* height:auto ALWAYS — the standing check */
svg, video { max-width: 100%; }
::selection { background: var(--blue); color: #fff; }
:root { caret-color: var(--blue); accent-color: var(--blue); }

a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--blue-hi); }
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px;
}
.steel :where(a, button):focus-visible { outline-color: var(--blue-lt); }

/* ============================================================== TYPE ROLES */
.d { font-family: var(--f-d); font-weight: 700; text-transform: uppercase;
     line-height: .94; letter-spacing: .004em; margin: 0; text-wrap: balance; }
.d--1 { font-size: var(--t4); }
.d--2 { font-size: var(--t3); }
.d--3 { font-size: var(--t2); line-height: 1.02; }
.d--4 { font-family: var(--f-d); font-size: var(--t1); font-weight: 600;
        text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; margin: 0; }

/* the oblique: anything in motion leans. CTA labels, promises, the van. */
.go { font-style: italic; }
.lead { font-size: var(--t1); line-height: 1.4; text-wrap: pretty; }
.note { font-size: var(--t-1); line-height: 1.5; color: var(--ink-2); }
.steel .note { color: var(--on-steel-2); }
.prose { max-width: 60ch; }
.prose p { margin: 0 0 1em; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.k { font-size: .75rem; font-weight: 700; text-transform: uppercase;
     letter-spacing: .09em; color: var(--ink-2); }
.steel .k { color: var(--on-steel-2); }

/* temperature words — color NEVER travels without the word */
.hot { color: var(--red); }
.cold { color: var(--blue); }
.steel .hot { color: var(--red-lt); }
.steel .cold { color: var(--blue-lt); }

/* ================================================================ LAYOUT */
.shell { width: min(100% - var(--s5) * 2, var(--edge)); margin-inline: auto; }
.band { padding-block: var(--s9); }
.band--tight { padding-block: var(--s7); }
.steel { background: var(--steel); color: var(--on-steel); }
.skip { position: absolute; left: -9999px; background: var(--ink); color: #fff;
        padding: var(--s3) var(--s5); z-index: 90; }
.skip:focus { left: var(--s4); top: var(--s4); }

/* ============================================================= THE LOUVER
   The divider idiom. A short band of slats — the register grille — where any
   other site would draw a rule. One idiom, used at section seams only. */
.louver { height: 18px; border: 0; margin: 0;
  background: repeating-linear-gradient(180deg,
    transparent 0 3px, var(--line) 3px 5px, transparent 5px 6px);
  background-size: 100% 6px; opacity: .9; }
.louver--steel {
  background: repeating-linear-gradient(180deg,
    transparent 0 3px, #3A414A 3px 5px, transparent 5px 6px);
  background-size: 100% 6px; }

/* ================================================================= MAST
   Sticky because B4 keeps the number in reach — solid ground and a hard
   border, not the backdrop-blur tell. */
.mast { position: sticky; top: 0; z-index: 50; background: var(--panel);
        border-bottom: 2px solid var(--steel); }
.mast__in { display: flex; align-items: center; gap: var(--s4) var(--s6);
            padding-block: var(--s3); flex-wrap: wrap; }
.wordmark { display: inline-flex; flex-direction: column; justify-content: center;
            min-height: 44px; text-decoration: none; color: var(--ink); line-height: 1; }
.wordmark__n { font-family: var(--f-d); font-weight: 700; font-size: 1.55rem;
               text-transform: uppercase; letter-spacing: .012em; }
.wordmark__n .van { color: var(--blue); }
.wordmark__sub { font-size: .72rem; font-style: italic; color: var(--ink-2);
                 margin-top: 2px; letter-spacing: .02em; }
.nav { display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin-left: auto; }
.nav a { display: inline-flex; align-items: center; min-height: 44px;
         color: var(--ink); text-decoration: none; font-weight: 600;
         font-size: var(--t-1); }
.nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav a[aria-current="page"] { color: var(--blue); text-decoration: underline;
                              text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* ============================================================ IT KICKS ON
   The one interaction signature: the temperature sweeps in from the left.
   transform-only, so it costs nothing; :active completes the fill hard. */
.cta { position: relative; isolation: isolate; display: inline-flex;
       align-items: center; justify-content: center; gap: var(--s2);
       min-height: 52px; padding: var(--s3) var(--s6); border: 2px solid;
       font: inherit; font-weight: 700; font-style: italic;   /* it moves, so it leans */
       font-size: var(--t0); text-decoration: none; cursor: pointer;
       border-radius: 0; background: transparent; overflow: hidden; }
.cta::before { content: ''; position: absolute; inset: 0; z-index: -1;
               transform: scaleX(0); transform-origin: left center;
               transition: transform var(--fast) var(--ease); }
.cta:hover::before, .cta:focus-visible::before { transform: scaleX(1); }
.cta:active::before { transform: scaleX(1); }
.cta:active { translate: 0 1px; }
.cta--hot { border-color: var(--red); color: var(--red); }
.cta--hot::before { background: var(--red); }
.cta--hot:hover, .cta--hot:focus-visible, .cta--hot:active { color: #fff; }
.cta--cold { border-color: var(--blue); color: var(--blue); }
.cta--cold::before { background: var(--blue); }
.cta--cold:hover, .cta--cold:focus-visible, .cta--cold:active { color: #fff; }
/* solid variants: already lit; they DIM the sweep direction on press */
.cta--solid-hot { background: var(--red); border-color: var(--red); color: #fff; }
.cta--solid-hot::before { background: var(--red-hi); }
.cta--solid-cold { background: var(--blue); border-color: var(--blue); color: #fff; }
.cta--solid-cold::before { background: var(--blue-hi); }
.steel .cta--cold { border-color: var(--blue-lt); color: var(--blue-lt); }
.steel .cta--cold:hover, .steel .cta--cold:focus-visible, .steel .cta--cold:active { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .cta::before { transition: none; }     /* the state still lands; it does not travel */
  .cta:active { translate: none; }
}

/* ============================================================== THE HERO */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: var(--s7); align-items: center; padding-block: var(--s8); }
.hero__sub { margin-top: var(--s4); max-width: 44ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.hero__meta { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); }
.hero__fig { margin: 0; border: 2px solid var(--steel); position: relative; }
.hero__fig img { display: block; }
.hero__fig::after { content: ''; position: absolute; inset: auto 0 -20px 0; height: 18px;
  background: repeating-linear-gradient(180deg,
    transparent 0 3px, var(--line) 3px 5px, transparent 5px 6px); }

/* ======================================================== THE TWO DOORS
   Split that argues: heat against cool, red against blue, and each half
   carries its own action. The temperature-shift division channel, done
   literally — this is the one site in the ledger that has an actual claim
   on it. */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.door { background: var(--panel); border-top: 6px solid; padding: var(--s6);
        display: flex; flex-direction: column; gap: var(--s4); }
.door--hot { border-color: var(--red); }
.door--cold { border-color: var(--blue); }
.door ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.door li { padding-left: var(--s5); position: relative; }
.door li::before { content: ''; position: absolute; left: 0; top: .58em;
                   width: 12px; height: 3px; }
.door--hot li::before { background: var(--red); }
.door--cold li::before { background: var(--blue); }
.door .cta { align-self: flex-start; margin-top: auto; }

/* =============================================================== THE FILM */
.film { position: relative; border: 2px solid var(--steel-2); margin: 0; }
.film video { display: block; width: 100%; height: auto; background: #000; }
.film__btn { position: absolute; left: var(--s4); bottom: var(--s4);
             min-height: 44px; min-width: 44px; padding: var(--s2) var(--s4);
             background: var(--panel); color: var(--ink); border: 2px solid var(--steel);
             font: inherit; font-weight: 700; cursor: pointer; }
.film__cap { margin-top: var(--s3); }

/* ================================================================ STEPS */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.step { background: var(--panel); padding: var(--s5); border-top: 2px solid var(--steel); }
.step__n { font-family: var(--f-d); font-weight: 700; font-size: var(--t2);
           line-height: 1; color: var(--ink-2); }

/* =============================================================== REVIEWS */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.review { background: var(--panel); border: 1.5px solid var(--line);
          padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.steel .review { background: var(--steel-2); border-color: #3A414A; }
.review__stars { font-size: var(--t-1); font-weight: 700; letter-spacing: .12em; }
.review blockquote { margin: 0; font-size: var(--t0); line-height: 1.5; text-wrap: pretty; }
.review footer { margin-top: auto; display: flex; justify-content: space-between;
                 gap: var(--s3); align-items: baseline; flex-wrap: wrap; }
.tag { display: inline-block; font-size: .72rem; font-weight: 700;
       text-transform: uppercase; letter-spacing: .08em;
       padding: 2px 8px; border: 1.5px solid; }
.tag--hot { color: var(--red); border-color: var(--red); }
.tag--cold { color: var(--blue); border-color: var(--blue); }
.tag--maint { color: var(--ink-2); border-color: var(--ink-2); }
.steel .tag--hot { color: var(--red-lt); border-color: var(--red-lt); }
.steel .tag--cold { color: var(--blue-lt); border-color: var(--blue-lt); }
.steel .tag--maint { color: var(--on-steel-2); border-color: var(--on-steel-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { min-height: 44px; padding: var(--s2) var(--s4); border: 2px solid var(--steel);
        background: transparent; color: var(--ink); font: inherit; font-weight: 600;
        cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--steel); color: var(--on-steel); }

/* ============================================================= SCHEDULER
   A calendar people can actually drive. Every day is a real <button>; the
   grid is a table because a month IS one; chosen day and window are announced
   once, politely, on selection. Emergencies never touch this page's flow —
   no-heat routes to the phone, because a person with no heat in January
   should not be comparing Tuesdays. */
.sched { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
         gap: var(--s7); align-items: start; }
.cal { border-collapse: collapse; width: 100%; }
.cal caption { text-align: left; padding-bottom: var(--s3); }
.cal th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
          color: var(--ink-2); padding: var(--s2) 0; font-weight: 700; }
.cal td { padding: 2px; }
.day { width: 100%; min-height: 48px; border: 1.5px solid var(--line);
       background: var(--panel); font: inherit; font-weight: 600;
       cursor: pointer; position: relative; }
.day:hover:not(:disabled) { border-color: var(--blue); }
.day:disabled { background: var(--sunk); color: var(--ink-2); cursor: not-allowed;
                text-decoration: line-through; }
.day[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.day__dots { position: absolute; left: 6px; bottom: 4px; display: flex; gap: 3px; }
.day__dots i { width: 6px; height: 6px; background: var(--blue); border-radius: 50%; }
.day[aria-pressed="true"] .day__dots i { background: #fff; }
.slots { display: grid; gap: var(--s2); margin-top: var(--s4); }
.slot { display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
        min-height: 52px; padding: var(--s3) var(--s4); border: 2px solid var(--steel);
        background: var(--panel); font: inherit; font-weight: 600; cursor: pointer; }
.slot[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.slot[aria-pressed="true"] .note { color: #D7E6FA; }
.slot:disabled { border-color: var(--line); color: var(--ink-2); cursor: not-allowed;
                 text-decoration: line-through; background: var(--sunk); }
.summary { background: var(--panel); border: 2px solid var(--steel); padding: var(--s5); }
.summary dl { margin: 0; display: grid; gap: var(--s2); }
.summary dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
              color: var(--ink-2); font-weight: 700; }
.summary dd { margin: 0 0 var(--s2); font-weight: 600; }
.warnbox { border: 2px solid var(--red); background: var(--panel); padding: var(--s5); }

/* ============================================================ CALL BAND
   The §1.3 persistent band: fixed, thumb-height, carrying exactly ONE action.
   Phones only — desktop already holds the number in the sticky mast. The one
   decided shadow on the site separates it from the page; light from above,
   tinted steel, never black. */
.callband { display: none; }
@media (max-width: 899px) {
  .callband { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
              height: var(--band-h); }
  .callband a { flex: 1; display: flex; align-items: center; justify-content: center;
                gap: var(--s2); background: var(--red); color: #fff;
                font-weight: 700; font-style: italic; font-size: var(--t1);
                text-decoration: none;
                box-shadow: 0 -6px 18px rgba(20, 24, 28, .28); }
  .callband a:active { background: var(--red-hi); }
  body { padding-bottom: var(--band-h); }
}

/* ================================================================ TABLES */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: var(--s3) var(--s4) var(--s3) 0;
                   border-bottom: 1.5px solid var(--line); vertical-align: baseline; }
.tbl thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
                color: var(--ink-2); border-bottom: 2px solid var(--steel); }
.tbl td.num, .tbl th.num { text-align: right; padding-right: var(--s4);
                           font-variant-numeric: tabular-nums; }
.scroller { overflow-x: auto; }

.fig { margin: 0; }
.fig img { display: block; border: 2px solid var(--steel); }
.fig figcaption { margin-top: var(--s3); font-size: var(--t-1); color: var(--ink-2);
                  max-width: 64ch; line-height: 1.5; }
.steel .fig img { border-color: var(--steel-2); }
.steel .fig figcaption { color: var(--on-steel-2); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }

.foot { border-top: 2px solid var(--steel); padding-block: var(--s8); }
.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
              gap: var(--s6); }
.foot h2 { font-size: var(--t-1); font-weight: 700; color: var(--ink-2);
           margin: 0 0 var(--s3); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { min-height: 40px; display: flex; align-items: center; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; }
.disclaim { margin-top: var(--s6); padding-top: var(--s5); border-top: 1.5px solid var(--line); }

/* ============================================================= RESPONSIVE */
@media (max-width: 899px) {
  .cal td { padding: 1px; }              /* keeps a day cell at 44px+ on a 375 screen */
  .hero { grid-template-columns: 1fr; gap: var(--s6); padding-block: var(--s6); }
  .doors, .steps, .quotes { grid-template-columns: 1fr; }
  .sched { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; }
  .band { padding-block: var(--s8); }
  .shell { width: min(100% - var(--s4) * 2, var(--edge)); }
}
@media (min-width: 560px) and (max-width: 899px) {
  .quotes { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
}

/* ======================================================= HIGH CONTRAST */
@media (forced-colors: active) {
  .cta, .chip, .day, .slot { border-width: 2px; }
  .cta::before { display: none; }        /* the border and label carry it */
  .day[aria-pressed="true"], .slot[aria-pressed="true"], .chip[aria-pressed="true"] {
    outline: 3px solid CanvasText; outline-offset: -5px; }
  .louver, .louver--steel { background: none; border-top: 1px solid CanvasText; height: 0; }
  .door { border-top-width: 6px; }
}

/* ---------- Built by Iron Digital MI ----------
   currentColor throughout so the line inherits whatever the footer already is.
   The mark itself is never recolored. */
.id-by { margin: 1.6em 0 0; }
.id-by a { display: inline-flex; align-items: center; gap: .6em;
  color: inherit; text-decoration: none; font-size: .8125rem; line-height: 1.3; }
.id-by a:hover span, .id-by a:focus-visible span { text-decoration: underline; }
.id-by img { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
.id-by b { font-weight: 700; }

/* September UI refinement */
.hero-price{margin-top:20px;padding-top:16px;border-top:1px solid #9aaabb;font-size:16px;line-height:1.6}.hero-price a{text-decoration:underline}.hero{gap:32px}