.uhero{min-height:clamp(380px,52vh,520px);display:flex;align-items:center;justify-content:center}
.uhero h1{text-transform:uppercase}

.role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rolecard{display:block}
.rolecard figure{position:relative;aspect-ratio:16/11;border-radius:14px;overflow:hidden;
  background:var(--surface,#131315);border:1px solid var(--border,rgba(255,255,255,.08));transition:border-color .25s}
.rolecard figure img,.rolecard figure video{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.rolecard figure::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,9,.45),rgba(8,8,9,0) 45%)}
.rolecard:hover figure{border-color:var(--rc)}
.rolecard:hover figure img,.rolecard:hover figure video{transform:scale(1.04)}
.rolechip{position:absolute;left:12px;bottom:12px;z-index:2;font-family:'JetBrains Mono',monospace;font-size:10px;
  font-weight:700;letter-spacing:.18em;color:var(--rc);background:rgba(10,10,10,.72);border:1px solid var(--rc);
  padding:6px 12px;border-radius:100px;display:inline-flex;align-items:center;gap:7px;backdrop-filter:blur(6px)}
.rolechip i{width:6px;height:6px;border-radius:50%;background:var(--rc);box-shadow:0 0 8px var(--rc)}

.usplit{min-height:420px;display:flex}
.usplit .banner-body{align-self:center;gap:13px}
.usplit.flip{justify-content:flex-end}
.usplit.flip .banner-body{text-align:right;align-items:flex-end}
.usplit.flip .uspecs li{flex-direction:row-reverse}
.uidx{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;color:var(--rc)}
.usplit h2{font-size:clamp(1.7rem,3vw,2.6rem)}
.ulead{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:16.5px;
  letter-spacing:-.01em;color:#fff!important;line-height:1.35}
.uspecs{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:2px}
.uspecs li{display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:11.5px;
  letter-spacing:.04em;color:#c9c9c9}
.uspecs li::before{content:"—";color:var(--rc);font-weight:700}
.uchip{width:max-content;margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#9a9a9a}
.uchip b{color:var(--rc);font-weight:700}

.proj-grid.outs{grid-template-columns:repeat(3,1fr)}
.outs .prow h4{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.1em;color:#c9c9c9}

.uclose{min-height:clamp(300px,38vh,400px);display:flex;align-items:center;justify-content:center}

@media(max-width:1150px){
  .role-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .role-grid{grid-template-columns:1fr}
  .usplit.flip .banner-body{text-align:left;align-items:flex-start}
  .usplit.flip .uspecs li{flex-direction:row}
  .usplit .scrim,.usplit .scrim.flip{background:linear-gradient(0deg,rgba(8,8,9,.95) 45%,rgba(8,8,9,.4))}
  .proj-grid.outs{grid-template-columns:1fr}
}