/* ==========================================================================
   Benchmark Air — Stylesheet
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
a:visited { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400; /* Archivo Black only ships one heavy weight */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

p { margin: 0; }

.measure { max-width: var(--measure); }

/* ==========================================================================
   Service pages (heating/cooling/emergency) — reuse every home-page
   component class as-is, but locally shrink the spacing tokens so the same
   visual language reads denser and more concentrated, per the brief: "similar
   to the home page, but information heavily concentrated, no large gaps."
   Only redefines custom properties within .service-page; the home page's own
   rhythm is untouched.
   ========================================================================== */
.service-page {
  --space-7: 2rem;
  --space-8: 2.75rem;
  --space-9: 3.5rem;
}

.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (min-width: 900px) {
  .wrap { padding-inline: var(--space-7); }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent-strong);
}

/* Marker-highlight for one emphasized word in a headline */
.hl {
  background: linear-gradient(to top, var(--gold-500) 42%, transparent 42%);
  padding-inline: 0.08em;
  white-space: nowrap;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-dial),
              background var(--duration-fast) ease,
              border-color var(--duration-fast) ease;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary, .btn-primary:visited {
  background: var(--color-accent);
  color: var(--ink-950);
  border-color: var(--color-accent);
}
.btn-primary:hover { background: var(--gold-600); }

.btn-dark, .btn-dark:visited {
  background: var(--ink-950);
  color: var(--paper-050);
  border-color: var(--ink-950);
}
.btn-dark:hover { background: var(--ink-800); }

.btn-outline, .btn-outline:visited {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--ink-950);
}
.btn-outline:hover { background: var(--ink-950); color: var(--paper-050); }

.btn-outline-light, .btn-outline-light:visited {
  background: transparent;
  color: var(--paper-050);
  border-color: var(--paper-050);
}
.btn-outline-light:hover { background: var(--paper-050); color: var(--ink-950); }

.btn-text, .btn-text:visited {
  padding: 0;
  border-radius: 0;
  font-weight: 600;
  color: var(--color-ink);
  border-bottom: 1.5px solid var(--ink-950);
}
.btn-text:hover { color: var(--color-accent-text); border-color: var(--color-accent-text); }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
  gap: var(--space-3);
}

.logo, .logo:visited {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink-950);
}
.logo-mark {
  display: block;
  height: 4.75rem;
  width: auto;
}

.primary-nav { display: none; align-items: center; gap: var(--space-6); }
.primary-nav a, .primary-nav a:visited {
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-600);
  transition: color var(--duration-fast) ease;
}
.primary-nav a:hover { color: var(--ink-950); }

.header-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.header-actions .btn { white-space: nowrap; padding: 0.65rem 0.85rem; }
@media (min-width: 900px) {
  .header-actions { gap: var(--space-5); }
  .header-actions .btn { padding: 0.85rem 1.4rem; }
}

@media (max-width: 899px) {
  .site-header .wrap { padding-inline: var(--space-4); gap: var(--space-2); }
  .logo-mark { height: 3.75rem; }
}

