/* Customer marks: a quiet, measured interlude before the closing invitation. */
.trusted-clients {
  margin: 0 var(--pad);
  padding: 29px 0 30px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.trusted-clients-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.trusted-clients-heading h2 { margin: 0; font: 300 11px/1.5 Supply, monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.trusted-clients-controls { display: flex; align-items: center; gap: 17px; }
.trusted-clients-controls[hidden], .trusted-clients-controls button[hidden], .trusted-clients-stage[hidden], .trusted-clients-grid[hidden] { display: none; }
.trusted-clients-controls button { appearance: none; background: none; color: var(--text-muted); border: 0; min-height: 44px; padding: 0 5px; font: 300 11px/1.4 Supply, monospace; cursor: pointer; }
.trusted-clients-controls button:hover { color: var(--page-text); }
.trusted-clients-controls button:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 3px; }
.trusted-clients-pause { display: inline-flex; align-items: center; gap: 8px; min-width: 70px; }
.trusted-pause-icon { width: 16px; font: 12px/1 sans-serif; }
.trusted-clients-expand { display: inline-flex; align-items: center; gap: 18px; }
.trusted-clients-expand span { font: 19px/1 sans-serif; }
.trusted-clients-stage { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); align-items: center; min-height: 108px; padding-top: 7px; gap: 28px; }
.trusted-client-slot { position: relative; height: 85px; min-width: 0; }
.trusted-client-layer { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 1.45s ease-in-out; }
.trusted-client-layer.is-current { opacity: .79; }
.client-logo { display: block; width: 100%; height: 64px; object-fit: contain; filter: brightness(0) invert(1); }
.client-logo--wide { max-width: 210px; }
.client-logo--medium { max-width: 150px; max-height: 57px; }
.client-logo--emblem { max-width: 100px; height: 70px; }
.client-logo--original { filter: none !important; }
.client-theme-pair { display: block; width: 220px; max-width: 100%; }
.client-theme-pair .client-logo { max-width: 220px; }
.client-logo--light { display: none; }
[data-theme="light"] .client-logo { filter: brightness(0); }
[data-theme="light"] .client-logo--dark { display: none; }
[data-theme="light"] .client-logo--light { display: block; }
.trusted-clients-grid { list-style: none; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0 28px; padding: 19px 0 0; margin: 0; }
.trusted-clients-grid li { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 124px; border-top: 1px solid var(--rule); }
.trusted-clients-grid .client-logo { opacity: .82; }
.trusted-clients.is-expanded .trusted-clients-stage { display: none; }
@media (max-width: 1100px) {
  .trusted-clients-stage { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
  .trusted-client-slot:nth-child(n+5) { display: none; }
  .trusted-clients-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0 24px; }
  .trusted-clients-grid [data-client="johns-hopkins"] { grid-column: span 2; }
}
@media (max-width: 760px) {
  .trusted-clients { margin: 0 24px; padding: 22px 0 25px; }
  .trusted-clients-heading { gap: 10px; align-items: center; }
  .trusted-clients-heading h2 { font-size: 10px; letter-spacing: .03em; }
  .trusted-clients-controls { gap: 8px; }
  .trusted-clients-controls button { font-size: 10px; padding: 0 4px; }
  .trusted-clients-pause { min-width: 44px; justify-content: center; }
  .trusted-pause-label { display: none; }
  .trusted-clients-expand { gap: 10px; }
  .trusted-clients-stage { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px; min-height: 105px; }
  .trusted-client-slot:nth-child(n+3) { display: none; }
  .trusted-client-slot { height: 79px; }
  .client-logo { height: 53px; }
  .client-logo--medium { max-width: 115px; max-height: 53px; }
  .client-logo--emblem { max-width: 74px; height: 63px; }
  .trusted-clients-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 22px; padding-top: 10px; }
  .trusted-clients-grid li { min-height: 106px; }
  /* Give the intricate university mark its specified legible width. */
  .trusted-clients-grid [data-client="johns-hopkins"] { grid-column: 1 / -1; }
  .trusted-clients-grid [data-client="johns-hopkins"] .client-theme-pair { width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .trusted-client-layer { transition: none; }
  .trusted-clients-stage { display: none !important; }
  .trusted-clients-pause, .trusted-clients-expand { display: none !important; }
  .trusted-clients-grid[hidden] { display: grid; }
}
/* The official Telemundo artwork includes generous built-in clear space. */
.trusted-clients img[src$="/telemundo.png"] { max-width: 116px; height: 112px; }
@media (max-width: 760px) {
  .trusted-clients-heading h2, .trusted-clients-controls button { font-size: 11px; }
  .trusted-clients img[src$="/telemundo.png"] { max-width: 95px; height: 92px; }
}

/* Exact supplied wordmarks, balanced with the other client identities. */
.trusted-clients .client-logo--commanders { max-width: 210px; height: 64px; }
.trusted-clients .client-logo--navy { max-width: 135px; height: 64px; max-height: 64px; }
/* The unmodified official worm has a square black canvas. This viewport
   shows its original artwork; screen blending lets the black field recede. */
.client-nasa-worm { position: relative; display: block; width: 150px; max-width: 100%; aspect-ratio: 895 / 253; overflow: hidden; mix-blend-mode: screen; }
.client-nasa-worm .client-logo { position: absolute; width: 167.597766%; max-width: none; height: auto; left: -33.96648%; top: -243.083%; filter: none; }
@media (max-width: 760px) {
  .trusted-clients .client-logo--commanders { max-width: 180px; height: 58px; }
  .trusted-clients .client-logo--navy { max-width: 110px; height: 58px; max-height: 58px; }
  .client-nasa-worm { width: 120px; }
}

/* Independent official health-organization lockups keep their full names. */
.trusted-clients .client-logo--health { width: 200px; max-width: 100%; height: auto; max-height: none; }
