/* ==========================================================================
   Trusted-by strip — Figma 280:1330
   Hairline / 24 gap / 95-tall row / 24 gap / hairline. Sizes ride on the row's
   own font-size so the whole strip scales as one, rather than snapping.
   ========================================================================== */

.gw-trusted {
  border-top: 1px solid var(--gw-gray-100);
  border-bottom: 1px solid var(--gw-gray-100);
  padding-block: 1.4375rem;      /* 1px rule + 23 = the comp's 24 gap */
  background: var(--gw-white);
}

.gw-trusted__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* the comp leaves its slack on the right */
  gap: clamp(1.5rem, 2.78vw, 2.5rem);   /* 40 at 1440 */
  min-height: 5.9375rem;         /* 95 */
}

.gw-trusted__label {
  flex: none;
  padding: 0.625rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--gw-gray-700);
}
/* the comp breaks after "BUSINESSES"; hold each designed line on one line */
.gw-trusted__label span { display: block; white-space: nowrap; }

.gw-trusted__logos {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 1 auto;                /* natural width — stretching widened the gaps */
  gap: clamp(1.25rem, 3.89vw, 3.5rem);  /* 56 at 1440 */
  /* one dial for the whole row: every logo height is expressed in em */
  font-size: clamp(0.62rem, 1.111vw, 1rem);   /* hits exactly 1rem at 1440 */
}

/* each logo sits in a frame with 10px of padding in the comp; the first is a
   bare image with none */
.gw-trusted__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.625rem;
}
.gw-trusted__logo:first-child { padding-inline: 0; }

.gw-trusted__logo img {
  width: auto;
  height: calc(var(--h) * 1em);
  object-fit: contain;
  /* monochrome at rest, as the comp shows; each mark returns to its own colour
     when you hover it */
  filter: grayscale(1);
  transition: filter var(--gw-dur) var(--gw-ease);
}
.gw-trusted__logo:hover img,
.gw-trusted__logo:focus-within img { filter: grayscale(0); }

@media (max-width: 64rem) {
  .gw-trusted__inner { flex-direction: column; gap: 1.5rem; text-align: center; }
  .gw-trusted__label span { display: inline; white-space: normal; }
  .gw-trusted__label { padding: 0; max-width: 22rem; }
  .gw-trusted__logos {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2.5rem;
    font-size: clamp(0.7rem, 1.7vw, 0.95rem);
  }
}

@media (max-width: 30rem) {
  .gw-trusted { padding-block: 1.75rem; }
  .gw-trusted__logos { gap: 1.25rem 1.75rem; font-size: 0.62rem; }
}