/* Container layout */
.container {
    max-width: 1440px;
    margin: 0 auto;
    background: linear-gradient(-30deg, var(--black), var(--black), var(--green), var(--green), var(--yellow), var(--yellow), var(--green), var(--green), var(--yellow), var(--yellow), var(--white));
    position: relative;
    overflow: hidden;
}

/* Rendering Performance Optimization */
.performance-optimize {
    content-visibility: auto;
    contain-intrinsic-size: 1px 100vh; /* Prevents scrollbar jumping */
}

/* Palette: Responsive Scroll Padding for Fixed Headers */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 140px; /* Account for fixed header on desktop */
}

@media (max-width: 720px) {
    html {
        scroll-padding-top: 20vw; /* Account for smaller fixed header on mobile (14vw + padding) */
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Palette: Scroll Lock state for Modals to prevent layout shifts */
body.modal-open {
    overflow: hidden;
    padding-right: var(--scrollbar-width, 0px);
}

/* Compensate for scrollbar width on fixed elements when modal is open */
body.modal-open .newsletter-button,
body.modal-open .back-to-top,
body.modal-open .scroll-progress {
    margin-right: var(--scrollbar-width, 0px);
}

/* Menu needs padding instead of margin to preserve background positioning if any */
body.modal-open .menu {
    padding-right: calc(20px + var(--scrollbar-width, 0px));
}