/* Explain: Layout utilities for section padding and containers. */
.container-wide {
    width: 100%;
    max-width: 84rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.container-narrow {
    width: 100%;
    max-width: 52rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

@media (min-width: 640px) {
    .container-wide,
    .container-narrow {
        padding-inline: 2rem;
    }
}

.section-pad {
    padding-top: clamp(4.5rem, 9vw, 8rem);
    padding-bottom: clamp(4.5rem, 9vw, 8rem);
}

.section-pad-sm {
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.page-hero {
    position: relative;
    overflow: hidden;
    background: var(--forest);
    color: var(--text-on-dark);
    padding-top: clamp(9.5rem, 17vw, 13.5rem);
    padding-bottom: clamp(4rem, 8vw, 6.5rem);
}

.page-hero--image {
    background: var(--anthracite-deep);
}

.page-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, rgba(20, 38, 30, 0.95) 0%, rgba(20, 38, 30, 0.74) 48%, rgba(20, 38, 30, 0.32) 100%);
}

.text-balance {
    text-wrap: balance;
}