/* ═══════════════════════════════════════════════════════════════
   Alex Heating LLC — V3 design system
   Light, engineered, editorial. White / paper / slate · red + blue.
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --white:  #ffffff;
  --paper:  #f5f6f8;
  --ink:    #14161b;
  --slate:  #1c1f26;
  --slate-2:#262a33;
  --body:   #444b57;
  --faint:  #6a7280;
  --hair:   #e2e5ea;
  --red:    #c22525;
  --red-hot:#e23636;
  --blue:   #1a5fa8;
  --blue-sky:#3b8de0;
  --ok:     #178a4c;
  --maxw: 1200px;
  --gutter: 5vw;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  color: var(--body);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul[class], ol[class] { list-style: none; }

h1, h2, h3, h4, .display {
  font-family: 'Archivo', 'Inter', sans-serif;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -.015em;
  font-weight: 700;
}

.wrap { width: min(var(--maxw), 100% - 2*var(--gutter)); margin-inline: auto; }

/* ── Accessibility ─────────────────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 4000;
  background: var(--ink); color: #fff;
  padding: .85rem 1.5rem; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ── Type utilities ────────────────────────────────────────── */
.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: 'Archivo', sans-serif;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--red);
}
.kicker::before {
  content: ''; width: 10px; height: 10px;
  background: var(--red); flex-shrink: 0;
}
.kicker.blue { color: var(--blue); }
.kicker.blue::before { background: var(--blue); }

.title-xl { font-size: clamp(2.4rem, 5.4vw, 4.1rem); font-weight: 800; }
.title-lg { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 800; margin-top: .9rem; }
.title-md { font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 700; }

.lead { font-size: 1.1rem; color: var(--faint); max-width: 60ch; margin-top: 1.2rem; }

