/* MAJIFO Toolkit, clients: two rows of logo tiles (built by clients.js). Grey at rest, white on hover; faded edges. */
.mj-cl__sprite{position:absolute;width:0;height:0;overflow:hidden}
.mj-cl{--tw:clamp(150px,15vw,230px);position:relative;display:flex;flex-direction:column;gap:clamp(16px,2vw,32px);margin:0 calc(var(--space-page-margin,48px) * -1);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mj-cl__row{position:relative;height:calc(var(--tw) / 2)}
.mj-cl__tile{position:absolute;top:0;left:0;width:var(--tw);height:calc(var(--tw) / 2);color:#6B6B6B;transition:color 400ms cubic-bezier(.76,0,.24,1);will-change:transform}
.mj-cl__tile:hover{color:#F5F5F5}
.mj-cl__tile svg{position:absolute;inset:14% 10%;width:80%;height:72%;overflow:visible}
.mj-cl__blocks{position:absolute;inset:0;display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(8,1fr);pointer-events:none}
.mj-cl__blocks i{background:#0A0A0A;opacity:0;transition:opacity 160ms linear var(--d,0ms)}
.mj-cl__tile.is-covered .mj-cl__blocks i{opacity:1}
/* phones: bigger logos (Majid, 2026-10-24): tiles about half the screen wide, the logo fills more of its tile */
@media (max-width:767px){ .mj-cl{--tw:clamp(180px,50vw,230px)} .mj-cl__tile svg{inset:10% 6%;width:88%;height:80%} }
@media (prefers-reduced-motion:reduce){ .mj-cl__tile,.mj-cl__blocks i{transition:none} }