/* Clients office scene (js/office-scene.js). Always a dark band, like the footer. */
.of{display:none;position:relative;z-index:2;height:460vh}
html.of-on .of{display:block}
html.of-on #clients{display:none}  /* static clients grid stays only as the no-JS / reduced-motion fallback */

.of-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:var(--ink);
  background:transparent}   /* transparent: the analyst / city background stays visible and merges while scrolling */
#ofcv{position:absolute;inset:0}
#ofscr{position:absolute;inset:0;pointer-events:none}
.of-sl{position:absolute;left:0;top:0;overflow:hidden;transform-origin:0 0;visibility:hidden;will-change:transform}
.of-sl .of-pn{position:absolute;top:0;left:calc(-1*var(--o))}
.of-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the screen: wide panel, centre column = clients grid, sides show on the curved monitor edges */
.of-pn{--u:min(calc(var(--cw)*.0625),calc(var(--ph)*.11));width:var(--pw);height:var(--ph);display:flex;
  background:var(--bg);color:var(--ink);font-family:var(--sans)}
.of-pn .of-ct{flex:0 0 var(--cw);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  gap:calc(var(--u)*.3);border-inline:1.5px solid rgba(255,77,31,.4)}
.of-pn .of-pill{font:600 calc(var(--u)*.11)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#ff4d1f;
  border:1px solid var(--line);padding:calc(var(--u)*.08) calc(var(--u)*.16);background:var(--bg2)}
.of-pn h2{margin:0;font:500 calc(var(--u)*.66)/.98 var(--sans);letter-spacing:-.04em;color:var(--ink)}
.of-pn .of-cg{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*.07);width:calc(var(--u)*10.2);margin-top:calc(var(--u)*.2)}
.of-pn .of-cl{position:relative;display:grid;place-items:center;height:calc(var(--u)*1.05);background:#1b1c1f;border:1px solid #26282c;border-radius:calc(var(--u)*.05)}
.of-pn .of-cl img{display:block;max-width:74%;max-height:calc(var(--u)*.46);width:auto;height:auto;opacity:.85}
.of-pn .of-cl em{position:absolute;top:0;left:50%;transform:translateX(-50%);padding:calc(var(--u)*.06) calc(var(--u)*.1);background:#2a2b2f;
  border-radius:0 0 calc(var(--u)*.05) calc(var(--u)*.05);font:700 calc(var(--u)*.085)/1 var(--mono);font-style:normal;letter-spacing:.04em;color:#f1f1f1;white-space:nowrap}
.of-pn .of-sd{flex:1}


/* portrait / phones: 2-column logo grid */
@media (max-aspect-ratio:1/1){
  .of-pn{--u:calc(var(--cw)*.1)}
  .of-pn .of-cg{grid-template-columns:repeat(2,1fr);width:calc(var(--u)*7.4)}
}