/* xosialX University · hero — speakers phone carousel (University light: black + gold) */
.xs-stage.xs-uni{position:absolute;inset:0;overflow:hidden;border-radius:var(--r-m);isolation:isolate;background:
  radial-gradient(110% 65% at 50% 110%,rgba(255,196,80,.30) 0%,rgba(255,196,80,0) 58%),
  radial-gradient(80% 55% at 90% -10%,rgba(255,220,154,.14) 0%,rgba(255,220,154,0) 60%),
  linear-gradient(180deg,#1a1712 0%,var(--black) 100%)}
.xs-stage.xs-uni img{transform:none!important}
.xs-uni .xs-mark{position:absolute;left:50%;top:44%;width:118%;height:auto;transform:translate(-50%,-50%);color:rgba(255,196,80,.07);z-index:0;pointer-events:none}
.xs-uni .xs-label{position:absolute;left:clamp(1rem,2.4vw,1.6rem);top:clamp(1rem,2.4vw,1.5rem);z-index:4;display:flex;align-items:center;gap:.6rem;margin:0;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:#ffdc9a}
.xs-uni .xs-label svg{width:18px;height:15px;color:var(--gold)}

.xs-uni .xs-phones{position:absolute;inset:0;z-index:2;list-style:none;margin:0;padding:0;touch-action:pan-y}
.xs-uni .xs-phone{--x:0%;--r:0deg;--s:1;position:absolute;left:50%;top:47%;height:76%;max-height:560px;aspect-ratio:9 / 19;margin:0;
  transform:translate(-50%,-50%) translateX(var(--x)) rotate(var(--r)) scale(var(--s));
  transition:transform 1s var(--ease-arc),opacity .8s var(--ease-soft),filter .8s var(--ease-soft);
  border-radius:17% / 8%;padding:2.4%;background:linear-gradient(145deg,#3a3326,#0d0f12 42%,#2a2419);
  box-shadow:0 0 0 1px rgba(255,220,154,.14) inset,0 50px 80px -30px rgba(0,0,0,.75),0 20px 40px -20px rgba(0,0,0,.6);
  container-type:inline-size;opacity:0;pointer-events:none;cursor:pointer}
.xs-uni .xs-phone[data-pos="0"]{--x:0%;--r:0deg;--s:1;z-index:3;opacity:1;pointer-events:auto;cursor:default}
.xs-uni .xs-phone[data-pos="1"]{--x:68%;--r:7deg;--s:.8;z-index:2;opacity:.5;filter:saturate(.55) brightness(.7);pointer-events:auto}
.xs-uni .xs-phone[data-pos="-1"]{--x:-68%;--r:-7deg;--s:.8;z-index:2;opacity:.5;filter:saturate(.55) brightness(.7);pointer-events:auto}
/* the parked phone waits behind the side it will enter from, and leaves quickly — no ghosting across the front phone */
.xs-uni .xs-phone[data-pos="2"]{--x:96%;--r:12deg;--s:.62;z-index:0;opacity:0;transition:transform 1s var(--ease-arc),opacity .3s linear,filter .3s linear}
.xs-uni [data-dir="prev"] .xs-phone[data-pos="2"]{--x:-96%;--r:-12deg}

.xs-uni .xs-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:15% / 7.2%;background:var(--black);color:var(--ivory);display:flex;flex-direction:column}
.xs-uni .xs-photo{position:relative;flex:0 0 70%;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 45%,rgba(0,0,0,.82) 60%,rgba(0,0,0,.5) 75%,rgba(0,0,0,.2) 88%,rgba(0,0,0,.05) 96%,transparent 100%);mask-image:linear-gradient(180deg,#000 45%,rgba(0,0,0,.82) 60%,rgba(0,0,0,.5) 75%,rgba(0,0,0,.2) 88%,rgba(0,0,0,.05) 96%,transparent 100%)}
.xs-uni .xs-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 25%)}
.xs-uni .xs-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,15,18,.6) 0%,rgba(13,15,18,0) 24%)}
.xs-uni .xs-phone[data-pos="0"] .xs-photo img{animation:xsKen 7s var(--ease-soft) both}
@keyframes xsKen{from{transform:scale(1.08)}to{transform:scale(1)}}

