/* ==========================================================================
   Monett MO Area Plumbers Inc — Main Stylesheet
   Structure: Reset · Base · Layout · Header · Hero · Components · Sections
              · Forms · Footer · Utilities · Responsive
   ========================================================================== */

@import url('variables.css');

/* ==========================================================================
   1. RESET
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  /* Faint dot grid over the cream — gives the paper a texture without noise. */
  background-image: radial-gradient(rgba(var(--rgb-ink), 0.055) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }

/* Roboto Slab at 800 — a heavy slab serif. Headings stay UPPERCASE, but the
   face is normal-width rather than condensed, so the sizes run smaller and the
   tracking tighter than a condensed face would need. Weight comes from the
   token, never from a synthesised bold. */
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
  color: var(--color-primary);
  text-wrap: balance;
}

/* All-caps has no descenders, so these run slightly tighter than they look. */
h1 { font-size: clamp(2.1rem, 4.8vw, 3.5rem); line-height: 1.02; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.06; }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.5rem); letter-spacing: var(--ls-heading-sm); }
h4 { font-size: 1.1rem; letter-spacing: var(--ls-heading-sm); }

p  { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-primary-mid);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--color-accent-deep); }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; }
li { margin-bottom: var(--space-2); }

button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--color-accent-deep);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--color-accent); color: var(--color-primary-dark); }

/* ==========================================================================
   2. LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-nar); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--alt   { background: var(--color-bg-alt); }
.section--white { background: var(--color-bg-section); }
.section--dark  {
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(var(--rgb-primary-light), .42), transparent 60%),
    radial-gradient(800px 420px at 100% 110%, rgba(var(--rgb-accent), .16), transparent 60%),
    var(--color-bg-dark);
  color: var(--color-text-light);
}
.section--dark h2,
.section--dark h3 { color: var(--color-text-light); }
.section--dark p  { color: var(--color-text-dim); }

.grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
.grid--1 { grid-template-columns: minmax(0, 1fr); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* Prose + sticky sidebar (service and area pages). minmax(0, …) pins the ratio so
   per-page content (e.g. the nowrap .value-row labels) can't widen the prose column
   and squeeze the sidebar by a different amount on each page. */
.split--sidebar {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr);
  align-items: start;
}

/* Section heading block ---------------------------------------------------- */
.section-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  /* Primary navy — the accent green is reserved as a small pop of color
     elsewhere, not for running text like eyebrows. */
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.eyebrow::before {
  content: '';
  width: 28px; height: 2px;
  background: currentColor;
  display: inline-block;
}
.section-head--center .eyebrow::after {
  content: '';
  width: 28px; height: 2px;
  background: currentColor;
  display: inline-block;
}
.section--dark .eyebrow { color: var(--color-accent-light); }
/* The global link color is a mid navy — invisible on this ground. Prose links
   inside a dark band take the light accent instead, which is the token meant
   for ink on dark. */
.section--dark p a {
  color: var(--color-accent-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--rgb-accent), .55);
}
.section--dark p a:hover { color: var(--color-text-light); text-decoration-color: currentColor; }
.eyebrow::before, .section-head--center .eyebrow::after { align-self: center; }

.section-head p {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}
.section--dark .section-head p { color: var(--color-text-dim); }

.lede { font-size: var(--fs-md); color: var(--color-text-muted); }

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* Buttons are set in the body sans, mixed case — the serif is reserved for
     headings. The lift on hover is a slide off a hard, unblurred shadow. */
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.95rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(var(--rgb-ink), 0.18);
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(var(--rgb-ink), 0.22); }
.btn:active { transform: translate(0, 0); box-shadow: none; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* Navy ink on the lime fill, not white: white lands at 1.5:1 on #BBDF33,
   the navy at 12.3:1, and the pairing is more distinctive besides. */
.btn--accent {
  background: var(--color-accent);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-accent);
}
.btn--accent:hover {
  background: var(--color-black);
  color: var(--color-text-light);
  box-shadow: 6px 6px 0 rgba(var(--rgb-ink), 0.4);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-light);
}
.btn--primary:hover { background: var(--color-primary-dark); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--color-text-light);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
  backdrop-filter: blur(4px);
}
.btn--ghost:hover { box-shadow: none; }
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border);
}
.btn--outline:hover { border-color: var(--color-primary); background: var(--color-primary-tint); }

