.edc-logos {
  padding: var(--edc-space-xl) 0;
  background: var(--edc-cream);
  border-top: 1px solid rgba(224, 221, 216, 0.3);
  border-bottom: 1px solid rgba(224, 221, 216, 0.3);
}
.edc-logos__inner {
  max-width: var(--edc-container);
  margin: 0 auto;
  padding: 0 var(--edc-space-gutter);
}
@media (min-width: 1024px) { .edc-logos__inner { padding: 0 var(--edc-space-xl); } }

.edc-logos__eyebrow {
  text-align: center;
  font-family: var(--edc-font-body);
  font-size: var(--edc-fs-label);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--edc-slate);
  margin: 0 0 var(--edc-space-xl) 0;
}
/* ─── Marquee ───────────────────────────────
   Two identical tracks sit side by side, each sized to its natural
   content width (flex-shrink:0 + flex-basis:auto). Both animate
   translateX from 0 → -100% of their own width in lockstep; because
   the second track sits exactly where the first ends, sliding both
   left by one track-width lands the second where the first started.
   Loop repeats — appears seamless.

   Includes explicit li height so the images have a container to
   letterbox into via object-fit:contain (some browsers collapse the
   li to 0-height without this, which hides the logos entirely). */
.edc-logos__marquee {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  /* Fade the edges so logos softly enter/exit against the cream band. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.edc-logos__track {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 72px;
  padding-right: 72px;                     /* fills the seam gap so spacing looks continuous */
  animation: edc-logos-marquee 32s linear infinite;
  will-change: transform;
}
@media (min-width: 1024px) { .edc-logos__track { gap: 96px; padding-right: 96px; } }

.edc-logos__marquee:hover .edc-logos__track { animation-play-state: paused; }

.edc-logos__track li {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 48px;                             /* fixed row height — images letterbox into this */
  width: auto;
}
.edc-logos__track img {
  height: 100%;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: grayscale(0.35);
  opacity: 0.75;
  transition: opacity var(--edc-dur-quick) var(--edc-ease),
              filter var(--edc-dur-quick) var(--edc-ease);
}
.edc-logos__track img:hover { opacity: 1; filter: grayscale(0); }

@keyframes edc-logos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .edc-logos__marquee { mask-image: none; -webkit-mask-image: none; overflow: visible; }
  .edc-logos__track   { animation: none; flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .edc-logos__track[aria-hidden="true"] { display: none; }
}