/* ==========================================================================
   Industry Trust Bar Module
   Dark logo wall — the client logo PNGs are white wordmarks, so they must sit
   on a dark background (matches the site's topic-logos treatment).
   Self-contained.
   ========================================================================== */

.ind-trust-bar {
  padding: 90px 20px;
  background-color: #F6F4F8;
  --logo-peak: 1.25;   /* max scale for the scroll-zoom (grow once, then hold) */
}

.ind-trust-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.ind-trust-bar__heading {
  font-family: 'REM', sans-serif;
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 20px;
  line-height: 1.3;
  letter-spacing: -1px;
  color: #151A1B;
}

/* "Every Segment" — larger + brand gradient, rest of the heading stays black */
.ind-trust-bar__heading-em {
  font-size: 1.34em;
  font-weight: 700;
  background: linear-gradient(75deg, #FD6E16, #F24456, #EE4161, #D5279E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.ind-trust-bar__intro {
  font-family: 'REM', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: rgba(21, 26, 27, 0.7);
  line-height: 1.6;
  max-width: 900px;
  margin: 0 auto 56px;
}

/* ---------- Logo wall ---------- */

/* Centered flex-wrap with even gaps: spacing stays balanced regardless of each
   logo's width (no big voids around narrow logos like New York Life), and any
   wrapped last row stays centered on smaller viewports. */
.ind-trust-bar__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 34px 88px;
}

.ind-trust-bar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.ind-trust-bar__item img {
  max-width: 100%;
  max-height: 38px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* white logo PNGs -> render as muted gray on the light background */
  filter: brightness(0);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.ind-trust-bar__item:hover img {
  opacity: 0.75;
}

/* ---------- Scroll-zoom (CSS scroll-driven animation) ----------
   Each logo scales up once as it scrolls into view, reaches its max size, and
   holds there (no shrink-back). Runs on the compositor (no JS) so it stays
   smooth; a small per-logo stagger gives a left-to-right wave. Browsers without
   scroll-driven animations simply show the logos at rest. */
@keyframes ind-trust-logo-zoom {
  0%   { transform: scale(1); }
  60%  { transform: scale(var(--logo-peak, 1.25)); }
  100% { transform: scale(var(--logo-peak, 1.25)); }
}

@supports (animation-timeline: view()) {
  .ind-trust-bar__item img {
    transform-origin: center;
    will-change: transform;
    animation: ind-trust-logo-zoom linear both;
    animation-timeline: view();
    animation-range: cover -15% cover 85%;   /* peak ~15% earlier (below center) */
  }
  .ind-trust-bar__item:nth-child(2) img { animation-range: cover -9% cover 91%; }
  .ind-trust-bar__item:nth-child(3) img { animation-range: cover -3% cover 97%; }
  .ind-trust-bar__item:nth-child(4) img { animation-range: cover 3%  cover 103%; }
  .ind-trust-bar__item:nth-child(5) img { animation-range: cover 9%  cover 109%; }
}

@media (prefers-reduced-motion: reduce) {
  .ind-trust-bar__item img { animation: none; transform: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1590px) {
  .ind-trust-bar__heading { font-size: 40px; }
}

@media (max-width: 999px) {
  .ind-trust-bar { padding: 64px 20px; }
  .ind-trust-bar__heading { font-size: 32px; }
  .ind-trust-bar__intro { font-size: 16px; margin-bottom: 40px; }
  .ind-trust-bar__grid { gap: 30px 64px; }
  .ind-trust-bar__item img { max-height: 34px; }
}

@media (max-width: 767px) {
  .ind-trust-bar { padding: 56px 16px; --logo-peak: 1.15; }
  .ind-trust-bar__grid { gap: 24px 44px; }
  .ind-trust-bar__item { padding: 6px; }
  .ind-trust-bar__item img { max-height: 30px; }
}

/* Hold 48px from 1440px up (overrides the <=1590 drop on big laptops/desktops) */
@media (min-width: 1200px) { .ind-trust-bar__heading { font-size: 48px; } }