/* Explain: Section spacing and layered layout utilities */
.section-shell {
    margin-left: auto;
    margin-right: auto;
    max-width: 1180px;
    padding-left: 1rem;
    padding-right: 1rem;
}

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

.hero-grid {
    align-items: center;
    display: grid;
    gap: clamp(2.5rem, 6vw, 5rem);
    grid-template-columns: 1fr;
    min-height: calc(100vh - 5.5rem);
    padding-bottom: 5rem;
    padding-top: 7rem;
}

.treatment-bento {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

.testimonial-flow {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .section-shell {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 0.92fr) minmax(20rem, 0.78fr);
    }

    .treatment-bento {
        grid-template-columns: 1.1fr 0.9fr;
    }

    .treatment-bento > article:first-child {
        grid-row: span 2;
    }

    .testimonial-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .section-shell {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}