/* Keep the supplied logo files intact; frame their marks without excess margins. */
.service-providers {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.provider-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.service-providers h3 {
  color: var(--ink);
  font-size: 22px;
  font-weight: 600;
}

.provider-motion-toggle {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 14px;
}

.provider-motion-toggle:hover { color: var(--blue); border-color: var(--blue); }
.provider-motion-toggle[hidden] { display: none; }

.provider-marquee {
  --provider-gap: 16px;
  --provider-card-width: clamp(200px, 28vw, 360px);
  display: grid;
  gap: var(--provider-gap);
  min-width: 0;
}

.provider-row {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #c4d4e4 transparent;
}

.provider-track {
  display: flex;
  gap: var(--provider-gap);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.provider-card {
  display: flex;
  flex: 0 0 var(--provider-card-width);
  width: var(--provider-card-width);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 0;
  padding: 28px 24px 22px;
  border: 1px solid var(--line);
  background: #fff;
}

.provider-row.is-animated { overflow-x: hidden; }

.provider-row.is-animated .provider-track {
  animation: provider-travel var(--provider-duration) ease-in-out infinite alternate;
}

/* Travel the full overflow distance so the first and last logos both appear. */
.provider-row.is-animated:nth-child(2) .provider-track {
  animation-direction: alternate-reverse;
}

.service-providers.is-paused .provider-track,
.service-providers.is-offscreen .provider-track,
.service-providers.is-background .provider-track {
  animation-play-state: paused;
}

@media (hover: hover) {
  .provider-marquee:hover .provider-track { animation-play-state: paused; }
}

@keyframes provider-travel {
  0%, 5% { transform: translateX(0); }
  95%, 100% { transform: translateX(calc(-1 * var(--provider-travel))); }
}

.provider-artwork {
  --logo-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--logo-height);
}

.provider-logo {
  position: relative;
  overflow: hidden;
  width: min(100%, 248px, calc(var(--logo-height) * var(--crop-width) / var(--crop-height)));
  aspect-ratio: var(--crop-width) / var(--crop-height);
}

.provider-logo img {
  position: absolute;
  top: calc(-100% * var(--crop-y) / var(--crop-height));
  left: calc(-100% * var(--crop-x) / var(--crop-width));
  width: calc(100% * var(--image-width) / var(--crop-width));
  max-width: none;
  height: auto;
}

.provider-name {
  color: #536779;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 1023px) {
  .provider-card { padding: 24px 20px 20px; }
  .provider-artwork { --logo-height: 80px; }
}

@media (max-width: 767px) {
  .service-providers { margin-top: 36px; padding-top: 28px; }
  .provider-heading { margin-bottom: 20px; }
  .service-providers h3 { font-size: 20px; }
  .provider-marquee { --provider-gap: 12px; }
  .provider-card { gap: 14px; padding: 20px 14px 18px; }
  .provider-artwork { --logo-height: 72px; }
  .provider-logo { width: min(100%, 180px, calc(var(--logo-height) * var(--crop-width) / var(--crop-height))); }
}

@media (prefers-reduced-motion: reduce) {
  .provider-row.is-animated { overflow-x: auto; }
  .provider-row.is-animated .provider-track { animation: none; transform: none; }
}

@media print {
  .provider-motion-toggle { display: none; }
  .provider-row.is-animated { overflow: visible; }
  .provider-row .provider-track {
    width: 100%;
    flex-wrap: wrap;
    animation: none !important;
    transform: none;
  }
  .provider-card { break-inside: avoid; }
}