/* The reference band shares the lighter plum background of the contact section. */
.home-references {
  background: #302048;
  padding-block: clamp(56px, 7vw, 100px);
  text-align: center;
  border-block: 1px solid var(--line);
}
.home-references .reference-inner { max-width: 1120px; }
.home-references h2 {
  margin-inline: auto;
  font-size: clamp(36px, 5.25vw, 72px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.home-references h2 span { color: var(--accent); }
.reference-marquee {
  --edge-fade: clamp(40px, 11%, 124px);
  --mask: linear-gradient(to right, transparent 1%, #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent 99%);
  margin: clamp(28px, 4.3vw, 55px) auto 18px;
  overflow: hidden;
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
}
.reference-track {
  display: flex;
  width: max-content;
  animation: reference-flow 100s linear infinite;
}
.reference-set {
  --gap: clamp(42px, 5vw, 76px);
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex: none;
  margin: 0;
  padding: 8px var(--gap) 8px 0;
  list-style: none;
}
.reference-name {
  white-space: nowrap;
  color: var(--text);
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1.35;
}
.reference-controls { display: flex; align-items: center; justify-content: center; gap: 24px; }
.reference-controls .quiet-link, .reference-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  font-size: 13px;
}
.reference-pause { background: transparent; color: var(--muted); padding: 0 3px; }
.reference-pause::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background-color: var(--violet);
  --reference-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 5v14M16 5v14'/%3E%3C/svg%3E");
  -webkit-mask: var(--reference-control-icon) center / contain no-repeat;
  mask: var(--reference-control-icon) center / contain no-repeat;
}
.is-paused .reference-pause::before {
  --reference-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m7 4 12 8-12 8z'/%3E%3C/svg%3E");
}
.home-references.is-paused .reference-track { animation-play-state: paused; }
.reference-close { display: flex; margin: 20px auto 0; min-height: 44px; }
@keyframes reference-flow { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .reference-marquee { mask-image: none; -webkit-mask-image: none; }
  .reference-track { animation: none; width: 100%; }
  .reference-set { width: 100%; flex-wrap: wrap; justify-content: center; gap: 12px 24px; padding: 0; }
  .reference-set[aria-hidden], .reference-pause { display: none; }
  .reference-name { white-space: normal; font-size: 18px; }
}