/* Explain: Section rhythm and structural backdrops for roofing pages */
.section-pad {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.bg-gradient-dawn {
    background: linear-gradient(135deg, var(--pure-white) 0%, color-mix(in srgb, var(--primary-color) 16%, var(--pure-white)) 100%);
}

.bg-gradient-dusk {
    background: linear-gradient(135deg, var(--roof-black) 0%, var(--primary-color) 100%);
}

.bg-gradient-mist {
    background: linear-gradient(180deg, var(--pure-white) 0%, color-mix(in srgb, var(--accent-color) 55%, var(--pure-white)) 100%);
}

.steel-grid {
    background-image: linear-gradient(color-mix(in srgb, var(--primary-color) 16%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--primary-color) 16%, transparent) 1px, transparent 1px);
    background-size: 34px 34px;
}

@media (min-width: 1024px) {
    .section-pad {
        padding-top: 6.5rem;
        padding-bottom: 6.5rem;
    }
}