/* Hero: recent collaborations as quiet logos, with the Stack pill at the right end of the row. */

.hero-meta { align-items: flex-end; justify-content: space-between; }
.hero-clients { flex: 1; min-width: 0; max-width: none; }

.hero-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.hero-logos li { display: flex; align-items: center; }
.hero-logos img {
  display: block;
  height: var(--h, 20px);
  width: auto;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.hero-logos li:hover img { filter: none; opacity: 1; }

/* a wordmark stands in where there is no logo file yet */
.hero-logo-word {
  font-size: 0.8125rem;
  font-weight: var(--font-bold);
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  opacity: 0.8;
}

@media (max-width: 768px) {
  .hero-meta { align-items: stretch; }
  .hero-logos { gap: var(--space-3) var(--space-5); }
}