/* Home: client selection grid. All rules are scoped to this section. */
.clients-grid { display:grid; grid-template-columns:1fr 1fr 2fr; min-height:650px; border:1px solid #222; background:#fff; color:#171717; scroll-margin-top:130px; }
.client-identity { display:grid; grid-template-rows:1fr 1fr; min-width:0; border-right:1px solid #222; }
.client-heading-block { padding:26px; display:flex; flex-direction:column; justify-content:space-between; gap:70px; }
.client-heading-block h2 { display:flex; align-items:center; gap:12px; font:500 16px var(--font-mono); text-transform:uppercase; }
.client-heading-block h2 span { font-size:12px; }
.client-caption { display:flex; justify-content:space-between; gap:12px; font:11px var(--font-mono); text-transform:uppercase; }
#client-counter { white-space:nowrap; color:#777; }
.client-logo-stage { position:relative; overflow:hidden; min-height:260px; border-top:1px solid #222; }
.client-logo-panel { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:36px; visibility:hidden; transform:translateY(-100%); transition:transform 420ms cubic-bezier(.22,1,.36,1), visibility 420ms; }
.client-logo-panel.is-active { transform:translateY(0); visibility:visible; }
.client-logo-panel img { width:100%; height:140px; object-fit:contain; filter:brightness(0) invert(1); }
.client-description { padding:28px; border-right:1px solid #222; display:flex; flex-direction:column; gap:36px; }
.client-eyebrow { font:10px/1.7 var(--font-mono); color:#666; text-transform:uppercase; }
.client-copy-panel:not([hidden]) { display:flex; flex:1; flex-direction:column; align-items:flex-start; animation:client-copy-enter 260ms ease-out; }
.client-copy-panel[hidden] { display:none; }
.client-copy-panel h3 { font:500 14px var(--font-mono); margin-bottom:20px; }
.client-copy-panel p { font:400 clamp(18px,1.6vw,24px)/1.5 var(--font-body); letter-spacing:-.035em; margin-bottom:36px; }
.client-case-link { margin-top:auto; padding:15px 18px; background:#171717; color:#fff; text-decoration:none; text-transform:uppercase; font:11px var(--font-mono); }
.client-case-link:hover { background:rgb(var(--color-magenta)); }
.client-names { display:grid; grid-template-rows:repeat(5,1fr); min-width:0; }
.client-name-row { position:relative; isolation:isolate; overflow:hidden; width:100%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:14px; padding:26px 30px; border:0; border-bottom:1px solid #222; background:transparent; color:#171717; text-align:left; cursor:pointer; }
.client-name-row:last-child { border-bottom:0; }
.client-name-row.is-selected { background:#f6f3f4; }
.client-name-row::before { content:""; position:absolute; inset:0; z-index:-1; background:rgb(var(--color-magenta)); transform:translateX(-101%); transition:transform 400ms cubic-bezier(.22,1,.36,1); }
.client-name-row:hover::before,.client-name-row:focus-visible::before { transform:translateX(0); }
.client-name { font:500 clamp(26px,3vw,48px)/1.12 var(--font-display); letter-spacing:-.055em; transition:transform 400ms cubic-bezier(.22,1,.36,1); }
.client-name-row:hover .client-name,.client-name-row:focus-visible .client-name { transform:translateX(6px); }
.client-category { font:11px/1.5 var(--font-mono); text-transform:uppercase; }
.client-name-row:focus-visible { outline:3px solid #171717; outline-offset:-5px; }
@keyframes client-copy-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:950px) { .clients-grid { grid-template-columns:1fr 1fr; } .client-identity { border-bottom:1px solid #222; } .client-description { border-right:0; border-bottom:1px solid #222; min-height:450px; } .client-names { grid-column:1/-1; } .client-name-row { min-height:110px; } .client-name { font-size:36px; } }
@media(max-width:520px) { .clients-grid { grid-template-columns:1fr; } .client-identity { grid-template-columns:1fr 1fr; grid-template-rows:auto; border-right:0; } .client-heading-block { padding:18px 14px; gap:50px; } .client-caption { flex-direction:column; font-size:10px; } .client-logo-stage { border-top:0; border-left:1px solid #222; min-height:190px; } .client-logo-panel { padding:20px; } .client-description { padding:24px 18px; min-height:300px; gap:20px; } .client-copy-panel p { font-size:19px; } .client-name-row { padding:24px 18px; } .client-name { font-size:32px; } .client-category { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .client-logo-panel,.client-name-row::before,.client-name { transition:none; } .client-copy-panel:not([hidden]) { animation:none; } }

.clients-grid a.client-name-row { text-decoration:none; }