﻿/* Bright, accessible one-line client marquee. Each card links directly to its client. */
#clist.clients{display:block;position:relative;width:100%;max-width:none;margin:42px auto 0;overflow:hidden;text-align:left;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
#clist .client-track{display:flex;width:max-content;animation:client-marquee 34s linear infinite;will-change:transform}
#clist:hover .client-track,#clist:focus-within .client-track{animation-play-state:paused}
#clist .client-set{display:flex;flex:none;align-items:stretch;gap:18px;padding:6px 18px 16px 0}
#clist .client-logo{--client-accent:#397bfa;--client-tint:#edf4ff;position:relative;width:252px;min-height:126px;flex:none;display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:14px;row-gap:7px;padding:20px;border:1px solid color-mix(in srgb,var(--client-accent) 20%,white);border-radius:21px;background:linear-gradient(145deg,#fff 15%,var(--client-tint));color:var(--ink);box-shadow:0 12px 28px rgba(28,54,94,.09);text-decoration:none;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
#clist .client-logo:nth-child(5n+2){--client-accent:#8b5cf6;--client-tint:#f4efff}
#clist .client-logo:nth-child(5n+3){--client-accent:#08a7b8;--client-tint:#eafaff}
#clist .client-logo:nth-child(5n+4){--client-accent:#f07832;--client-tint:#fff3e9}
#clist .client-logo:nth-child(5n+5){--client-accent:#0ca878;--client-tint:#eafaf3}
#clist .client-logo:hover{transform:translateY(-5px);border-color:var(--client-accent);box-shadow:0 17px 34px rgba(28,54,94,.15)}
#clist .client-logo:focus-visible{outline:3px solid var(--client-accent);outline-offset:4px}
#clist .client-mark{grid-row:1/3;grid-column:1;width:64px;height:64px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.72);border-radius:18px;background:linear-gradient(145deg,var(--client-accent),color-mix(in srgb,var(--client-accent),#162e69 28%));color:#fff;font-size:1.05rem;font-weight:850;letter-spacing:-.05em;box-shadow:0 7px 16px color-mix(in srgb,var(--client-accent) 25%,transparent)}
#clist .client-logo img{z-index:1;grid-row:1/3;grid-column:1;width:64px;height:64px;padding:7px;object-fit:contain;border-radius:18px;background:#fff}
#clist .client-logo.wordmark-only img{display:none}
#clist .client-name{grid-row:1;grid-column:2;align-self:end;padding-right:14px;font-size:.96rem;font-weight:800;line-height:1.25;letter-spacing:-.025em}
#clist .client-type{grid-row:2;grid-column:2;align-self:start;width:max-content;max-width:100%;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--client-accent) 10%,white);color:color-mix(in srgb,var(--client-accent) 78%,#17233a);font-size:.68rem;font-weight:700;line-height:1.25}
#clist .client-open{position:absolute;top:16px;right:17px;color:var(--client-accent);font-size:1rem;font-weight:800;transition:transform .2s ease}
#clist .client-logo:hover .client-open{transform:translate(2px,-2px)}
@keyframes client-marquee{to{transform:translateX(-50%)}}
@media(max-width:600px){#clist.clients{margin-top:30px}#clist .client-track{animation-duration:42s}#clist .client-set{gap:12px;padding-right:12px}#clist .client-logo{width:226px;min-height:112px;padding:16px;grid-template-columns:56px minmax(0,1fr);column-gap:12px}#clist .client-mark,#clist .client-logo img{width:56px;height:56px;border-radius:16px}}
@media(prefers-reduced-motion:reduce){#clist{overflow-x:auto;mask-image:none;-webkit-mask-image:none}#clist .client-track{animation:none;will-change:auto}#clist .client-set[aria-hidden="true"]{display:none}#clist .client-logo,#clist .client-open{transition:none}}
