/* =============================================================
   Texas Home Maintenance Pros — txhomemp.com
   Hand-coded, no framework. Design direction: clean contractor
   template in the Shromik mold — white sticky header over a
   full-bleed navy hero, icon service cards, numbered process,
   dark make-ready band, review cards, dark footer.
   Palette from the THMP badge: deep navy + wrench green, with a
   the wrench green as the working accent.

   1. Tokens & reset        7. Split sections / checks
   2. Type & utilities      8. Process steps
   3. Buttons               9. Make-ready band
   4. Topbar & header      10. Reviews / gallery / FAQ
   5. Hero                 11. Contact & form
   6. Service cards        12. Footer / banner / responsive
   ============================================================= */

/* ---------- 1. Tokens & reset ---------- */
:root {
  --ink:       #0D1826;   /* near-black navy: topbar, footer, headings */
  --navy:      #0C3864;   /* brand navy, sampled from the logo ring */
  --navy-2:    #14477C;   /* lighter navy: hovers, gradients */
  --green:     #48A521;   /* logo wrench green: CTAs, highlights */
  --green-2:   #3A8619;   /* pressed / hover green */
  --green-soft:#EDF7E5;   /* icon tiles, subtle washes */
  --star:      #F0A32F;   /* review stars stay amber */
  --paper:     #FFFFFF;
  --mist:      #F4F6F9;   /* alternating section ground */
  --line:      #E4E9EF;
  --body:      #4A5665;

  --radius:    12px;
  --radius-sm: 6px;

  --container: 1200px;

  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --shadow-1: 0 1px 3px rgba(13, 24, 38, .07);
  --shadow-2: 0 14px 34px rgba(13, 24, 38, .12);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  overflow-x: clip;               /* belt-and-braces against stray overflow */
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--green); color: var(--ink); }

a { color: var(--navy); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 18px;
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- 2. Type & utilities ---------- */
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -.015em;
  font-weight: 700;
}

.container {
  width: min(var(--container), 100% - 48px);
  margin-inline: auto;
}

/* Wide variant for the header bar, hero copy, and page banners — in the
   reference these ride a ~80px screen gutter while card grids and body
   sections stay in the narrow centered column. */
.container-wide {
  width: min(1760px, 100% - 144px);
  margin-inline: auto;
}
@media (max-width: 1020px) {
  .container-wide { width: calc(100% - 48px); }
}

.section { padding: 96px 0; }
.section-mist { background: var(--mist); }

/* Eyebrow: a quiet muted uppercase label, like the reference's "SERVICES". */
.eyebrow {
  display: block;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8B93A2;
}
/* Plain quiet eyebrow like the reference's "SERVICES" — no dash, no check. */
.eyebrow-check { display: none; }

.section-head { max-width: 660px; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 42px); }
.section-head p  { margin: 10px 0 0; font-size: 17px; }

/* ---------- 3. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 0;
  border-radius: 0;   /* sharp corners, same language as the cards */
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}
.btn:active { transform: translateY(1px); }

.btn-green { background: var(--green); color: var(--ink); }
.btn-green:hover { background: var(--green-2); }

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-2); }

.btn-line {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
}
.btn-line:hover { box-shadow: inset 0 0 0 2px #fff; background: rgba(255,255,255,.08); }

.btn-line-dark {
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--navy);
}
.btn-line-dark:hover { background: var(--navy); color: #fff; }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

/* ---------- 4. Header ---------- */
/* The header lays transparent over the hero/banner photo (Shromik-style):
   white links on the image at the top of the page, then it sticks and turns
   solid white as soon as the page scrolls. The negative bottom margin pulls
   the hero up underneath it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  margin-bottom: -96px;
  /* Fully transparent over the photo, like the reference — the hero's own
     top scrim keeps the links readable. */
  background: transparent;
  transition: background .25s ease, box-shadow .25s ease;
}
.site-header .brand-name,
.site-header .nav a { color: #fff; }
.site-header .brand-name span { color: var(--green); }
.site-header .nav-toggle { background: transparent; border-color: rgba(255,255,255,.4); }
.site-header .nav-toggle span { background: #fff; }

.site-header.is-stuck {
  background: var(--paper);
  box-shadow: var(--shadow-2);
}
.site-header.is-stuck .brand-name,
.site-header.is-stuck .nav a { color: var(--ink); }
.site-header.is-stuck .brand-name span { color: var(--green-2); }
.site-header.is-stuck .nav-toggle { background: var(--paper); border-color: var(--line); }
.site-header.is-stuck .nav-toggle span { background: var(--ink); }

/* Links keep their color; hover/active take a short underline under the
   label, like the reference's "Home". */
.site-header .nav a:hover,
.site-header .nav a.is-current { color: #fff; }
.site-header.is-stuck .nav a:hover,
.site-header.is-stuck .nav a.is-current { color: var(--ink); }

.site-header .nav a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s var(--ease);
}
.site-header .nav a:hover::after,
.site-header .nav a.is-current::after { transform: scaleX(1); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 96px;
}
/* The reference header is inset further from the screen edges than the
   hero copy (~175px vs ~90px at 1900w). */
@media (min-width: 1400px) {
  .header-inner { padding-inline: 104px; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* On desktop the menu is pinned to the true center of the page, like the
   reference — not just floated in the leftover space, which drifts right
   when the brand block is wider than the CTA. */
@media (min-width: 1021px) {
  .header-inner { position: relative; }
  .nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .header-cta { margin-left: auto; }
}
.brand img { width: 56px; height: 56px; }
.brand-name {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
  max-width: 170px;
}
.brand-name span { color: var(--green-2); }

.nav ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a {
  position: relative;
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  transition: color .2s ease, background .2s ease;
}
.nav a:hover { color: var(--green-2); }
.nav a.is-current { color: var(--green-2); }

/* Sharp solid rectangle like the reference's "Request A Quote". */
.header-cta {
  padding: 16px 28px;
  border-radius: 0;
  background: var(--green-2);
  color: #fff;
}
.header-cta:hover { background: var(--green); color: var(--ink); }

.nav-toggle {
  display: none;
  margin-left: auto;              /* right-aligned on mobile, where the nav is a dropdown */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile-only header extras: a compact tap-to-call beside the hamburger and
   a quote button inside the dropdown. Hidden on desktop, where the full
   header-cta rides in the bar; the responsive tail turns them on. */
.header-call,
.nav .nav-cta { display: none; }   /* .nav a sets display:block, so match its specificity */

/* ---------- 5. Hero ---------- */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  /* Full-screen hero like the reference: the photo owns the first viewport,
     with the overlap cards straddling its bottom edge. */
  min-height: 640px;
  min-height: 100svh;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
/* The photo runs vivid, like the reference — no flat navy wash. A scrim
   sits only where text needs it: down the left for the headline, and along
   the top so the transparent header stays readable.

   The hero is a two-slide slider (arrows on the sides): each .hero-bg is a
   full-bleed layer that cross-fades, and each .hero-copy fades in sync. */
.hero-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transform: scale(1.05);
  /* Slow, cinematic cross-fade (user asked for ≥4s); the zoom settles a
     beat after the fade so the slide keeps drifting as it lands. */
  transition: opacity 4s ease, transform 5.5s ease;
}
.hero-bg.is-active { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero-copy { transition: none; transform: none; }
}
/* hero-sink.jpg is the web-sized (2560px) copy of assets/sinkkkkk.jpg —
   regenerate from that original if it ever needs re-cropping. */
.hero-bg-sink { background-image: url("../assets/hero-sink.jpg"); background-position: 50% 35%; }
/* Slide 2 waits for .is-ready (set on window load by main.js) so its photo
   never competes with the first paint. */
.hero.is-ready .hero-bg-hvac { background-image: url("../assets/hero-hvac.jpg"); }
.hero-bg-hvac { background-position: 50% 40%; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 24, 38, .60) 0%, rgba(13, 24, 38, 0) 24%),
    linear-gradient(90deg,
      rgba(13, 24, 38, .86) 0%,
      rgba(13, 24, 38, .62) 34%,
      rgba(13, 24, 38, .22) 62%,
      rgba(13, 24, 38, .10) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  /* Top clears the overlay header; bottom leaves room for the overlap cards.
     The grid centering on .hero does the rest on tall screens. */
  padding: 150px 0 170px;
}

/* Plain quiet eyebrow in the hero, like the reference's "HOME REPAIR". */
.hero .eyebrow { color: rgba(255, 255, 255, .65); }
.hero .eyebrow::before,
.hero .eyebrow .eyebrow-check { display: none; }
.hero h1,
.hero .hero-h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 800;
  color: #fff;
}
.hero-lead {
  margin: 0 0 34px;
  max-width: 520px;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Slide copy blocks stack in the same grid cell and cross-fade; the CTA
   buttons live outside the swap so keyboard focus never disappears. */
.hero-copies { display: grid; margin-bottom: 34px; }
.hero-copy {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease, visibility .6s;
  pointer-events: none;
  visibility: hidden;
}
.hero-copy.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
}
.hero-copy .hero-lead { margin-bottom: 0; }

/* Prev/next arrows riding the screen edges, like the reference. */
.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  background: transparent;
  color: var(--green);
  cursor: pointer;
  transform: translateY(-50%);
  /* Hidden until the cursor is over the hero, like the reference. */
  opacity: 0;
  visibility: hidden;
  transition: border-color .2s ease, color .2s ease, background .2s ease,
    opacity .25s ease, visibility .25s;
}
.hero:hover .hero-arrow,
.hero-arrow:focus-visible { opacity: 1; visibility: visible; }
.hero-arrow:hover { border-color: var(--green); background: rgba(255, 255, 255, .06); }
/* Hugging the screen edge, inside the hero copy's 72px gutter. */
.hero-arrow-prev { left: 13px; }
.hero-arrow-next { right: 13px; }
.hero-arrow svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 1020px) {
  .hero-arrow { display: none; }
}