.phone-link {
  display: none;
  align-items: baseline;
  gap: var(--space-2);
  text-decoration: none;
  font-family: var(--font-mono);
  color: var(--ink-950);
  font-size: var(--text-sm);
}
.phone-link:visited { color: var(--ink-950); }
.phone-link .phone-label {
  color: var(--ink-600);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.nav-toggle {
  background: none;
  border: 1.5px solid var(--ink-600);
  color: var(--ink-950);
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media (min-width: 900px) {
  .primary-nav { display: flex; }
  .phone-link { display: inline-flex; }
  .nav-toggle { display: none; }
}

.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a, .mobile-menu a:visited {
  text-decoration: none;
  color: var(--ink-950);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.mobile-menu a.mobile-menu__sub, .mobile-menu a.mobile-menu__sub:visited {
  padding-left: var(--space-7);
  color: var(--color-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-family: var(--font-mono);
}
.mobile-menu .btn { margin: var(--space-4) var(--space-5); }
@media (min-width: 900px) { .mobile-menu { display: none !important; } }

/* ==========================================================================
   Hero — full-bleed navy "photo" band (no photography available, so a
   technical gradient + grid stands in for it, in the same compositional role)
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--ink-950);
  padding-block: var(--space-9) var(--space-9);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-footer-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-footer-border) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 65% at 25% 15%, black 40%, transparent 85%);
  opacity: 0.7;
}
.hero::after {
  content: "";
  position: absolute;
  width: 30rem; height: 30rem;
  border-radius: 50%;
  background: var(--blue-500);
  opacity: 0.18;
  top: -10rem; right: -8rem;
  filter: blur(2px);
}
.hero .wrap { position: relative; }

.hero .eyebrow { color: var(--gold-500); }
.hero .eyebrow::before { background: var(--gold-500); }
.hero .hl { background: none; color: var(--gold-500); }

/* Technical registration marks — corner crosshairs, like a drafting sheet */
.crosshair {
  position: absolute;
  color: var(--color-technical);
  opacity: 0.4;
  pointer-events: none;
}
.crosshair--tl { top: var(--space-4); left: var(--space-4); }
.crosshair--br { bottom: var(--space-4); right: var(--space-4); }
@media (max-width: 640px) { .crosshair { display: none; } }

.hero .wrap {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 1040px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

.hero-copy { max-width: 40rem; }

.hero-copy h1 {
  font-size: var(--text-3xl);
  color: var(--paper-050);
  margin-block: var(--space-4) var(--space-5);
  max-width: 15ch;
}

.hero-copy .lede {
  font-size: var(--text-md);
  color: var(--ink-400);
  max-width: 42ch;
  margin-bottom: var(--space-6);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.zip-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--paper-050);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.35rem 0.35rem 1.25rem;
  max-width: 26rem;
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-md);
}
.zip-check input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.zip-check input::placeholder { color: var(--color-muted); }
.zip-check button {
  width: 2.5rem; height: 2.5rem;
  flex: none;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--ink-950);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}
.zip-check button:hover { background: var(--gold-600); }

.confetti {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

/* ==========================================================================
   Frame-accent — offset colored-border "picture frame" utility.
   Put on any card; a border peeks out from behind on two edges.
   ========================================================================== */
.frame-accent { position: relative; z-index: 0; }
.frame-accent::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--color-accent-strong);
  border-radius: inherit;
  transform: translate(14px, 14px);
  z-index: -1;
  pointer-events: none;
}
.frame-accent--blue::before { border-color: var(--color-technical); }
.frame-accent--tl::before { transform: translate(-14px, -14px); }

/* ==========================================================================
   Stats band — credibility numbers in one bordered, accent-framed card
   ========================================================================== */
.stats-band { position: relative; overflow: hidden; padding-block: var(--space-9); }
.stats-band::before, .stats-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: -1;
}
.stats-band::before { width: 22rem; height: 22rem; background: var(--color-technical-wash); opacity: 0.3; top: -7rem; left: -8rem; }
.stats-band::after { width: 16rem; height: 16rem; background: var(--gold-300); opacity: 0.35; bottom: -5rem; right: -5rem; }

.stats-card {
  background: var(--color-surface);
  border: 1.5px solid var(--ink-950);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}
.stats-row > div { text-align: center; padding-inline: var(--space-3); }
.stats-row > div:not(:first-child) { border-left: 1px dashed var(--paper-border); }
@media (max-width: 560px) {
  .stats-row { grid-template-columns: 1fr; gap: var(--space-4); }
  .stats-row > div:not(:first-child) { border-left: none; border-top: 1px dashed var(--paper-border); padding-top: var(--space-4); }
}
.stats-row dd { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); }
.stats-row dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
  margin-top: var(--space-2);
}
.stats-creds {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  letter-spacing: 0.02em;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
}

/* ==========================================================================
   Way — overlapping accent-framed card beside a "what we do" link list
   ========================================================================== */
.way { position: relative; padding-block: var(--space-9); overflow: hidden; }
.trace-line { position: absolute; pointer-events: none; z-index: -1; }

