/* Original brand colours remain readable in both portfolio themes. */
.references { position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem); margin-top: 1.25rem; padding: .75rem max(1.25rem, 3.5vw); border-block: 1px solid var(--line); background: #fff; color: #111827; transform: rotate(-1.5deg) scale(1.02); }
.references h2 { flex: none; margin: 0; font-size: clamp(.7rem, 1vw, .9rem); font-weight: 700; letter-spacing: .16em; }
.references__viewport { min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); }
.references__track { display: flex; width: max-content; animation: references-scroll 30s linear infinite; }
.references__group { display: flex; align-items: center; gap: clamp(2rem, 4vw, 4rem); flex: none; margin: 0; padding: 0 clamp(2rem, 4vw, 4rem) 0 0; list-style: none; }
.references__group li { display: flex; align-items: center; justify-content: center; flex: 0 0 180px; height: 72px; }
.references__group img { display: block; width: 180px; height: 64px; object-fit: contain; }
.references[data-paused="true"] .references__track { animation-play-state: paused; }
@keyframes references-scroll { to { transform: translateX(-50%); } }
@media (max-width: 600px) {
  .references { gap: .75rem; padding-inline: 1rem; }
  .references h2 { font-size: .65rem; letter-spacing: .09em; }
  .references__group li { flex-basis: 150px; height: 64px; }
  .references__group img { width: 150px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .references__track { animation: none; }
  .references__group[aria-hidden="true"] { display: none; }
  .references__viewport { overflow-x: auto; mask-image: none; }
}