/* ---------- 6. Service cards ---------- */

/* Three cards straddling the hero's bottom edge, like the reference. */
.overlap {
  position: relative;
  z-index: 2;
  margin-top: -130px;
}
.overlap .card {
  border: 0;
  box-shadow: var(--shadow-2);
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
/* Sharp-cornered cards like the reference — shadow, no border, and a big
   outlined icon overlapping a pale offset square. */
.card {
  display: flex;
  flex-direction: column;
  padding: 38px 32px 32px;
  background: var(--paper);
  border: 0;
  border-radius: 0;
  box-shadow: 0 10px 30px rgba(13, 24, 38, .07);
  transition: transform .3s var(--ease), box-shadow .3s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2);
}
.card-ico {
  position: relative;
  width: 54px;
  height: 54px;
  margin-bottom: 32px;
}
/* The pale square sits behind, shifted toward the bottom-right. */
.card-ico::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 18px;
  width: 46px;
  height: 46px;
  background: var(--green-soft);
}
/* All card icons share one 24-viewBox set with the same stroke, so every
   card reads with identical color and weight. */
.card-ico svg {
  position: relative;
  width: 54px;
  height: 54px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card h3 { font-size: 21px; margin-bottom: 10px; }
.card p { margin: 0 0 20px; font-size: 15.5px; }

/* "Services include:" bullet lists inside the key-services cards. */
.card-list-label {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.card-list {
  display: grid;
  gap: 6px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--body);
}
.card-list li {
  position: relative;
  padding-left: 16px;
}
.card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  color: var(--navy);
}
.card-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.card-link:hover { color: var(--green-2); }
.card-link:hover svg { transform: translateX(4px); }

/* ---------- 6b. Service ticker (marquee) ----------
   Dark band of oversized service names drifting left on a seamless loop —
   two identical rows, track slides -50%. Words alternate solid/outline. */
.ticker {
  overflow: hidden;
  padding: 38px 0;
  background: var(--ink);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 30s linear infinite;
}
.ticker-row {
  display: flex;
  align-items: center;
  gap: 64px;
  margin: 0;
  padding: 0 0 0 64px;
  list-style: none;
  flex: none;
}
.ticker-row li {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: clamp(34px, 3.4vw, 54px);
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: #fff;
}
/* Every other word is hollow, like the reference. */
.ticker-row li:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .8);
}
.ticker-row li svg {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  fill: none;
  stroke: rgba(255, 255, 255, .9);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  -webkit-text-stroke: 0;
}
@keyframes ticker-scroll {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* Brand mentions get a full green highlighter block that swipes across the
   words when they scroll into view (spans injected by main.js). */
.brand-mark {
  font-weight: 700;
  color: inherit;
  padding: 1px 4px;
  margin: -1px -2px;
  background-image: linear-gradient(to top, var(--green), var(--green));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 50%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size .8s var(--ease), color .3s ease .25s;
}
.brand-mark.is-lit {
  background-size: 100% 100%;
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark { transition: none; background-size: 100% 100%; color: var(--ink); }
}

/* ---------- 6c. Commitment band (full-bleed photo, text over scrim) ---------- */
.commit {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.commit::before {
  content: "";
  position: absolute;
  inset: 0;
  /* commit-bg.jpg: 3840px Pexels photo, subject right — text rides left. */
  background: url("../assets/commit-bg.jpg") no-repeat 70% 42% / cover;
}
.commit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(13, 24, 38, .93) 0%,
    rgba(13, 24, 38, .78) 46%,
    rgba(13, 24, 38, .30) 100%);
}
.commit-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  padding: 110px 0 116px;
}
.commit .eyebrow { color: rgba(255, 255, 255, .6); }
.commit h2 {
  margin-bottom: 20px;
  font-size: clamp(28px, 3.4vw, 42px);
  color: #fff;
}
.commit p {
  margin: 0 0 20px;
  max-width: 620px;
  font-size: clamp(17px, 1.05vw, 19px);
  line-height: 1.8;
  color: rgba(255, 255, 255, .9);
}
.commit .btn { margin-top: 12px; }
@media (max-width: 720px) {
  .commit-inner { padding: 80px 0 88px; }
}

/* ---------- 6d0. Process tabs (reference layout) ---------- */
.process-head {
  max-width: none;
  margin-bottom: 30px;
  text-align: center;
}
.process-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  margin-bottom: 64px;
}
.process-tab {
  padding: 15px 28px;
  border: 0;
  background: var(--mist);
  font-family: var(--font);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.process-tab:hover { background: #E7EBF1; }
.process-tab.is-active {
  background: var(--green-2);
  color: #fff;
}
.process-panel {
  display: none;
  grid-template-columns: 1fr 1.15fr;
  gap: 72px;
  align-items: center;
}
.process-panel.is-active {
  display: grid;
  animation: panel-in .45s var(--ease);
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px); }
}
.process-step-label {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8B93A2;
}
.process-copy h3 {
  margin: 0 0 18px;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.15;
}
.process-copy p {
  margin: 0 0 28px;
  max-width: 500px;
  font-size: 17px;
  line-height: 1.75;
}
.process-media {
  margin: 0;
}
.process-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--shadow-2);
}
@media (max-width: 1020px) {
  .process-panel { grid-template-columns: 1fr; gap: 40px; }
  .process-media { order: -1; }
  .process-tabs { margin-bottom: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .process-panel.is-active { animation: none; }
}

/* ---------- 6d. Reasons list + hours card ---------- */
.reasons-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 72px;
  align-items: start;
}
.reasons-grid .section-head { margin-bottom: 26px; }
.reason-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.reason-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 19px 14px 19px 0;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  transition: background .25s ease, padding .25s ease;
}
/* Rows respond: green wash slides in, chip fills, rank warms up. */
.reason-list li:hover {
  padding-left: 14px;
  background: linear-gradient(90deg, var(--green-soft), rgba(237, 247, 229, 0) 85%);
}
/* Pale green square chip, same family as the card icons. */
.reason-check {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  background: var(--green-soft);
  transition: background .25s ease;
}
.reason-list li:hover .reason-check { background: var(--green); }
.reason-check svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--green-2);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .25s ease;
}
.reason-list li:hover .reason-check svg { stroke: #fff; }
/* The list is ranked — "the five we hear most" — so the numbers mean it. */
.reason-num {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .05em;
  color: #C9D2DC;
  transition: color .25s ease;
}
.reason-list li:hover .reason-num { color: var(--green-2); }

.hours-card {
  padding: 36px 36px 34px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--ink) 100%);
  border-top: 4px solid var(--green);
  color: #fff;
  box-shadow: var(--shadow-2);
}
.hours-card h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  color: #fff;
  font-size: 21px;
}
.hours-card h3 svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hours-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .6);
}
.hours-card ul {
  margin: 20px 0 24px;
  padding: 0;
  list-style: none;
}
.hours-card ul li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-size: 15.5px;
  color: rgba(255, 255, 255, .8);
}
.hours-card ul strong { color: #fff; font-weight: 700; }
.hours-call { margin: 0 0 24px; }
.hours-call span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.hours-call a {
  font-size: 26px;
  font-weight: 800;
  color: var(--green);
  text-decoration: none;
}
.hours-call a:hover { color: #fff; }
.hours-card .btn { width: 100%; }
@media (max-width: 1020px) {
  .reasons-grid { grid-template-columns: 1fr; gap: 48px; }
  .hours-card { max-width: 460px; }
}

/* ---------- 7. Split sections & check lists ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
/* Stat counters in the standard section, like the reference's 310+/156+. */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 56px;
  margin: 34px 0 36px;
}
.stat-num {
  display: block;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy);
}
.stat span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--body);
}

