:root {
  --bg: #eef2f6;
  --surface: #ffffff;
  --ink: #0b1c33;
  --muted-ink: #3b4c63;
  --muted: #5b6c82;
  --accent: #c47a12;
  --accent-2: #0b1c33;
  --on-accent: #fff8ee;
  --line: #d3dbe6;
  --radius: 0.4rem;
  --shadow: 0 16px 32px rgba(11, 28, 51, 0.08);
  --cta-bg: #c47a12;
  --cta-ink: #0b1c33;
  --cta-muted: #4d3208;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
}

.theme-hvac .hero {
  background:
    linear-gradient(115deg, #0b1c33 0 54%, #c47a12 54% 56%, #eef2f6 56%);
  color: #f4f7fb;
}

.theme-hvac .hero .kicker,
.theme-hvac .lede,
.theme-hvac .hero h1 {
  color: #f4f7fb;
}

.theme-hvac .hero .lede {
  color: #d5deea;
}

.theme-hvac .hero-art {
  background: repeating-linear-gradient(
    -32deg,
    rgba(255, 255, 255, 0.14) 0 12px,
    transparent 12px 24px
  );
  border: 4px solid #c47a12;
  min-height: 260px;
}

.theme-hvac .section-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.theme-hvac .hero .btn-ghost {
  color: #f4f7fb;
  border-color: rgba(244, 247, 251, 0.35);
}

.theme-hvac .hero .btn-ghost:hover {
  color: #0b1c33;
  background: #f4f7fb;
}

@media (max-width: 860px) {
  .theme-hvac .hero {
    background: #0b1c33;
  }
}