.way-grid { display: grid; gap: var(--space-7); }
@media (min-width: 900px) {
  .way-grid { grid-template-columns: 1fr 1fr; align-items: center; }
}

.way-visual { position: relative; min-height: 18rem; }
.way-photo {
  position: absolute;
  inset: 2.25rem 0 0 2.25rem;
  background:
    linear-gradient(var(--color-border) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--color-bg-dim);
  border: 1.5px solid var(--ink-950);
  border-radius: var(--radius-lg);
}
.way-photo__mark { position: absolute; bottom: var(--space-5); right: var(--space-5); color: var(--color-technical); opacity: 0.6; }

.way-card {
  position: relative;
  background: var(--color-surface);
  border: 1.5px solid var(--ink-950);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 27rem;
}
.way-card h2 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.way-card p { color: var(--color-ink-soft); margin-bottom: var(--space-5); }

.way-list h3 { font-size: var(--text-2xl); margin-block: var(--space-3) var(--space-5); }
.way-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.way-list a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.way-list a:hover { border-color: var(--ink-950); background: var(--color-bg-dim); }
.way-icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-technical-wash);
  color: var(--color-technical-text);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.way-item-text { font-size: var(--text-sm); color: var(--color-muted); }
.way-item-text strong { display: block; font-size: var(--text-base); color: var(--color-ink); margin-bottom: 0.2em; }
.way-arrow { color: var(--color-accent-text); font-family: var(--font-display); flex: none; }

.section { padding-block: var(--space-9); }

/* ==========================================================================
   Symptom check — compact picker (left) driving a ticket-style readout
   (right). The readout reuses the border/shadow/mono-header language of
   .track-card in the final CTA, so the two "ticket" moments in the page
   read as one system. Content lives in data-* attributes on each
   .symcheck-item button; js/main.js reads them into the panel on click.
   ========================================================================== */
.symcheck { padding-block: var(--space-9); background: var(--color-bg-dim); }
.symcheck-intro { max-width: 46rem; margin-bottom: var(--space-6); }
.symcheck-intro h2 { font-size: var(--text-2xl); margin-block: var(--space-3) var(--space-4); }
.symcheck-intro p { color: var(--color-ink-soft); font-size: var(--text-md); }

.symcheck-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.symcheck-pill {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.symcheck-pill:hover { border-color: var(--ink-950); }
.symcheck-pill.is-active { background: var(--ink-950); color: var(--paper-050); border-color: var(--ink-950); }

.symcheck-grid { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 960px) {
  .symcheck-grid { grid-template-columns: 1.15fr 1fr; gap: var(--space-6); }
}

.symcheck-list { display: grid; gap: var(--space-3); align-content: start; }
@media (min-width: 640px) { .symcheck-list { grid-template-columns: repeat(2, 1fr); } }

.symcheck-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.symcheck-item[hidden] { display: none; }
.symcheck-item:hover { border-color: var(--ink-950); }
.symcheck-item.is-active { border-color: var(--color-accent-strong); border-width: 2px; padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px); background: var(--gold-300); }

.symcheck-icon {
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.symcheck-item[data-category="heating"] .symcheck-icon { background: var(--coral-300); color: var(--coral-500); }
.symcheck-item[data-category="cooling"] .symcheck-icon { background: var(--teal-300); color: var(--teal-500); }
.symcheck-item[data-category="efficiency"] .symcheck-icon { background: var(--gold-300); color: var(--color-accent-text); }
.symcheck-item[data-category="air"] .symcheck-icon { background: var(--color-technical-wash); color: var(--color-technical-text); }

.symcheck-item-text { font-size: var(--text-sm); color: var(--color-muted); }
.symcheck-item-text strong { display: block; font-size: var(--text-sm); color: var(--color-ink); margin-bottom: 0.15em; }
.symcheck-chevron { color: var(--color-accent-text); font-family: var(--font-display); flex: none; opacity: 0; transition: opacity var(--duration-fast) ease; }
.symcheck-item.is-active .symcheck-chevron { opacity: 1; }

.symcheck-panel {
  background: var(--color-surface);
  border: 1.5px solid var(--ink-950);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
@media (min-width: 960px) { .symcheck-panel { position: sticky; top: calc(4.5rem + var(--space-5)); } }

.symcheck-panel__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.symcheck-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.75rem;
}
.symcheck-tag--category { border: 1px solid var(--color-border); color: var(--color-muted); }
.symcheck-tag[data-urgency="amber"] { background: var(--gold-300); color: var(--color-accent-text); }
.symcheck-tag[data-urgency="comfort"] { background: var(--color-technical-wash); color: var(--color-technical-text); }
.symcheck-tag[data-urgency="safety"] { background: var(--ink-950); color: var(--paper-050); }

.symcheck-panel h3 { font-size: var(--text-lg); margin-bottom: var(--space-5); }

.symcheck-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}