/* Standalone analytics strip (Services): the counters promoted to a
   centered band of big navy figures. */
.stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.stats-band .stat-num { font-size: clamp(38px, 4vw, 58px); }
.stats-band .stat span { font-size: 15px; margin-top: 8px; }
@media (max-width: 1020px) {
  .stats-band { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}
@media (max-width: 360px) {
  .stats-band { grid-template-columns: 1fr; }
}

/* Work-mix donut: SVG ring segments (r picked so the circumference is
   100, so dasharray values are literal percentages). Hover/focus a slice
   or a legend row and main.js spotlights the pair and swaps the centre
   readout. Slice colours stay in the brand family. */
.pie { max-width: 860px; margin: 72px auto 0; }
.pie-title {
  margin-bottom: 34px;
  text-align: center;
  font-size: 21px;
}
.pie-wrap {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 60px;
  align-items: center;
}
.pie [data-cat="general"] { --seg: var(--navy); }
.pie [data-cat="hvac"] { --seg: var(--green-2); }
.pie [data-cat="turnover"] { --seg: var(--navy-2); }
.pie [data-cat="plumbing"] { --seg: var(--green); }
.pie [data-cat="doors"] { --seg: var(--star); }
.pie [data-cat="else"] { --seg: #8B93A2; }
.pie-figure { position: relative; }
.pie-svg { display: block; width: 100%; height: auto; }
.pie-seg {
  fill: none;
  stroke: var(--seg);
  stroke-width: 5.5;
  cursor: pointer;
  transition: stroke-dasharray 1s var(--ease), stroke-width .25s var(--ease), opacity .25s ease;
  outline: none;
}
.pie-seg.is-active { stroke-width: 7.2; }
.pie.has-active .pie-seg:not(.is-active) { opacity: .3; }
.pie-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24%;
  text-align: center;
  pointer-events: none;
}
.pie-center strong {
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--navy);
}
.pie-center span {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--body);
}
.pie-legend {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pie-key {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  outline-offset: 2px;
  transition: background .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.pie-key.is-active {
  background: var(--paper);
  box-shadow: var(--shadow-1);
}
.pie.has-active .pie-key:not(.is-active) { opacity: .45; }
.pie-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 4px;
  background: var(--seg);
}
.pie-key-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.pie-key-value {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* Entrance: slices sweep out from nothing once in view, biggest first. */
.js-anim .pie:not(.is-in) .pie-seg { stroke-dasharray: 0 100; }
.pie.is-in .pie-seg:nth-of-type(2) { transition-delay: .1s; }
.pie.is-in .pie-seg:nth-of-type(3) { transition-delay: .2s; }
.pie.is-in .pie-seg:nth-of-type(4) { transition-delay: .3s; }
.pie.is-in .pie-seg:nth-of-type(5) { transition-delay: .38s; }
.pie.is-in .pie-seg:nth-of-type(6) { transition-delay: .46s; }
.pie.is-settled .pie-seg { transition-delay: 0s; }

@media (max-width: 760px) {
  .pie-wrap { grid-template-columns: 1fr; gap: 40px; }
  .pie-figure { max-width: 280px; margin-inline: auto; }
}

/* Plain single photo column (no inset composition), sharp like the cards. */
.split-photo { margin: 0; }
.split-photo img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: var(--shadow-2);
}
.split-media { position: relative; }
.split-media > img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
/* A short fact pinned to the photo. */
.split-tag {
  position: absolute;
  left: -18px;
  top: 26px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
}
.split-tag svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--green);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.split-body h2 { font-size: clamp(28px, 3.2vw, 40px); }
.split-lead { font-size: 17px; }

.checks {
  display: grid;
  gap: 14px;
  margin: 26px 0 32px;
  padding: 0;
  list-style: none;
}
.checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 600;
  color: var(--ink);
}
.checks svg {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--green);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.checks small {
  display: block;
  font-weight: 400;
  font-size: 14.5px;
  color: var(--body);
}

/* ---------- About manifesto (About intro) ----------
   Replaces the old photo-collage split (same layout Crystal Creek uses):
   a full-width typographic opening where a green stroke crosses "the
   hassle" out of the headline, one wide cinematic photo instead of a
   collage-with-inset, and the three commitments on a ruled row instead
   of a check list. Photo: Pexels 32588555 (free license, no attribution
   required); object-position biased low to trim workshop shelving. */
.manifesto-head h2 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(34px, 4.8vw, 60px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.022em;
}

/* The signature move: the stroke draws through "the hassle" once the
   section is in view, then the words themselves fade to a muted grey —
   the headline performs the promise. Static final state without JS or
   with reduced motion (js-anim gating, same as every animation here). */
.strike {
  position: relative;
  white-space: nowrap;
  color: #8B93A2;
  transition: color .4s ease .95s;
}
.strike::after {
  content: "";
  position: absolute;
  left: -.06em;
  right: -.06em;
  top: 52%;
  height: .11em;
  border-radius: .06em;
  background: var(--green);
  transform: rotate(-2.2deg);
  transform-origin: 0 50%;
  transition: transform .55s var(--ease) .5s;
}
.js-anim .manifesto-head:not(.is-in) .strike { color: inherit; transition-delay: 0s; }
.js-anim .manifesto-head:not(.is-in) .strike::after { transform: rotate(-2.2deg) scaleX(0); }

/* Lead and CTA share a baseline row — editorial, not a stacked column. */
.manifesto-lede {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 64px;
  margin-top: 30px;
}
.manifesto-lede p { max-width: 620px; margin: 0; font-size: 17.5px; }
.manifesto-lede .btn { flex: 0 0 auto; }

.manifesto-photo { margin: 56px 0 0; }
.manifesto-photo img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 58%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

/* Three parallel commitments — equal ruled columns, each rule ticked
   with a short green segment. Principles, not steps: no numbers. */
.manifesto-approach { margin-top: 56px; }
.manifesto-approach-label {
  margin: 0 0 22px;
  font-weight: 700;
  color: var(--ink);
}
.approach-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 40px;
}
.approach-cell {
  position: relative;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.approach-cell::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 44px;
  height: 3px;
  background: var(--green);
}
.approach-cell h3 { margin: 0 0 8px; font-size: 18.5px; }
.approach-cell p { margin: 0; font-size: 15.5px; }

@media (max-width: 860px) {
  .manifesto-lede { flex-direction: column; align-items: flex-start; }
  .approach-row { grid-template-columns: 1fr; gap: 26px; }
  .manifesto-photo img { aspect-ratio: 16 / 10; }
}

/* ---------- Who We Are band (About) ----------
   Standard section look (eyebrow + ink heading on the mist ground), but
   with the old site's cutout technician standing on the bottom edge. */
.who {
  position: relative;
  overflow: hidden;
}
.who-inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: end;
}
.who-body {
  align-self: center;
  max-width: 560px;
  padding: 96px 0;
}
.who-body h2 { font-size: clamp(26px, 3vw, 38px); }
.who-body p { margin: 0 0 28px; }
.who-media {
  margin: 0;
  align-self: end;
  justify-self: center;
}
.who-media img {
  display: block;
  width: min(400px, 100%);
  filter: drop-shadow(0 18px 30px rgba(13, 24, 38, .18));
}
@media (max-width: 720px) {
  .who-inner { grid-template-columns: 1fr; gap: 0; }
  .who-body { padding: 72px 0 28px; }
  .who-media img { width: min(300px, 80%); margin-inline: auto; }
}

