/* Overlay the hero's bottom fade (Will 2026-10-21): the strip's dnd section takes no height and
   its top sits on the hero's bottom edge. The strip rises --logo-rise back into the hero, leaving
   clear air below the hero buttons, and is clipped to the same band as the Meet Will column
   (gutter + container). Browsers without :has() get a plain row below the hero. */
.dnd-section:has(.logo-strip) { height: 0; padding-block: 0; position: relative; z-index: 4; overflow: visible; }
.dnd-section:has(.logo-strip) .logo-strip {
  position: absolute; top: calc(-1 * var(--logo-rise));
  left: var(--gutter); right: var(--gutter);
}
.logo-strip {
  --logo-gap: clamp(36px, 4vw, 56px);
  --logo-scale: 1;
  --logo-rise: var(--sp-8);
  --logo-fade: clamp(40px, 9%, 112px);
  --marquee-dur: 56s;
  max-width: var(--container);
  margin-inline: auto;
}
.logo-strip__viewport {
  container-type: inline-size;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--logo-fade), #000 calc(100% - var(--logo-fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--logo-fade), #000 calc(100% - var(--logo-fade)), transparent);
}
/* Three identical sets; the middle one starts centered in the band (50cqw - 50% of the track),
   then the track slides right by exactly one set (a third of the track) and loops seamlessly. */
.logo-strip__track {
  display: flex;
  width: max-content;
  transform: translate3d(calc(50cqw - 50%), 0, 0);
  animation: logo-strip-marquee var(--marquee-dur) linear infinite;
  will-change: transform;
}
.logo-strip__viewport:hover .logo-strip__track,
.logo-strip__viewport:focus-within .logo-strip__track { animation-play-state: paused; }
.logo-strip__set {
  display: flex; flex: none; align-items: center;
  gap: var(--logo-gap);
  list-style: none; margin: 0;
  padding-inline: calc(var(--logo-gap) / 2); /* half gap each side: sets abut one gap apart, and each set's box is symmetric so it centers exactly */
}
.logo-strip__item { display: flex; align-items: center; justify-content: center; flex: none; }
.logo-strip__logo {
  display: block;
  width: calc(var(--w) * var(--logo-scale)); height: calc(var(--h) * var(--logo-scale));
  background-color: var(--logo-color, color-mix(in srgb, var(--cloud-mute) 70%, var(--cloud-dim)));
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  transition: background-color var(--dur-2) var(--ease-out);
}
.logo-strip__item:hover .logo-strip__logo { background-color: var(--cloud); }
@keyframes logo-strip-marquee {
  from { transform: translate3d(calc(50cqw - 50%), 0, 0); }
  to { transform: translate3d(calc(50cqw - 50% + 100% / 3), 0, 0); }
}
/* No container units: fall back to the plain loop (starts one set left, slides to 0). */
@supports not (width: 1cqw) {
  .logo-strip__track { transform: none; animation-name: logo-strip-marquee-legacy; }
  @keyframes logo-strip-marquee-legacy { from { transform: translate3d(calc(-100% / 3), 0, 0); } to { transform: translate3d(0, 0, 0); } }
}
@media (max-width: 600px) {
  .logo-strip { --logo-scale: .78; --logo-rise: var(--sp-10); --logo-fade: 28px; --marquee-dur: 44s; }
}
/* Reduced motion: one static row, centered in the band; the duplicate sets are dropped. */
@media (prefers-reduced-motion: reduce) {
  .logo-strip__track { animation: none; }
  .logo-strip__set[aria-hidden="true"] { display: none; }
  .logo-strip__set { padding-inline: 0; }
  .logo-strip__logo { transition: none; }
}