.btn--lg { padding: 1.1rem 2.25rem; font-size: var(--fs-base); }
.btn--sm { padding: 0.55rem 1.1rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-primary);
}
.link-arrow::after {
  content: '→';
  transition: transform var(--t) var(--ease-out);
}
.link-arrow:hover::after { transform: translateX(5px); }

/* ==========================================================================
   4. HEADER + NAV
   ========================================================================== */
.topbar {
  background: var(--color-primary-dark);
  color: var(--color-text-dim);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 40px;
  padding-block: var(--space-2);
}
.topbar__list { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.topbar__list li { margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.topbar__list svg { width: 14px; height: 14px; color: var(--color-accent); flex: none; }
.topbar a { color: var(--color-text-dim); }
.topbar a:hover { color: var(--color-accent-light); }
.topbar__emergency {
  display: inline-flex; align-items: center; gap: 0.45rem;
  /* Inter — a heavy slab at 13px in the topbar is muddier than the sans. */
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent-light);
}
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0 rgba(var(--rgb-accent), 0.7);
  animation: pulse 2.2s infinite;
  flex: none;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 10px rgba(var(--rgb-accent), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--rgb-accent), 0); }
}

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 253, 248, 0.96);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.header.is-stuck { box-shadow: var(--shadow); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 82px;
  padding-block: var(--space-3);
}

/* Logo -------------------------------------------------------------------- */
.logo { display: flex; align-items: center; gap: var(--space-3); }
.logo__mark {
  width: 46px; height: 46px;
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--color-primary-mid), var(--color-primary-dark));
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  flex: none;
  overflow: hidden;
}
.logo__mark svg { width: 26px; height: 26px; color: var(--color-accent); }
.logo__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Logo.png already carries its own navy speech-bubble backing, so the
   gradient chip and shadow are only for the fallback wrench icon. */
.logo__mark:has(img) { background: none; box-shadow: none; }
.logo__text { display: flex; flex-direction: column; line-height: 1.05; }
/* The header is a single nowrap flex row inside a 1220px container whose
   gutters leave 1140px of usable width, and the five nav items plus the phone
   block and the button only just fit inside it. Measured at these sizes the
   row comes to roughly 1095px, so every label — the logo name, "Service
   Areas", the phone number — holds one line with about 45px to spare. Push any
   of these sizes back up and the header starts wrapping again. */
.logo__name {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.logo__tag {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 3px;
}

/* Desktop nav ------------------------------------------------------------- */
.nav { display: flex; align-items: center; gap: var(--space-1); }
.nav__list { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.nav__list > li { margin: 0; position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--color-primary-dark);
  padding: 0.6rem 0.65rem;
  border-radius: var(--radius-sm);
  background: none;
  border: 0;
  position: relative;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0.65rem; right: 0.65rem; bottom: 0.28rem;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after,
.nav__item.is-open > .nav__link::after { transform: scaleX(1); }
.nav__link:hover { color: var(--color-primary-mid); }
.nav__caret { width: 11px; height: 11px; transition: transform var(--t) var(--ease); }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 274px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out), visibility var(--t);
  z-index: var(--z-dropdown);
}
.nav__item.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li { margin: 0; }
.dropdown a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius);
  color: var(--color-primary);
  transition: background var(--t-fast) var(--ease);
}
.dropdown a:hover { background: var(--color-primary-tint); color: var(--color-primary); }
.dropdown strong {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-heading-sm);
  text-transform: uppercase;
}
.dropdown span { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* Service Areas dropdown: thirteen destinations is too many for one column, so
   this variant runs two columns under "Cities" / "Counties" headings. It hangs
   from the left edge of its nav item like the Services panel. That only works
   because the header type was shrunk: the trigger now sits about 480px in at
   the 961px burger breakpoint, so 440px of panel still lands inside the
   gutter. Enlarge the header type or widen this panel and it will overhang the
   right edge on a narrow desktop window again. Items here carry no <span>,
   just the name. */
.dropdown--areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 0 var(--space-4);
  min-width: 440px;
  padding: var(--space-3);
}
.dropdown--areas > li > ul { list-style: none; margin: 0; padding: 0; }
.dropdown--areas a { padding: 0.42rem 0.7rem; }
.dropdown__head {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-primary);
  padding: 0.35rem 0.7rem var(--space-2);
  border-bottom: 1px solid var(--color-border);
  margin: 0 0 var(--space-2);
}
.dropdown__foot {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2) !important;
  padding-top: var(--space-2);
}
.dropdown__foot a { color: var(--color-primary); }