/* Who-band entrance choreography, same pattern as the make-ready band:
   the section carries .reveal so the shared observer flips .is-in, but
   the section stays put — the text column staggers up and the cutout
   technician rises from behind the band's bottom edge (overflow:hidden
   does the clipping). */
.js-anim .who.reveal { opacity: 1; }
.js-anim .who.reveal.is-in { animation: none; }
.js-anim .who .who-body > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .55s var(--ease);
}
.js-anim .who.is-in .who-body > * { opacity: 1; transform: none; }
.js-anim .who.is-in .who-body > :nth-child(1) { transition-delay: .08s; }
.js-anim .who.is-in .who-body > :nth-child(2) { transition-delay: .18s; }
.js-anim .who.is-in .who-body > :nth-child(3) { transition-delay: .28s; }
.js-anim .who.is-in .who-body > :nth-child(4) { transition-delay: .38s; }
.js-anim .who .who-media img {
  opacity: 0;
  transform: translateY(72px);
  transition: opacity .6s ease .35s, transform .8s var(--ease) .35s;
}
.js-anim .who.is-in .who-media img {
  opacity: 1;
  transform: none;
}

/* ---------- Pledge closer (About) ----------
   The old site's sign-off rebuilt as a full-bleed statement band: the
   tagline takes a green highlighter sweep once in view, the goal line
   sits under it, and the page closes on the quote CTA. A giant ghost
   wrench (the logo's tool) anchors the corner. */
.pledge {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy) 0%, var(--ink) 80%);
  border-top: 4px solid var(--green);
  color: rgba(255, 255, 255, .85);
}
.pledge::before {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 460px;
  height: 460px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .06;
  transform: rotate(-12deg);
}
.pledge-inner {
  position: relative;
  padding: clamp(88px, 9vw, 132px) 0;
  text-align: center;
}
.pledge .eyebrow { color: rgba(255, 255, 255, .55); }
.pledge-title {
  margin: 0 0 24px;
  color: #fff;
  font-size: clamp(40px, 5.8vw, 70px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
}
.pledge-title > span { display: block; }
.pledge-title .pledge-sweep {
  display: inline-block;
  margin-top: 8px;
  padding: 1px 16px 5px;
  background-image: linear-gradient(to top, var(--green), var(--green));
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 100% 92%;
  color: var(--ink);
  transition: background-size .9s var(--ease) .5s, color .35s ease .8s;
}
.js-anim .pledge:not(.is-in) .pledge-sweep {
  background-size: 0% 92%;
  color: #fff;
}
.pledge-lead {
  max-width: 540px;
  margin: 0 auto;
  font-size: 17.5px;
}
.pledge-ready {
  margin: 44px 0 18px;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
}
.pledge-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* Pledge entrance: children stagger up while the sweep waits its turn. */
.js-anim .pledge.reveal { opacity: 1; }
.js-anim .pledge.reveal.is-in { animation: none; }
.js-anim .pledge .pledge-inner > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s var(--ease);
}
.js-anim .pledge.is-in .pledge-inner > * { opacity: 1; transform: none; }
.js-anim .pledge.is-in .pledge-inner > :nth-child(2) { transition-delay: .1s; }
.js-anim .pledge.is-in .pledge-inner > :nth-child(3) { transition-delay: .22s; }
.js-anim .pledge.is-in .pledge-inner > :nth-child(4) { transition-delay: .34s; }
.js-anim .pledge.is-in .pledge-inner > :nth-child(5) { transition-delay: .46s; }

/* ---------- Who We Serve trio (About) ----------
   The old site's audience wordmarks, typeset instead of baked into
   images — navy + logo green, no photos (client's call). */
.serve-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  text-align: center;
}
.serve-name {
  margin-bottom: 10px;
  font-size: clamp(25px, 2.4vw, 33px);
  font-weight: 800;
  letter-spacing: -.01em;
}
.serve-name span { color: var(--green-2); }
.serve-cell p { max-width: 340px; margin: 0 auto; }
.serve-cta { margin-top: 46px; text-align: center; }
@media (max-width: 860px) {
  .serve-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ---------- 8. Contact map band ----------
   Full-bleed grayscale Google Map between the banner and the form —
   the parent site's treatment, tinted to match the palette by filtering
   the embed to grayscale (it eases back toward color while the visitor
   is on the map). A navy office card floats over the left edge, kin to
   .faq-call: same gradient, green top rule, and a big low-opacity
   watermark — a location pin here, matching the card's job. */
.map-band {
  position: relative;
  background: var(--mist);
  border-bottom: 4px solid var(--green);
}
.map-band iframe {
  display: block;
  width: 100%;
  height: clamp(380px, 40vw, 500px);
  border: 0;
  filter: grayscale(1);
  transition: filter .5s ease;
}
.map-band:hover iframe,
.map-band:focus-within iframe { filter: grayscale(.15); }
.map-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.map-card {
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  max-width: 320px;
  padding: 28px 30px 32px;
  background: linear-gradient(150deg, var(--navy) 0%, var(--ink) 100%);
  border-top: 4px solid var(--green);
  color: rgba(255, 255, 255, .78);
  box-shadow: var(--shadow-2);
}
.map-card::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -30px;
  width: 150px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .07;
  transform: rotate(10deg);
  pointer-events: none;
}
.map-card-label {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.map-card address {
  margin: 0 0 10px;
  font-style: normal;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
}
.map-card-hours { margin: 0 0 22px; font-size: 14.5px; }
@media (max-width: 760px) {
  .map-band iframe { height: 300px; }
  .map-overlay { position: static; padding: 0 0 26px; }
  .map-card { max-width: none; margin-top: -58px; }
}

/* ---------- 9. Make-ready band (dark) ---------- */
.band {
  position: relative;
  background: linear-gradient(120deg, var(--ink) 0%, var(--navy) 100%);
  color: rgba(255, 255, 255, .88);
  border-radius: var(--radius);
  overflow: hidden;
}
.band-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center;
  padding: 64px;
}
.band h2 { color: #fff; font-size: clamp(26px, 3vw, 38px); }
.band .eyebrow { color: rgba(255, 255, 255, .6); }
.band .checks li { color: #fff; }
.band .checks small { color: rgba(255, 255, 255, .75); }
.band .checks svg { stroke: var(--green); }
.band-media { margin: 0; }
.band-media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.band-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }

/* Full-bleed slogan band between the process and make-ready sections:
   the brand green carries the company's actual tagline. */
.statement { background: var(--green); }
.statement-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding-block: clamp(54px, 6.5vw, 92px);
}
.statement h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 3.6vw, 52px);
  letter-spacing: -.01em;
  line-height: 1.15;
}
.statement .btn-navy { padding: 17px 34px; }

/* Make-ready full-bleed split band (homepage) */
.mr {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  background: linear-gradient(115deg, var(--ink) 0%, var(--navy) 100%);
  color: rgba(255, 255, 255, .85);
}
.mr-media {
  position: relative;
  margin: 0;
  min-height: 560px;
  overflow: hidden;  /* the pre-reveal scale(1.08) on the photo must not spill past the band */
}
.mr-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mr-badge {
  position: absolute;
  left: 0;
  bottom: 48px;
  background: var(--green-2);
  color: #fff;
  padding: 16px 26px 17px;
  display: grid;
  gap: 2px;
  box-shadow: var(--shadow-2);
}
.mr-badge strong {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.1;
}
.mr-badge span {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .85);
}
.mr-body {
  padding: clamp(56px, 6.5vw, 100px) clamp(28px, 6vw, 108px);
  max-width: 780px;
  align-self: center;
}
.mr-eyebrow { color: rgba(255, 255, 255, .52); }
.mr h2 {
  color: #fff;
  font-size: clamp(27px, 2.7vw, 40px);
  margin: 12px 0 18px;
}
.mr-lead {
  font-size: clamp(15.5px, 1vw, 17px);
  line-height: 1.75;
  margin-bottom: 30px;
}
.mr-list {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: grid;
  gap: 16px;
}
.mr-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: #fff;
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.5;
}
.mr-check {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--green-2);
  margin-top: -2px;
}
.mr-check svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mr-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Make-ready entrance choreography. The section carries .reveal so the
   shared observer flips .is-in, but the section itself stays put — the
   parts animate instead: photo wipes in and settles, badge slides in,
   text column staggers up. All gated on .js-anim like every animation. */