.symcheck-causes { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-2); }
.symcheck-causes li { position: relative; padding-left: 1.2em; font-size: var(--text-sm); color: var(--color-ink-soft); }
.symcheck-causes li::before { content: "\2013"; position: absolute; left: 0; color: var(--color-muted); font-family: var(--font-mono); }

.symcheck-covers { background: var(--color-bg-dim); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-5); }
.symcheck-covers .symcheck-label { margin-bottom: var(--space-2); }
.symcheck-covers #symcheckCoversTitle { font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); color: var(--color-ink); text-transform: none; letter-spacing: 0; display: block; margin-bottom: var(--space-3); }

.symcheck-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.symcheck-checklist li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-ink-soft); }
.symcheck-check-dot {
  width: 1.1rem; height: 1.1rem;
  margin-top: 0.15em;
  border-radius: 50%;
  background: var(--teal-500);
  color: #fff;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem;
}

.symcheck-note {
  font-size: var(--text-sm);
  color: var(--color-muted);
  border-left: 2px solid var(--color-accent-strong);
  padding-left: var(--space-3);
  margin-bottom: var(--space-6);
}

.symcheck-panel__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.symcheck-panel__cta .btn { flex: 1 1 auto; justify-content: center; }

/* ==========================================================================
   Process — heading/CTA left, three black cards right
   ========================================================================== */
.process { padding-block: var(--space-9); }
.process .wrap {
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 900px) {
  .process .wrap { grid-template-columns: 0.8fr 1.2fr; align-items: start; }
}
.process-intro h2 { font-size: var(--text-2xl); max-width: 11ch; margin-bottom: var(--space-4); }
.process-intro p { color: var(--color-ink-soft); font-size: var(--text-md); max-width: 34ch; margin-bottom: var(--space-5); }

.process-cards { display: grid; gap: var(--space-4); }
.process-card {
  background: var(--ink-950);
  color: var(--paper-050);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
}
.process-card__icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--ink-950);
}
.process-card:nth-child(1) .process-card__icon { background: var(--gold-500); }
.process-card:nth-child(2) .process-card__icon { background: var(--coral-300); }
.process-card:nth-child(3) .process-card__icon { background: var(--teal-300); }
.process-card .kicker { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); display: block; margin-bottom: var(--space-2); }
.process-card:nth-child(1) .kicker { color: var(--gold-500); }
.process-card:nth-child(2) .kicker { color: var(--coral-300); }
.process-card:nth-child(3) .kicker { color: var(--teal-300); }
.process-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); color: var(--paper-050); }
.process-card p { color: var(--ink-400); font-size: var(--text-sm); }

/* ==========================================================================
   Dispatch band — dark full-bleed row of recent-job cards
   ========================================================================== */
.dispatch-band { background: var(--ink-950); color: var(--paper-050); padding-block: var(--space-9); }
.dispatch-band .eyebrow { color: var(--gold-500); margin-bottom: var(--space-3); }
.dispatch-band .eyebrow::before { background: var(--gold-500); }
.dispatch-band h2 { font-size: var(--text-2xl); color: var(--paper-050); margin-bottom: var(--space-7); max-width: 14ch; }

.dispatch-grid { display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .dispatch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .dispatch-grid { grid-template-columns: repeat(4, 1fr); } }

