:root {
    --endo-desktop-header-offset: 120px;
    --endo-snap-offset: var(--endo-desktop-header-offset);
}

html {
    scroll-padding-block-start: var(--endo-snap-offset);
    scroll-snap-type: y mandatory;
}

[data-endo-snap-section] {
    scroll-margin-block-start: var(--endo-snap-offset);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

[data-endo-snap-fit] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100svh - var(--endo-snap-offset));
}

/*
 * The stepper is intentionally much taller than the viewport.
 * The browser remains free to scroll through its internal sticky
 * sequence before snapping to the following section.
 */
.how-stepper[data-endo-snap-section] {
    scroll-margin-block-start: 0;
}


@media (max-width: 780px) {
    :root {
        --endo-snap-offset: var(--endo-mobile-header-height,
                76px);
    }

    html {
        scroll-snap-type: y mandatory;
    }

    [data-endo-snap-fit] {
        min-height: calc(100svh - var(--endo-snap-offset));
    }
}

@media (max-height: 650px) {
    [data-endo-snap-fit] {
        justify-content: flex-start;
        min-height: auto;
    }
}

.site-footer {
    scroll-snap-align: end;
    scroll-snap-stop: always;
}

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

    .site-footer {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

    [data-endo-snap-section] {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

}

html {
    scroll-snap-type: none !important;
    scroll-padding-block-start: 0 !important;
}

[data-endo-snap-section],
.site-footer {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
    scroll-margin-block-start: 0 !important;
}