.hero-section {
    border-radius: 0 0 32px 32px;
    position: relative;
    z-index: 10;
    will-change: transform, opacity;
    transform-origin: center top;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

@media (max-width: 1023px) {
    .hero-section {
        border-radius: 0 0 24px 24px;
    }
}

.hero-next-section {
    position: relative;
    z-index: 1;
    opacity: 1;
    transform: translateY(0);
}

/* Next section sits above the canvas overlay */
.hero-next-section {
    position: relative;
    z-index: 10000;
    opacity: 1;
    transform: translateY(0);
}