/* Header actions ---------------------------------------------------------- */
.header__actions { display: flex; align-items: center; gap: var(--space-3); }
/* Trimmed from the global button size so the row clears 1220px — see the note
   above .logo__name. */
.header__actions > .btn { font-size: 0.875rem; padding: 0.8rem 1.3rem; white-space: nowrap; }
.header__phone { display: flex; align-items: center; gap: var(--space-3); }
.header__phone-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-accent-tint);
  display: grid; place-items: center; flex: none;
}
.header__phone-icon svg { width: 18px; height: 18px; color: var(--color-accent-deep); }
.header__phone-text { display: flex; flex-direction: column; line-height: 1.1; }
.header__phone-label {
  font-size: 0.625rem; letter-spacing: var(--ls-wider);
  text-transform: uppercase; color: var(--color-text-muted);
  white-space: nowrap;
}
.header__phone-num {
  font-family: var(--font-heading);
  font-size: 1.05rem; font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-primary-dark);
  white-space: nowrap;
}
a.header__phone:hover .header__phone-num { color: var(--color-accent-deep); }

/* Burger ------------------------------------------------------------------ */
.burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  padding: 0;
  place-items: center;
}
.burger span {
  display: block; width: 20px; height: 2px;
  background: var(--color-primary);
  position: relative;
  transition: background var(--t-fast) var(--ease);
}
.burger span::before,
.burger span::after {
  content: ''; position: absolute; left: 0;
  width: 20px; height: 2px; background: var(--color-primary);
  transition: transform var(--t) var(--ease-out);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger.is-active span { background: transparent; }
.burger.is-active span::before { transform: translateY(6px) rotate(45deg); }
.burger.is-active span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Mobile overlay ---------------------------------------------------------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--color-bg-dark);
  padding: var(--space-6) var(--gutter) var(--space-8);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out), visibility var(--t);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-nav__top { display: flex; justify-content: flex-end; margin-bottom: var(--space-5); }
.mobile-nav__close {
  width: 46px; height: 46px; border-radius: var(--radius);
  background: rgba(255,255,255,.08); border: 1px solid var(--color-border-dark);
  color: #fff; font-size: 1.6rem; line-height: 1; display: grid; place-items: center;
}
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav > .container > ul > li { border-bottom: 1px solid var(--color-border-dark); }
.mobile-nav a {
  display: block;
  padding: var(--space-4) 0;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading-sm);
  text-transform: uppercase;
  color: #fff;
}
.mobile-nav a:hover { color: var(--color-accent); }
.mobile-nav__sub { padding-left: var(--space-4) !important; padding-bottom: var(--space-3); }
.mobile-nav__sub a { font-size: var(--fs-base); color: var(--color-text-dim); padding: var(--space-2) 0; }
.mobile-nav__cta { margin-top: var(--space-6); display: grid; gap: var(--space-3); }

/* Mobile sticky call bar --------------------------------------------------- */
.mobile-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-mobilebar);
  background: var(--color-primary-dark);
  border-top: 1px solid var(--color-border-dark);
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
  gap: 0.6rem;
  box-shadow: 0 -8px 24px rgba(var(--rgb-primary-dark), 0.35);
}
.mobile-bar .btn { flex: 1; padding: 0.85rem 0.5rem; font-size: var(--fs-xs); }

/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  color: var(--color-text-light);
  background: linear-gradient(140deg, var(--color-primary-mid), var(--color-primary-dark));
  padding-block: clamp(4.5rem, 11vw, 8.5rem);
  overflow: hidden;
}
/* Homepage hero only — the full-bleed toolbox photo. Inner-page heroes
   (.hero--inner) stay on the plain gradient above and get their own framed
   photo via .hero__media instead, so this selector excludes them. */
.hero:not(.hero--inner) {
  background:
    linear-gradient(105deg,
      rgba(var(--rgb-primary-dark), .95) 0%,
      rgba(var(--rgb-primary), .88) 46%,
      rgba(var(--rgb-primary), .58) 100%),
    url('../images/Hero.jpg') center/cover no-repeat,
    linear-gradient(140deg, var(--color-primary-mid), var(--color-primary-dark));
}
.hero--inner { padding-block: clamp(3.5rem, 8vw, 6rem); }

