.testimonials { padding: 40px 0 64px; }
.reference-carousel { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 0 14px; }
.reference-viewport { grid-column: 2; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.reference-track { --per-view: 3; --card-gap: 24px; position: relative; display: flex; gap: var(--card-gap); }

.reference-card { flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--card-gap)) / var(--per-view)); scroll-snap-align: start; display: flex; flex-direction: column; padding: 26px 26px 30px; border-radius: 28px; background: #fff; color: var(--ink); }
.reference-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.reference-logo { width: 46%; height: auto; }
.reference-logo.logo-thebe { width: 38%; }
/* About a quarter of the card, as on the live slides, so the face is the first thing you see */
.reference-photo { flex: none; width: 46%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: var(--soft); }
/* Centred under the photo like the live slides; a name wider than the photo grows to the left instead of off the card */
.reference-person { align-self: flex-end; min-width: 46%; margin-top: 14px; text-align: center; font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.reference-person strong { display: block; margin-bottom: 2px; font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.reference-mark { display: grid; place-items: center; width: 30px; height: 30px; margin-top: 16px; border-radius: 50%; background: var(--magenta); color: #fff; }
.reference-mark svg { width: 12px; height: 9px; }
.reference-card blockquote { margin: 14px 0 0; }
.reference-headline { font-family: var(--font-heading); font-size: 19px; line-height: 1.45; font-weight: 600; letter-spacing: -0.005em; }
.reference-headline em { font-style: normal; color: var(--magenta); }
.reference-body { margin-top: 18px; font-family: var(--font-heading); font-size: 14.5px; line-height: 1.75; font-weight: 400; }
.reference-body.italic { font-style: italic; }
.reference-body strong { font-weight: 700; }

.reference-arrow { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--faint-on-dark); cursor: pointer; transition: color .2s, background-color .2s; }
.reference-arrow:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.reference-arrow svg { width: 30px; height: 30px; }
.reference-arrow.previous svg { transform: rotate(90deg); }
.reference-arrow.next svg { transform: rotate(-90deg); }
.reference-dots { grid-column: 1 / -1; justify-self: center; display: flex; gap: 4px; margin-top: 26px; }
.reference-dots button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.reference-dots button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: background-color .3s, transform .3s; }
.reference-dots button[aria-current="true"]::before { background: var(--magenta-hot); transform: scale(1.2); }
/* The arrows and dots only work once the script has taken over from plain scrolling */
.reference-carousel:not(.is-ready) :is(.reference-arrow, .reference-dots) { visibility: hidden; }

.reference-carousel.is-ready .reference-viewport { overflow: hidden; scroll-snap-type: none; touch-action: pan-y; }
.reference-carousel.is-ready .reference-track { transition: transform .6s cubic-bezier(.22, .8, .24, 1); }
.reference-track.is-dragging { transition: none !important; user-select: none; }
.reference-track.is-jumping, .reference-track.is-jumping * { transition: none !important; }

/* Motion: the cards slide in once, and each card's highlights draw in whenever it comes into view */
.reference-carousel.is-animated:not(.is-waiting) .reference-card { transition: opacity .6s ease-out, transform .75s cubic-bezier(.22, .8, .24, 1); transition-delay: calc(var(--order, 0) * 110ms); }
.reference-carousel.is-animated.is-waiting .reference-card.is-visible { opacity: 0; transform: translateX(64px); }
.reference-carousel.is-animated .reference-headline em { color: transparent; background: linear-gradient(90deg, var(--magenta) 50%, var(--ink) 50%) 100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-position .8s cubic-bezier(.5, 0, .3, 1); transition-delay: calc(.35s + var(--order, 0) * 110ms + var(--highlight, 0) * 300ms); }
.reference-carousel.is-animated:not(.is-waiting) .reference-card.is-visible .reference-headline em { background-position: 0 0; }
/* A card that leaves keeps its highlights until it is out of sight, then resets for next time */
.reference-carousel.is-animated .reference-card:not(.is-visible) .reference-headline em { transition-duration: 0s; transition-delay: .6s; }

@media (max-width: 1023px) {
  .reference-track { --per-view: 2; }
}
@media (max-width: 720px) {
  .testimonials { padding: 28px 0 52px; }
  .reference-carousel { grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 0 8px; }
  .reference-viewport { grid-column: 1 / -1; }
  .reference-track { --per-view: 1; --card-gap: 16px; }
  .reference-arrow, .reference-dots { grid-row: 2; margin-top: 20px; }
  .reference-arrow.previous { grid-column: 1; }
  .reference-dots { grid-column: 2; }
  .reference-arrow.next { grid-column: 3; }
  .reference-card { padding: 24px 22px 28px; border-radius: 24px; }
  .reference-person { min-width: 44%; }
  .reference-photo { width: 44%; }
  .reference-headline { font-size: 19px; }
  .reference-body { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .reference-carousel.is-ready .reference-track { transition: none; }
}