.dispatch-card {
  background: var(--ink-800);
  border: 1.5px solid var(--ink-700);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.dispatch-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-400);
  margin-bottom: var(--space-4);
}
.dispatch-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral-500); flex: none; }
.dispatch-tag[data-kind="cool"]::before { background: var(--teal-500); }
.dispatch-tag[data-kind="maint"]::before { background: var(--gold-500); }
.dispatch-tag[data-kind="emergency"]::before { background: var(--blue-500); }

.dispatch-card h3 { font-size: var(--text-md); color: var(--paper-050); margin-bottom: var(--space-2); max-width: 18ch; }
.dispatch-loc {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-400);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-4);
}
.dispatch-link { display: inline-block; font-weight: 600; font-size: var(--text-sm); color: var(--gold-500); text-decoration: none; }
.dispatch-link:hover { color: var(--gold-300); }

/* ==========================================================================
   Testimonials — rendered by the React island in /widget (see index.html
   #reviews). Styling for that component lives in widget/src and is scoped
   via Tailwind, not here.
   ========================================================================== */

/* ==========================================================================
   Savings programs — featured "free second opinion" panel beside a compact
   list of the other three offers; every link routes to savings.html, which
   has the full detail. Mirrors the Way section's card+list grammar.
   ========================================================================== */
.savings { padding-block: var(--space-9); }
.savings-intro { max-width: 46rem; margin-bottom: var(--space-7); }
.savings-intro h2 { font-size: var(--text-2xl); margin-block: var(--space-3) var(--space-4); }
.savings-intro p { color: var(--color-ink-soft); font-size: var(--text-md); }

.savings-grid { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .savings-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }

.savings-feature {
  background: var(--ink-950);
  color: var(--paper-050);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.savings-feature .eyebrow { color: var(--gold-500); margin-bottom: var(--space-3); }
.savings-feature .eyebrow::before { background: var(--gold-500); }
.savings-feature h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); max-width: 16ch; }
.savings-feature p { color: var(--ink-400); margin-bottom: var(--space-5); max-width: 36ch; }

.savings-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.savings-list a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.savings-list a:hover { border-color: var(--ink-950); background: var(--color-bg-dim); }
.savings-icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-technical-wash);
  color: var(--color-technical-text);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.savings-item-text { font-size: var(--text-sm); color: var(--color-muted); }
.savings-item-text strong { display: block; font-size: var(--text-base); color: var(--color-ink); margin-bottom: 0.2em; }
.savings-arrow { color: var(--color-accent-text); font-family: var(--font-display); flex: none; }

/* ==========================================================================
   Field notes — short-form write-ups, styled like the dispatch band's
   tag+card idiom but light, since this sits between two light sections.
   ========================================================================== */
.field-notes { padding-block: var(--space-9); }
.field-notes h2 { font-size: var(--text-2xl); max-width: 16ch; margin-block: var(--space-3) var(--space-4); }
.field-notes-lede { color: var(--color-ink-soft); font-size: var(--text-md); max-width: 52ch; margin-bottom: var(--space-7); }

.notes-grid { display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .notes-grid { grid-template-columns: repeat(3, 1fr); } }

.note-card {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  background: var(--color-surface);
}
.note-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
  margin-bottom: var(--space-4);
}
.note-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-500); flex: none; }
.note-tag[data-kind="maint"]::before { background: var(--teal-500); }
.note-tag[data-kind="efficiency"]::before { background: var(--coral-500); }
.note-tag[data-kind="process"]::before { background: var(--color-technical); }