/* Blueprint grid texture */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(70% 90% at 78% 20%, #000 0%, transparent 72%);
}
/* Warm glow */
.hero::after {
  content: '';
  position: absolute; z-index: -1;
  width: 620px; height: 620px;
  right: -140px; top: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--rgb-accent), .22) 0%, transparent 65%);
}

/* .hero__inner stays a full-width .container (same left/right edges as the
   header and every other section) — it does NOT get its own max-width, or it
   re-centers as a smaller box instead of sitting flush with those edges.
   The 900px cap that keeps the headline to three lines instead of five is
   applied to the content itself below, left-aligned inside this container. */
.hero__inner { position: relative; }
.hero__badge, .hero h1, .hero__sub, .hero .btn-row {
  max-width: 900px;
}
.hero--inner .hero__badge, .hero--inner h1, .hero--inner .hero__sub,
.hero--inner .btn-row {
  max-width: 940px;
}
/* The trust row is free to run wider than the headline column so all four
   items can share one line instead of wrapping the last one alone. */
.hero__trust { max-width: 100%; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(var(--rgb-accent), 0.16);
  border: 1px solid rgba(var(--rgb-accent), 0.48);
  color: var(--color-accent-light);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-5);
}

/* `balance` evens the line lengths, which on a wide uppercase slab means it
   ignores most of the column and stacks into five short lines. The hero opts
   out so the headline fills the width it has. */
.hero h1 { color: #fff; margin-bottom: var(--space-5); text-wrap: normal; }
/* The second line of the hero headline, set in the accent on its own line. */
.hero h1 em {
  font-style: normal;
  color: var(--color-accent);
  display: block;
}
.hero__sub {
  font-size: clamp(1.0625rem, 1.7vw, var(--fs-md));
  color: var(--color-text-dim);
  max-width: 60ch;
  margin-bottom: var(--space-6);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-6);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-dark);
  list-style: none;
  padding-left: 0;
}
.hero__trust li {
  display: flex; align-items: center; gap: 0.55rem;
  margin: 0;
  /* Inter — the trust row sits right under the hero headline, and repeating the
     heavy slab there competes with it instead of supporting it. */
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.hero__trust svg { width: 18px; height: 18px; color: var(--color-accent); flex: none; }

/* Page hero (inner pages) -------------------------------------------------- */
.breadcrumbs {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: var(--space-4);
}
.breadcrumbs a { color: var(--color-accent-light); }
.breadcrumbs span { opacity: .6; padding-inline: 0.4rem; }

/* Page hero photo — service pages and service-area pages pair their
   .hero--inner text with a framed photo. .hero__content carries the max-width
   cap set above; .hero__media is free-width so it can fill its grid column. */
.hero__inner--media {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 1081px) {
  .hero__inner--media { grid-template-columns: 1.15fr 0.85fr; }
}
.hero__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.14);
  aspect-ratio: 4 / 3;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   6. STATS BAR
   ========================================================================== */
.stats {
  background: var(--color-primary-dark);
  border-top: 3px solid var(--color-accent);
  color: #fff;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.stats__item {
  padding: clamp(1.75rem, 3.4vw, 2.6rem) var(--space-4);
  border-right: 1px solid var(--color-border-dark);
}
.stats__item:last-child { border-right: 0; }
.stats__num {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading);
  line-height: 1;
  color: var(--color-accent);
}
.stats__label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-top: var(--space-2);
}

/* ==========================================================================
   7. CARDS
   ========================================================================== */
.card {
  background: var(--color-bg-section);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  box-shadow: var(--shadow);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
  position: relative;
  overflow: hidden;
  height: 100%;
}
.card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent-deep), var(--color-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
}
.card:hover { transform: translate(-4px, -4px); box-shadow: var(--shadow-lg); }
.card:hover::before { transform: scaleX(1); }

.card__icon {
  width: 62px; height: 62px;
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, var(--color-primary-tint), var(--color-bg-section));
  border: 1px solid var(--color-border);
  display: grid; place-items: center;
  margin-bottom: var(--space-5);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.card__icon svg { width: 30px; height: 30px; color: var(--color-primary); transition: color var(--t) var(--ease); }
.card:hover .card__icon { background: var(--color-primary); border-color: var(--color-primary); }
.card:hover .card__icon svg { color: var(--color-accent); }

.card h3 { margin-bottom: var(--space-3); }
.card p { color: var(--color-text-muted); font-size: var(--fs-sm); }