/* On-dark variants */
.on-dark, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark .lead, .on-dark p { color: rgba(255,255,255,.72); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: 'Archivo', sans-serif;
  font-weight: 700; font-size: .92rem;
  letter-spacing: .04em;
  padding: .95rem 2rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn-solid { background: var(--red); color: #fff; }
.btn-solid:hover { background: #a31d1d; box-shadow: 0 8px 24px rgba(194,37,37,.28); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-line-light { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.btn-line-light:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: #144d89; }

/* ── Utility bar + header ──────────────────────────────────── */
.utility {
  background: var(--slate);
  color: rgba(255,255,255,.75);
  font-size: .8rem;
  padding: .45rem 0;
}
.utility .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.utility a { color: #fff; font-weight: 700; }
.utility a:hover { color: var(--blue-sky); }
.utility .lic { letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; align-self: center; }

.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.header-row { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand img { height: 48px; width: auto; }

.nav-desktop ul { display: flex; align-items: center; gap: .35rem; }
.nav-desktop a {
  font-family: 'Archivo', sans-serif;
  font-size: .9rem; font-weight: 600;
  color: var(--ink);
  padding: .55rem .9rem;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-desktop a:hover { color: var(--red); }
.nav-desktop a[aria-current="page"] { border-bottom-color: var(--red); color: var(--red); }
.nav-desktop .btn { margin-left: .9rem; padding: .65rem 1.4rem; }

.menu-btn {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--hair); background: var(--white);
  cursor: pointer; color: var(--ink);
  align-items: center; justify-content: center;
}
.menu-btn svg { width: 22px; height: 22px; }

.nav-mobile {
  display: flex;
  position: fixed; inset: 0; top: 0; z-index: 2000;
  background: var(--slate);
  padding: 5.5rem 2rem 2rem;
  flex-direction: column; gap: .2rem;
  visibility: hidden; opacity: 0;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.nav-mobile.open {
  visibility: visible; opacity: 1;
  transition: opacity .25s ease;
}
.nav-mobile a {
  font-family: 'Archivo', sans-serif;
  color: #fff; font-size: 1.25rem; font-weight: 700;
  padding: .9rem .2rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (prefers-reduced-motion: no-preference) {
  .nav-mobile a { opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease; }
  .nav-mobile.open a { opacity: 1; transform: none; }
  .nav-mobile.open a:nth-child(2) { transition-delay: .05s; }
  .nav-mobile.open a:nth-child(3) { transition-delay: .09s; }
  .nav-mobile.open a:nth-child(4) { transition-delay: .13s; }
  .nav-mobile.open a:nth-child(5) { transition-delay: .17s; }
  .nav-mobile.open a:nth-child(6) { transition-delay: .21s; }
  .nav-mobile.open a:nth-child(7) { transition-delay: .26s; }
  .nav-mobile.open a:nth-child(8) { transition-delay: .31s; }
}
.nav-mobile a:hover { color: var(--blue-sky); }
.nav-mobile .btn { margin-top: 1.4rem; border-bottom: none; }
.nav-mobile .btn-line-light { border-bottom: 2px solid rgba(255,255,255,.5); }
.nav-mobile .btn-line-light:hover { border-bottom-color: #fff; }
.nav-mobile .close-btn {
  position: absolute; top: 1.2rem; right: 1.4rem;
  width: 46px; height: 46px;
  background: transparent; border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: 1.5rem; cursor: pointer;
}

/* ── Sections ──────────────────────────────────────────────── */
.section { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.section.paper { background: var(--paper); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.section.dark { background: var(--slate); }

.sec-head { max-width: 760px; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .kicker { justify-content: center; }
.sec-head.center .lead { margin-inline: auto; }

/* ── Hero (home) ───────────────────────────────────────────── */
.hero { border-bottom: 1px solid var(--hair); overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(3rem, 6vw, 5.5rem) 0;
}
.hero h1 .accent { color: var(--red); }
.hero h1 .accent-b { color: var(--blue); }

.hero-ticks { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 1.8rem; }
.hero-ticks li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; color: var(--ink); }
.hero-ticks svg { width: 17px; height: 17px; stroke: var(--ok); flex-shrink: 0; }

.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; align-items: center; }
.hero-call {
  display: inline-flex; flex-direction: column; margin-left: .5rem;
}
.hero-call .lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); font-weight: 700; }
.hero-call a { font-family: 'Archivo', sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.hero-call a:hover { color: var(--red); }

/* framed photo with corner ticks */
.frame { position: relative; }
.frame img { width: 100%; height: auto; aspect-ratio: 4/4.6; object-fit: cover; }
.frame::before, .frame::after,
.frame .tick::before, .frame .tick::after {
  content: ''; position: absolute; width: 26px; height: 26px; pointer-events: none;
}
.frame::before { top: -9px; left: -9px; border-top: 3px solid var(--red); border-left: 3px solid var(--red); }
.frame::after  { top: -9px; right: -9px; border-top: 3px solid var(--red); border-right: 3px solid var(--red); }
.frame .tick::before { bottom: -9px; left: -9px; border-bottom: 3px solid var(--red); border-left: 3px solid var(--red); }
.frame .tick::after  { bottom: -9px; right: -9px; border-bottom: 3px solid var(--red); border-right: 3px solid var(--red); }

.float-card {
  position: absolute; left: -2.2rem; bottom: 2rem;
  background: var(--white);
  border: 1px solid var(--hair);
  border-left: 4px solid var(--blue);
  box-shadow: 0 18px 48px rgba(20,22,27,.16);
  padding: 1.1rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
}
.float-card .big { font-family: 'Archivo', sans-serif; font-size: 1.7rem; font-weight: 800; color: var(--ink); line-height: 1; }
.float-card .sm { font-size: .78rem; color: var(--faint); line-height: 1.4; }

/* ── Stats band ────────────────────────────────────────────── */
.stats-band { background: var(--slate); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-cell {
  padding: 2rem 1.4rem;
  text-align: center;
  border-left: 1px solid rgba(255,255,255,.1);
}
.stat-cell:first-child { border-left: none; }
.stat-cell .n { font-family: 'Archivo', sans-serif; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; color: #fff; line-height: 1.05; }
.stat-cell .n span { color: var(--red-hot); }
.stat-cell .l { font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.55); margin-top: .45rem; }

/* ── Service cards (numbered) ──────────────────────────────── */
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hair); border-left: 1px solid var(--hair);
}
.svc-tile {
  position: relative;
  display: block;
  background: var(--white);
  border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  padding: 2.2rem 2rem 2rem;
  transition: background .25s;
}
.svc-tile:hover, .svc-tile:focus-visible { background: var(--paper); }
.svc-tile .no {
  font-family: 'Archivo', sans-serif;
  font-size: .8rem; font-weight: 800; letter-spacing: .12em;
  color: var(--faint);
}
.svc-tile:hover .no { color: var(--red); }
.svc-tile h3 { font-size: 1.18rem; margin-top: .9rem; }
.svc-tile p { font-size: .92rem; margin-top: .55rem; color: var(--faint); }
.svc-tile .go {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 1.1rem;
  font-family: 'Archivo', sans-serif; font-size: .85rem; font-weight: 700;
  color: var(--blue);
}
.svc-tile:hover .go { color: var(--red); }
.svc-tile .go svg { width: 15px; height: 15px; transition: transform .2s; }
.svc-tile:hover .go svg { transform: translateX(4px); }

/* ── Split feature (dark why-us) ───────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }

.checklist { margin-top: 1.8rem; display: grid; gap: .95rem; }
.checklist li { display: flex; gap: .85rem; align-items: flex-start; }
.checklist .bx {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 3px;
  border: 2px solid var(--ok);
  display: grid; place-items: center;
}
.checklist .bx svg { width: 12px; height: 12px; stroke: var(--ok); }
.on-dark .checklist li { color: rgba(255,255,255,.85); }
.checklist b { color: inherit; }
.on-dark .checklist b { color: #fff; }

.img-cover { position: relative; }
.img-cover img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.img-cover .veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(28,31,38,.45), transparent 55%); }

/* ── Process strip ─────────────────────────────────────────── */
.steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-left: 1px solid var(--hair); border-top: 1px solid var(--hair); }
.step-cell { border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 2rem 1.7rem 2.2rem; background: var(--white); }
.step-cell .num {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: .82rem; letter-spacing: .14em;
  color: var(--white); background: var(--ink);
  display: inline-block; padding: .3rem .7rem;
}
.step-cell:nth-child(2) .num { background: var(--red); }
.step-cell:nth-child(3) .num { background: var(--blue); }
.step-cell h3 { font-size: 1.05rem; margin-top: 1.1rem; }
.step-cell p { font-size: .9rem; color: var(--faint); margin-top: .5rem; }

/* ── Gallery ───────────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.shot { position: relative; overflow: hidden; }
.shot img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .45s ease; }
.shot:hover img { transform: scale(1.04); }
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(20,22,27,.85), transparent);
  color: #fff;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: .92rem;
  padding: 2.2rem 1.2rem .9rem;
}
.shot figcaption small { display: block; font-family: 'Inter', sans-serif; font-weight: 500; font-size: .74rem; color: rgba(255,255,255,.65); }

/* ── Quotes ────────────────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.quote {
  background: var(--white);
  border: 1px solid var(--hair);
  border-top: 3px solid var(--blue);
  padding: 2rem 1.8rem;
  display: flex; flex-direction: column;
}
.quote:nth-child(2) { border-top-color: var(--red); }
.quote .qstars { color: #e8a213; font-size: .95rem; letter-spacing: .18em; }
.quote blockquote { margin-top: 1rem; font-size: .96rem; color: var(--body); flex: 1; }
.quote footer { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--hair); }
.quote cite { font-style: normal; font-family: 'Archivo', sans-serif; font-weight: 700; color: var(--ink); font-size: .95rem; }
.quote small { display: block; color: var(--faint); font-size: .78rem; margin-top: .15rem; }

/* ── Area columns ──────────────────────────────────────────── */
.area-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--hair); }
.area-col { padding: 2.2rem 2rem; border-left: 1px solid var(--hair); background: var(--white); }
.area-col:first-child { border-left: none; }
.area-col .cty { font-family: 'Archivo', sans-serif; font-size: .76rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.area-col h3 { font-size: 1.2rem; margin-top: .5rem; padding-bottom: .9rem; border-bottom: 2px solid var(--ink); }
.area-col ul { margin-top: 1rem; columns: 2; }
.area-col li { font-size: .92rem; padding: .28rem 0; break-inside: avoid; }

/* ── CTA band ──────────────────────────────────────────────── */
.cta-band { background: var(--slate); position: relative; overflow: hidden; }
.cta-band::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--red) 0 50%, var(--blue) 50% 100%);
}
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding: clamp(3rem, 6vw, 4.5rem) 0; }
.cta-inner h2 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.3rem); max-width: 22ch; }
.cta-inner p { color: rgba(255,255,255,.65); margin-top: .6rem; max-width: 50ch; }
.cta-actions { display: flex; gap: .9rem; flex-wrap: wrap; }

