/* Explain: Layout utilities for section padding and page heroes. */
.section-pad {
    padding-top: clamp(4.5rem, 9vw, 7.5rem);
    padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
}

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

.page-hero {
    position: relative;
    overflow: hidden;
    padding-top: clamp(8rem, 15vw, 11rem);
    padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, var(--surface-color), var(--background-color));
}