.xs-uni .xs-status{position:absolute;inset:0 0 auto;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:6cqw 8cqw 0;font-size:5cqw;font-weight:600;letter-spacing:.02em}
.xs-uni .xs-status i{display:block;width:26%;height:7.5cqw;border-radius:99px;background:#000;position:absolute;left:50%;top:4.2cqw;transform:translateX(-50%)}
.xs-uni .xs-status svg{width:15cqw;height:5cqw}
.xs-uni .xs-app{position:absolute;left:0;right:0;top:14cqw;z-index:2;display:flex;align-items:center;justify-content:center;gap:2.4cqw;font-size:4cqw;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:#ffdc9a}
.xs-uni .xs-app img{width:8.5cqw;height:auto}

.xs-uni .xs-body{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;padding:0 8cqw 8cqw;margin-top:-24cqw}
.xs-uni .xs-kicker{font-size:4cqw;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:500}
.xs-uni .xs-name{font-family:var(--serif);font-weight:400;font-size:11cqw;line-height:1;letter-spacing:-.01em;margin:2.5cqw 0 1.6cqw;color:var(--ivory)}
.xs-uni .xs-role{font-size:4.6cqw;color:rgba(246,241,235,.7);line-height:1.3;margin:0}
.xs-uni .xs-bar{margin-top:auto;height:1.2cqw;border-radius:99px;background:rgba(255,220,154,.16);overflow:hidden}
.xs-uni .xs-bar b{display:block;height:100%;width:var(--p,30%);background:linear-gradient(90deg,var(--bronze),var(--gold));border-radius:inherit}
.xs-uni .xs-phone[data-pos="0"] .xs-bar b{animation:xsProg var(--dur,5200ms) linear both}
@keyframes xsProg{from{width:var(--p,30%)}to{width:calc(var(--p,30%) + 14%)}}
.xs-uni .xs-time{display:flex;justify-content:space-between;font-size:3.6cqw;color:rgba(246,241,235,.5);margin-top:2cqw;font-variant-numeric:tabular-nums}
.xs-uni .xs-ctrl{display:flex;align-items:center;justify-content:center;gap:10cqw;margin-top:4cqw}
.xs-uni .xs-ctrl svg{width:7cqw;height:7cqw;color:rgba(246,241,235,.8)}
.xs-uni .xs-ctrl span{width:17cqw;height:17cqw;border-radius:50%;background:var(--gold);display:grid;place-items:center}
.xs-uni .xs-ctrl span svg{width:6.5cqw;height:6.5cqw;color:var(--black);margin-left:.8cqw}

/* caption chip — same glass as the University "issue" tag */
.xs-uni .xs-caption{position:absolute;left:50%;bottom:clamp(.75rem,2vw,1.25rem);transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:1rem;background:#0d0f12d1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,196,80,.22);border-radius:var(--pill);padding:.55rem .6rem .55rem 1.1rem;color:var(--ivory);white-space:nowrap}
.xs-uni .xs-caption small{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#ffdc9a;line-height:1.2}
.xs-uni .xs-caption b{display:block;font-family:var(--serif);font-weight:400;font-size:1.05rem;line-height:1.15;min-width:10.5ch}
.xs-uni .xs-dots{display:flex;gap:.35rem;align-items:center}
.xs-uni .xs-dots button{appearance:none;border:0;padding:0;cursor:pointer;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:transparent}
.xs-uni .xs-dots button i{display:block;width:7px;height:7px;border-radius:99px;background:rgba(246,241,235,.3);transition:width var(--t-base) var(--ease-out),background var(--t-quick)}
.xs-uni .xs-dots button[aria-current="true"] i{width:20px;background:var(--gold)}
.xs-uni .xs-dots button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

@media (max-width:899px){
  .xs-uni .xs-phone{height:68%;top:50%}
  .xs-uni .xs-phone[data-pos="1"]{--x:62%}
  .xs-uni .xs-phone[data-pos="-1"]{--x:-62%}
  .xs-uni .xs-label{font-size:.66rem;letter-spacing:.16em}
  .xs-uni .xs-caption{padding:.45rem .45rem .45rem .95rem;gap:.6rem}
  .xs-uni .xs-caption b{font-size:.98rem}
  .xs-uni .xs-caption small{font-size:.62rem}
  .xs-uni .xs-dots button{width:24px;height:28px}
}
@media (prefers-reduced-motion:reduce){
  .xs-uni .xs-phone{transition:opacity .4s linear}
  .xs-uni .xs-phone[data-pos="0"] .xs-photo img,.xs-uni .xs-phone[data-pos="0"] .xs-bar b{animation:none}
}