/* Customer references: one slowly moving row of light tiles, faded at both edges.
   Logos keep their shape but are shown grey; a filled logo (ALDI, REWE, DHL) would become a blank block if turned white.
   No pause on hover: pausing the GPU animation in Safari makes the whole row jump. */
/* Same look as .location-eyebrow, which the home page does not load. */
.references-eyebrow {
    color: var(--accent);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.references-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.references-strip {
    display: flex;
    width: max-content;
    animation: references-scroll 120s linear infinite;
}
.references-track {
    display: flex;
    flex: none;
    align-items: center;
    gap: 1.25rem;
    margin: 0;
    padding: 0 0.625rem;
    list-style: none;
}
.references-item {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10.5rem;
    height: 4.5rem;
    padding: 0 1.1rem;
    border-radius: 0.5rem;
    background: #f1f1ef;
}
.references-item img {
    max-height: 2.4rem;
    max-width: 100%;
    filter: grayscale(1) contrast(1.25);
    mix-blend-mode: multiply; /* a white box inside a logo blends into the tile */
    opacity: 0.85;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.references-item:hover img { filter: none; opacity: 1; }
.references-item span {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
    color: #3a3a3a;
}
@keyframes references-scroll {
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .references-marquee { -webkit-mask-image: none; mask-image: none; }
    .references-strip { display: block; animation: none; width: auto; }
    .references-track { flex-wrap: wrap; justify-content: center; padding: 0 1rem; }
    .references-copy { display: none; }
}