.clients{position:relative;isolation:isolate;min-height:100svh;scroll-margin-top:72px;background:var(--ink)}
.clients-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none}
.clients-scene{position:sticky;top:0;height:100vh;height:100dvh;isolation:isolate;overflow:hidden;opacity:var(--clients-bg,1)}
.clients-photo{position:absolute;inset:0;display:block}
.clients-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:65% 50%}
.clients-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,12,.82),rgba(8,10,12,.74) 55%,rgba(8,10,12,.74))}
.clients-stage{position:relative;display:grid;align-content:center;min-height:100svh;padding:112px var(--gutter) 56px}
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1280px;gap:clamp(28px,4vw,64px)}
.proof:focus-visible{outline:2px solid var(--bone);outline-offset:8px}
.proof figure{display:flex;flex-direction:column;gap:28px;align-items:flex-start;min-width:0;margin:0;padding:0}
.proof blockquote{font-size:clamp(16px,1.3vw,19px);line-height:1.5;letter-spacing:-.01em;text-wrap:pretty;color:var(--paper)}
.proof figcaption{display:grid;gap:10px;justify-items:start;margin-top:auto}
.proof cite{font-style:normal;font-family:var(--disp);font-weight:500;font-size:14px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--bone)}
.review-stars{display:block;width:100px;height:17px;fill:var(--star)}
.clients.is-pinned{height:400vh;height:400svh;min-height:0;scroll-margin-top:0}
.is-pinned .clients-stage{position:sticky;top:0;height:100vh;height:100dvh;min-height:0}
@media(max-width:767px){
  .clients-stage{padding:100px 24px 64px}
  .proof{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78vw,360px);gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--muted) transparent;padding:0 0 24px}
  .proof figure{gap:24px;scroll-snap-align:start}
  .is-pinned .clients-stage{position:relative;height:auto;min-height:100svh}
  .proof blockquote{font-size:16px;line-height:1.55}
  .proof figcaption{gap:8px}
  .clients-scene::after{background:rgba(8,10,12,.76)}
}
@media(max-height:500px){
  .clients-stage{padding-top:92px;padding-bottom:32px}
  .proof blockquote{font-size:16px;line-height:1.45}
}
@media(prefers-reduced-motion:reduce){
  .clients.is-pinned{height:auto}
  .is-pinned .clients-stage{position:relative;height:auto;min-height:100svh}
  .clients-scene{opacity:1}
}
