/* 1012 homepage: stationary logo screens with an 800ms crossfade. */
html body #clientsRail {
  width: min(1600px, calc(100% - 96px));
  margin-inline: auto;
}
html body #clientsRail .clients__track {
  animation: none !important;
  transform: none !important;
  will-change: auto;
}
html body #clientsRail .clients__fade { display: none; }
html body #clientsRail .clients__row { overflow: hidden; }
html body #clientsRail .clients__set[aria-hidden="true"] { display: none; }
html body #clientsRail.is-paged .clients__row { display: grid; }
html body #clientsRail .clients__page {
  grid-area: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--cl-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  /* A steady crossfade keeps both screens complementary throughout the change. */
  transition: opacity 800ms linear;
}
html body #clientsRail .clients__page.is-current { opacity: 1; pointer-events: auto; }
/* Use the same column width on every screen; center shorter screens. */
html body #clientsRail .clients__page .clients__item {
  flex: 0 0 calc((100% - (var(--page-columns) - 1) * var(--cl-gap)) / var(--page-columns));
  min-width: 0;
  padding: 0;
}
html body #clientsRail .clients__logo { max-width: 100%; }
@media (hover: hover) {
  html body #clientsRail:hover .clients__logo { filter: none; opacity: 1; }
}
@media (max-width: 767px) {
  html body #clientsRail { width: calc(100% - 48px); }
}
@media (prefers-reduced-motion: reduce) {
  html body #clientsRail .clients__page { transition-duration: 160ms; }
}