/*
 * Alf Theme — Contact Hero Section
 * Figma node: 631:4802
 *
 * Flat dark background page header. No background image.
 * Padding matches the standard hero convention (pt-144 to clear the
 * fixed nav bar, pb-80).
 */

/* ═══════════════════════════════════════════════════════════════════
   SECTION
   ═══════════════════════════════════════════════════════════════════ */
.contact-hero {
  background-color: var(--color-dark, #252525);
  padding-top: 144px;
  padding-bottom: 80px;
}

/* ── Inner content ──────────────────────────────────────────────── */
.contact-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── H1 — D Regular H1 (72px / 400) ───────────────────────────── */
.contact-hero__title {
  font-size: 72px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-bg, #f8faf0);
  margin: 0;
}

/* ── H4 — D Regular H4 (20px / 400) ───────────────────────────── */
.contact-hero__subtitle {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-bg, #f8faf0);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1280px) {
  .contact-hero {
    padding-top: 120px;
    padding-bottom: 64px;
  }

  .contact-hero__title {
    font-size: 56px;
  }
}

@media (max-width: 900px) {
  .contact-hero {
    padding-top: 100px;
    padding-bottom: 56px;
  }

  .contact-hero__title {
    font-size: 44px;
  }
}

@media (max-width: 640px) {
  .contact-hero {
    padding-top: 80px;
    padding-bottom: 48px;
  }

  .contact-hero__title {
    font-size: 32px;
  }

  .contact-hero__subtitle {
    font-size: 16px;
  }
}