.references-page {
  --reference-card-width: 190px;
  --reference-card-height: 94px;
  --reference-gap: 16px;
  overflow: hidden;
  color: var(--clr-secondary);
}

.references-hero {
  position: relative;
  padding: clamp(90px, 10vw, 150px) 0 clamp(54px, 7vw, 90px);
  overflow: hidden;
  background: radial-gradient(circle at 88% 18%, rgba(255, 59, 59, .13), transparent 28%), linear-gradient(135deg, #fff 0%, var(--clr-light-yellow) 100%);
}

.references-hero::after {
  position: absolute;
  right: -80px;
  bottom: -130px;
  width: 330px;
  height: 330px;
  border: 42px solid rgba(54, 42, 80, .06);
  border-radius: 50%;
  content: "";
}

.references-eyebrow { margin: 0 0 14px; color: var(--clr-primary); font-size: 13px; font-weight: 700; letter-spacing: .2em; }
.references-hero h1 { max-width: 820px; margin: 0; color: var(--clr-secondary); font-size: clamp(42px, 6vw, 76px); line-height: 1.08; letter-spacing: -.025em; }
.references-lead { max-width: 660px; margin: 26px 0 0; color: #6e6878; font-size: clamp(16px, 2vw, 20px); line-height: 1.7; }

.references-showcase { padding: clamp(50px, 7vw, 90px) 0 clamp(80px, 10vw, 130px); overflow: hidden; background: #fff; }
.references-marquee { display: grid; gap: var(--reference-gap); width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.references-rail { overflow: hidden; }
.references-track { display: flex; width: max-content; will-change: transform; animation: references-scroll-left 58s linear infinite; }
.references-rail--reverse .references-track { animation-name: references-scroll-right; animation-duration: 66s; }
.references-group { display: flex; gap: var(--reference-gap); padding-right: var(--reference-gap); }

.reference-card {
  display: grid;
  place-items: center;
  flex: 0 0 var(--reference-card-width);
  width: var(--reference-card-width);
  height: var(--reference-card-height);
  padding: 14px 20px;
  overflow: hidden;
  background: var(--clr-offwhite-light-gray-shade);
  border: 1px solid #e2e1e7;
  border-radius: 10px;
  outline: none;
  transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.reference-card img { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.03); opacity: .62; transition: filter .24s ease, opacity .24s ease, transform .24s ease; }
.reference-card:hover, .reference-card:focus-visible { background: #fff; border-color: rgba(255, 59, 59, .48); box-shadow: 0 12px 26px rgba(54, 42, 80, .1); transform: translateY(-2px); }
.reference-card:hover img, .reference-card:focus-visible img { filter: none; opacity: 1; transform: scale(1.04); }

@keyframes references-scroll-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes references-scroll-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

@media (max-width: 640px) {
  .references-page { --reference-card-width: 144px; --reference-card-height: 72px; --reference-gap: 10px; }
  .references-hero { padding-top: 72px; }
  .references-hero h1 { font-size: clamp(38px, 12vw, 54px); }
  .references-marquee { -webkit-mask-image: none; mask-image: none; }
  .reference-card { padding: 10px 14px; border-radius: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .references-marquee { gap: var(--reference-gap); padding-inline: 14px; -webkit-mask-image: none; mask-image: none; }
  .references-track { display: block; width: 100%; animation: none; }
  .references-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--reference-card-width), 1fr)); width: min(100%, 1240px); margin-inline: auto; padding: 0; }
  .references-group[aria-hidden="true"] { display: none; }
  .reference-card { width: 100%; transition: none; }
  .reference-card img { transition: none; }
}