.js-anim .mr.reveal { opacity: 1; }
.js-anim .mr.reveal.is-in { animation: none; }
.js-anim .mr .mr-media img {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.08);
  transition: clip-path .95s var(--ease), transform 1.5s var(--ease);
}
.js-anim .mr.is-in .mr-media img {
  clip-path: inset(0 0 0 0);
  transform: none;
}
.js-anim .mr .mr-badge {
  opacity: 0;
  transform: translateX(-26px);
  transition: opacity .5s ease .8s, transform .5s var(--ease) .8s;
}
.js-anim .mr.is-in .mr-badge {
  opacity: 1;
  transform: none;
}
.js-anim .mr .mr-body > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .55s var(--ease);
}
.js-anim .mr.is-in .mr-body > * { opacity: 1; transform: none; }
.js-anim .mr.is-in .mr-body > :nth-child(1) { transition-delay: .2s; }
.js-anim .mr.is-in .mr-body > :nth-child(2) { transition-delay: .3s; }
.js-anim .mr.is-in .mr-body > :nth-child(3) { transition-delay: .4s; }
.js-anim .mr.is-in .mr-body > :nth-child(4) { transition-delay: .5s; }
.js-anim .mr.is-in .mr-body > :nth-child(5) { transition-delay: .6s; }

/* ---------- 10. Reviews / gallery / FAQ ---------- */
.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.review {
  display: flex;
  flex-direction: column;
  padding: 32px 30px 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.review-stars {
  display: flex;
  gap: 3px;
  margin: 0 0 16px;
  color: var(--star);
}
.review-stars svg { width: 18px; height: 18px; fill: currentColor; }
.review blockquote {
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.7;
}
.review-by {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.review-by strong { font-size: 15px; color: var(--ink); }
.review-by span { font-size: 13px; opacity: .75; }

/* Reviews section head sits centered above the carousel, like the
   reference — other section heads on the page stay left-aligned. */
#reviews .section-head {
  max-width: none;
  text-align: center;
}

/* Reviews carousel (homepage): snap-scrolling track with dot pagination
   and a gentle auto-advance. The About page keeps the static .reviews
   grid above. Track padding-top leaves room for the overlapping quote
   chip; the scrollbar is hidden because dots + swipe do the driving. */
.rev-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 52px) / 3);
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  padding: 26px 2px 12px;
  scrollbar-width: none;
}
.rev-track::-webkit-scrollbar { display: none; }
.rev-track .review {
  position: relative;
  scroll-snap-align: start;
  border: 0;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  padding: 42px 30px 26px;
  box-shadow: 0 10px 30px rgba(13, 24, 38, .07);
  transition: border-color .25s ease;
}
.rev-track .review:hover { border-bottom-color: var(--green-2); }
.review-quote {
  position: absolute;
  top: -26px;
  left: 26px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--green-2);
}
.review-quote svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}
.rev-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}
.rev-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #C9D2DC;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.rev-dot:hover { background: var(--green); }
.rev-dot.is-active { background: var(--green-2); transform: scale(1.3); }

/* Work gallery: uniform sharp-cornered grid; every tile opens the lightbox. */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.work-item {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: 0 10px 30px rgba(13, 24, 38, .07);
}
.work-item[hidden] { display: none; }
.work-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .35s var(--ease);
}
.work-item:hover img,
.work-item:focus-visible img { transform: scale(1.04); }
.work-more { margin-top: 36px; text-align: center; }

/* The wink after the gallery runs out — typed out like a note. */
.work-note {
  margin: 40px 0 0;
  text-align: center;
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}
.work-note[hidden] { display: none; }
.work-note-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: text-bottom;
  background: var(--green-2);
  animation: caret-blink 1.1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .work-note-caret { animation: none; }
}
@media (max-width: 1020px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Full-screen lightbox for the gallery. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: rgba(13, 24, 38, .94);
}
.lightbox[hidden] { display: none; }
.lightbox figure {
  margin: 0;
  max-width: min(1100px, 88vw);
  text-align: center;
}
.lightbox img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  margin-inline: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.lightbox figcaption {
  margin-top: 14px;
  font-size: 15px;
  color: rgba(255, 255, 255, .85);
}
.lightbox-close,
.lightbox-nav {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover { border-color: var(--green); color: var(--green); }
.lightbox-close { top: 24px; right: 28px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-close svg,
.lightbox-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Homepage FAQ: side rail (head + call panel) beside the accordion.
   The full FAQ page reuses .faq-list/.faq-item without the grid. */
.faq-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 72px;
  align-items: start;
}
.faq-side .section-head { margin-bottom: 34px; }
.faq-side .section-head a { color: var(--green-2); font-weight: 600; }
.faq-call {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--navy) 0%, var(--ink) 100%);
  border-top: 4px solid var(--green);
  padding: 34px 30px 36px;
  color: rgba(255, 255, 255, .78);
  box-shadow: var(--shadow-2);
}
/* Oversized ghost question mark anchors the panel's corner. */
.faq-call::after {
  content: "?";
  position: absolute;
  right: -6px;
  bottom: -58px;
  font-size: 190px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, .05);
  pointer-events: none;
}
.faq-call-title {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
}
.faq-call-sub { margin: 0 0 20px; font-size: 15px; }
.faq-call-phone {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-size: clamp(22px, 1.8vw, 27px);
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  transition: color .2s ease;
}
.faq-call-phone:hover { color: var(--green); }
.faq-call-phone svg {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-list {
  display: grid;
  gap: 14px;
  max-width: 820px;
  margin-inline: auto;
  counter-reset: faq;
}
.faq-item {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  background: var(--paper);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq-item:hover { border-left-color: var(--green); }
.faq-item[open] {
  border-left-color: var(--green-2);
  box-shadow: 0 12px 32px rgba(13, 24, 38, .08);
}
.faq-q {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 21px 20px 21px 26px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
/* Each question carries its rank, same voice as the reasons list. */
.faq-q::before {
  counter-increment: faq;
  content: counter(faq, decimal-leading-zero);
  flex: 0 0 auto;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: .05em;
  color: #C9D2DC;
  transition: color .25s ease;
}
.faq-item:hover .faq-q::before,
.faq-item[open] .faq-q::before { color: var(--green-2); }
.faq-q svg { margin-left: auto; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q svg {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding: 8px;
  background: var(--mist);
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: background .25s ease, stroke .25s ease;
}
/* The chip stays square; only the plus glyph spins into an X. */
.faq-q svg path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .25s var(--ease);
}
.faq-item[open] .faq-q svg {
  background: var(--green-2);
  stroke: #fff;
}
.faq-item[open] .faq-q svg path { transform: rotate(45deg); }
.faq-a {
  margin: 0;
  padding: 0 26px 24px 68px;
  font-size: 15.5px;
}
.faq-a a { color: var(--green-2); }

/* ---------- FAQ page: topic-grouped layout ----------
   The flat ten-question list regrouped into four topics: a sticky rail
   (topic jump nav + the call card) beside the topic sections. Numbering
   runs 01–10 continuously across groups (counter lives on .faq-topics),
   and each topic heading carries the same green-ticked hairline as the
   About page's approach row. main.js paints .is-active on the rail link
   whose topic is nearest the top of the viewport. */
.faq-page-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 24px 72px;
  align-items: start;
}
.faq-rail {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 30px;
}
.faq-topics-label {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8B93A2;
}
.faq-topics-nav ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.faq-topics-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px 12px 16px;
  border-left: 3px solid var(--line);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--body);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.faq-topics-nav a:hover { color: var(--navy); }
.faq-topics-nav a.is-active {
  border-left-color: var(--green);
  background: var(--mist);
  color: var(--navy);
}
.faq-topics-nav a span {
  font-size: 13px;
  font-weight: 800;
  color: #8B93A2;
}
.faq-topics {
  display: grid;
  gap: 52px;
  counter-reset: faq;
}
.faq-topics .faq-list {
  max-width: none;
  margin-inline: 0;
  counter-reset: none;
}
.faq-topic { scroll-margin-top: 96px; }
.faq-topic-title {
  position: relative;
  margin: 0 0 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 21px;
}
.faq-topic-title::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 44px;
  height: 3px;
  background: var(--green);
}
@media (max-width: 1020px) {
  .faq-page-grid { grid-template-columns: 1fr; }
  .faq-rail { position: static; }
  /* The closing band and CTA strip already carry the contact actions. */
  .faq-rail .faq-call { display: none; }
  .faq-topics-nav ul { display: flex; flex-wrap: wrap; gap: 10px; }
  .faq-topics-nav a {
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
  }
  .faq-topics-nav a.is-active {
    border-color: var(--green);
    background: var(--green-soft);
  }
}

