/* =========================================================
   Section 2 — Selected Clients
   Header on the 12-col grid; two full-bleed marquee rows:
   logo cells (left) and service words (right). Scroll speeds them up.
   ========================================================= */

.clients{padding-block:clamp(72px,9vw,144px) clamp(56px,6vw,96px);border-top:1px solid var(--line);overflow:hidden}

.clients__head{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:16px;padding:0 var(--margin);margin-bottom:clamp(32px,4vw,64px);align-items:end}
.clients__idx{grid-column:1/-1;color:var(--acid)}
.clients__title{grid-column:1/-1;font-family:var(--f-display);font-weight:600;font-size:var(--t-xl);letter-spacing:-.04em;line-height:.92;text-transform:uppercase;text-wrap:balance}
.clients__meta{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;color:var(--mute-2);font-size:15px;max-width:42ch}
.clients__meta .label{color:var(--paper)}
@media (min-width:900px){
	.clients__idx{grid-column:1/span 2;align-self:start;padding-top:.6em}
	.clients__title{grid-column:3/span 6}
	.clients__meta{grid-column:9/span 4}
}
@media (min-width:768px) and (max-width:899px){
	.clients__title{grid-column:1/span 6}
}

/* marquee rows */
.clients__row{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.clients__row:last-of-type{border-bottom:1px solid var(--line)}
.clients__track{display:flex;width:max-content;will-change:transform}

/* logo cells */
.client{position:relative;flex:0 0 auto;width:clamp(200px,22vw,340px);height:clamp(128px,11.5vw,190px);display:grid;place-items:center;padding:28px;border-right:1px solid var(--line);transition:background .35s var(--expo),color .35s}
.client__n{position:absolute;left:12px;top:10px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--mute-2);transition:color .35s}
.client__logo{max-width:72%;max-height:56%;width:auto;height:auto;object-fit:contain;filter:brightness(0) invert(.95);transition:filter .35s}
.client__name{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2.1vw,34px);letter-spacing:-.04em;line-height:.95;text-transform:uppercase;text-align:center;text-wrap:balance}
.client:hover{background:var(--acid);color:var(--ink)}
.client:hover .client__n{color:var(--ink)}
.client:hover .client__logo{filter:brightness(0)}

/* service words */
.clients__row--type{padding-block:clamp(14px,1.4vw,24px)}
.svc-word{display:flex;align-items:center;flex:0 0 auto}
.svc-word a{font-family:var(--f-display);font-weight:700;font-size:clamp(44px,7.4vw,128px);letter-spacing:-.055em;line-height:.9;text-transform:uppercase;white-space:nowrap;transition:color .3s,-webkit-text-stroke-color .3s}
.svc-word:nth-child(even) a{color:transparent;-webkit-text-stroke:1.5px var(--paper)}
.svc-word a:hover,.svc-word a:focus-visible{color:var(--acid);-webkit-text-stroke-color:var(--acid)}
.svc-word__sep{font-family:var(--f-display);color:var(--acid);font-size:clamp(28px,4vw,64px);margin:0 .5em;line-height:1}

.clients__foot{display:flex;justify-content:space-between;align-items:baseline;gap:16px 32px;flex-wrap:wrap;padding:24px var(--margin) 0}
.clients__foot p{color:var(--mute-2);font-size:14px;max-width:62ch}
.lnk{font-family:var(--f-display);font-weight:500;font-size:17px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .5s var(--expo),color .3s}
.lnk:hover{background-size:0 1px;background-position:100% 100%;color:var(--acid)}

/* static fallback: no JS or reduced motion → wrap into a grid */
html:not(.js) .clients__track{flex-wrap:wrap;width:auto}
@media (prefers-reduced-motion:reduce){
	.clients__track{flex-wrap:wrap;width:auto}
	.client{border-bottom:1px solid var(--line)}
	.svc-word a{font-size:clamp(32px,5vw,72px)}
}