.clients-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;background:var(--surface);padding-block:88px}
.clients-intro h1{font-size:var(--display);max-width:10ch}
.clients-intro>div{max-width:40ch}
.clients-intro p{font-size:18px}
.clients-intro .text-link{margin-top:22px}
.client-section{padding-block:72px 88px}
.client-heading{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-bottom:38px}
.client-heading h2{font-size:var(--title)}
.client-controls{display:flex;gap:12px;flex-wrap:wrap}
.client-controls[hidden],.client-controls button[hidden]{display:none}
.client-controls button{font:inherit;font-size:var(--small);border:0;background:var(--surface);color:var(--ink);min-height:48px;padding:12px 20px}
.client-controls button:active{transform:scale(.98)}
.client-controls button[aria-pressed=true]{background:var(--ink);color:var(--light)}
.client-directory{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0}
.client-row,.client-track{display:contents}
.client-logo{list-style:none;display:flex;align-items:center;justify-content:center;min-width:0;height:150px;padding:24px;background:#fff}
.client-logo img{width:100%;height:auto;max-width:220px;max-height:90px;object-fit:contain}
.client-logo[data-copy]{display:none}
.client-directory[data-layout=rows]{display:block;overflow:hidden}
[data-layout=rows] .client-row{display:block;overflow:hidden}
[data-layout=rows] .client-row+.client-row{margin-top:18px}
[data-layout=rows] .client-track{display:flex;width:max-content;margin:0;padding:0;animation:client-left 70s linear infinite}
[data-layout=rows] .client-row:nth-child(2) .client-track{animation:client-right 64s linear infinite}
[data-layout=rows] .client-logo{width:260px;flex:none;display:flex}
[data-layout=rows] .client-logo img{filter:grayscale(1);opacity:.6;transition:filter 240ms,opacity 240ms,transform 240ms}
[data-layout=rows][data-paused=true] .client-track{animation-play-state:paused}
.client-close{display:flex;align-items:center;justify-content:space-between;gap:40px;background:var(--accent);color:var(--light);padding-block:64px}
.client-close h2{max-width:14ch}
.client-close p{max-width:35ch;margin-bottom:24px}
.clients-preview{padding-block:88px;background:var(--surface)}
.clients-preview .section-heading{margin-bottom:34px}
.clients-preview .section-heading h2{max-width:12ch}
.clients-preview .client-directory{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.clients-preview .client-logo{height:132px;padding:18px}
.clients-preview .client-logo img{max-height:70px}
@keyframes client-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes client-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(hover:hover) and (pointer:fine){[data-layout=rows] .client-row:hover .client-track{animation-play-state:paused}[data-layout=rows] .client-logo:hover img{filter:none;opacity:1;transform:scale(1.06)}.client-controls button:hover{background:var(--ink);color:var(--light)}}
@media(max-width:1400px){.brand span{display:none}.site-header nav{gap:18px}}
@media(max-width:900px){.clients-intro{align-items:flex-start;gap:32px;padding-block:64px}.clients-intro h1{font-size:64px}.clients-intro>div{max-width:31ch}.client-heading{align-items:flex-start;flex-direction:column}.client-directory{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.client-logo{padding:20px;height:130px}.clients-preview .client-directory{grid-template-columns:repeat(3,minmax(0,1fr))}.client-close{gap:32px}}
@media(max-width:600px){.clients-intro{display:block;padding-block:48px}.clients-intro h1{font-size:52px;max-width:10ch}.clients-intro>div{margin-top:26px;max-width:100%}.client-section{padding-block:48px 56px}.client-heading{gap:24px;margin-bottom:26px}.client-heading h2{font-size:27px}.client-controls{gap:8px}.client-controls button{padding-inline:14px;font-size:14px}.client-directory{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.client-logo{height:112px;padding:16px}.client-logo img{max-height:70px}[data-layout=rows] .client-logo{width:190px;height:112px;padding:20px}.client-close{display:block;padding-block:48px}.client-close>div{margin-top:28px}.clients-preview{padding-block:56px}.clients-preview .client-directory{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.clients-preview .client-logo{height:110px;padding:16px}}
@media(prefers-reduced-motion:reduce){.client-track{animation:none!important}.client-logo img{transition:none!important}}