.card__list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 var(--space-5);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.card__list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--space-2);
}
.card__list li::before {
  content: '';
  position: absolute; left: 0; top: 0.6em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Feature (why choose) ----------------------------------------------------- */
.feature {
  display: flex; gap: var(--space-4);
  background: var(--color-bg-section);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-4);
}
.feature__icon {
  width: 52px; height: 52px; flex: none;
  border-radius: var(--radius-sm);
  background: rgba(var(--rgb-primary), 0.1);
  border: 1px solid rgba(var(--rgb-primary), 0.25);
  display: grid; place-items: center;
}
.feature__icon svg { width: 24px; height: 24px; color: var(--color-primary); }
.section--dark .feature__icon svg { color: var(--color-accent); }
.feature h3 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.feature p { font-size: var(--fs-sm); }

/* Media panel (image / illustration block) --------------------------------- */
.media-panel {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background:
    linear-gradient(140deg, rgba(var(--rgb-primary-dark), .55), rgba(var(--rgb-primary), .4)),
    url('../images/hvac-unit-being-repaired.png') center/cover no-repeat;
  min-height: 420px;
  display: grid;
  place-items: center;
  color: #fff;
  padding: var(--space-6);
  text-align: center;
}
.media-panel::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.media-panel__badge {
  position: absolute;
  bottom: var(--space-5); left: var(--space-5);
  background: var(--color-accent);
  color: var(--color-primary-dark);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-lg);
  text-align: left;
  z-index: 2;
}
.media-panel__badge strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  line-height: 1;
}
.media-panel__badge span {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}
.media-panel__seal { position: relative; z-index: 1; }
.media-panel__seal svg { width: 92px; height: 92px; color: var(--color-accent); margin: 0 auto var(--space-4); }
.media-panel__seal p {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading-sm);
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.9);
}

/* ==========================================================================
   8. SERVICE AREA
   ========================================================================== */
.area__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
}
.area__grid li {
  margin: 0;
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.9);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.area__grid li:hover { background: rgba(var(--rgb-accent), .12); border-color: rgba(var(--rgb-accent), .45); }
.area__grid svg { width: 14px; height: 14px; color: var(--color-accent); flex: none; }

/* A tile that links to its service-area page: the anchor takes over the li's
   padding so the whole tile is the hit target, not just the words. */
.area__grid li:has(> a) { padding: 0; }
.area__grid li > a {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  color: inherit;
}
.area__grid li > a:hover { color: var(--color-text-light); }

/* Linked tiles need to read as clickable, since an unlinked tile is otherwise
   identical: a chevron sits at the trailing edge and slides right on hover. */
.area__grid li > a::after {
  content: '';
  width: 6px; height: 6px;
  margin-left: auto;
  border-right: 2px solid var(--color-accent);
  border-top: 2px solid var(--color-accent);
  transform: rotate(45deg);
  opacity: .55;
  flex: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.area__grid li > a:hover::after { opacity: 1; transform: rotate(45deg) translate(2px, -2px); }

/* "Cities" / "Counties" headings above each grid, on the navy ground. */
.area__label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-accent-light);
  margin: var(--space-5) 0 0;
}
.area__label + .area__grid { margin-top: var(--space-3); }
.area__note { font-size: var(--fs-sm); margin-top: var(--space-4); }

/* County tiles carry a second word, and "McDonald County" needs ~128px of text
   where a 160px track only affords ~114px. This variant drops the homepage
   counties grid to two wide columns so the labels stay on one line. */
.area__grid--wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Cross-links between area pages, on the cream grounds. Pills rather than the
   dark tiles above, and they slide off their hard shadow like the cards do. */
.area-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; margin: var(--space-5) 0 0; }
.area-chips li { margin: 0; padding-left: 0; }
.area-chips li::before { content: none; }
.area-chips a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--color-bg-section);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
  padding: 0.5rem 1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-primary);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.area-chips svg { width: 13px; height: 13px; color: var(--color-accent-deep); flex: none; }
.area-chips a:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(var(--rgb-accent), .55);
  color: var(--color-accent-deep);
}

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  background: var(--color-bg-alt);
  min-height: 340px;
}
.map-frame iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.section--dark .map-frame { border-color: var(--color-border-dark); }

/* ==========================================================================
   9. TESTIMONIALS
   ========================================================================== */
