/* Client history is distinct from the fictional hiring story. */
.page{display:flex;flex-direction:column;min-height:100svh}
body:not(.composed-home) .hero{flex:1;min-height:0;margin:0;padding:24px 4.4vw 30px}
.client-strip{flex:none;width:100%;padding:18px 0 12px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);outline-offset:-4px;--client-gap:64px;--client-logo-scale:1}
.client-track{background:var(--concept-accent);--on-text:var(--concept-accent-ink);--on-muted:var(--concept-accent-ink);--on-line:currentColor;--on-accent:var(--concept-accent-ink);color:var(--concept-accent-ink);display:flex;width:max-content;animation:client-drift var(--client-duration,640s) linear infinite;animation-play-state:paused}
.client-strip.is-running .client-track{animation-play-state:running}
.client-list{display:flex;flex:none;list-style:none;padding:0;margin:0;width:max-content}
.client-item{width:max-content;min-width:136px;max-width:230px;flex:none;display:flex;flex-direction:column;align-items:center;padding:0 24px;text-align:center}
.client-lockup{height:43px;display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:182px}
@keyframes client-drift{to{transform:translateX(-50%)}}
@media(min-width:1000px){body:not(.composed-home) .hero h1{font-size:clamp(62px,11.6svh,126px);margin-bottom:20px}body:not(.composed-home) .hero .support{font-size:clamp(19px,2.9svh,27px);margin:25px auto 24px;max-width:980px}body:not(.composed-home) .hero .button{min-height:56px;font-size:20px}body:not(.composed-home) .hero .actions{gap:4px}body:not(.composed-home) .hero .secondary{padding:15px 29px}body:not(.composed-home) .hero .primary{padding:15px 29px}}
@media(max-width:999px){body:not(.composed-home) .hero{padding:30px 5vw}.client-item{padding:0 22px}}
@media(max-width:700px){body:not(.composed-home) .hero{padding:30px 30px 22px;min-height:calc(100svh - 226px)}body:not(.composed-home) .hero .support{margin:24px auto}.client-strip{padding:10px 0 6px}.client-item{min-width:120px;max-width:205px;padding:0 20px}.client-lockup{height:35px}body:not(.composed-home) .hero .primary{font-size:16px;padding:15px 21px}}
@media(max-width:380px){body:not(.composed-home) .hero{padding-left:20px;padding-right:20px}body:not(.composed-home) .hero .primary{font-size:14px;padding:15px 17px}}
@media(prefers-reduced-motion:reduce){.client-strip{overflow-x:auto;mask-image:none;-webkit-mask-image:none}.client-track{animation:none}.client-list[aria-hidden=true]{display:none}}
.client-track{animation-name:client-drift-centered;animation-delay:0s;visibility:hidden}
.client-strip.is-ready .client-track{visibility:visible}
@keyframes client-drift-centered{from{transform:translateX(var(--client-start,0px))}to{transform:translateX(calc(var(--client-start,0px) - var(--client-width,0px)))}}
@media(prefers-reduced-motion:reduce){.client-track{visibility:visible;transform:none !important}.client-list[aria-hidden="true"]{display:none}}

.client-track{animation-fill-mode:both;transform:translateX(var(--client-start,0px))}

/* Keep descenders clear of the next line at every viewport size. */
body:not(.composed-home) .hero h1{line-height:1.08}

/* Content-sized logos keep the visible gaps equal, including the loop seam. */
.client-strip .client-track{background:transparent;filter:none;mix-blend-mode:normal;color:#fff}
.client-strip .client-list{gap:var(--client-gap);padding-inline-end:var(--client-gap)}
.client-strip .client-curated{width:auto;min-width:0;max-width:none;padding:0;box-sizing:border-box;justify-content:center}
.client-curated .client-lockup{height:64px;width:max-content;max-width:none;gap:calc(10px * var(--client-logo-scale))}
.client-curated .client-lockup img{display:block;width:calc(var(--logo-width) * var(--client-logo-scale));height:calc(var(--logo-height) * var(--client-logo-scale));max-width:none;max-height:none;object-fit:contain;filter:brightness(0) invert(1);mix-blend-mode:normal;flex-shrink:0}
.client-curated-name{color:#fff;font-size:calc(28px * var(--client-logo-scale));font-weight:600;line-height:1.05;letter-spacing:0;white-space:nowrap;margin-inline-end:calc(-1 * var(--logo-label-trim,0px) * var(--client-logo-scale))}
@media(max-width:700px){.client-strip{--client-gap:40px;--client-logo-scale:.88}.client-curated .client-lockup{height:56px}}

/* With reduced motion, the client logos sit in a still, centered grid instead of a scrolling row. */
@media(prefers-reduced-motion:reduce){
 .client-strip{overflow:visible;--client-gap:40px;--client-logo-scale:.8}
 .client-strip .client-track{width:100%}
 .client-strip .client-list{flex:1 1 auto;flex-wrap:wrap;justify-content:center;width:auto;row-gap:8px;padding-inline:4%}
 .client-curated .client-lockup{height:52px}
}
@media(prefers-reduced-motion:reduce) and (max-width:700px){
 .client-strip{--client-gap:22px;--client-logo-scale:.55}
 .client-curated .client-lockup{height:34px}
}