/**
 * Roofer — Homepage CSS
 * Aesthetic: Industrial Precision
 * Fonts: Roboto
 */

/* ── Base overrides for homepage ────────────────── */
body.home,
.editor-styles-wrapper {
  font-family: var(--font-ui);
  background: #FFFFFF;
}

.editor-styles-wrapper {
  color: var(--ink);
}

/* ═══════════════════════════════════════════
   SECTION COMMON
   ═══════════════════════════════════════════ */
.hp-section { padding: 40px 0; }

.hp-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}
.hp-eyebrow::after {
  content: ''; flex: 1; height: 1px; background: var(--paper-2);
}

.hp-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 680px) {
  .hp-section { padding: 48px 0; }
  .hp-hero-stats { flex-wrap: wrap; }
}