.quote {
  background: var(--color-bg-section);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  box-shadow: var(--shadow);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}
.quote:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-lg); }
.quote__stars { display: flex; gap: 3px; margin-bottom: var(--space-4); }
.quote__stars svg { width: 18px; height: 18px; color: var(--color-gold); }
.quote__text {
  font-size: var(--fs-base);
  color: var(--color-text);
  margin-bottom: var(--space-5);
  flex: 1;
}
.quote__text::before { content: '“'; }
.quote__text::after  { content: '”'; }
.quote__meta { display: flex; align-items: center; gap: var(--space-3); }
.quote__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.quote__footer .btn svg { width: 15px; height: 15px; }
.quote__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--color-primary);
  color: var(--color-accent);
  display: grid; place-items: center;
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-heading-sm);
}
.quote__name { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--fs-sm); letter-spacing: var(--ls-heading-sm); text-transform: uppercase; color: var(--color-primary); }
.quote__where { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--color-text-muted); letter-spacing: var(--ls-wider); text-transform: uppercase; }

/* ==========================================================================
   10. CTA STRIP
   ========================================================================== */
.cta-strip {
  background:
    radial-gradient(700px 340px at 8% 0%, rgba(var(--rgb-primary-light), .45), transparent 62%),
    linear-gradient(120deg, var(--color-primary-dark), var(--color-primary) 70%);
  color: #fff;
  border-block: 3px solid var(--color-accent);
}
.cta-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  flex-wrap: wrap;
}
.cta-strip h2 { color: #fff; margin-bottom: var(--space-2); }
.cta-strip p { color: var(--color-text-dim); margin: 0; max-width: 54ch; }

/* ==========================================================================
   11. PROCESS STEPS
   ========================================================================== */
.steps { counter-reset: step; }
.step { position: relative; padding-top: var(--space-5); }
/* Hand-drawn blob badge holding the step number, rather than a numeral rule. */
.step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-blob);
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 1.15rem;
  line-height: 1;
  margin-bottom: var(--space-4);
}
.step::after {
  content: '';
  position: absolute; top: calc(var(--space-5) + 23px); left: 58px; right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg,
    var(--color-border) 0 8px, transparent 8px 14px);
}
.step h3 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.step p { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ==========================================================================
   12. FAQ ACCORDION
   ========================================================================== */
.faq { max-width: 900px; margin-inline: auto; }
.faq__item {
  background: var(--color-bg-section);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  overflow: hidden;
  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.faq__item.is-open { border-color: var(--color-accent-deep); box-shadow: var(--shadow-sm); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  text-align: left;
  background: none;
  border: 0;
  padding: 1.15rem 1.35rem;
  /* FAQ questions are full sentences — Inter, sentence case. A heavy
     display face set in caps is unreadable at this length. */
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0;
  text-transform: none;
}
.faq__q:hover { color: var(--color-accent-deep); }
.faq__icon {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: var(--color-accent-tint);
  color: var(--color-accent-deep);
  display: grid; place-items: center;
  font-size: 1.1rem; line-height: 1;
  transition: transform var(--t) var(--ease-out), background var(--t) var(--ease), color var(--t) var(--ease);
}
.faq__item.is-open .faq__icon {
  transform: rotate(45deg);
  background: var(--color-accent);
  color: var(--color-primary-dark);
}
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow) var(--ease-out);
}
.faq__a > div { padding: 0 1.35rem 1.35rem; color: var(--color-text-muted); font-size: var(--fs-sm); }

/* ==========================================================================
   13. FORMS
   ========================================================================== */
.form-card {
  background: var(--color-bg-form);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-lg);
}
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-primary);
}
.field label span { color: var(--color-accent-deep); }
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.95rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--color-bg-section);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(var(--rgb-accent), 0.2);
}
.field-note { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* Embedded third-party form (LeadConnector / GoHighLevel) ------------------- */
.form-embed { margin-top: var(--space-5); }
/* Contact page: Office Hours card matches the white form card beside it */
.sidebar-card.sidebar-card--form { background: var(--color-bg-form); }
.form-embed iframe {
  width: 100%;
  min-height: 640px;   /* floor until HCP's script.js sets the real height */
  border: 0;
  display: block;
  border-radius: var(--radius-sm);
  background: var(--color-bg-form);
}

/* Contact info list -------------------------------------------------------- */
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.info-list li { display: flex; gap: var(--space-4); margin: 0; }
.info-list__icon {
  width: 46px; height: 46px; flex: none;
  border-radius: var(--radius-blob);
  background: var(--color-primary);
  display: grid; place-items: center;
}
.info-list__icon svg { width: 20px; height: 20px; color: var(--color-accent); }
.info-list strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading-sm);
  text-transform: uppercase;
  font-size: var(--fs-sm);
  color: var(--color-primary);
}
.info-list span, .info-list a { font-size: var(--fs-sm); color: var(--color-text-muted); }
.info-list a:hover { color: var(--color-accent-deep); }

