/* Customer proof: quiet, legible, and deliberately distinct from the hero. */
.customer-strip .customer-strip-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px 22px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.customer-strip .trust-kicker {
  margin: 0;
}

.customer-strip-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.customer-strip .customer-more {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-underline-offset: 4px;
}

.customer-strip .customer-more:hover,
.customer-strip .customer-more:focus-visible {
  color: #174e3e;
  text-decoration: underline;
}

.customer-logo:focus-visible {
  outline: 2px solid #316b55;
  outline-offset: 2px;
}

.customer-viewport {
  position: relative;
  width: 100%;
  overflow: visible;
  direction: ltr;
  scroll-behavior: auto;
}

.customer-track {
  display: block;
  width: 100%;
}

.customer-group {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  min-width: 0;
  align-items: center;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.customer-strip.is-enhanced:not(.is-static) .customer-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px;
  margin: -6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x pan-y;
}

@media (pointer: fine) {
  .customer-strip.is-enhanced:not(.is-static) .customer-viewport { cursor: grab; }
  .customer-strip.is-dragging .customer-viewport { cursor: grabbing; }
}

.customer-strip.is-enhanced:not(.is-static) .customer-viewport::-webkit-scrollbar {
  display: none;
}

.customer-strip.is-enhanced:not(.is-static) .customer-track {
  display: flex;
  width: max-content;
  align-items: stretch;
}

.customer-strip.is-enhanced:not(.is-static) .customer-group {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  min-width: 0;
  gap: 18px;
  padding-inline: 0;
  padding-inline-end: 18px;
}

.customer-strip .customer-logo,
.customer-logo-grid .customer-logo {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  height: 68px;
  align-items: center;
  justify-content: center;
  padding: 8px clamp(4px, 1vw, 14px);
  color: #526a65;
  filter: grayscale(1);
  opacity: .76;
  transition: filter .28s ease, opacity .28s ease;
}

.customer-strip.is-enhanced:not(.is-static) .customer-logo {
  flex: 0 0 172px;
  width: 172px;
  min-width: 172px;
}

/* Prior SNB treatment targets its legacy text lockup; keep this image lockup optical. */
.customer-strip .customer-logo.logo-snb,
.customer-logo-grid .customer-logo.logo-snb {
  flex-direction: row;
  gap: 0;
}

.customer-strip .customer-logo img,
.customer-logo-grid .customer-logo img {
  display: block;
  width: auto;
  max-width: min(100%, 152px);
  height: auto;
  max-height: 42px;
  margin: 0;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.customer-strip .customer-logo.logo-snb img,
.customer-logo-grid .customer-logo.logo-snb img {
  max-width: 144px;
  max-height: 48px;
}

.customer-strip :is(.logo-ksauhs, .logo-salam, .logo-mngha) img,
.customer-logo-grid :is(.logo-ksauhs, .logo-salam, .logo-mngha) img {
  max-height: 54px;
}

/* The legacy focus-within SNB selector must not suppress its own focus colour. */
.customer-logo-grid:focus-within .customer-logo.logo-snb:focus,
.customer-logo-grid:focus-within .customer-logo.logo-snb:hover {
  filter: grayscale(0);
  opacity: 1;
}

.customer-strip .customer-logo:hover,
.customer-strip .customer-logo:focus,
.customer-strip .customer-logo:focus-visible,
.customer-logo-grid .customer-logo:hover,
.customer-logo-grid .customer-logo:focus,
.customer-logo-grid .customer-logo:focus-visible {
  filter: grayscale(0);
  opacity: 1;
}

.customer-strip.is-enhanced .customer-viewport {
  touch-action: pan-x pan-y;
}

/* A deliberate static presentation ensures every keyboard target is visible. */
.customer-strip.is-static .customer-viewport {
  overflow: visible;
}

.customer-strip.is-static .customer-track {
  display: block;
  width: 100%;
  transform: none !important;
  will-change: auto;
}

.customer-strip.is-static .customer-group[aria-hidden="true"] {
  display: none !important;
}

.customer-strip.is-static .customer-group:not([aria-hidden="true"]) {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px 16px;
  padding: 0;
}

.customer-strip.is-enhanced.is-static .customer-logo {
  width: auto;
  min-height: 64px;
  min-width: 0;
  flex: 1 1 0;
}

.customer-strip.is-enhanced.is-static .customer-viewport {
  overflow: visible;
}

.customer-logo-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 16px 26px;
}

.customer-logo-grid .customer-logo {
  width: auto;
  min-height: 82px;
  height: auto;
  border-bottom: 1px solid #dce8e4;
}

@media (hover: none) {
  .customer-strip .customer-logo,
  .customer-logo-grid .customer-logo {
    filter: grayscale(0);
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .customer-group {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .customer-strip.is-static .customer-group:not([aria-hidden="true"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .customer-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
  }

  .customer-strip .customer-logo,
  .customer-logo-grid .customer-logo {
    height: 62px;
    padding-inline: 4px;
  }
}

@media (max-width: 440px) {
  .customer-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-strip .customer-strip-heading {
    flex-direction: column;
    gap: 8px;
  }

  .customer-strip.is-static .customer-group:not([aria-hidden="true"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-strip .customer-logo,
  .customer-logo-grid .customer-logo {
    transition: none;
  }
}