/* ---------- 11. Contact & form ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 26px;
  align-items: stretch;
}

.contact-card {
  display: flex;
  flex-direction: column;
  padding: 44px 40px;
  background: linear-gradient(150deg, var(--navy) 0%, var(--ink) 100%);
  color: rgba(255, 255, 255, .88);
  border-radius: var(--radius);
}
.contact-card h3 { color: #fff; font-size: 24px; }
.contact-card .eyebrow { color: rgba(255, 255, 255, .6); }
.contact-rows {
  display: grid;
  gap: 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.contact-rows li { display: flex; gap: 16px; }
.contact-rows svg {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-rows span {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.contact-rows a, .contact-rows address {
  font-style: normal;
  font-size: 16.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.contact-rows a:hover { color: var(--green); }
.contact-card-note {
  margin: auto 0 0;
  padding-top: 26px;
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
}

.form {
  padding: 44px 40px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.section-mist .form { border-color: transparent; box-shadow: var(--shadow-1); }
.form h3 { font-size: 24px; margin-bottom: 4px; }
.form-sub { margin: 0 0 26px; font-size: 14.5px; }

.field { margin-bottom: 18px; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.field :is(input, select, textarea) {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .2s ease, background .2s ease;
}
.field :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--green);
  background: var(--paper);
}
.field textarea { resize: vertical; min-height: 110px; }
.field [aria-invalid="true"] { border-color: #C0392B; }
.field-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #C0392B;
}

/* Honeypot: parked off-screen, invisible to people, present for bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-submit { width: 100%; }
.form-status {
  min-height: 22px;
  margin: 14px 0 0;
  font-size: 14.5px;
  font-weight: 600;
}
.form-status.is-ok { color: var(--green); }
.form-status.is-error { color: #C0392B; }

/* ---------- 12. Footer, banner, CTA strip ---------- */
/* Services closer: the green strip promoted to a full-bleed photo band —
   the old site's "ready to help" CTA rebuilt in the .commit band language
   (photo under a navy gradient, copy left, actions right, green baseline). */
.svc-cta {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-bottom: 4px solid var(--green);
  color: #fff;
}
.svc-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/hero-hvac.jpg") no-repeat 50% 38% / cover;
}
.svc-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(13, 24, 38, .94) 0%,
    rgba(13, 24, 38, .74) 52%,
    rgba(13, 24, 38, .38) 100%);
}
.svc-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 64px;
  padding: 76px 0;
}
.svc-cta h2 {
  margin: 0 0 12px;
  max-width: 620px;
  color: #fff;
  font-size: clamp(28px, 3.4vw, 44px);
}
.svc-cta-copy p {
  margin: 0;
  max-width: 540px;
  font-size: 17px;
  color: rgba(255, 255, 255, .85);
}
.svc-cta-btns { display: flex; flex-wrap: wrap; gap: 14px; }

.cta-strip { background: var(--green); }
.cta-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 36px 0;
}
.cta-strip p {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  color: var(--ink);
}

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .75);
  font-size: 15px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: 44px;
  padding: 72px 0 52px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-brand img { width: 52px; height: 52px; }
.footer-brand strong { color: #fff; font-size: 16px; line-height: 1.2; max-width: 160px; }
.site-footer h2 {
  position: relative;
  margin-bottom: 22px;
  padding-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
/* Short green bar anchors each column heading. */
.site-footer h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 3px;
  background: var(--green-2);
}
.footer-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer-list a {
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
  transition: color .2s ease, padding-left .2s ease;
}
.footer-list a:hover { color: var(--green); padding-left: 5px; }
.footer-list address { font-style: normal; }
.footer-hours strong { color: #fff; font-weight: 600; }
.footer-call {
  margin-top: 20px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-sm);
}
.footer-call span {
  display: block;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.footer-call a {
  font-size: 20px;
  font-weight: 800;
  color: var(--green);
  text-decoration: none;
}
.footer-bottom {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13.5px;
  color: rgba(255, 255, 255, .55);
  text-align: center;
}
.footer-bottom p { margin: 0; }
.footer-bottom a {
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
}
.footer-bottom a:hover { text-decoration: underline; }
.footer-credit { font-size: 13px; }

/* Subpage banner */
.page-banner {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/pic1.jpg") no-repeat 60% 35% / cover;
  opacity: .35;
}
.page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13,24,38,.95), rgba(13,24,38,.72));
}
.page-banner-inner {
  position: relative;
  z-index: 1;
  /* Top padding clears the transparent header laid over the banner. */
  padding: 160px 0 72px;
}
.page-banner h1 {
  margin: 0 0 10px;
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 800;
  color: #fff;
}
.crumbs { font-size: 14px; }
.crumbs ol {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.crumbs li + li::before {
  content: "/";
  margin-right: 10px;
  color: rgba(255, 255, 255, .45);
}
.crumbs a { color: var(--green); text-decoration: none; }
.crumbs [aria-current] { color: rgba(255, 255, 255, .8); }

/* Tall centered banner variant (About) — title centered over a more
   visible photo with a chevron nudging down to the first section, like
   the reference's subpage header. */
.page-banner-tall::before { opacity: .55; }
.page-banner-tall::after {
  background: linear-gradient(180deg,
      rgba(13, 24, 38, .62),
      rgba(13, 24, 38, .34) 55%,
      rgba(13, 24, 38, .52));
}
.page-banner-tall .page-banner-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(380px, 42vw, 520px);
  /* Top padding still clears the transparent header laid over the banner. */
  padding: 120px 0 40px;
  text-align: center;
}
.page-banner-tall h1 {
  margin: 0;
  font-size: clamp(38px, 5vw, 60px);
}
.page-banner-photo::before {
  background-image: url("../assets/pic1.jpg");
  background-position: 50% 38%;
}
/* Tall banners centre their content, so breadcrumbs centre too (service
   detail pages: Home / Services / current — the way back up the tree). */
.page-banner-tall .crumbs { margin-top: 14px; }
.page-banner-tall .crumbs ol { justify-content: center; }

.banner-scroll {
  display: inline-flex;
  margin-top: 18px;
  padding: 6px;
  color: #fff;
  opacity: .85;
  transition: opacity .2s var(--ease);
}
.banner-scroll:hover,
.banner-scroll:focus-visible { opacity: 1; }
.banner-scroll svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
  .banner-scroll svg { animation: banner-nudge 2.4s var(--ease) infinite; }
}
@keyframes banner-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ---------- Service detail pages ----------
   Long-form article on the left, sticky rail on the right holding the
   mini quote form (same ids/fields as the contact form, so main.js and
   send.php treat it identically) and the contact-info card. */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 56px;
  align-items: start;
}
.detail-article > img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.detail-article h2 {
  margin: 36px 0 14px;
  font-size: clamp(24px, 2.4vw, 32px);
}
.detail-article > h2:first-child { margin-top: 0; }
.detail-article img.svc-photo {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 6px 0;
}
.detail-article > p { margin: 0 0 18px; }
.detail-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 32px 0;
}
.detail-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
/* Sub-service rows — one header + paragraph per service with its photo
   alongside, sides alternating down the article. */
