/* TrustUs — the registrations row ---------------------------------------------
   The institutions the firm is registered with. Shared by the homepage and
   About, so the two cannot show a different set. The section styles only its
   own contents: each page passes in its own wrap element, because the two
   pages do not share a measure. Pairs with inc/section-credentials.php. */

.tu-creds {
  padding-block: clamp(var(--sp-7), 7vw, var(--sp-10));
  text-align: center;
  /* No ground of its own. A tint here — flat or faded — only ever put an edge
     across the page: the section is four marks on a line, and it reads as part
     of the page rather than as a band of its own. On About it never had one
     either; the wrapper there carries one gradient across several bands. */
}
.tu-creds h2 {
  color: var(--ink);
  font-size: clamp(24px, 2.4vw, 33px);
  font-weight: 800;
  margin: 0 0 var(--sp-3);
}
.tu-creds__body {
  max-width: 60ch; margin: 0 auto clamp(var(--sp-7), 5vw, var(--sp-8));
  color: var(--muted);
}

.tu-creds__row {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--sp-5), 3vw, var(--sp-7));
  align-items: start;
}
.tu-creds__row li { display: grid; justify-items: center; gap: var(--sp-4); }
/* The logos carry the brand red in the files themselves rather than through a
   filter. A filter could not do it: the ministry's mark is a filled seal with
   white detail on top, and every route that tints a whole image — mask,
   brightness(0), a hue chain — takes that detail with it. Recolouring each
   source keeps the seal's emblem, the crest's shapes and the drawing's line
   weight intact. */
.tu-creds__mark {
  display: block;
  width: 150px; height: 70px;
  object-fit: contain;
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease;
}
.tu-creds__row li:hover .tu-creds__mark { opacity: 1; transform: translateY(-2px); }

.tu-creds__name {
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: 1.6;
  max-width: 22ch;
}

@media (max-width: 900px) {
  .tu-creds__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(var(--sp-6), 6vw, var(--sp-7)); }
}
@media (max-width: 560px) {
  .tu-creds__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}