/* H&H Mechanical brand palette: orange, black, and white */
:root {
  --navy: #111111;
  --navy-2: #242424;
  --orange: #f47b3a;
  --cream: #f4f4f4;
  --paper: #ffffff;
  --ink: #171717;
  --muted: #666666;
  --line: #dedede;
}

.site-header { border-bottom-color: rgba(0, 0, 0, .1); }
.hero { background: #0a0a0a; }
.hero-image { object-position: center 52%; }
.hero-shade {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .76) 38%, rgba(0, 0, 0, .18) 70%, rgba(0, 0, 0, .04) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .52), transparent 45%);
}
.action-icon { background: #f0f0f0; color: #111111; }

/* All four services have equal visual weight. */
.service-card.featured { background: #ffffff; color: var(--ink); }
.service-card.featured p { color: var(--muted); }

.work-showcase { background: #0c0c0c; }
.work-grid figure { background: #242424; }
.work-grid figcaption { background: rgba(0, 0, 0, .82); }
.coverage { background: #111111; }
.coverage-visual { background: radial-gradient(circle at 53% 50%, #343434, #080808 67%); }
.map-label { background: rgba(0, 0, 0, .78); }
footer { background: #050505; }

@media (max-width: 680px) {
  .hero-image { object-position: 70% center; }
  .hero-shade {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, .95), rgba(0, 0, 0, .62)),
      linear-gradient(0deg, rgba(0, 0, 0, .68), transparent);
  }
}