/* ==========================================================================
   TAK Heating & Cooling — PPC Landing Page styles
   Palette derived from the real TAK flame-in-gear logo.
   Colour-by-action: --call (green) = phone only. --brand = book/quote only.
   ========================================================================== */

:root {
  --ink:        #0B0E13;
  --ink-2:      #141A24;
  --ink-3:      #1F2733;
  --paper:      #FFFFFF;
  --paper-2:    #F4F6FA;
  --paper-3:    #E8ECF3;

  --brand:      #E8442C;   /* flame red — decorative accents, gradients, icons */
  --brand-dark: #C4321E;
  /* TAK's actual brand red, confirmed by crawling takheating.com's own CSS.
     Reserved for anything carrying WHITE TEXT: 5.53:1 vs #fff — the brighter
     --brand only reaches 3.98:1 and fails WCAG AA. */
  --brand-cta:      #D2042D;
  --brand-cta-dark: #A80324;
  --brand-2:    #F7941D;   /* flame orange — accents */
  --blue:       #1E7BC4;   /* logo blue — informational accents */
  --blue-dark:  #14588F;

  --call:       #15803D;   /* green — CALL action only */
  --call-dark:  #116430;

  --text:       #1A2029;
  --text-soft:  #4A5563;
  --line:       #DDE3EC;

  --star:       #F5A623;

  --wrap: 1140px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 4px 20px rgba(11,14,19,.08);
  --shadow-lg: 0 18px 50px rgba(11,14,19,.18);
  --header-h: 74px;

  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 800; }
h1 { font-size: clamp(2rem, 4.4vw, 3.15rem); }
h2 { font-size: clamp(1.6rem, 3.1vw, 2.35rem); }
h3 { font-size: 1.18rem; }
p  { margin: 0 0 1em; }

a { color: var(--blue-dark); }

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

section { padding: 72px 0; }
.sec-head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.sec-head p { color: var(--text-soft); font-size: 1.06rem; margin: 0; }

.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brand-dark); margin-bottom: .7rem;
}

/* Anchor offset for the sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: inherit; font-size: 1.02rem; font-weight: 800; line-height: 1.2;
  padding: 16px 26px; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.btn-book  { background: var(--brand-cta); color: #fff; }
.btn-book:hover { background: var(--brand-cta-dark); }
.btn-call  { background: var(--call); color: #fff; }
.btn-call:hover { background: var(--call-dark); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-block { width: 100%; }
.btn-lg { padding: 19px 34px; font-size: 1.1rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11,14,19,.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.header-in {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand img { height: 40px; width: auto; }

.nav { display: flex; gap: 26px; }
.nav a {
  color: #E4E9F0; text-decoration: none; font-size: .95rem; font-weight: 600;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: #fff; border-bottom-color: var(--brand-2); }
/* The offer earns a colour in the nav — it's the only promotional item there. */
.nav a.nav-offer { color: var(--brand-2); font-weight: 800; }
.nav a.nav-offer:hover { color: #FFB84D; }

/* Header right-hand cluster: phone (green) + form CTA (brand red).
   Colour-by-action holds — one colour per action, everywhere on the page. */
.header-actions { display: flex; align-items: center; gap: 12px; }

/* Desktop-only. Below 1041px the nav collapses and the sticky bottom bar
   carries this action instead, so the header must not compete for width. */
.header-cta { display: none; padding: 11px 20px; font-size: 1rem; }
@media (min-width: 1041px) {
  .header-cta { display: inline-flex; }
  /* No-JS safe: visible by default, and only hidden once the inline head
     script has set html.js — so it never flashes and never traps focus. */
  html.js .header-cta {
    visibility: hidden; opacity: 0; transition: opacity .25s ease;
  }
  html.js .header-cta.show { visibility: visible; opacity: 1; }
}

/* Header phone — high contrast, obvious, never bland */
.header-call {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--call); color: #fff; text-decoration: none;
  font-weight: 800; font-size: 1.02rem; padding: 11px 20px; border-radius: 999px;
  white-space: nowrap;
}
.header-call:hover { background: var(--call-dark); }
.header-call svg { flex: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink);
  padding: 0;
}
/* Hero photo: a technician servicing an outdoor AC condenser with the branded
   van behind him. Chosen because it reads as "AC repair" at a glance, without
   the visitor having to read a word — equipment alone didn't communicate that. */
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: 62% 50%;
  filter: brightness(1.02) saturate(1.04);
}

