/* Works: client logos only. Five columns, no cells, no borders, optically sized by --w
   (equal visual area; a 4.5:1 wordmark is 1). Logos and text blend like the rest of the site. */
.works-page .service-content { z-index:auto; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.works-clients { padding-top:clamp(120px,14vw,220px); }
.client-logos { grid-column:1 / -1; --logo-base:min(9.6vw,190px); list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); column-gap:clamp(14px,1.4vw,24px); mix-blend-mode:difference; } /* One blend layer for the whole grid, not one per logo. */
.client-logos > li { margin:0; display:grid; place-items:center; aspect-ratio:16 / 10; }
.client-logos img { display:block; width:calc(var(--w) * var(--logo-base)); max-width:88%; height:auto; filter:url(#logo-ink); -webkit-user-select:none; user-select:none; -webkit-user-drag:none; }
.client-logos img.is-baked { filter:none; } /* works-logos.js baked the ink look into the bitmap */
.client-logos-end { grid-column:1 / -1; height:1px; }
@media (width < 768px) {
  .client-logos { --logo-base:21vw; grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.client-logos.is-pending > li:not(.is-on) { visibility:hidden; } /* works-logos.js reveal */
html[data-view="llm"] .client-logos.is-pending > li { visibility:visible; }