/* ============================================================
   404 PAGE STYLES — Blue Rose Financial
   ============================================================ */

/* ── 404 Hero ────────────────────────────────────────────────── */
.sect-404-hero {
  background-color: var(--color-bg-dark);
  padding-top: 164px;
  padding-bottom: 64px;
  position: relative;
  min-height: 680px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-404 {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Heading block */
.hero-404__heading {
  max-width: 960px;
}

.hero-404__title  { color: var(--color-white); }
.hero-404__subhead { color: var(--color-text-muted); max-width: 720px; }

.hero-404__eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.12em;
  color: var(--color-accent-red);
}

/* CTA */
.hero-404__cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 991px) {
  .hero-404__title {
    font-size: 40px;
    line-height: 50px;
  }
}

@media (max-width: 575px) {
  .sect-404-hero {
    padding-top: 120px;
    padding-bottom: 48px;
  }
  .hero-404__title {
    font-size: 32px;
    line-height: 42px;
  }
  .hero-404__subhead {
    font-size: 16px;
    line-height: 24px;
  }
}