/* ---- clients ------------------------------------------------------------
   Credibility strip, directly under the hero and never inside it.

   Marks are prepared as flat bone silhouettes on transparency, so they sit
   straight on the page with no plate behind them. They are also normalised by
   shape during prep (wide wordmarks held back, stacked marks allowed to grow),
   which is why there is no per-logo sizing here. */

.clients {
  border-block: 1px solid var(--line-soft);
  padding-block: clamp(28px, 4vw, 44px);
}

.clients__in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
}

.clients__stat {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  flex: none;
}
.clients__fig {
  font-family: var(--mono);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  font-weight: 500;
  color: var(--pop);
  line-height: 1;
  letter-spacing: -0.02em;
}
.clients__stat-label {
  font-size: var(--fs-xs);
  color: var(--bone-soft);
  max-width: 12ch;
  line-height: 1.35;
}

.clients__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(10px, 1.2vw, 18px);
}
.clients__logos li { flex: none; }
/* Sized by width, because every mark is centred on one shared transparent
   canvas. Sizing by height instead would collapse the stacked marks: their
   two lines of lettering would have to fit the same height Conrad uses for
   one, and the wordmarks would go illegible. */
.clients__logos img {
  width: clamp(124px, 12.6vw, 182px);
  height: auto;
  opacity: 0.6;
  transition: opacity var(--dur-1) var(--ease);
}
.clients__logos li:hover img { opacity: 0.95; }

@media (max-width: 860px) {
  .clients__in { grid-template-columns: 1fr; gap: 26px; }

  /* Five marks wrapping as flex left 226px of the last row empty, which read
     as an accident rather than a layout. A two-column grid with the fifth
     spanning both columns gives 2 / 2 / 1-centred, and the wider cells let
     each mark grow from 124px to something legible. */
  .clients__logos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 4vw, 26px);
    justify-items: center;
    align-items: center;
  }
  .clients__logos li:last-child { grid-column: 1 / -1; }
  .clients__logos img { width: 100%; max-width: 178px; }

  /* 12ch forced "projects delivered in the UAE" onto three cramped lines. */
  .clients__stat-label { max-width: 22ch; }
}