/* =================================================================== MARQUEE section css =================================================================== */
.marquee {
    /* measured: full-bleed blue band, 80px tall, 30px white text */
    --marquee-h: 80px;

    display: flex;
    align-items: center;
    width: 100%;
    height: var(--marquee-h);
    background: var(--primary);
    overflow: clip;

    /* MotionFlow re-parents these items into .mf-ticker-viewport /
       .mf-ticker-track / .mf-ticker-content. Those wrappers belong to the
       library — never style them (CLAUDE.md §8.10). Spacing therefore lives
       on the items themselves, so it survives the re-parenting. */
    & .marquee__ticker { width: 100%; }

    /* Static fallback. MotionFlow skips the ticker entirely under
       prefers-reduced-motion, and never runs at all with JS off — without
       this the items wrap onto three lines and burst out of the 80px band.
       Scoped with :has() so it disappears the moment the library has
       re-parented them into .mf-ticker-viewport. */
    & .marquee__ticker:not(:has(.mf-ticker-viewport)) {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    & .marquee__item {
        padding-inline: var(--sp20);
        font-family: var(--font-display);
        font-size: var(--f30);
        font-weight: var(--fw-display);
        line-height: 1;
        white-space: nowrap;
        color: var(--white);
    }

    & .marquee__item--sep { opacity: .6; }
}

/* =================================================================== responsive =================================================================== */
@media (max-width: 767.98px) {
    .marquee {
        --marquee-h: 56px;
    }
}