/* ============================================================
   TRUST, quiet client strip
   ============================================================ */

.trust {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.trust__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.trust__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-3);
  max-width: 16ch;
  line-height: 1.7;
}

.trust__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 3.5vw, 3rem);
}

.trust__item {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-2);
  opacity: 1;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  white-space: nowrap;
}
.trust__item:hover { color: var(--text); opacity: 1; }
.trust__item em {
  font-style: normal;
  font-weight: 400;
  opacity: 0.6;
}

@media (max-width: 820px) {
  .trust__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .trust__label { max-width: none; }
  .trust__list { justify-content: flex-start; row-gap: 1rem; }
}

/* ============================================================
   MARQUEE, client names moving horizontally, continuously
   ============================================================ */

.trust{
  padding-block: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;                 /* the track runs past both edges */
}
.trust .trust__label{
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  max-width: none;
}

.marquee{
  display: flex;
  width: max-content;
  /* Fade the strip out at both edges so names enter and leave rather
     than being cut off by the viewport. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track{
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-right: clamp(2.5rem, 6vw, 6rem);
  flex: none;
  animation: marquee 38s linear infinite;
  will-change: transform;
}

/* Each track is exactly one full set wide, so translating by -100%
   lands the second track precisely where the first began. */
@keyframes marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.trust:hover .marquee__track{ animation-play-state: paused; }

.marquee .trust__item{
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text-2);
  white-space: nowrap;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
  .marquee{ width: 100%; justify-content: center; flex-wrap: wrap; }
  .marquee__track:last-child{ display: none; }
}