/* Hours table -------------------------------------------------------------- */
.hours { list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); }
.hours li {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--color-border);
  margin: 0;
}
.hours li:last-child { border-bottom: 0; }
.hours strong { font-weight: 600; color: var(--color-primary); }
.hours .is-emphasis { color: var(--color-accent-deep); font-weight: 600; }

/* ==========================================================================
   14. PROSE (service page body copy)
   ========================================================================== */
.prose h2 { margin-top: var(--space-7); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-6); }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
}
.prose ul li::before {
  content: '';
  position: absolute; left: 0; top: 0.5em;
  width: 10px; height: 10px;
  background: var(--color-accent-deep);
  border-radius: var(--radius-blob);
}
.prose p { color: var(--color-text-muted); }
.prose strong { color: var(--color-text); }

.sidebar { position: sticky; top: 110px; display: grid; gap: var(--space-5); }
.sidebar-card {
  border-radius: var(--radius);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  background: var(--color-bg-section);
  box-shadow: var(--shadow);
}
.sidebar-card--dark {
  background: linear-gradient(150deg, var(--color-primary), var(--color-primary-dark));
  border-color: transparent;
  color: #fff;
}
.sidebar-card--dark h3 { color: #fff; }
.sidebar-card--dark p { color: var(--color-text-dim); font-size: var(--fs-sm); }
.sidebar-card h3 { font-size: var(--fs-lg); }
.sidebar-nav { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li { margin: 0; border-bottom: 1px solid var(--color-border); }
.sidebar-nav li:last-child { border-bottom: 0; }
.sidebar-nav a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.85rem 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-heading-sm);
  text-transform: uppercase;
  color: var(--color-primary);
}
.sidebar-nav a::after { content: '→'; color: var(--color-accent-deep); transition: transform var(--t) var(--ease-out); }
.sidebar-nav a:hover::after { transform: translateX(4px); }
.sidebar-nav a[aria-current="page"] { color: var(--color-accent-deep); }

/* Label / value rows in the service-area sidebars. */
.glance { list-style: none; padding: 0; margin: 0; }
.glance li {
  margin: 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}
.glance li:last-child { border-bottom: 0; }
.glance span { color: var(--color-text-muted); flex: none; }
.glance strong { color: var(--color-primary); font-weight: 700; text-align: right; }

/* Callout ------------------------------------------------------------------ */
.callout {
  border-left: 4px solid var(--color-accent);
  background: var(--color-accent-tint);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-5);
  margin-block: var(--space-6);
}
.callout p { color: var(--color-text); margin: 0; }
/* Inline emphasis inside a sentence — body font, not the display caps. */
.callout strong { font-family: var(--font-body); font-weight: 700; letter-spacing: 0; color: var(--color-primary); }

/* Pricing / value rows ------------------------------------------------------ */
.value-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.value-row > div { background: var(--color-bg-section); padding: var(--space-5); text-align: center; }
.value-row strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}
@media (max-width: 960px) {
  .value-row strong { white-space: normal; }
}
.value-row span { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-text-muted); }

/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.footer {
  background: var(--color-bg-footer);
  color: var(--color-text-dim);
  font-size: var(--fs-sm);
  padding-top: clamp(3rem, 6vw, 5rem);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: var(--space-7);
}
.footer h4 {
  color: #fff;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-heading-sm);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
  position: relative;
  padding-bottom: var(--space-3);
}
.footer h4::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 30px; height: 2px;
  background: var(--color-accent);
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: var(--space-3); }
.footer a { color: var(--color-text-dim); }
.footer a:hover { color: var(--color-accent); }
.footer .logo__mark { width: 84px; height: 84px; }
.footer .logo__name { color: #fff; }
.footer .logo__tag { color: rgba(255,255,255,.55); }
.footer__about { margin-top: var(--space-5); max-width: 40ch; }
.footer__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.footer__badge {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.8rem;
  color: rgba(255,255,255,.8);
}
.footer__phone {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-heading);
  color: var(--color-accent) !important;
  margin-bottom: var(--space-2);
}
.footer__bottom {
  border-top: 1px solid var(--color-border-dark);
  padding-block: var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.55);
}
.footer__bottom ul { display: flex; gap: var(--space-5); }
.footer__bottom li { margin: 0; }
.demo-note {
  background: rgba(var(--rgb-accent),.1);
  border: 1px dashed rgba(var(--rgb-accent),.45);
  color: var(--color-accent-light);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-xs);
  text-align: center;
  margin-bottom: var(--space-5);
}

