/* Explain: Styling for the contact page hero section, including background and text. */
/* Contact page — authoritative centred hero over the global network map. */

.hero-contact {
    position: relative;
    overflow: hidden;
    padding-top: 9rem;
    padding-bottom: clamp(3.5rem, 6vw, 6.5rem);
    background-color: #0E1F35;
    background-image: url('https://files.cdn-files-a.com/uploads/12504132/normal_6ae5fe76116cb.jpg?format=avif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-contact::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 20%, rgba(14, 31, 53, 0.55) 0%, rgba(14, 31, 53, 0.2) 50%, rgba(14, 31, 53, 0.42) 100%),
        linear-gradient(180deg, rgba(14, 31, 53, 0.5) 0%, rgba(14, 31, 53, 0.24) 45%, rgba(14, 31, 53, 0.55) 100%);
}

.hero-contact .wrap {
    position: relative;
    z-index: 1;
}

.hero-contact .eyebrow {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(232, 213, 140, 0.42);
    color: var(--accent-color);
}

.hero-contact-title {
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: #ffffff;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    text-shadow: 0 2px 20px rgba(6, 16, 30, 0.85), 0 1px 4px rgba(6, 16, 30, 0.9);
}

.hero-contact-lede {
    color: #ffffff;
    text-shadow: 0 1px 12px rgba(6, 16, 30, 0.85), 0 1px 3px rgba(6, 16, 30, 0.8);
}

.breadcrumbs-on-dark {
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 8px rgba(6, 16, 30, 0.8);
}

.breadcrumbs-on-dark a:hover {
    color: var(--accent-color);
}

.breadcrumbs-on-dark .crumb-sep {
    color: rgba(255, 255, 255, 0.45);
}

.breadcrumbs-on-dark [aria-current="page"] {
    color: #ffffff;
}

@media (max-width: 640px) {
    .hero-contact {
        background-position: center;
    }
}