.svc-list {
  display: grid;
  gap: 30px;
  margin: 30px 0 36px;
}
.svc-item {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.svc-item:nth-child(even) { grid-template-columns: minmax(0, 1fr) 250px; }
.svc-item:nth-child(even) img { order: 2; }
.svc-item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.svc-item h3 {
  margin: 0 0 10px;
  font-size: 21px;
}
.svc-item p { margin: 0; }
@media (max-width: 720px) {
  .svc-item,
  .svc-item:nth-child(even) { grid-template-columns: 1fr; gap: 18px; }
  .svc-item:nth-child(even) img { order: 0; }
  .svc-item img { aspect-ratio: 16 / 10; }
}

.detail-side {
  position: sticky;
  top: 120px;
  display: grid;
  gap: 26px;
}
.side-card {
  padding: 30px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.side-card h3 { font-size: 20px; }
.side-card .form-sub { margin-bottom: 20px; }
.side-info {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

/* Rail services nav: the way back that stays on screen while the long
   article scrolls. The current page is text, not a link. */
.side-services-list {
  display: grid;
  gap: 4px;
  margin: 16px 0 18px;
  padding: 0;
  list-style: none;
}
.side-services-list li { border-left: 3px solid var(--line); }
.side-services-list a,
.side-services-list span {
  display: block;
  padding: 9px 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--body);
  text-decoration: none;
  transition: color .2s ease;
}
.side-services-list a:hover { color: var(--navy); }
.side-services-list li[aria-current] {
  border-left-color: var(--green);
  background: var(--mist);
}
.side-services-list li[aria-current] span { color: var(--navy); }

/* Shared arrow-left back link (rail card + end of article). */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--green-2);
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }
.back-link svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.article-back { margin-top: 38px; }
.side-info li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
}
.side-info svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--green-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.side-info address { font-style: normal; }
.side-info a { color: var(--navy); font-weight: 600; text-decoration: none; }
.side-info a:hover { text-decoration: underline; }
@media (max-width: 980px) {
  .detail-grid { grid-template-columns: 1fr; gap: 48px; }
  .detail-side { position: static; }
}

/* ---------- Reveal-on-scroll ----------
   Gated on .js-anim set before first paint; without JS everything just
   renders in place. */
/* Reveal runs as a one-shot animation (not a transition) so it never
   hijacks an element's own transition property — card lifts, list-row
   washes and button hovers keep their native timing. */
.js-anim .reveal { opacity: 0; }
.js-anim .reveal.is-in {
  opacity: 1;
  animation: reveal-in .6s var(--ease) both;
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(22px); }
}

/* Sibling stagger for cards/columns that enter together. */
.js-anim .reveal-d1.is-in { animation-delay: .12s; }
.js-anim .reveal-d2.is-in { animation-delay: .24s; }
.js-anim .reveal-d3.is-in { animation-delay: .36s; }

/* Child stagger: put "reveal stagger" on a container and its direct
   children rise one after another instead of the block moving as a slab. */
.js-anim .stagger.reveal { opacity: 1; }
.js-anim .stagger.reveal.is-in { animation: none; }
.js-anim .stagger > * { opacity: 0; }
.js-anim .stagger.is-in > * {
  opacity: 1;
  animation: reveal-in .55s var(--ease) both;
}
.js-anim .stagger.is-in > :nth-child(2) { animation-delay: .1s; }
.js-anim .stagger.is-in > :nth-child(3) { animation-delay: .2s; }
.js-anim .stagger.is-in > :nth-child(4) { animation-delay: .3s; }
.js-anim .stagger.is-in > :nth-child(5) { animation-delay: .4s; }
.js-anim .stagger.is-in > :nth-child(6) { animation-delay: .5s; }
.js-anim .stagger.is-in > :nth-child(n+7) { animation-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* ---------- Responsive ----------
   Ladder: 1020 (tablet, menu becomes a dropdown), 720 (small tablet),
   560 (large phone), 430 (phone), 360 (small phone). Nothing here touches
   the desktop layout above 1020px. Rules below override the section
   defaults above, so each tier only lists what changes. */
@media (max-width: 1020px) {
  .section { padding: 76px 0; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: 1fr; }
  .rev-track { grid-auto-columns: calc((100% - 26px) / 2); }
  .faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .faq-list { max-width: none; }
  .split { gap: 48px; }
  .band-grid { grid-template-columns: 1fr; padding: 48px; }
  .mr { grid-template-columns: 1fr; }
  .mr-media { min-height: 0; aspect-ratio: 16 / 10; }
  .mr-media img { position: absolute; }
  .mr-body { max-width: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

  /* The stat trio in the split copy: three tidy columns instead of a
     ragged one-then-two flex wrap once the column narrows. */
  .stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, auto));
    justify-content: start;
    gap: 20px 28px;
  }

  /* Header over a photo: the bar carries its own top scrim so the white
     wordmark and buttons read on every banner (the tall About/Services
     photos are much lighter than the home hero). Solid white once stuck
     or while the menu is open, so the dropdown never hangs off a
     transparent bar. */
  .site-header:not(.is-stuck):not(.is-menu-open) {
    background: linear-gradient(180deg, rgba(13, 24, 38, .62), rgba(13, 24, 38, 0));
  }
  .site-header.is-menu-open { background: var(--paper); box-shadow: var(--shadow-2); }
  .site-header.is-menu-open .brand-name { color: var(--ink); }
  .site-header.is-menu-open .brand-name span { color: var(--green-2); }
  .site-header.is-menu-open .nav-toggle { background: var(--paper); border-color: var(--line); }
  .site-header.is-menu-open .nav-toggle span { background: var(--ink); }
  .header-inner { gap: 14px; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: 10px 0 4px; }
  .nav a { padding: 14px 26px; border-radius: 0; font-size: 17px; }
  /* The quote button inside the panel must not pick up the link styling above. */
  .nav .nav-cta {
    display: flex;
    justify-content: center;
    padding: 15px 28px;
    font-size: 15px;
    font-weight: 700;
  }
  /* The dropdown panel is white in both header states: links go dark,
     and the desktop underline is dropped. */
  .site-header .nav.is-open a { color: var(--ink); }
  .site-header .nav.is-open a.is-current { color: var(--green-2); }
  .site-header .nav.is-open a::after { display: none; }
  /* The quote button rides inside the panel (the bar's own CTA is desktop-only). */
  .nav-cta { display: flex; margin: 8px 20px 20px; }
  .nav-toggle { display: flex; margin-left: 0; }
  .header-cta { display: none; }

  /* Compact tap-to-call beside the hamburger. */
  .header-call {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: var(--radius-sm);
    color: #fff;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
  }
  .header-call svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .site-header.is-stuck .header-call,
  .site-header.is-menu-open .header-call {
    border-color: var(--line);
    background: var(--paper);
    color: var(--green-2);
  }

  /* Carousel dots keep their 9px mark but get a 28px tap area. */
  .rev-dots { gap: 2px; }
  .rev-dot {
    position: relative;
    width: 28px;
    height: 28px;
    background: transparent;
    transform: none;
  }
  .rev-dot::before {
    content: "";
    position: absolute;
    inset: 9.5px;
    border-radius: 50%;
    background: #C9D2DC;
    transition: background .25s ease, transform .25s ease;
  }
  .rev-dot:hover { background: transparent; }
  .rev-dot:hover::before { background: var(--green); }
  .rev-dot.is-active { background: transparent; transform: none; }
  .rev-dot.is-active::before { background: var(--green-2); transform: scale(1.3); }

  /* 16px inputs: anything smaller makes iOS Safari zoom the page on focus
     and leave it zoomed. */
  .field :is(input, select, textarea) { font-size: 16px; }
}