/* ==========================================================================
   16. SCROLL REVEAL
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   17. UTILITIES
   ========================================================================== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--color-accent); color: var(--color-primary-dark);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body); font-weight: 700; letter-spacing: 0;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }
.no-scroll { overflow: hidden; }

/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */
/* The nav carries five items since Service Areas was added, and between the
   960px burger breakpoint and 1240px the header runs out of room: it is a
   single nowrap flex row, so the overflow would push the phone block off the
   edge rather than wrapping. In that band the type steps down again and the
   header's "Free Estimate" button steps aside — it is duplicated in the hero,
   the CTA strip, the footer and the mobile bar, whereas the phone number is
   the primary conversion path and stays. The 1240px ceiling is where the
   container stops growing (1220px less 80px of gutters = 1140px of usable
   width), which is the first width the full row genuinely fits. */
@media (min-width: 961px) and (max-width: 1240px) {
  .header__inner { gap: var(--space-3); }
  .nav__list { gap: 0; }
  .nav__link { font-size: 0.8125rem; padding-inline: 0.45rem; }
  .nav__link::after { left: 0.45rem; right: 0.45rem; }
  .logo__name { font-size: 0.95rem; }
  .logo__tag { font-size: 0.58rem; }
  .header__phone-num { font-size: 0.95rem; }
  .header__actions { gap: var(--space-2); }
  .header__actions > .btn { display: none; }
  .dropdown--areas { min-width: 400px; }
}

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}

@media (max-width: 960px) {
  .nav, .header__phone-text { display: none; }
  .burger { display: grid; }
  .header__inner { min-height: 70px; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats__item { padding-inline: var(--space-2); }
  .stats__label { font-size: 0.6875rem; letter-spacing: 0; }
  .value-row { grid-template-columns: 1fr; }
  .step::after { display: none; }
}

@media (max-width: 768px) {
  .topbar__list li:not(:first-child) { display: none; }
  .mobile-bar { display: flex; }
  body { padding-bottom: 72px; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .cta-strip__inner { flex-direction: column; align-items: flex-start; }
  .hero__trust { gap: var(--space-3) var(--space-5); }
  .media-panel { min-height: 320px; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .footer__bottom ul { justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .grid--4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .mobile-bar .btn { width: auto; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .header__phone-icon { width: 44px; height: 44px; }
}

@media (max-width: 420px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__item:nth-child(2) { border-right: 0; }
  .stats__item:nth-child(-n+2) { border-bottom: 1px solid var(--color-border-dark); }
}

/* Print -------------------------------------------------------------------- */
@media print {
  .header, .topbar, .mobile-bar, .mobile-nav, .cta-strip, .btn { display: none !important; }
  body { background: #fff; padding: 0; }
}

/* ==========================================================================
   Before / after project cards (.work) — homepage "Recent Work", HVAC pages
   ========================================================================== */
.work {
  background: var(--color-bg-section);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.work__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--color-border);
}
.work__shot { position: relative; margin: 0; }
.work__shot img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.work__tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: .25rem .6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: var(--color-primary-dark);
  color: #fff;
}
.work__shot--after .work__tag {
  background: var(--color-accent);
  color: var(--color-primary-dark);
}
.work__body { padding: var(--space-5) var(--space-5) var(--space-6); }
.work__body h3 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.work__body p { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }
.work-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.prose .work { margin: var(--space-6) 0; }

/* ==========================================================================
   Housecall Pro reviews widget embed
   ========================================================================== */
.reviews-embed {
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.reviews-embed iframe {
  display: block;
  width: 100%;
  height: 1000px;
  border: 0;
}
@media (max-width: 640px) { .reviews-embed iframe { height: 1200px; } }