/* ============================================
   OSBORN ASSOCIATES - Trusted By
   Client logos and accreditation badges
   Shared across homepage and about page
   ============================================ */

.trust { overflow: hidden; }

.trust__logos {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(30px, 4vw, 52px) clamp(34px, 5vw, 72px);
}
.trust__logo {
  flex: 0 0 auto;
  width: clamp(112px, 13vw, 150px); height: clamp(46px, 5vw, 60px);
  display: flex; align-items: center; justify-content: center;
}
.trust__logo img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  filter: brightness(0) invert(1); opacity: 0.72;
  transition: opacity var(--dur-slow) var(--ease);
}
.trust__logo:hover img { opacity: 1; }
.trust__logo--invert img { filter: brightness(0) invert(1); }
/* logo-02 still has an opaque baked-in background, so a white-out fills it to a solid
   block - show it as legible monochrome instead. The real fix is to re-export it with a
   transparent background (as was done for logo-03). */
.trust__logo img[src*="logo-client-02"] { filter: grayscale(100%) contrast(1.05); opacity: 0.85; }
.trust__logo:hover img[src*="logo-client-02"] { opacity: 1; }

/* accreditation badges */
.trust__accreditations {
  max-width: 1100px; margin: clamp(40px, 5vw, 64px) auto 0;
  padding-top: clamp(30px, 3.6vw, 44px); border-top: 1px solid rgba(255,255,255,0.09);
}
.trust__accred-row { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 52px); flex-wrap: wrap; }
.trust__accred-label { font-size: 0.5625rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); opacity: 0.4; margin-right: clamp(4px, 1vw, 12px); white-space: nowrap; }
.trust__accred-item { display: flex; align-items: center; justify-content: center; }
/* Accreditation badges carry tonal detail (not transparent cut-outs), so a solid
   white-out erases them. Show them as legible monochrome, brought up from faint. */
.trust__accred-item img { max-height: clamp(30px, 3.8vw, 44px); width: auto; object-fit: contain; filter: grayscale(100%) contrast(1.05); opacity: 0.85; transition: all var(--dur-slow) var(--ease); }
.trust__accred-item:hover img { opacity: 1; }

@media (max-width: 600px) {
  .trust__logos { gap: clamp(22px, 5vw, 30px) clamp(22px, 7vw, 40px); }
  .trust__logo { width: clamp(74px, 25vw, 94px); height: clamp(38px, 11vw, 48px); }
  .trust__logo img { opacity: 0.82; }
  .trust__accred-label { width: 100%; text-align: center; margin-right: 0; margin-bottom: 8px; }
  .trust__accred-row { gap: clamp(20px, 6vw, 36px); }
}