.nml-lt {
    padding: 56px 0;
    overflow: hidden;
}

/* ── Outer mask: fade edges ── */
.nml-lt__track-wrap {
    --ticker-duration: 30s;
    display: flex;
    overflow: hidden;
    /* NO gap here: the wrap must contain exactly two equal track copies so
       that shifting the first track by -100% lands precisely on the second. */
}

/* ── Each track copy ── */
.nml-lt__track {
    display: flex;
    align-items: center;
    gap: 64px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    /* keep the gap between the two copies identical to the inner gap so the
       loop is seamless across the join */
    padding-right: 64px;
    /* each copy is identical, animate first by -100% of its own width = one full loop */
    animation: nml-ticker var(--ticker-duration) linear infinite;
}

/* pause on hover */
.nml-lt__track-wrap:hover .nml-lt__track {
    animation-play-state: paused;
}

@keyframes nml-ticker {
    from { transform: translateX( 0 ); }
    to   { transform: translateX( -100% ); }
}

/* ── Respect reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
    .nml-lt__track {
        animation: none;
    }

    .nml-lt__track-wrap {
        overflow-x: auto;
    }
}

/* ── Logo items ── */
.nml-lt__item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.nml-lt__item img {
    display: block;
    max-width: 100%;
    width: auto;
    height: 40px;
    object-fit: contain;
    filter: grayscale(1) opacity(0.55);
    transition: filter 0.25s;
}

.nml-lt__item img:hover {
    filter: grayscale(0) opacity(1);
}

@media (max-width: 768px) {

    .nml-lt {
        padding: 48px 0;
    }

    .nml-lt__track {
        gap: 32px;
        /* join gap must match the inner gap on mobile too */
        padding-right: 32px;
    }

    .nml-lt__item img {
        height: 32px;
    }
}