/* Per-page hero photo. One stylesheet serves all five landing pages; the page
   picks its hero with a modifier class on <section class="hero h-…">.
   EVERY source below is real, client-owned photography — no stock, no AI.
   (The previous default, hero-ac-tech-*, was an AI-generated image from the
   client's Unbounce funnel: warped chest logo, malformed hand. Removed.) */
.h-gauges      .hero-bg { background-image: url("../assets/hero-gauges-desktop.webp"); }
.h-heatpump    .hero-bg { background-image: url("../assets/hero-heatpump-desktop.webp"); }
.h-furnace     .hero-bg { background-image: url("../assets/hero-furnace-desktop.webp"); }
.h-waterheater .hero-bg { background-image: url("../assets/hero-waterheater-desktop.webp"); }
.h-crew        .hero-bg { background-image: url("../assets/hero-crew-van-desktop.webp"); }
/* Weighted to the LEFT where the copy sits; stays lighter through the centre so
   the unit remains clearly visible between the copy and the form. */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(11,14,19,.94) 0%, rgba(11,14,19,.88) 32%, rgba(11,14,19,.40) 54%, rgba(11,14,19,.46) 70%, rgba(11,14,19,.72) 100%),
    linear-gradient(to top, rgba(11,14,19,.60) 0%, rgba(11,14,19,0) 44%);
}
.hero-in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0,1fr) 420px; gap: 52px; align-items: center;
  padding: 60px 20px 68px;
}
.hero-copy { color: #fff; max-width: 580px; }
.hero-copy h1 { color: #fff; }
.hero-copy h1 .accent {
  background: linear-gradient(90deg, var(--brand-2), var(--brand));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { font-size: 1.14rem; color: #DCE3ED; margin-bottom: 1.4rem; }

.hero-points { list-style: none; margin: 0 0 1.7rem; padding: 0; display: grid; gap: .6rem; }
.hero-points li {
  display: flex; align-items: flex-start; gap: .65rem;
  color: #E9EEF5; font-size: 1.02rem; font-weight: 600;
}
.hero-points svg { flex: none; margin-top: 3px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Phone is the PRIMARY action on MOBILE ONLY.
   Desktop: tel: is a weak affordance — a click does nothing useful or opens an
   app picker — so the number is rendered as readable text and the hero FORM
   stays the desktop conversion.
   Mobile: a full-width tap-to-call sits above the form. */
.call-desktop { display: inline-flex; }
.call-mobile  { display: none; }

.hero-tel {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0;
  color: #E9EEF5; font-size: 1.04rem; font-weight: 700;
}
.hero-tel svg { flex: none; }
/* Bright green on the dark hero — 9:1 against the overlay, and it keeps the
   colour-by-action rule (green = call) consistent with the header pill. */
.hero-tel a { color: #4ADE80; font-weight: 800; text-decoration: none; }
.hero-tel a:hover { text-decoration: underline; }

.hero-rating {
  margin-top: 1.6rem; display: flex; align-items: center; gap: .7rem;
  color: #E9EEF5; font-size: .96rem; font-weight: 600;
}
.stars { color: var(--star); letter-spacing: 1px; font-size: 1.05rem; }

/* ---------- Hero form card ---------- */
.form-card {
  background: #fff; border-radius: var(--radius-lg); padding: 26px;
  box-shadow: var(--shadow-lg);
}
/* Clears the sticky header when the mobile CTA scrolls a form into view. */
.form-card { scroll-margin-top: calc(var(--header-h) + 12px); }
.form-card h2 { font-size: 1.32rem; margin-bottom: .3rem; }
.form-card .form-intro { font-size: .95rem; color: var(--text-soft); margin-bottom: 1.1rem; }

.field { margin-bottom: 13px; }
/* Name + phone share a row so the hero card stays short enough that the copy
   column and the form balance instead of leaving dead space. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row .field { margin-bottom: 13px; }
.field label {
  display: block; font-size: .85rem; font-weight: 700; margin-bottom: 5px; color: var(--text);
}
.field .opt { font-weight: 500; color: var(--text-soft); }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--text);
  padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 10px;
  background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 76px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,123,196,.16);
}
.form-trust {
  display: flex; align-items: center; gap: .5rem; justify-content: center;
  background: var(--paper-2); border-radius: 10px; padding: 10px 12px;
  font-size: .85rem; font-weight: 700; color: var(--text); margin-bottom: 13px;
}
.form-note {
  font-size: .82rem; color: var(--text-soft); text-align: center; margin: 11px 0 0;
}
.form-note a { color: var(--blue-dark); }
.hp { position: absolute; left: -9999px; }

/* ---------- Trust bar ---------- */
.trustbar { background: var(--paper-2); padding: 26px 0; border-bottom: 1px solid var(--line); }
.trust-items { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: center; }
.trust-item {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  padding: 0 8px; border-right: 1px solid var(--line);
}
.trust-item:last-child { border-right: 0; }

/* Every credential sits in a fixed-height mark box — badge image, "A+" and the
   star row alike. One shared box height is what puts five marks of different
   aspect ratios on a single optical line and starts every label beside them at
   the same place. Sizing lives here, never inline: an inline height:52px beats
   the mobile media query and was leaving badges at desktop size on phones. */
.trust-item .t-mark {
  flex: none; display: flex; align-items: center; justify-content: center;
  height: 50px;
}
.trust-item .t-mark img { max-height: 100%; max-width: 100%; width: auto; height: auto; }
.t-mark-wide { width: 108px; }   /* FortisBC is a wide lockup, not a round seal */
.t-mark-txt { font-size: 1.6rem; font-weight: 800; color: var(--brand-dark); line-height: 1; }
.t-mark-stars { font-size: 1.3rem; line-height: 1; }
/* min-width:0 lets the label shrink inside its grid/flex cell — without it the
   longest label forces the whole page to scroll sideways on narrow phones. */
.trust-item { min-width: 0; }
.trust-item .t-lab { font-size: .86rem; font-weight: 700; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.trust-item .t-sub { display: block; font-size: .77rem; font-weight: 500; color: var(--text-soft); }

/* ---------- Promise (the core angle) ---------- */
.promise { background: var(--ink); color: #fff; }
.promise h2 { color: #fff; }
.promise .sec-head p { color: #C7D0DC; }
.promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.promise-card {
  background: var(--ink-2); border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius); padding: 26px;
}
.promise-card h3 { color: #fff; }
.promise-card p { color: #C7D0DC; margin: 0; font-size: .97rem; }
.p-icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); margin-bottom: 14px;
}

/* ---------- Umbrella page: 4-up equipment grid + deep links ----------
   The only cross-page links on the site. They exist because the umbrella page
   serves visitors who DO know what they need — the card's primary CTA is still
   the on-page form, so an undecided visitor is never pushed off the page. */
/* Two classes, so this beats the 3-up `.systems-grid` base and its media
   queries on specificity rather than depending on source order. */
.systems-grid.systems-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1180px) { .systems-grid.systems-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .systems-grid.systems-grid-4 { grid-template-columns: 1fr; } }

.sys-link {
  display: inline-block; margin-top: 14px;
  color: var(--brand-cta); font-weight: 800; font-size: .95rem;
  text-decoration: none; border-bottom: 2px solid transparent;
}
.sys-link:hover { border-bottom-color: var(--brand-cta); }

/* ---------- Real-work band (full-bleed ultra-wide strip) ---------- */
.workband { background: var(--paper-2); padding: 64px 0 0; }
.band-claims {
  list-style: none; margin: 0 0 34px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px;
}
.band-claims li {
  display: flex; align-items: center; gap: .5rem;
  font-size: .95rem; font-weight: 700; color: var(--text);
}
.band-claims svg { flex: none; }
/* Edge-to-edge: the strip is 6.4:1, so constraining it to the container would
   shrink every frame to postage-stamp size. */
.band-img {
  width: 100%; height: 210px; object-fit: cover; object-position: center;
  display: block;
}

/* ---------- Symptoms ---------- */
.symptom-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.symptom {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 20px; box-shadow: var(--shadow);
}
.symptom h3 { font-size: 1.04rem; margin-bottom: .35rem; }
.symptom p { font-size: .92rem; color: var(--text-soft); margin: 0; }
.s-icon {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(30,123,196,.1); margin-bottom: 13px;
}

/* ---------- Offer / tune-up specials ----------
   Amber is reserved for the offer: it must not read as the brand "book" red or
   the "call" green, or the colour-by-action rule breaks down. */
.offer {
  background:
    radial-gradient(1100px 420px at 50% -10%, rgba(247,148,29,.16), transparent 65%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-3) 100%);
  color: #fff;
}
.offer h2 { color: #fff; }
.offer .sec-head p { color: #C7D0DC; }

.offer-flag {
  display: inline-block; margin-bottom: .8rem;
  background: linear-gradient(90deg, var(--brand-2), #FFB84D);
  color: #2A1A00; font-size: .74rem; font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
}

.offer-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px; max-width: 860px; margin: 0 auto;
}
.offer-card {
  position: relative; background: var(--ink-2);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg);
  padding: 34px 28px 28px; text-align: center;
  /* Column layout so both CTAs sit on the same baseline even though the
     heating card carries two extra lines of rebate maths. */
  display: flex; flex-direction: column;
}
.offer-card .offer-sub { margin-top: auto; }
.offer-card.featured {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 1px var(--brand-2), 0 18px 44px rgba(247,148,29,.16);
  background: linear-gradient(180deg, rgba(247,148,29,.09), var(--ink-2) 55%);
}
/* "+ tax" rides with every displayed price — TAK's price is $119 plus tax. */
.offer-price .tax {
  font-size: .34em; font-weight: 700; letter-spacing: .02em;
  color: #B9C4D2; vertical-align: middle; margin-left: .15em;
}

/* The FortisBC rebate is FortisBC's to grant, not ours. It is shown as a
   conditional note rather than subtracted from the price, so nobody arrives
   expecting $69 and is told they didn't qualify. */
.offer-rebate {
  margin: 10px 0 0; padding: 11px 14px;
  border-radius: 10px;
  border: 1px dashed rgba(247,148,29,.45);
  background: rgba(247,148,29,.07);
  color: #E3E9F1; font-size: .88rem; line-height: 1.55;
}
.offer-rebate strong { color: var(--brand-2); }

.offer-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--brand-2); color: #2A1A00;
  font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.offer-card h3 { color: #fff; font-size: 1.12rem; margin-bottom: .9rem; }

.offer-math { margin: 0 0 .3rem; font-size: .96rem; color: #A9B4C2; }
.offer-math .was { text-decoration: line-through; }
.offer-math .minus { display: block; color: var(--brand-2); font-weight: 700; }

.offer-price {
  margin: 0 0 .6rem; font-size: 3.4rem; font-weight: 900; line-height: 1;
  color: #fff; letter-spacing: -.03em;
}
.offer-price .cur { font-size: 1.7rem; vertical-align: super; margin-right: 2px; }
.offer-price .pre {
  display: block; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-2); margin-bottom: .3rem;
}
.offer-sub { font-size: .93rem; color: #B4BFCD; margin: 0 0 1.4rem; }

.btn-ghost-dark {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.4);
}
.btn-ghost-dark:hover { background: rgba(255,255,255,.1); }

.offer-terms {
  max-width: 860px; margin: 20px auto 0; text-align: center;
  font-size: .82rem; color: #8E99A8;
}

.offer-benefits {
  list-style: none; margin: 40px 0 0; padding: 26px 0 0;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px;
}
.offer-benefits li { display: flex; align-items: center; gap: .6rem; color: #E9EEF5; font-size: 1rem; }
.offer-benefits svg { flex: none; }

/* ---------- Systems ---------- */
.systems { background: var(--paper-2); }
.systems-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.system-card {
  background: #fff; border-radius: var(--radius); padding: 28px; border: 1px solid var(--line);
}
.system-card h3 { margin-bottom: .4rem; }
.system-card p { font-size: .95rem; color: var(--text-soft); margin: 0 0 .9rem; }
.system-card ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; color: var(--text-soft); }
.system-card li { margin-bottom: .3rem; }
.makes {
  margin-top: 34px; text-align: center; font-size: 1rem; font-weight: 700; color: var(--text);
  background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); padding: 20px;
}
.makes span { display: block; font-weight: 500; color: var(--text-soft); font-size: .93rem; margin-top: .3rem; }

/* ---------- Real work gallery ---------- */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.work-item {
  margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
/* First tile spans two columns — the servicing shot is the strongest of the set. */
.work-item:first-child { grid-column: span 2; }
.work-item img { width: 100%; height: 260px; object-fit: cover; }
/* Both tiles on the first row share a taller image so the row aligns. */
.work-item:first-child img,
.work-item:nth-child(2) img { height: 340px; }
.work-item figcaption {
  padding: 14px 18px; font-size: .9rem; color: var(--text-soft); line-height: 1.45;
}

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: s; }
.step { position: relative; padding-top: 8px; }
.step-n {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-cta); color: #fff; font-weight: 800; font-size: 1.15rem; margin-bottom: 15px;
}
.step h3 { margin-bottom: .35rem; }
.step p { color: var(--text-soft); font-size: .96rem; margin: 0; }

/* Photo closing the process section — reinforces "finished on the first visit". */
.process-photo {
  margin: 46px auto 0; max-width: 900px;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.process-photo img { width: 100%; height: auto; display: block; }
.process-photo figcaption {
  padding: 14px 18px; font-size: .92rem; color: var(--text-soft);
  background: #fff; text-align: center;
}

/* ---------- Meet Tony (editorial split) ---------- */
.owner { background: var(--ink); color: #fff; }
.owner-grid { display: grid; grid-template-columns: 400px minmax(0,1fr); gap: 52px; align-items: center; }
.owner-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.owner h2 { color: #fff; }
.owner p { color: #C7D0DC; }
.owner .quote {
  border-left: 3px solid var(--brand-2); padding-left: 18px; margin: 22px 0;
  font-size: 1.1rem; font-style: italic; color: #EDF1F6;
}
.owner-sig { font-weight: 800; color: #fff; font-style: normal; display: block; margin-top: .6rem; font-size: .95rem; }
.owner-sig span { display: block; font-weight: 500; color: #A9B4C2; font-size: .85rem; }

/* ---------- Reviews ---------- */
.reviews { background: var(--paper-2); }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review {
  background: #fff; border-radius: var(--radius); padding: 24px; border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.review .stars { margin-bottom: .6rem; }
.review p { font-size: .96rem; color: var(--text); margin: 0 0 1rem; flex: 1; }
.review .who { font-weight: 800; font-size: .93rem; }
.review .who span { display: block; font-weight: 500; color: var(--text-soft); font-size: .82rem; margin-top: 2px; }
.review-foot { text-align: center; margin-top: 30px; font-weight: 700; }
.review-foot > span { display: block; font-weight: 500; color: var(--text-soft); font-size: .93rem; margin-top: .3rem; }

/* ---------- Booking section ---------- */
.book { background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%); color: #fff; }
.book-grid { display: grid; grid-template-columns: minmax(0,1fr) 440px; gap: 52px; align-items: start; }
.book h2 { color: #fff; }
/* The form card sits on white — undo the dark-section heading colour. */
.book .form-card h2 { color: var(--text); }
.book-copy > p { color: #C7D0DC; font-size: 1.05rem; }
.book-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 15px; }
.book-list li { display: flex; gap: .8rem; align-items: flex-start; color: #E4EAF2; }
.book-list svg { flex: none; margin-top: 3px; }
.book-list strong { display: block; color: #fff; }
.book-list em { font-style: normal; color: #B4BFCD; font-size: .93rem; }
.book-call {
  margin-top: 30px; padding: 20px; border-radius: var(--radius);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
}
.book-call p { margin: 0 0 .8rem; color: #E4EAF2; font-weight: 600; }

/* ---------- Service area ---------- */
/* Branded van above the city list — says "we drive to you" faster than the copy. */
.area-van {
  display: block; width: 100%; max-width: 520px; height: auto;
  margin: 0 auto 34px;
}
.area-list {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 860px; margin: 0 auto;
}
.area-list span {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 18px; font-size: .93rem; font-weight: 600;
}
.area-list span.primary { background: var(--brand-cta); color: #fff; border-color: var(--brand-cta); }

/* ---------- FAQ ---------- */
.faq { background: var(--paper-2); }
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 12px; overflow: hidden;
}
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 1.04rem; font-weight: 700; color: var(--text);
  padding: 20px 54px 20px 22px; position: relative; line-height: 1.4;
}
.faq-q:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.faq-q::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq-q[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -3px; }
.faq-a { padding: 0 22px; max-height: 0; overflow: hidden; transition: max-height .28s ease, padding .28s ease; }
.faq-a[data-open="true"] { padding: 0 22px 20px; }
.faq-a p { margin: 0; color: var(--text-soft); font-size: .98rem; }
.faq-a p + p { margin-top: .8rem; }

/* ---------- Final CTA ---------- */
.final { background: var(--ink); color: #fff; text-align: center; }
.final h2 { color: #fff; }
.final > .wrap > p { color: #C7D0DC; max-width: 620px; margin: 0 auto 1.8rem; font-size: 1.08rem; }
.final-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { background: #070A0E; color: #9DA8B6; padding: 52px 0 34px; font-size: .93rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; margin-bottom: 32px; }
.site-footer img { height: 40px; width: auto; margin-bottom: 14px; }
.site-footer h3 { color: #fff; font-size: .95rem; margin-bottom: .8rem; }
.site-footer a { color: #C3CCD8; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; font-size: .86rem;
}
.footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.disclaimer { margin-top: 14px; font-size: .8rem; color: #75808E; max-width: 780px; }

/* ---------- Draft verification labels (preview only) ---------- */
.label-flag {
  display: inline-block; background: #FFF3CD; color: #6B4E00; border: 1px solid #E0C97A;
  border-radius: 5px; padding: 1px 7px; font-size: .72rem; font-weight: 800;
  letter-spacing: .02em; vertical-align: middle;
}

/* ---------- Sticky mobile bar ---------- */
.mobile-bar { display: none; }

/* ---------- Scroll reveal (no-JS safe) ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1040px) {
  .nav { display: none; }
  .trust-items { grid-template-columns: repeat(3, 1fr); gap: 18px 12px; }
  .trust-item:nth-child(3) { border-right: 0; }
  .hero-in { grid-template-columns: minmax(0,1fr) 380px; gap: 36px; }
  .promise-grid, .systems-grid, .review-grid, .steps { grid-template-columns: repeat(2, 1fr); }
  .symptom-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .owner-grid { grid-template-columns: 320px minmax(0,1fr); gap: 36px; }
  .book-grid { grid-template-columns: minmax(0,1fr) 380px; gap: 36px; }
}

@media (max-width: 860px) {
  body { font-size: 16px; }
  section { padding: 54px 0; }

  .hero-bg { background-position: 50% 45%; }
  .h-gauges      .hero-bg { background-image: url("../assets/hero-gauges-mobile.webp"); }
  .h-heatpump    .hero-bg { background-image: url("../assets/hero-heatpump-mobile.webp"); }
  .h-furnace     .hero-bg { background-image: url("../assets/hero-furnace-mobile.webp"); }
  .h-waterheater .hero-bg { background-image: url("../assets/hero-waterheater-mobile.webp"); }
  .h-crew        .hero-bg { background-image: url("../assets/hero-crew-van-mobile.webp"); }
  .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(11,14,19,.90) 0%, rgba(11,14,19,.72) 40%, rgba(11,14,19,.94) 78%, rgba(11,14,19,.98) 100%);
  }
  .hero-in { grid-template-columns: 1fr; padding: 40px 20px 44px; gap: 28px; }
  .hero-copy { max-width: none; }

  /* Mobile: the PHONE is the primary action (Paul, 2026-07-30). A full-width
     tap-to-call sits directly above the hero form, and the readable-number line
     used on desktop is hidden. To avoid a third call surface, the sticky bottom
     bar drops its Call button — the sticky header pill is the persistent one. */
  .hero-actions { display: block; margin-bottom: 1.2rem; }
  .call-mobile  { display: inline-flex; }
  .call-desktop { display: none; }

  /* Reorder the hero on mobile so the call button clears the fold. Left in DOM
     order it sits below four bullets and lands ~620px down — off the first
     screen on a shorter phone, which defeats making the phone primary.
     Star rating goes directly above it: proof at the point of action. */
  .hero-copy { display: flex; flex-direction: column; }
  .hero-copy .eyebrow { order: 1; }
  .hero-copy h1       { order: 2; }
  .hero-sub           { order: 3; margin-bottom: 1rem; }
  .hero-rating        { order: 4; margin: 0 0 .9rem; }
  .hero-actions       { order: 5; }
  .hero-points        { order: 6; margin-bottom: 0; }

  /* Show the real number on mobile too — "Call Now" gives the visitor nothing
     to recognise, remember, or read back. The number is the CTA. */
  .header-call { padding: 10px 14px; font-size: .94rem; gap: .4rem; }

  .promise-grid, .systems-grid, .review-grid, .steps,
  .owner-grid, .book-grid, .footer-grid, .work-grid,
  .offer-grid, .field-row { grid-template-columns: 1fr; }
  .offer-grid { gap: 30px; }
  .offer-price { font-size: 3rem; }
  .offer-benefits { gap: 12px 0; flex-direction: column; align-items: center; }
  .work-item:first-child { grid-column: span 1; }
  .work-item img, .work-item:first-child img { height: 210px; }

  /* Photo gallery and reviews become swipeable rows on phones. Stacked, they ran
     2.4 and 2.6 screens — nearly a quarter of the entire page spent on two sets
     of similar items. Horizontal scroll-snap is the native mobile gesture for
     browsing a set, and costs about half a screen instead. */
  .work-grid, .review-grid {
    display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .work-grid::-webkit-scrollbar,
  .review-grid::-webkit-scrollbar { display: none; }

  /* 84% leaves a sliver of the next card showing — the affordance that tells the
     thumb there is more to the right. */
  .work-item, .review { flex: 0 0 84%; scroll-snap-align: start; }
  .work-item:first-child { grid-column: auto; }

  /* Footer links were 20–22px tall, under the 44px tap floor — and the phone
     number down there is a real conversion control, not decoration. */
  .footer-list a, .footer-legal a {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  /* Symptoms become a compact, scannable 2-up grid on phones — the detail line
     is desktop-only so the section stays skimmable instead of 8 screens long. */
  .symptom-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .symptom { padding: 16px 14px; }
  .symptom h3 { font-size: .95rem; }
  .symptom p { display: none; }
  .s-icon { width: 34px; height: 34px; margin-bottom: 10px; }

  .review { padding: 20px; }

  /* A 6.4:1 strip squeezed into 375px makes every frame unreadable — serve the
     tighter cooling-equipment crop instead and give it more height. */
  .workband { padding-top: 48px; }
  .band-img { content: url("../assets/work-band-mobile.webp"); height: 180px; }
  .band-claims { gap: 10px 18px; }
  .band-claims li { font-size: .88rem; }

  .owner-grid { gap: 28px; }
  .owner-photo { max-width: 340px; margin: 0 auto; }

  /* Phones: stack each credential (mark above, label below) instead of keeping
     the desktop mark-beside-label row. Side by side inside a ~175px half-column
     there is no room left for the label, so each one wrapped at a different
     word and every mark pushed its text to a different x — logos looked lined
     up while the text next to them read as noise. Stacked and centred, the
     marks share one baseline and the labels centre under them.
     Columns are 1fr (not auto) so both cells are equal whatever the mark width;
     align-items:start keeps a 2-line and a 3-line label starting level. */
  .trust-items {
    grid-template-columns: repeat(2, 1fr);
    justify-items: stretch; align-items: start;
    gap: 22px 14px;
  }
  .trust-item {
    flex-direction: column; border-right: 0;
    justify-content: flex-start; text-align: center; gap: 9px; padding: 0 2px;
  }
  /* Five items in a 2-up grid orphans the fifth — span it and centre instead. */
  .trust-item:last-child { grid-column: 1 / -1; }
  .trust-item .t-mark { height: 42px; }
  .t-mark-wide { width: 96px; }
  .trust-item .t-lab { font-size: .82rem; }
  .trust-item .t-sub { font-size: .74rem; }

  /* Sticky mobile action bar — the FORM action only.
     Call already has two surfaces on mobile (the sticky header pill and the
     full-width hero button), so repeating it here would be the third and turn
     the first screen into a choice between identical buttons. */
  .mobile-bar {
    display: grid; grid-template-columns: 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(11,14,19,.97); border-top: 1px solid rgba(255,255,255,.12);
  }
  /* Single full-width action — room for a benefit-worded label now that it
     isn't sharing the row with a call button. */
  .mobile-bar .btn { padding: 15px 10px; font-size: 1rem; gap: .35rem; white-space: nowrap; }
  body { padding-bottom: 78px; }

  .footer-bottom { flex-direction: column; }
}