/* Explain: Spacing, section padding, and layout utilities. */
.site-wrap {
    margin-inline: auto;
    max-width: 1200px;
    padding-inline: 1.5rem;
}

.section-pad {
    padding-block: clamp(4rem, 8vw, 7rem);
}

.hero-pad {
    padding-top: clamp(8rem, 12vw, 10rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

.bg-navy {
    background-color: var(--navy-dark);
    color: var(--surface-color);
}

.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy p {
    color: var(--surface-color);
}

.bg-navy .text-gold {
    color: var(--gold-subtle);
}

@media (min-width: 900px) {
    .site-wrap {
        padding-inline: 2.5rem;
    }
}