.references-page { padding-bottom: clamp(72px, 9vw, 148px); background: #fff; }
.references-hero { padding-top: clamp(62px, 8vw, 132px); padding-bottom: clamp(42px, 6vw, 92px); }
.references-hero__eyebrow { margin-bottom: 18px; color: var(--color-brand); font-size: .72rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.references-hero__layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); align-items: end; gap: clamp(32px, 7vw, 120px); }
.references-hero h1 { max-width: 980px; font-size: clamp(3.5rem, 8vw, 8.5rem); font-weight: 690; letter-spacing: -.065em; line-height: .86; }
.references-hero__layout > p { max-width: 540px; padding-bottom: .35em; color: var(--color-body-text); font-family: var(--font-body); font-size: clamp(1.15rem, 1.65vw, 1.65rem); line-height: 1.45; }
.references-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
.reference-logo-card { display: grid; min-width: 0; aspect-ratio: 1; padding: clamp(10px, 1vw, 18px); grid-template-rows: minmax(0, 1fr) auto; border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); background: #fff; color: var(--color-ink); transition: background-color 180ms ease; }
.reference-logo-card__media { display: grid; min-height: 0; place-items: center; }
.reference-logo-card__media picture { display: contents; }
.reference-logo-card__media img { width: 80%; height: 80%; object-fit: contain; transition: transform 220ms ease; }
.reference-logo-card__name { overflow: hidden; padding-top: 9px; color: #393939; font-size: clamp(.62rem, .7vw, .78rem); font-weight: 600; line-height: 1.2; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
a.reference-logo-card:hover,
a.reference-logo-card:focus-visible { background: #f6f5f1; outline: 0; }
a.reference-logo-card:hover .reference-logo-card__media img,
a.reference-logo-card:focus-visible .reference-logo-card__media img { transform: scale(1.05); }
.references-empty { display: grid; min-height: 300px; place-items: center; border: 1px solid var(--color-line); color: var(--color-muted); font-family: var(--font-body); font-size: 1.2rem; }
@media (max-width: 1199px) { .references-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .references-hero__layout { grid-template-columns: 1fr; gap: 24px; }
  .references-hero h1 { font-size: clamp(3.3rem, 14vw, 6rem); }
  .references-hero__layout > p { max-width: 620px; padding: 0; }
  .references-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reference-logo-card__media img { width: 80%; height: 80%; }
}
@media (max-width: 559px) {
  .references-page { padding-bottom: 72px; }
  .references-hero { padding-top: 48px; padding-bottom: 36px; }
  .references-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reference-logo-card { padding: 12px; }
  .reference-logo-card__name { font-size: .72rem; }
}