.note-card h3 { font-size: var(--text-md); margin-bottom: var(--space-3); }
.note-card p { color: var(--color-ink-soft); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.note-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ==========================================================================
   Blog band — teaser cards linking out to full article pages. Same
   tag+card idiom as Field Notes, but every card is itself the link.
   ========================================================================== */
.blog-band { padding-block: var(--space-9); }
.blog-band h2 { font-size: var(--text-2xl); max-width: 18ch; margin-block: var(--space-3) var(--space-4); }
.blog-band-lede { color: var(--color-ink-soft); font-size: var(--text-md); max-width: 52ch; margin-bottom: var(--space-7); }
.blog-band-lede a, .blog-band-lede a:visited { color: var(--color-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; }

.blog-grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .blog-grid { grid-template-columns: repeat(4, 1fr); } }

.blog-card, .blog-card:visited {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.blog-card:hover { border-color: var(--ink-950); background: var(--color-bg-dim); }
.blog-card h3 { font-size: var(--text-md); margin-bottom: var(--space-3); color: var(--color-ink); }
.blog-card p { color: var(--color-ink-soft); font-size: var(--text-sm); margin-bottom: var(--space-5); flex: 1; }
.blog-read-more {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-accent-text);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

/* ==========================================================================
   Join band — two accent-framed dark panels (careers / direct contact)
   ========================================================================== */
.join-band { padding-block: var(--space-9); }
.join-grid { display: grid; gap: var(--space-7); }
@media (min-width: 760px) { .join-grid { grid-template-columns: 1fr 1fr; } }

.join-panel {
  background: var(--ink-950);
  color: var(--paper-050);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
}
.join-panel .eyebrow { color: var(--gold-500); }
.join-panel .eyebrow::before { background: var(--gold-500); }
.join-panel h2 { font-size: var(--text-xl); color: var(--paper-050); margin-block: var(--space-3) var(--space-4); }
.join-panel p { color: var(--ink-400); margin-bottom: var(--space-5); max-width: 34ch; }

/* ==========================================================================
   Final CTA — copy + tracking-card mockup
   ========================================================================== */
.cta-final { padding-block: var(--space-9); }
.cta-final .wrap {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 900px) {
  .cta-final .wrap { grid-template-columns: 0.9fr 1.1fr; }
}
.cta-final h2 { font-size: var(--text-2xl); max-width: 10ch; margin-bottom: var(--space-4); }
.cta-final p { color: var(--color-ink-soft); font-size: var(--text-md); max-width: 34ch; margin-bottom: var(--space-6); }
.cta-final .hero-actions { margin-bottom: 0; }

.track-card {
  border: 1.5px solid var(--ink-950);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.track-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
  margin-bottom: var(--space-5);
}

.track-list { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.track-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
  padding-left: var(--space-2);
}
.track-list li::before {
  content: "";
  position: absolute;
  left: calc(var(--space-2) + 0.6rem);
  top: -4px; bottom: -4px;
  width: 2px;
  background: var(--paper-border);
  z-index: 0;
}
.track-list li:first-child::before { top: 50%; }
.track-list li:last-child::before { bottom: 50%; }
.track-dot {
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  border: 1.5px solid var(--ink-950);
  background: var(--color-surface);
  flex: none;
  position: relative;
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
}
.track-list li.is-done .track-dot { background: var(--teal-500); }
.track-list li.is-active .track-dot { background: var(--gold-500); }
.track-list .step-label { font-weight: 600; font-size: var(--text-sm); }
.track-list .step-time { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }

.track-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  border-top: 1.5px solid var(--ink-950);
  padding-top: var(--space-5);
}
.track-stats dt { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: 0.2em; }
.track-stats dd { margin: 0; font-family: var(--font-display); font-size: var(--text-md); }

/* ==========================================================================
   Savings page — four stacked offer cards, alternating gold/blue
   frame-accent and a tinted background every other section for rhythm.
   ========================================================================== */
.section--tint { background: var(--color-bg-dim); }

.offer-card {
  background: var(--color-surface);
  border: 1.5px solid var(--ink-950);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  max-width: 42rem;
}
.offer-icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg-dim);
  color: var(--color-technical-text);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);
}
.offer-card h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.offer-card > p { color: var(--color-ink-soft); margin-bottom: var(--space-5); }
.offer-points { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-2); }
.offer-points li { position: relative; padding-left: 1.3em; font-size: var(--text-sm); color: var(--color-ink-soft); }
.offer-points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-strong); }

