.about-clients{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.clients-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:10%;align-items:end;margin-bottom:56px}
.clients-intro h2{font:300 clamp(40px,4.3vw,64px)/1.08 Display,Arial,sans-serif;letter-spacing:-.035em;margin:0}
.clients-intro>p{max-width:370px;color:var(--muted);font-size:18px;margin:0 0 4px}
.client-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.client-grid>li{min-width:0;border-bottom:1px solid var(--line);padding:40px 24px 32px}
.client-grid figure{margin:0;text-align:center}
.client-logo{height:88px;display:flex;justify-content:center;align-items:center;margin-bottom:24px}
.client-logo img{display:block;width:auto;height:auto;max-width:min(100%,146px);max-height:88px;object-fit:contain}
.client-grid figcaption{font-size:13px;line-height:1.5;color:var(--muted);max-width:230px;min-height:3em;margin:0 auto;overflow-wrap:anywhere}
.clients-work-link{display:inline-flex;gap:40px;margin-top:34px}
@media(max-width:1000px){.client-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.clients-intro{gap:6%}.client-grid>li{padding-left:16px;padding-right:16px}}
@media(max-width:600px){.clients-intro{display:block;margin-bottom:35px}.clients-intro h2{font-size:42px}.clients-intro>p{font-size:16px;margin-top:25px;max-width:330px}.client-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.client-grid>li{padding:26px 12px 20px}.client-logo{height:64px;margin-bottom:18px}.client-logo img{max-height:64px;max-width:min(100%,112px)}.client-grid figcaption{font-size:12px;min-height:4.5em}}

/* Default is the complete static list; motion respects selection, visibility and reduced-motion preferences. */
.client-logo img{filter:grayscale(1)}
.ribbon-viewport{overflow:hidden}
.ribbon-enhanced .client-track{display:flex;width:max-content;animation:client-drift 110s linear infinite}
.ribbon-enhanced .client-grid{display:flex;flex:none;width:max-content;border:0;gap:3rem;padding:2rem 1.5rem}
.ribbon-enhanced .client-grid>li{width:160px;flex:none;border:0;padding:0}
.ribbon-enhanced .client-logo{height:88px;margin-bottom:1.25rem}
.ribbon-enhanced .client-logo img{max-width:146px;max-height:88px}
.ribbon-enhanced .client-grid figcaption{max-width:160px;font-size:.8125rem}
.ribbon-enhanced .ribbon-viewport{mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.ribbon-enhanced.is-paused .client-track,.ribbon-enhanced .ribbon-viewport:hover .client-track{animation-play-state:paused}
@keyframes client-drift{to{transform:translateX(-50%)}}
@media(max-width:600px){
 .ribbon-enhanced .client-grid{gap:2rem;padding-inline:1rem}
 .ribbon-enhanced .client-grid>li{width:132px}
 .ribbon-enhanced .client-logo{height:64px}
 .ribbon-enhanced .client-logo img{max-width:112px;max-height:64px}
}
@media(prefers-reduced-motion:reduce){
 .ribbon-enhanced .client-track{animation:none;display:block;width:auto;transform:none}
 .ribbon-enhanced .client-grid{display:grid;width:auto;gap:1.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}
 .ribbon-enhanced .client-grid>li{width:auto}
 [data-ribbon-copy]{display:none}
 .ribbon-enhanced .ribbon-viewport{mask-image:none}
}
@media print{.client-track{animation:none!important;transform:none!important}[data-ribbon-copy]{display:none!important}.ribbon-enhanced .client-track{width:auto;display:block}.ribbon-enhanced .client-grid{width:auto;display:grid;grid-template-columns:repeat(4,1fr)}.ribbon-viewport{overflow:visible!important;mask-image:none!important}}

/* Names appear only when a mark is explored; space is reserved to prevent jumps. */
.client-logo{width:100%;padding:0;border:0;background:transparent;cursor:pointer;font:inherit}
.client-logo img{transition:filter .32s ease,transform .4s cubic-bezier(.22,.61,.36,1);transform-origin:center}
.client-grid figcaption{opacity:0;transform:translateY(6px);transition:opacity .28s ease,transform .35s ease;pointer-events:none}
.client-grid figure.is-selected img,.client-grid figure:has(.client-logo:focus-visible) img{filter:grayscale(0);transform:scale(1.08)}
.client-grid figure.is-selected figcaption,.client-grid figure:has(.client-logo:focus-visible) figcaption{opacity:1;transform:translateY(0)}
@media(hover:hover) and (pointer:fine){
 .client-grid figure:hover img{filter:grayscale(0);transform:scale(1.08)}
 .client-grid figure:hover figcaption{opacity:1;transform:translateY(0)}
}
@media(hover:none){.ribbon-enhanced .ribbon-viewport:hover .client-track{animation-play-state:running}.ribbon-enhanced.is-paused .client-track{animation-play-state:paused}}
.client-ribbon.is-keyboard .client-track{display:block;width:auto;animation:none;transform:none}
.client-ribbon.is-keyboard .client-grid{display:grid;width:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.client-ribbon.is-keyboard .client-grid>li{width:auto}
.client-ribbon.is-keyboard [data-ribbon-copy]{display:none}
.client-ribbon.is-keyboard .ribbon-viewport{mask-image:none}
@media(max-width:600px){.client-ribbon.is-keyboard .client-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.client-logo img,.client-grid figcaption{transition:none}.client-grid figure img{transform:none!important}}
@media print{.client-grid figcaption{opacity:1;transform:none}}