/* Shared client banner for the home and every commercial landing. */
.clients-section {
  padding-block: 52px 44px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 80% 0, #30214645, transparent 65%),
    linear-gradient(120deg, #0d1525, #0b0e18 70%);
  border-bottom: 1px solid #2c3450;
}

.clients-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
}

.clients-heading .eyebrow { margin-bottom: 17px; }
.clients-heading h2 { font-size: clamp(1.8rem, 2.6vw, 2.5rem); }
.clients-intro { margin: 18px 0 0; color: #aebbd4; }

.clients-motion {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #4b587b;
  border-radius: 5px;
  background: #141d30;
  color: #dbe6ff;
  font-size: .8125rem;
  cursor: pointer;
}

.clients-motion[hidden] { display: none; }
.clients-motion:hover { background: #223150; }
.clients-motion-icon { width: 14px; text-align: center; }

.client-marquee {
  width: 100%;
  overflow: auto;
  padding-block: 12px;
  scrollbar-width: thin;
  scrollbar-color: #5579af #0e1525;
}

.client-marquee-track {
  display: flex;
  width: max-content;
}

.client-marquee-set {
  display: flex;
  flex: none;
  align-items: center;
  gap: 18px;
  padding-right: 18px;
}

.client-marquee-set[aria-hidden="true"] { display: none; }

.client-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 210px;
  height: 104px;
  padding: 20px 26px;
  border: 1px solid #33415b;
  border-radius: 20px;
}

.client-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 50px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.client-logo--square img { max-height: 64px; }

/* White originals become the dark backdrop; the ink becomes white. */
.client-logo--knockout img {
  filter: grayscale(1) invert(1) brightness(3) contrast(20) url('assets/client-logos/white-alpha.svg#white-ink');
}

.client-logo--dark-badge img {
  filter: grayscale(1) brightness(3) contrast(10) url('assets/client-logos/white-alpha.svg#white-ink');
}

.client-logo--faint img {
  filter: brightness(0) invert(1) url('assets/client-logos/white-alpha.svg#white-alpha');
}

.client-logo--with-label img { width: 46px; height: 46px; flex: 0 0 46px; }
.client-logo--with-label strong { font-size: .9375rem; line-height: 1.1; color: #fff; }
.client-logo--local { flex-direction: column; gap: 4px; color: #fff; }
.client-logo--local strong { font-size: 2rem; font-weight: 800; line-height: 1; }
.client-logo--local small { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }

.clients-animated .client-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.clients-animated .client-marquee-track {
  animation: client-logo-travel 72s linear infinite;
}

.clients-animated .client-marquee-set[aria-hidden="true"] { display: flex; }

.clients-animated :is(.client-marquee:hover, .client-marquee:focus-within) .client-marquee-track,
.clients-animated.clients-paused .client-marquee-track { animation-play-state: paused; }

@keyframes client-logo-travel { to { transform: translateX(-50%); } }

@media (max-width: 760px) {
  .clients-section { padding-block: 38px 30px; }
  .clients-heading { flex-wrap: wrap; gap: 17px; margin-bottom: 15px; }
  .clients-heading h2 { font-size: 1.875rem; }
  .clients-intro { font-size: .9375rem; margin-top: 16px; }
  .client-logo { width: 180px; height: 96px; padding-inline: 22px; }
  .client-marquee-set { gap: 14px; padding-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .clients-motion { display: none; }
  .clients-animated .client-marquee { overflow: auto; mask-image: none; -webkit-mask-image: none; }
  .clients-animated .client-marquee-track { animation: none; }
  .clients-animated .client-marquee-set[aria-hidden="true"] { display: none; }
}