/* ===========================================================================
   Logo wall.
   ---------------------------------------------------------------------------
   ⚠ The marks currently in the markup are PLACEHOLDERS — invented companies,
   none of them customers. Replace or delete before launch. See README.

   Styled the way the category does it: muted, evenly spaced, drifting slowly,
   masked to fade at both edges so it reads as a longer list than it is.
   =========================================================================== */

.logos {
  background: var(--paper);
  padding: 44px 0 52px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* ── Inside the hero ─────────────────────────────────────────────────────
   The base styles above are for a light band. Dropped into the dark hero
   without an override they painted a pale stripe across it — which is what
   made it look like a mistake rather than a design.

   Static, not scrolling. A marquee down there competes with a hero that is
   already animating three slides; two things moving is one too many. */
.logos--hero {
  position: relative;
  z-index: 2;
  background: none;
  border-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding: 26px 0 30px;
  margin-top: 6px;
}
.logos--hero .logos__lead {
  color: rgba(255, 255, 255, 0.34);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  opacity: 1;
  margin-bottom: 20px;
}
/* Drifting slowly enough to read as ambient rather than as something
   demanding to be watched. The duration is tuned to the strip's actual width
   so the speed stays constant if logos are added or removed — 4 names at
   roughly 250px each, four times through, at about 26px per second. Two
   passes would loop seamlessly on their own; four keeps the rail from looking
   sparse now there are half as many distinct names. */
.logos--hero .logos__strip {
  animation: logo-drift 78s linear infinite;
  will-change: transform;
}
.logos--hero:hover .logos__strip {
  animation-play-state: paused;
}

/* The spacing this lost when the row was briefly static. Without horizontal
   padding every mark runs into its neighbour and the icons read as belonging
   to the wrong name. */
.logos--hero .logo {
  padding: 0 30px;
  gap: 11px;
  color: #fff;
  opacity: 0.34;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.logos--hero .logo:hover {
  opacity: 0.66;
}
.logos--hero .logo svg {
  width: 19px;
  height: 19px;
  color: rgba(99, 231, 127, 0.6);
}

/* A hairline between marks, so the eye groups each icon with its own word
   rather than splitting the difference. */
.logos--hero .logo::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: rgba(255, 255, 255, 0.12);
}
.logos--hero .logo {
  position: relative;
}

@media (max-width: 900px) {
  .logos--hero .logo {
    font-size: 0.88rem;
    padding: 0 20px;
  }
  .logos--hero .logos__strip {
    animation-duration: 46s;
  }
}

.logos__lead {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
  margin-bottom: 30px;
}

.logos__rail {
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.logos__strip {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-drift 46s linear infinite;
}
/* Stop when someone wants to actually read one. */
.logos__rail:hover .logos__strip {
  animation-play-state: paused;
}
@keyframes logo-drift {
  to {
    transform: translateX(-50%);
  }
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 34px;
  white-space: nowrap;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--graphite);
  /* Muted rather than full colour, so the wall supports the page instead of
     competing with it. */
  opacity: 0.42;
  transition: opacity 0.25s;
}
.logo:hover {
  opacity: 0.8;
}
.logo svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--teal);
}

@media (prefers-reduced-motion: reduce) {
  .logos__strip {
    animation: none;
  }
}

@media (max-width: 620px) {
  .logo {
    padding: 0 22px;
    font-size: 0.94rem;
  }
}