/* ==========================================================================
   Request service page — contact info card (left) + request form (right).
   .field/.field-row are generic enough to reuse for any future form.
   ========================================================================== */
.request-section { padding-block: var(--space-8); }
.request-grid { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .request-grid { grid-template-columns: 0.85fr 1.15fr; align-items: start; } }

.request-alert {
  display: flex;
  gap: var(--space-4);
  background: var(--coral-300);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.request-alert__icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-sm);
  background: var(--coral-500);
  color: var(--paper-050);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.request-alert h3 { font-size: var(--text-md); margin-bottom: var(--space-2); }
.request-alert p { font-size: var(--text-sm); color: var(--color-ink-soft); margin-bottom: var(--space-3); }
.request-alert .btn-text, .request-alert .btn-text:visited { border-color: var(--ink-950); }

.request-info {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}
.request-info li { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); }
.request-info li + li { border-top: 1px solid var(--color-border); }
.request-info__icon { color: var(--color-technical-text); flex: none; margin-top: 0.1em; }
.request-info__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
  margin-bottom: 0.3em;
}
a.request-info__value, a.request-info__value:visited { color: var(--color-ink); text-decoration: none; }
a.request-info__value:hover { color: var(--color-accent-text); }
.request-info__value { display: block; font-weight: 600; font-size: var(--text-base); }
.request-info__note { display: block; font-weight: 400; font-size: var(--text-sm); color: var(--color-ink-soft); margin-top: 0.2em; }

.request-more { font-size: var(--text-sm); color: var(--color-muted); }
.request-more a, .request-more a:visited { color: var(--color-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; }

.request-form-card {
  background: var(--color-surface);
  border: 1.5px solid var(--ink-950);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.request-form-card > .eyebrow { margin-bottom: var(--space-3); }
.request-form-card h2 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.request-form-card > p { color: var(--color-ink-soft); font-size: var(--text-sm); margin-bottom: var(--space-6); }

.field-row { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field-row .field { margin-bottom: 0; }
.field label { font-weight: 600; font-size: var(--text-sm); }
.field .optional { font-weight: 400; color: var(--color-muted); }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  transition: border-color var(--duration-fast) ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-600); }
.field select { cursor: pointer; }
.field textarea { resize: vertical; min-height: 6rem; font-family: inherit; }

.request-form-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); }
.request-form-foot .btn { flex: none; }
.request-form-note { font-size: var(--text-xs); color: var(--color-muted); margin: 0; }

.request-success { text-align: center; padding-block: var(--space-6); }
.request-success__icon {
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: var(--teal-500);
  color: var(--paper-050);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-5);
  font-size: var(--text-lg);
}
.request-success h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.request-success p { color: var(--color-ink-soft); max-width: 38ch; margin-inline: auto; margin-bottom: var(--space-5); }

/* ==========================================================================
   FAQ page — grouped, native <details> accordion. No JS needed.
   ========================================================================== */
.faq-section { padding-block: var(--space-8); }
.faq-group { max-width: 46rem; margin-bottom: var(--space-8); }
.faq-group:last-child { margin-bottom: 0; }
.faq-group h2 { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.faq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-display);
  color: var(--color-accent-text);
  flex: none;
  font-size: var(--text-md);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { padding: 0 var(--space-5) var(--space-5); margin: 0; color: var(--color-ink-soft); font-size: var(--text-sm); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-ink);
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--text-sm);
}
.site-footer .logo, .site-footer .logo:visited { color: var(--color-footer-ink); }
.footer-grid { display: grid; gap: var(--space-6); }
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr; gap: var(--space-6); }
}
.footer-grid > div:first-child p { color: var(--color-footer-muted); margin-top: var(--space-3); max-width: 34ch; }
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.footer-social a {
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--color-footer-border);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-footer-muted);
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.footer-social a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.footer-grid h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-footer-ink);
  margin-bottom: var(--space-3);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer-grid a, .footer-grid a:visited { text-decoration: none; color: var(--color-footer-muted); }
.footer-grid a:hover { color: var(--color-accent); }
.footer-bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-footer-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-footer-muted);
}