/* ── Page header (subpages) ────────────────────────────────── */
.page-head { background: var(--slate); padding: clamp(3rem, 6vw, 4.5rem) 0; position: relative; }
.page-head::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--red) 0 50%, var(--blue) 50% 100%);
}
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8rem; color: rgba(255,255,255,.55); margin-bottom: 1.1rem; }
.crumbs a { color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: #fff; }
.crumbs li + li::before { content: '/'; margin-right: .4rem; color: rgba(255,255,255,.3); }
.page-head h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 800; }
.page-head .lead { color: rgba(255,255,255,.7); }

/* ── Article / service detail ──────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.detail-grid .frame img { aspect-ratio: 4/4.2; }

.prose h2 { font-size: 1.45rem; margin: 2.4rem 0 .8rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 1rem; }
.prose ul { margin: 0 0 1.1rem; display: grid; gap: .55rem; }
.prose ul li { display: flex; gap: .7rem; align-items: flex-start; }
.prose ul li::before {
  content: ''; width: 8px; height: 8px; flex-shrink: 0; margin-top: .52em;
  background: var(--red);
}
.prose strong { color: var(--ink); }

.side-card {
  border: 1px solid var(--hair); border-top: 4px solid var(--red);
  background: var(--paper);
  padding: 1.8rem 1.7rem;
  margin-top: 2rem;
}
.side-card h3 { font-size: 1.05rem; }
.side-card p { font-size: .9rem; margin-top: .5rem; }
.side-card .btn { width: 100%; margin-top: 1.1rem; }
.side-card .tel { display: block; text-align: center; margin-top: .9rem; font-family: 'Archivo', sans-serif; font-weight: 800; color: var(--ink); font-size: 1.1rem; }
.side-card .tel:hover { color: var(--red); }

/* FAQ */
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.2rem .2rem;
  font-family: 'Archivo', sans-serif; font-weight: 700; color: var(--ink); font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.4rem; color: var(--red); flex-shrink: 0; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq .faq-a { padding: 0 .2rem 1.3rem; color: var(--body); max-width: 70ch; }

