@keyframes mobile-logo-carousel {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(-1 * var(--logo-carousel-distance, 50%)), 0, 0); }
}
@keyframes mobile-logo-carousel-reverse {
    from { transform: translate3d(calc(-1 * var(--logo-carousel-distance, 50%)), 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}
.mobile-logo-carousel-track {
    display: flex;
    width: max-content;
    align-items: center;
    will-change: transform;
    backface-visibility: hidden;
    animation: mobile-logo-carousel linear infinite;
}
.mobile-logo-carousel-track.is-reverse {
    animation-name: mobile-logo-carousel-reverse;
}
.mobile-logo-carousel-set {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 1.75rem;
    padding-right: 1.75rem;
}
.mobile-logo-carousel-set img {
    display: block;
    height: 3.25rem;
    width: auto;
    max-width: 5.5rem;
    flex-shrink: 0;
    object-fit: contain;
    filter: brightness(0) saturate(100%);
}
.mobile-logo-carousel-set img.client-logo-grayscale {
    filter: grayscale(100%);
}
@media (prefers-reduced-motion: reduce) {
    .mobile-logo-carousel-track {
        animation: none !important;
        transform: none !important;
    }
}
.mobile-logo-carousel-viewport {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
}
.mobile-logo-carousel-rows {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.mobile-logo-carousel-fade {
    width: 4.5rem;
}
@media (min-width: 380px) {
    .mobile-logo-carousel-fade {
        width: 6rem;
    }
}

.logo-wall-rows {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.logo-wall-row-track {
    display: flex;
    width: max-content;
    align-items: stretch;
    will-change: transform;
    backface-visibility: hidden;
    animation: logo-wall-row-rtl linear infinite;
}
.logo-wall-row-set {
    display: flex;
    flex-shrink: 0;
}
.logo-wall-cell {
    flex: 0 0 calc(100vw / 14);
    width: calc(100vw / 14);
    box-sizing: border-box;
}
@keyframes logo-wall-row-rtl {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(-1 * var(--row-scroll-distance, 50%)), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .logo-wall-row-track {
        animation: none !important;
        transform: none !important;
    }
}

/* Seamless logo rows for the shared trusted-by partial (home-logo-grid).
   Moved here from pages/index.css so every page can reuse it. */
.home-logo-grid.is-scrolling { display: block; }
.home-logo-row { overflow: hidden; }
.home-logo-row + .home-logo-row { border-top: 1px solid var(--rule); }
.home-logo-track { display: flex; width: max-content; animation: home-logo-scroll 58s linear infinite; }
.home-logo-row:nth-child(2) .home-logo-track { animation-duration: 64s; }
.home-logo-row:nth-child(3) .home-logo-track { animation-duration: 70s; }
.home-logo-set { display: flex; flex-shrink: 0; }
.home-logo-set a { flex: 0 0 max(96px, calc(100vw / var(--logo-count))); width: max(96px, calc(100vw / var(--logo-count))); }
.home-logo-grid:hover .home-logo-track,
.home-logo-grid:focus-within .home-logo-track { animation-play-state: paused; }
@keyframes home-logo-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .home-logo-grid.is-scrolling { display: grid; }
    .home-logo-row, .home-logo-track, .home-logo-set { display: contents; animation: none; }
    .home-logo-set a { width: auto; }
    .home-logo-set[aria-hidden="true"] { display: none; }
}
