/* trust.css — crumple ticker: client wordmarks drift past and get
   crushed (serif -> Anton) as they cross the center press line.
   Slim hairline band between the hero and the work rail. */

.trust {
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 72px);
}

.trust-band {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 22px 0;
}

.trust-label,
.trust-stat {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.trust-stat { font-variant-numeric: tabular-nums; }

/* ---------- the ticker ---------- */

.trust-ticker {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  /* names dissolve in and out at the band's edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.trust-track {
  display: flex;
  align-items: baseline;
  gap: clamp(40px, 5vw, 88px);
  width: max-content;
}

@media (prefers-reduced-motion: no-preference) {
  .trust-track {
    animation: trust-drift var(--trust-duration, 48s) linear infinite;
  }
  .trust-ticker:hover .trust-track { animation-play-state: paused; }
  /* touch equivalent of hover-to-read — toggled from js/trust.js */
  .trust-ticker.is-paused .trust-track { animation-play-state: paused; }
}

/* static row for reduced motion: no clones (see trust.js), let names
   wrap instead of clipping behind the edge mask */
@media (prefers-reduced-motion: reduce) {
  .trust-ticker {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .trust-track {
    flex-wrap: wrap;
    row-gap: 8px;
    width: auto;
  }
}

@keyframes trust-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.trust-name {
  display: inline-block;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* crushed under the center press line — the site's flip, miniature */
.trust-name--crushed {
  font-family: "Anton", var(--font-sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .trust-band {
    flex-wrap: wrap;
    gap: 14px 24px;
    padding: 18px 0;
  }
  .trust-ticker { flex-basis: 100%; order: 3; }
  .trust-stat { margin-left: auto; }
}

@media (max-width: 700px) {
  /* clear the sticky header: anchor offset + a little resting room */
  .trust { scroll-margin-top: 72px; margin-top: 8px; }
  .trust-band { padding: 16px 0; }
}

@media (max-width: 480px) {
  /* let the stat wrap instead of overflowing the 320px content box */
  .trust-stat { white-space: normal; text-align: right; }
  .trust-band { row-gap: 10px; }
}