.container {
    width: min(var(--container), calc(100% - 2 * var(--space-4)));
    margin-inline: auto;
}

/* Bottom fade above the footer (predictable spacing) */
:root {
    --bottom-fade: clamp(80px, 12vh, 140px);
    --bottom-gap: var(--space-5);
    /* space from last content to fade start */
}

main {
    position: relative;
    padding-bottom: calc(var(--bottom-fade) + var(--bottom-gap));
}

main::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: var(--bottom-fade);
    pointer-events: none;
    z-index: 0;

    background: linear-gradient(to top,
            rgba(0, 63, 34, 1.00) 0%,
            rgba(0, 63, 34, 0.92) 14%,
            rgba(0, 63, 34, 0.78) 32%,
            rgba(0, 63, 34, 0.54) 52%,
            rgba(0, 63, 34, 0.28) 74%,
            rgba(0, 63, 34, 0.00) 100%);
}

/* Keep main content above decorative fades */
main>* {
    position: relative;
    z-index: 1;
}

/* Sections */
.section {
    padding: var(--space-6) 0;
}

/* Two-column grid */
.two-col {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    margin-bottom: var(--space-6);
}

@media (max-width: 900px) {
    .two-col {
        grid-template-columns: 1fr;
    }
}