/* 03 TRUSTED BY — the client wall.
   Laid out after the client's own reference: a centred, tracked heading
   with a short accent rule under it, then their 32 marks in an even grid
   of quiet white tiles on a light ground. Static, normal flow — a trust
   bar reads more credible calm than performed, so nothing here animates.

   The marks are cut straight from that reference image (assets/logo/
   trust/), which makes them exactly the lock-ups the client asked for but
   caps them at their size there: ~80–140px wide. Each <img> therefore
   carries its true pixel size and is only ever shown at that size or
   smaller (object-fit: scale-down), never stretched past it. */

.trust {
  position: relative;
  padding: clamp(64px, 11svh, 120px) var(--pad);
  background: #F5F7F6;
  border-top: 1px solid rgb(11 46 42 / .06);
}

.trust__inner { max-width: min(1260px, 100%); margin-inline: auto; }

/* Tracked capitals and a light weight, as the reference sets it: a quiet
   caption over the wall rather than another headline competing with it. */
.trust__head {
  text-align: center;
  font-family: var(--body); font-weight: 400;
  font-size: clamp(14px, 1.35vw, 19px);
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-2);
  padding-left: .24em;   /* balances the trailing letter-spacing */
}
.trust__head::after {
  content: ""; display: block;
  width: 72px; height: 2px; margin: 16px auto 0;
  background: var(--accent);
}

.trust__grid {
  list-style: none;
  padding: 0;   /* no default <ul> indent: the grid spans the same width as the heading above */
  margin-top: clamp(32px, 5svh, 52px);
  display: grid; gap: clamp(6px, .7vw, 10px);
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
/* Eight across holds down to a small tablet (tiles ~95px, about the marks'
   own size). Four sooner than that turned 1024px into 220px tiles around
   130px marks — a wall twice as tall with nothing gained. */
@media (max-width: 820px) { .trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Every tile is the same box whatever its mark. The image is laid over
   the tile rather than sized by it: left in flow, a tall mark (IIT Madras,
   Greenlam, Harting) pushed its own tile taller than the rest once tiles
   got narrow. object-fit: scale-down shrinks a mark to fit but never
   enlarges one past its real pixels — these are small source images, and
   stretching them is exactly what would make them look soft. */
/* Each tile's own slice of the wall's progress: --d (row + column, set in
   the markup) delays it along the diagonal, so the wall assembles from the
   top-left corner. The var(--r, 1) / var(--d, 0) defaults land every tile
   at its finished state, which is what renders with JS off. */
.trust__tile {
  --t: clamp(0, (var(--r, 1) - var(--d, 0) * 0.055) * 3.2, 1);
  opacity: var(--t);
  transform: translate3d(0, calc((1 - var(--t)) * 14px), 0) scale(calc(.97 + var(--t) * .03));
  position: relative;
  aspect-ratio: 1.27;
  background: var(--print);
  border: 1px solid rgb(11 46 42 / .08);
  border-radius: 2px;
}
.trust__tile img {
  position: absolute; inset: 9%;
  width: 82%; height: 82%;
  object-fit: scale-down;
}

/* A quiet lift, not a colour trick: the marks are the client's own and stay
   exactly as they are. Pointer-fine only, so a tap on a phone can't leave a
   tile stuck raised. */
.trust__tile { transition: box-shadow .25s var(--ease), border-color .25s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .trust__tile:hover {
    border-color: rgba(var(--accent-rgb), .5);
    box-shadow: 0 10px 22px -12px rgb(11 46 42 / .3);
  }
}

/* No wave, no lift — every tile sits at its finished state. */
@media (prefers-reduced-motion: reduce) {
  .trust__tile { opacity: 1 !important; transform: none !important; }
}

/* A phone gets four across too: 32 divides evenly, so no orphan row, and
   eight rows of four keeps the wall one thumb-scroll tall. */
@media (max-width: 560px) {
  .trust__grid { gap: 5px; }
  .trust__tile img { inset: 8%; width: 84%; height: 84%; }
}