/* ── Forms ─────────────────────────────────────────────────── */
.form-shell { background: var(--white); border: 1px solid var(--hair); border-top: 4px solid var(--blue); padding: clamp(1.8rem, 3vw, 2.6rem); }
.form-shell h2, .form-shell h3 { font-size: 1.3rem; margin-bottom: 1.4rem; }
.f-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.field label { font-size: .85rem; font-weight: 700; color: var(--ink); }
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit; font-size: .95rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid #c9ced6;
  padding: .78rem 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,95,168,.16);
}
.field textarea { min-height: 130px; resize: vertical; }
.form-note { font-size: .76rem; color: var(--faint); margin-top: .9rem; }
.form-note a { color: var(--blue); text-decoration: underline; }

.form-msg { display: none; padding: 1rem 1.2rem; font-weight: 700; font-size: .92rem; margin-bottom: 1.2rem; }
.form-msg.show { display: block; }
.form-msg.ok { background: #e9f7ef; border: 1px solid var(--ok); color: #11603a; }
.form-msg.err { background: #fdecec; border: 1px solid var(--red); color: #8f1b1b; }

/* ── Footer ────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: rgba(255,255,255,.6); }
.footer-top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 2.6rem;
  padding: clamp(3rem, 5vw, 4.2rem) 0 2.6rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-top img { height: 70px; width: auto; }
.footer-top .blurb { font-size: .9rem; margin-top: 1.1rem; max-width: 320px; }
.f-head { font-family: 'Archivo', sans-serif; font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #fff; margin-bottom: 1.1rem; }
.f-links { display: grid; gap: .55rem; }
.f-links a { font-size: .9rem; }
.f-links a:hover { color: var(--blue-sky); }
.f-meta { display: grid; gap: .5rem; font-size: .9rem; }
.f-meta a:hover { color: var(--blue-sky); }
.f-meta .hrs { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.f-meta .hrs span:first-child { color: rgba(255,255,255,.4); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1.5rem 0 2rem;
  font-size: .78rem; color: rgba(255,255,255,.45);
}
.footer-bottom a { text-decoration: underline; }
.footer-bottom a:hover { color: var(--blue-sky); }

/* ── Reveal ────────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1060px) {
  .nav-desktop { display: none; }
  .menu-btn { display: inline-flex; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-row { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(3) { border-left: none; }
  .stat-cell { border-top: 1px solid rgba(255,255,255,.1); }
  .stat-cell:nth-child(-n+2) { border-top: none; }
}
@media (max-width: 860px) {
  .hero-grid, .split, .detail-grid { grid-template-columns: 1fr; }
  .hero-grid { padding: 2.6rem 0 3.4rem; gap: 2.4rem; }
  .float-card { left: 1rem; bottom: 1rem; }
  .gallery, .quotes { grid-template-columns: 1fr 1fr; }
  .area-cols { grid-template-columns: 1fr; }
  .area-col { border-left: none; border-top: 1px solid var(--hair); }
  .area-col:first-child { border-top: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .img-cover img { min-height: 300px; }
  .utility .lic { display: none; }
  .utility .wrap { justify-content: center; text-align: center; }
  .detail-grid .frame img { aspect-ratio: 4/3; }
  .page-head .lead { font-size: 1rem; }
}

/* ── Phones: designed, not squished ────────────────────────── */
@media (max-width: 600px) {
  :root { --gutter: 6vw; }

  /* layout collapses */
  .svc-grid, .steps-row, .gallery, .quotes, .f-2col { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 2.2rem; }

  /* compact header */
  .header-row { height: 66px; }
  .brand img { height: 40px; }
  .utility { font-size: .76rem; }

  /* hero: tighter type, stacked full-width actions, stat strip
     flows below the photo instead of covering it */
  .title-xl { font-size: clamp(2rem, 9vw, 2.5rem); }
  .lead { font-size: 1rem; margin-top: 1rem; }
  .hero-ticks { gap: .5rem 1.1rem; margin-top: 1.4rem; }
  .hero-ticks li { font-size: .85rem; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 1.1rem; margin-top: 1.8rem; }
  .hero-cta .btn { width: 100%; }
  .hero-call { margin-left: 0; flex-direction: row; align-items: baseline; justify-content: center; gap: .6rem; }
  .frame img { aspect-ratio: 4/3.2; }
  .frame::before, .frame::after,
  .frame .tick::before, .frame .tick::after { width: 18px; height: 18px; border-width: 2.5px !important; top: auto; }
  .frame::before { top: -7px; left: -7px; }
  .frame::after  { top: -7px; right: -7px; }
  .frame .tick::before { bottom: -7px; left: -7px; }
  .frame .tick::after  { bottom: -7px; right: -7px; }
  .float-card {
    position: static;
    margin-top: .9rem;
    width: 100%;
    box-shadow: none;
    border: 1px solid var(--hair);
    border-left: 4px solid var(--blue);
    padding: .95rem 1.2rem;
  }
  .float-card .big { font-size: 1.45rem; }

  /* sections breathe without towering */
  .section { padding: 3.6rem 0; }
  .sec-head { margin-bottom: 2rem; }

  /* cards sized for thumb + readability */
  .svc-tile { padding: 1.6rem 1.3rem 1.5rem; }
  .svc-tile h3 { font-size: 1.1rem; }
  .step-cell { padding: 1.6rem 1.3rem 1.8rem; }
  .area-col { padding: 1.7rem 1.3rem; }
  .quote { padding: 1.6rem 1.4rem; }
  .stat-cell { padding: 1.5rem 1rem; }
  .form-shell { padding: 1.6rem 1.3rem; }
  .side-card { padding: 1.5rem 1.3rem; }

  /* gallery captions */
  .shot figcaption { font-size: .86rem; padding: 1.8rem 1rem .8rem; }

  /* CTA band: stacked, full-width buttons */
  .cta-inner { flex-direction: column; align-items: stretch; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; }

  /* page headers / breadcrumbs */
  .crumbs { font-size: .74rem; }
  .page-head h1 { font-size: clamp(1.7rem, 8vw, 2.1rem); }

  /* prose + faq comfort */
  .prose h2 { font-size: 1.25rem; }
  .faq summary { font-size: .94rem; padding: 1.05rem .1rem; }

  /* buttons: slightly tighter, never cramped */
  .btn { padding: .9rem 1.5rem; }

  /* footer */
  .footer-top img { height: 60px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: .5rem; }
}

/* very small phones */
@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-cell { border-left: none; border-top: 1px solid rgba(255,255,255,.1); }
  .stat-cell:first-child { border-top: none; }
  .area-col ul { columns: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   V4 — line-art layer (business-card style)
   ═══════════════════════════════════════════════════════════════ */

/* faint siding lines on dark bands, like the card background */
.card-lines { position: relative; overflow: hidden; }
.card-lines::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(178deg, transparent 0 44px, rgba(255,255,255,.05) 44px 45px);
  pointer-events: none;
}
.card-lines > .wrap { position: relative; }

/* white line-art mini-split watermark on dark bands */
.deco-art {
  position: absolute; right: -28px; bottom: -24px;
  width: min(360px, 44vw); height: auto;
  color: #fff; opacity: .13;
  pointer-events: none;
}
.page-head .deco-art { bottom: -34px; }

/* service-tile line-art icons */
.tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.tile-icon { width: 44px; height: 44px; color: var(--ink); opacity: .7; transition: color .25s, opacity .25s; flex-shrink: 0; }
.svc-tile:hover .tile-icon, .svc-tile:focus-visible .tile-icon { color: var(--red); opacity: 1; }

/* equipment lineup strip (home) */
.lineup { border-bottom: 1px solid var(--hair); background: var(--white); }
.lineup-row { display: grid; grid-template-columns: repeat(5, 1fr); }
.lineup-row a {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  padding: 1.8rem .8rem 1.5rem;
  border-left: 1px solid var(--hair);
  color: var(--faint);
  transition: color .2s, background .2s;
}
.lineup-row a:first-child { border-left: none; }
.lineup-row a:hover, .lineup-row a:focus-visible { color: var(--red); background: var(--paper); }
.lineup-row .tile-icon { width: 42px; height: 42px; color: currentColor; opacity: .85; }
.lineup-row span {
  font-family: 'Archivo', sans-serif;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  text-align: center;
}

@media (max-width: 860px) {
  .deco-art { width: min(300px, 52vw); opacity: .09; }
  .lineup-row { grid-template-columns: repeat(3, 1fr); }
  .lineup-row a:nth-child(4) { border-left: none; }
  .lineup-row a:nth-child(n+4) { border-top: 1px solid var(--hair); }
}
@media (max-width: 600px) {
  .lineup-row { grid-template-columns: repeat(2, 1fr); }
  .lineup-row a { padding: 1.2rem .5rem 1.1rem; }
  .lineup-row a:nth-child(odd) { border-left: none; }
  .lineup-row a:nth-child(even) { border-left: 1px solid var(--hair); }
  .lineup-row a:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .lineup-row a:nth-child(5) { grid-column: 1 / -1; border-left: none; }
  .lineup-row .tile-icon { width: 36px; height: 36px; }
}

/* ---- Header fixes — 2026-07-05 ----
   1. Nav <ul> has no class, so the ul[class] reset missed it → list bullets ("dots")
      were showing in the header. Kill them for both navs.
   2. Header "Free Estimate" button was inheriting .nav-desktop a:hover { color: red },
      turning its text red on hover. Keep text white so it hovers exactly like the
      hero button (darker red + shadow from .btn-solid:hover). */
.nav-desktop ul, .nav-mobile ul { list-style: none; }
.nav-desktop a.btn-solid { color: #fff; }
.nav-desktop a.btn-solid:hover { color: #fff; }

/* ---- Van hero variant — 2026-07-05 ----
   Transparent van cutout: no corner ticks, no crop, slightly oversized. */
.frame.hero-van::before, .frame.hero-van::after,
.frame.hero-van .tick::before, .frame.hero-van .tick::after { display: none; }
.frame.hero-van img {
  aspect-ratio: auto;
  object-fit: contain;
  width: 112%;
  max-width: none;
  margin-left: -6%;
}
@media (max-width: 1060px) {
  .frame.hero-van img { width: 100%; margin-left: 0; }
}

/* ---- Mobile optimization pass — 2026-07-05 ----
   Based on: 16px inputs stop iOS focus-zoom; 48px tap targets;
   sticky click-to-call bar (phone leads convert 3-10x better for home services). */
html { -webkit-text-size-adjust: 100%; }
.call-bar { display: none; }
@media (max-width: 760px) {
  .field input, .field select, .field textarea { font-size: 16px; }
  .f-links a { display: inline-block; padding: .4rem 0; }
  .call-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1500;
    display: grid; grid-template-columns: 1fr 1fr;
    box-shadow: 0 -6px 18px rgba(20,22,27,.18);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .call-bar a {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 52px;
    font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1rem;
    color: #fff;
  }
  .call-bar a:hover { color: #fff; }
  .call-bar .cb-call { background: var(--slate); }
  .call-bar .cb-est { background: var(--red); }
  body { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
}

/* ---- Compact area chips (homepage) — 2026-07-05 ---- */
.area-chips { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 880px; }
.area-chips a {
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: .88rem;
  color: var(--ink);
  border: 1px solid var(--hair);
  background: var(--white);
  padding: .5rem 1.1rem;
  border-radius: 2px;
  transition: border-color .2s, color .2s, background .2s;
}
.area-chips a:hover, .area-chips a:active { border-color: var(--red); color: var(--red); }
.area-chips a.more { border-style: dashed; border-color: #b9c4d4; color: var(--blue); }
.area-chips a.more:hover, .area-chips a.more:active { border-color: var(--blue); background: rgba(26,95,168,.06); color: var(--blue); }

/* Touch feedback — phones have no hover, so mirror key hover styles on :active */
@media (hover: none) {
  .btn-solid:active { background: #a31d1d; }
  .btn-line:active { background: var(--ink); color: #fff; }
  .btn-line-light:active { border-color: #fff; background: rgba(255,255,255,.1); }
  .call-bar .cb-est:active { background: #a31d1d; }
  .call-bar .cb-call:active { background: var(--slate-2); }
  .lineup-row a:active { color: var(--red); background: var(--paper); }
}