@media (max-width: 720px) {
  .section { padding: 60px 0; }
  .section-head { margin-bottom: 36px; }
  .container,
  .container-wide { width: calc(100% - 40px); }

  /* Header drops from 96px to 72px; the negative pull under it stays in sync. */
  .site-header { margin-bottom: -72px; }
  .header-inner { min-height: 72px; }
  .brand img { width: 44px; height: 44px; }
  .brand-name { font-size: 15px; max-width: 150px; }
  .nav { max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); }
  .header-call,
  .nav-toggle { width: 44px; height: 44px; }
  .page-banner-inner { padding: 120px 0 56px; }
  .page-banner h1 { font-size: 32px; }
  .page-banner-tall .page-banner-inner { min-height: 340px; padding: 100px 0 34px; }
  .page-banner-tall h1 { font-size: 34px; }

  /* Hero: shorter padding, a headline that shrinks with the screen, and
     phone-sized photos (the 2560px originals stay for desktop). */
  .hero-inner { padding: 112px 0 96px; }
  .hero h1,
  .hero .hero-h1 { font-size: clamp(30px, 8.6vw, 34px); text-wrap: balance; }
  .hero-lead { font-size: 16px; }
  .hero-cta { gap: 12px; }
  .hero-bg-sink { background-image: url("../assets/hero-sink-m.jpg"); }
  .hero.is-ready .hero-bg-hvac { background-image: url("../assets/hero-hvac-m.jpg"); }
  .commit::before { background-image: url("../assets/commit-bg-m.jpg"); }
  .svc-cta::before { background-image: url("../assets/hero-hvac-m.jpg"); }

  /* The cards no longer straddle the hero by 130px; stacked one-up that
     pulled them over the hero buttons. A shallow overlap keeps the idea. */
  .overlap { margin-top: -40px; }

  .ticker { padding: 26px 0; }
  .ticker-track { animation-duration: 22s; }
  .ticker-row { gap: 36px; padding-left: 36px; }
  .ticker-row li { gap: 14px; font-size: 26px; }
  .ticker-row li svg { width: 30px; height: 30px; }

  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-tag { left: 10px; }
  .stat-row { gap: 18px 24px; margin: 28px 0 30px; }
  .stat-num { font-size: 28px; }
  .work-grid { gap: 14px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .form, .contact-card { padding: 34px 26px; }
  .band-grid { padding: 36px 26px; }
  .band h2 { font-size: 25px; }
  .commit-inner { padding: 72px 0 76px; }
  .commit h2 { font-size: 26px; }
  .process-tabs { margin-bottom: 32px; }
  .process-tab { flex: 1 1 calc(50% - 2px); padding: 13px 16px; font-size: 14.5px; }
  .process-copy h3 { font-size: 26px; }
  .reasons-grid { gap: 40px; }
  .faq-grid { gap: 32px; }
  .faq-a { padding-left: 26px; }
  .pie { margin-top: 48px; }
  .pie-wrap { gap: 28px; }
  .stats-band .stat-num { font-size: 36px; }
  .who-body { padding: 64px 0 24px; }
  .who-body h2 { font-size: 25px; }
  .manifesto-head h2 { font-size: 32px; }
  .pledge-inner { padding: 64px 0; }
  .pledge-title { font-size: 36px; }
  .serve-name { font-size: 24px; }
  .mr h2 { font-size: 26px; }
  .svc-cta h2 { font-size: 26px; }
  .statement h2 { font-size: 28px; }
  .detail-grid { gap: 40px; }

  /* Copy-plus-button strips stack instead of orphaning the button. */
  .statement-inner,
  .svc-cta-inner,
  .cta-strip-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .statement-inner { padding-block: 52px; }
  .svc-cta-inner { padding: 60px 0; }
  .cta-strip-inner { padding: 30px 0; }

  .footer-grid { padding: 56px 0 40px; gap: 32px; }
  .footer-list { gap: 4px; }
  .footer-list a { display: inline-block; padding: 5px 0; }
  .footer-list a:hover { padding-left: 5px; }
  .card-link,
  .back-link { padding: 6px 0; }

  /* Lightbox: controls move off the photo to the bottom, image fits the
     small viewport (svh so the iOS URL bar cannot push the caption off). */
  .lightbox { padding: 64px 12px 84px; }
  .lightbox figure { max-width: 100%; }
  .lightbox img { max-height: 66vh; max-height: 66svh; }
  .lightbox-close { top: 12px; right: 12px; }
  .lightbox-prev,
  .lightbox-next { top: auto; bottom: 18px; transform: none; }
  .lightbox-prev { left: calc(50% - 60px); }
  .lightbox-next { right: calc(50% - 60px); }
}

@media (max-width: 560px) {
  .section { padding: 52px 0; }
  .section-head { margin-bottom: 30px; }
  .section-head h2 { font-size: 26px; }
  .section-head p { font-size: 16px; }
  .eyebrow { font-size: 12.5px; letter-spacing: .12em; }
  .cards { grid-template-columns: 1fr; gap: 18px; }
  .card { padding: 30px 24px 26px; }
  .card h3 { font-size: 20px; }
  .rev-track { grid-auto-columns: 100%; }
  .rev-track .review { padding: 40px 24px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; padding: 48px 0 36px; }
  .footer-brand strong { max-width: none; }
  .footer-call a { font-size: 19px; }

  .hero-inner { padding: 104px 0 84px; }
  /* The forced line break was written for desktop widths; let the
     headline wrap on its own here. */
  .hero h1 br,
  .hero-h1 br { display: none; }

  /* Button pairs stack full-width. */
  .hero-cta,
  .mr-cta,
  .pledge-cta,
  .band-cta,
  .svc-cta-btns { flex-direction: column; align-items: stretch; }
  .work-more { display: grid; gap: 12px; }
  .hero-cta .btn,
  .mr-cta .btn,
  .pledge-cta .btn,
  .band-cta .btn,
  .svc-cta-btns .btn,
  .work-more .btn,
  .statement .btn,
  .cta-strip .btn { width: 100%; }

  .stat-row { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .stat-num { font-size: 26px; }
  .stat span { font-size: 12.5px; }
  .stats-band { gap: 26px 18px; }
  .stats-band .stat-num { font-size: 32px; }
  .stats-band .stat span { font-size: 14px; margin-top: 4px; }
  .pie-center { padding: 20%; }
  .pie-center strong { font-size: 24px; }
  .pie-center span { font-size: 12px; }

  .ticker-row li { font-size: 22px; }
  .commit-inner { padding: 60px 0 64px; }
  .commit h2 { font-size: 25px; }
  .commit p { font-size: 16px; line-height: 1.7; }
  .mr-body { padding: 48px 24px 52px; }
  .mr-badge { bottom: 16px; padding: 12px 18px 13px; }
  .mr-badge strong { font-size: 18px; }
  .mr-badge span { font-size: 12.5px; }
  .statement h2 { font-size: 26px; }
  .pledge-inner { padding: 56px 0; }
  .pledge-title { font-size: 32px; }
  .pledge-ready { font-size: 20px; }
  .manifesto-head h2 { font-size: 30px; }
  .strike { white-space: normal; }
  .serve-name { font-size: 22px; }
  .serve-grid { gap: 28px; }
  .who-body h2 { font-size: 24px; }
  .page-banner h1 { font-size: 30px; }
  .page-banner-tall h1 { font-size: 32px; }
  .page-banner-tall .page-banner-inner { min-height: 300px; }
  .faq-call::after { font-size: 130px; bottom: -40px; }
  .process-copy h3 { font-size: 24px; }
  .process-copy p { font-size: 16px; }
  .band-grid { padding: 30px 22px; }
  .band h2 { font-size: 24px; }
  .svc-cta h2 { font-size: 25px; }
  .svc-cta-inner { padding: 52px 0; }
  .cta-strip p { font-size: 18px; }
  .hours-card { padding: 30px 24px 28px; }
  .form, .contact-card { padding: 30px 22px; }
  .form h3 { font-size: 22px; }
  .side-card { padding: 26px 22px; }
  .detail-article h2 { font-size: 23px; }
}

@media (max-width: 430px) {
  .container,
  .container-wide { width: calc(100% - 32px); }
  .section { padding: 48px 0; }
  .btn { padding: 14px 22px; }
  .hero-inner { padding: 100px 0 80px; }
  .brand-name { font-size: 14.5px; max-width: 132px; }
  .card { padding: 26px 20px 24px; }
  .form, .contact-card { padding: 26px 18px; }
  .hours-card { padding: 26px 20px; }
  .mr-body { padding: 44px 20px 48px; }
  .rev-track .review { padding: 38px 20px 22px; }
  .review-quote { left: 20px; }
  .stat-num { font-size: 24px; }
  .stats-band .stat-num { font-size: 30px; }
  .pledge-title { font-size: 30px; }
  .manifesto-head h2 { font-size: 28px; }
  .page-banner-tall h1 { font-size: 30px; }
  .footer-grid { padding: 44px 0 32px; }
  .process-tab { padding: 12px; font-size: 14px; }
  .commit-inner { padding: 52px 0 56px; }
}

@media (max-width: 360px) {
  /* Brand + call + menu no longer fit on one bar; the panel still carries
     the call action. */
  .header-call { display: none; }
  .brand-name { font-size: 14px; max-width: 140px; }
  .hero h1,
  .hero .hero-h1 { font-size: 28px; }
  .stat-row { gap: 12px; }
  .stat-num { font-size: 22px; }
}