/* Pajic Studios — standalone creative identity.
   Only the shared Pajic header is intentionally inherited. */
html:has(body[data-route="/studio/"]){
  background:#060609;
  scroll-snap-type:none!important;
  scroll-padding-top:0!important;
}
body[data-route="/studio/"]{
  --sx-bg:#07070a;
  --sx-paper:#f3f0e8;
  --sx-ink:#09090c;
  --sx-pink:#ff3cac;
  --sx-acid:#d9ff43;
  --sx-cyan:#53e8ff;
  --sx-violet:#8f63ff;
  --sx-orange:#ff7a3d;
  --sx-blue:#4568ff;
  --sx-soft:rgba(255,255,255,.68);
  --sx-line:rgba(255,255,255,.12);
  color:#fff;
  background:var(--sx-bg);
  overflow-x:hidden;
}
body[data-route="/studio/"] .site-bg,
body[data-route="/studio/"] .site-light-overlay,
body[data-route="/studio/"] .site-dark-overlay,
body[data-route="/studio/"] #pageBg,
body[data-route="/studio/"] #pageBgOverlay,
body[data-route="/studio/"] .scroll-progress,
body[data-route="/studio/"] #desktopNav,
body[data-route="/studio/"] #mobileDock,
body[data-route="/studio/"] footer.footer{
  display:none!important;
}
body[data-route="/studio/"] .page-scroll,
body[data-route="/studio/"] #siteContent{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  background:var(--sx-bg)!important;
  overflow:visible!important;
}
body[data-route="/studio/"] .product-native--studios{
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  scroll-snap-align:none!important;
  scroll-margin:0!important;
  display:block!important;
  overflow:visible!important;
  background:transparent!important;
}
body[data-route="/studio/"] .product-native--studios::before,
body[data-route="/studio/"] .product-native--studios::after{
  display:none!important;
  content:none!important;
}

/* Shared header remains, but gets a little more breathing room over the studio. */
body[data-route="/studio/"] .topbar{
  z-index:5000;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s ease,box-shadow .3s ease;
}
body[data-route="/studio/"].sx-scrolled .topbar{
  background:rgba(10,10,14,.66);
  box-shadow:0 12px 40px rgba(0,0,0,.24);
}
@media(max-width:980px){
  body[data-route="/studio/"] .topbar{
    display:flex!important;
    width:calc(100% - 24px)!important;
    left:12px!important;
    right:12px!important;
    top:max(10px,env(safe-area-inset-top))!important;
  }
  body[data-route="/studio/"] .topbar .site-switcher{display:none!important}
  body[data-route="/studio/"] .topbar-search{margin-left:auto}
}

.sx{
  position:relative;
  width:100%;
  box-sizing:border-box;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.sx *{box-sizing:border-box}
.sx h1,.sx h2,.sx h3,.sx p{margin:0}
.sx a{text-decoration:none;color:inherit}
.sx em{font-style:normal}
[data-sx-reveal]{
  opacity:0;
  transform:translateY(30px) scale(.985);
  transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i,0) * 70ms);
}
[data-sx-reveal].is-in{opacity:1;transform:none}

/* HERO */
.sx-hero{
  min-height:100svh;
  padding:clamp(125px,15vh,190px) clamp(22px,5.4vw,86px) 88px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at var(--sx-x,78%) var(--sx-y,18%),rgba(255,60,172,.22),transparent 25%),
    radial-gradient(circle at 18% 20%,rgba(83,232,255,.13),transparent 28%),
    radial-gradient(circle at 68% 70%,rgba(143,99,255,.16),transparent 28%),
    #07070a;
}
.sx-hero__grid{
  position:absolute;inset:0;z-index:-4;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 92%);
}
.sx-hero__grid::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,transparent 15%,#07070a 80%);
}
.sx-hero__mesh{position:absolute;inset:0;z-index:-3;pointer-events:none;filter:blur(7px)}
.sx-hero__mesh i{position:absolute;border-radius:50%;mix-blend-mode:screen;opacity:.82}
.sx-hero__mesh i:nth-child(1){width:28vw;height:28vw;min-width:300px;min-height:300px;right:-7vw;top:4vh;background:radial-gradient(circle at 35% 32%,#ff85d0,#ff278f 28%,rgba(255,39,143,.08) 67%,transparent 70%);animation:sxFloatA 9s ease-in-out infinite alternate}
.sx-hero__mesh i:nth-child(2){width:23vw;height:23vw;min-width:230px;min-height:230px;right:22vw;top:10vh;background:radial-gradient(circle at 40% 35%,#b59dff,#7444ff 32%,transparent 71%);animation:sxFloatB 12s ease-in-out infinite alternate}
.sx-hero__mesh i:nth-child(3){width:18vw;height:18vw;min-width:180px;min-height:180px;left:8vw;top:7vh;background:radial-gradient(circle at 40% 35%,#8df4ff,#1fdfff 32%,transparent 70%);animation:sxFloatB 10s ease-in-out infinite alternate-reverse}
.sx-hero__mesh i:nth-child(4){width:14vw;height:14vw;min-width:150px;min-height:150px;right:37vw;bottom:5vh;background:radial-gradient(circle at 45% 40%,#edff87,#d9ff43 34%,transparent 70%);animation:sxFloatA 8s ease-in-out infinite alternate-reverse}
@keyframes sxFloatA{to{transform:translate3d(-3vw,3vh,0) scale(1.08)}}
@keyframes sxFloatB{to{transform:translate3d(3vw,-2vh,0) scale(.92)}}
.sx-hero__topline{
  position:absolute;
  top:clamp(108px,13vh,150px);
  left:clamp(22px,5.4vw,86px);
  right:clamp(22px,5.4vw,86px);
  display:flex;justify-content:space-between;gap:20px;
  font-size:10px;font-weight:900;letter-spacing:.16em;
  color:rgba(255,255,255,.48);
}
.sx-hero__copy{position:relative;z-index:2;max-width:1500px}
.sx-kicker{
  margin-bottom:22px!important;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  color:var(--sx-acid);
}
.sx-hero h1{
  display:flex;
  flex-direction:column;
  max-width:13ch;
  font-size:clamp(66px,10.8vw,184px);
  line-height:.78;
  font-weight:1000;
  letter-spacing:-.085em;
  text-transform:uppercase;
}
.sx-hero h1 span{display:block}
.sx-hero__chrome{
  color:transparent;
  background:
    linear-gradient(115deg,#fff 3%,#878787 16%,#fff 29%,#5b5b61 44%,#fff 59%,#969696 73%,#fff 94%);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 12px 30px rgba(255,255,255,.09));
  background-size:220% 100%;
  animation:sxChrome 7s linear infinite;
}
@keyframes sxChrome{to{background-position:-220% 0}}
.sx-hero__sub{
  margin-top:clamp(28px,4vw,52px);
  display:grid;
  grid-template-columns:minmax(240px,520px) minmax(230px,480px);
  gap:clamp(22px,5vw,90px);
  align-items:start;
}
.sx-hero__sub p{
  font-size:clamp(17px,1.45vw,22px);
  line-height:1.5;
  color:rgba(255,255,255,.72);
}
.sx-hero__sub p:first-child{font-weight:800;color:#fff}
.sx-hero__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.sx-button{
  min-height:52px;
  padding:14px 22px;
  border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;gap:16px;
  font-size:13px;font-weight:900;
  transition:transform .24s ease,background .24s ease,color .24s ease,border-color .24s ease;
}
.sx-button:hover{transform:translateY(-3px) scale(1.015)}
.sx-button--light{background:#fff;color:#09090c}
.sx-button--glass{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17);backdrop-filter:blur(18px);color:#fff}
.sx-button--dark{background:#09090d;color:#fff}
.sx-button--outline{border:1px solid rgba(8,8,12,.24);color:#0a0a0d;background:rgba(255,255,255,.14)}
.sx-orbit{
  position:absolute;
  right:4vw;
  bottom:18vh;
  width:330px;height:330px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  animation:sxSpin 26s linear infinite;
}
.sx-orbit::before,.sx-orbit::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.09);border-radius:50%}
.sx-orbit::before{inset:44px}.sx-orbit::after{inset:95px}
.sx-orbit span{position:absolute;font-size:8px;font-weight:1000;letter-spacing:.13em;padding:6px 8px;border-radius:999px;background:#fff;color:#0a0a0d;box-shadow:0 8px 28px rgba(0,0,0,.25)}
.sx-orbit span:nth-child(1){left:42%;top:-13px}
.sx-orbit span:nth-child(2){right:-19px;top:35%}
.sx-orbit span:nth-child(3){right:0;bottom:17%}
.sx-orbit span:nth-child(4){left:28%;bottom:-12px}
.sx-orbit span:nth-child(5){left:-34px;bottom:30%}
.sx-orbit span:nth-child(6){left:-16px;top:20%}
@keyframes sxSpin{to{transform:rotate(360deg)}}
.sx-orbit span{animation:sxCounter 26s linear infinite}
@keyframes sxCounter{to{transform:rotate(-360deg)}}
.sx-marquee{
  position:absolute;
  left:0;right:0;bottom:0;
  display:flex;
  overflow:hidden;
  padding:13px 0 12px;
  background:var(--sx-acid);
  color:#09090c;
  transform:rotate(-.45deg) scale(1.01);
  font-size:12px;font-weight:1000;letter-spacing:.08em;white-space:nowrap;
}
.sx-marquee div{min-width:max-content;animation:sxTicker 25s linear infinite}
@keyframes sxTicker{to{transform:translateX(-100%)}}

/* SHARED SECTION HEAD */
.sx-head{
  max-width:1180px;
  margin-bottom:clamp(55px,7vw,100px);
}
.sx-head>span,.sx-work__intro>span{
  display:block;
  margin-bottom:20px;
  font-size:10px;font-weight:1000;letter-spacing:.18em;
  color:var(--sx-acid);
}
.sx-head h2,.sx-work__intro h2{
  font-size:clamp(58px,8.3vw,136px);
  line-height:.82;
  letter-spacing:-.075em;
  font-weight:1000;
  text-transform:uppercase;
}
.sx-head h2 em,.sx-work__intro h2 em{color:var(--sx-pink)}
.sx-head p{
  max-width:790px;
  margin-top:30px;
  font-size:clamp(17px,1.55vw,22px);
  line-height:1.55;
  color:var(--sx-soft);
}

/* DISCIPLINES */
.sx-lanes{
  padding:clamp(105px,12vw,190px) clamp(22px,5.4vw,86px);
  background:#0b0b0f;
  overflow:hidden;
}
.sx-lanes::before{
  content:"";
  position:absolute;inset:-20% -10%;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 25%,rgba(83,232,255,.10),transparent 23%),
    radial-gradient(circle at 88% 60%,rgba(255,60,172,.11),transparent 28%);
}
.sx-lane-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:12px;
}
.sx-lane{
  --lane:var(--sx-pink);
  min-height:430px;
  grid-column:span 4;
  padding:26px;
  border-radius:30px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018)),
    #111117;
  box-shadow:0 25px 70px rgba(0,0,0,.22);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,background .35s ease;
}
.sx-lane:hover{transform:translateY(-9px);border-color:color-mix(in srgb,var(--lane) 55%,white 8%);background:linear-gradient(145deg,color-mix(in srgb,var(--lane) 13%,#121218),#101015)}
.sx-lane--acid{--lane:var(--sx-acid)}
.sx-lane--pink{--lane:var(--sx-pink)}
.sx-lane--cyan{--lane:var(--sx-cyan)}
.sx-lane--violet{--lane:var(--sx-violet)}
.sx-lane--orange{--lane:var(--sx-orange)}
.sx-lane--blue{--lane:var(--sx-blue)}
.sx-lane:nth-child(1),.sx-lane:nth-child(6){grid-column:span 6}
.sx-lane__top{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.15em}
.sx-lane__top span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(255,255,255,.4)}
.sx-lane__top b{color:var(--lane)}
.sx-lane__glyph{
  width:90px;height:90px;
  margin:42px 0 auto;
  position:relative;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.sx-lane:hover .sx-lane__glyph{transform:rotate(12deg) scale(1.08)}
.sx-lane__glyph i{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--lane) 60%,transparent)}
.sx-lane__glyph i:nth-child(1){inset:0;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--lane) 90%,white 10%),color-mix(in srgb,var(--lane) 20%,transparent) 55%,transparent 70%)}
.sx-lane__glyph i:nth-child(2){inset:18px;transform:translate(28px,-14px)}
.sx-lane__glyph i:nth-child(3){inset:33px;transform:translate(-22px,28px);background:var(--lane);box-shadow:0 0 28px color-mix(in srgb,var(--lane) 45%,transparent)}
.sx-lane h3{
  margin-top:36px;
  max-width:12ch;
  font-size:clamp(34px,3vw,54px);
  line-height:.94;
  letter-spacing:-.055em;
}
.sx-lane p{max-width:48ch;margin-top:17px;color:rgba(255,255,255,.59);font-size:14px;line-height:1.55}
.sx-lane__link{
  margin-top:28px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;font-weight:900;
  color:var(--lane);
}
.sx-lane__link--static{opacity:.55}

/* SELECTED WORK */
.sx-work{
  padding:clamp(105px,12vw,190px) clamp(22px,5.4vw,86px);
  color:#09090c;
  background:var(--sx-paper);
}
.sx-work__intro{margin-bottom:70px}
.sx-work__intro>span{color:#6b43ff}
.sx-work__intro h2 em{color:#6b43ff}
.sx-projects{display:grid;gap:18px}
.sx-project{
  min-height:min(76svh,820px);
  border-radius:36px;
  overflow:hidden;
  position:relative;
  isolation:isolate;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:28px;
  box-shadow:0 28px 80px rgba(13,12,18,.16);
  transform-origin:center;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease;
}
.sx-project:hover{transform:scale(.993);box-shadow:0 18px 46px rgba(13,12,18,.22)}
.sx-project__media{position:absolute;inset:0;margin:0;z-index:-2;overflow:hidden}
.sx-project__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .8s ease}
.sx-project:hover .sx-project__media img{transform:scale(1.075);filter:saturate(1.08)}
.sx-project__wash{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,0,0,.15) 38%,rgba(0,0,0,.82))}
.sx-project--web .sx-project__wash{background:linear-gradient(120deg,rgba(59,31,123,.42),rgba(0,0,0,.1) 44%,rgba(0,0,0,.84))}
.sx-project--future .sx-project__wash{background:linear-gradient(120deg,rgba(0,68,98,.46),rgba(0,0,0,.08) 44%,rgba(0,0,0,.84))}
.sx-project__meta{display:flex;justify-content:space-between;gap:20px;font-size:9px;font-weight:900;letter-spacing:.15em}
.sx-project__copy{max-width:980px}
.sx-project__copy h3{font-size:clamp(58px,9vw,150px);line-height:.8;letter-spacing:-.075em;font-weight:1000}
.sx-project__copy p{max-width:740px;margin-top:20px;font-size:clamp(16px,1.4vw,21px);line-height:1.55;color:rgba(255,255,255,.72)}
.sx-project__copy strong{display:inline-flex;margin-top:26px;gap:10px;font-size:12px;letter-spacing:.05em}
.sx-project__copy strong i{font-style:normal}

/* MANIFESTO */
.sx-manifesto{
  padding:clamp(110px,12vw,190px) clamp(22px,5.4vw,86px);
  background:#08080b;
}
.sx-manifesto__eyebrow{margin-bottom:52px;font-size:10px;font-weight:1000;letter-spacing:.18em;color:var(--sx-acid)}
.sx-manifesto__line{
  display:grid;
  grid-template-columns:80px minmax(0,1.15fr) minmax(260px,.7fr);
  gap:24px;
  align-items:center;
  min-height:180px;
  padding:26px 0;
  border-top:1px solid rgba(255,255,255,.11);
}
.sx-manifesto__line:last-child{border-bottom:1px solid rgba(255,255,255,.11)}
.sx-manifesto__line>span{font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(255,255,255,.36)}
.sx-manifesto__line h2{font-size:clamp(44px,6vw,96px);line-height:.86;letter-spacing:-.065em;font-weight:1000}
.sx-manifesto__line p{font-size:clamp(15px,1.35vw,19px);line-height:1.55;color:rgba(255,255,255,.55)}

/* SIGNAL / POV */
.sx-signal{
  min-height:100svh;
  padding:clamp(110px,14vh,190px) clamp(22px,5.4vw,86px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:#09090c;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.65),transparent 24%),
    linear-gradient(135deg,#d8ff43,#b9ff62 36%,#57f0df 100%);
}
.sx-signal__canvas{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sx-signal__canvas span{
  position:absolute;
  font-size:clamp(80px,17vw,290px);
  line-height:.72;
  font-weight:1000;
  letter-spacing:-.08em;
  color:rgba(9,9,12,.055);
  animation:sxDrift 14s ease-in-out infinite alternate;
}
.sx-signal__canvas span:nth-child(1){left:-4vw;top:2vh}
.sx-signal__canvas span:nth-child(2){right:-6vw;top:24vh;animation-delay:-3s}
.sx-signal__canvas span:nth-child(3){left:7vw;bottom:11vh;animation-delay:-6s}
.sx-signal__canvas span:nth-child(4){right:8vw;bottom:-4vh;animation-delay:-9s}
@keyframes sxDrift{to{transform:translate3d(3vw,-2vh,0) rotate(-2deg)}}
.sx-signal__copy{position:relative;z-index:1;max-width:1180px;text-align:center}
.sx-signal__copy>span{font-size:10px;font-weight:1000;letter-spacing:.18em}
.sx-signal__copy h2{margin-top:24px;font-size:clamp(64px,10vw,166px);line-height:.79;letter-spacing:-.08em;font-weight:1000}
.sx-signal__copy h2 em{display:inline-block;padding:0 .08em;background:#09090c;color:#fff;transform:rotate(-2deg)}
.sx-signal__copy p{max-width:790px;margin:36px auto 0;font-size:clamp(17px,1.55vw,22px);line-height:1.55;font-weight:650}
.sx-signal__copy>div{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:32px}
.sx-signal__copy a{padding:13px 18px;border:1px solid rgba(9,9,12,.25);border-radius:999px;font-size:12px;font-weight:900;background:rgba(255,255,255,.2);transition:background .2s,transform .2s}
.sx-signal__copy a:hover{background:#fff;transform:translateY(-2px)}

/* CTA */
.sx-contact{
  min-height:92svh;
  padding:clamp(120px,15vh,190px) clamp(22px,5.4vw,86px) 46px;
  color:#09090c;
  background:#ff72bb;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}
.sx-contact__spark{position:absolute;right:-2vw;top:-10vh;font-size:clamp(250px,46vw,760px);line-height:1;color:rgba(255,255,255,.17);transform:rotate(12deg);pointer-events:none}
.sx-contact>p{position:relative;z-index:1;font-size:10px;font-weight:1000;letter-spacing:.18em}
.sx-contact>h2{position:relative;z-index:1;margin-top:22px;font-size:clamp(68px,11vw,176px);line-height:.76;letter-spacing:-.085em;font-weight:1000}
.sx-contact>h2 em{color:#fff;text-shadow:0 12px 60px rgba(255,255,255,.22)}
.sx-contact__actions{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap;margin-top:38px}
.sx-footer{
  position:relative;z-index:1;
  margin-top:auto;
  padding-top:38px;
  border-top:1px solid rgba(8,8,12,.18);
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:22px;
  align-items:center;
  font-size:11px;
}
.sx-footer strong{font-size:15px}
.sx-footer>span{opacity:.6}
.sx-footer nav{display:flex;gap:18px;font-weight:800}

/* Responsive */
@media(max-width:1180px){
  .sx-orbit{opacity:.4;right:-90px}
  .sx-lane{grid-column:span 6!important}
}
@media(max-width:760px){
  [data-sx-reveal]{transform:translateY(18px)}
  .sx-hero{padding:132px 18px 76px;min-height:100svh}
  .sx-hero__topline{top:102px;left:18px;right:18px;font-size:8px}
  .sx-hero__topline span:last-child{display:none}
  .sx-hero h1{font-size:clamp(60px,18vw,104px);line-height:.78}
  .sx-hero__sub{grid-template-columns:1fr;gap:10px;margin-top:28px}
  .sx-hero__sub p{font-size:16px}
  .sx-hero__actions{margin-top:24px}
  .sx-orbit{width:220px;height:220px;bottom:12vh;right:-125px;opacity:.25}
  .sx-marquee{font-size:10px;padding:11px 0}
  .sx-lanes,.sx-work,.sx-manifesto,.sx-signal,.sx-contact{padding-left:18px;padding-right:18px}
  .sx-head h2,.sx-work__intro h2{font-size:clamp(52px,16vw,88px)}
  .sx-lane-grid{grid-template-columns:1fr}
  .sx-lane{grid-column:1!important;min-height:360px;padding:22px;border-radius:24px}
  .sx-lane__glyph{margin-top:30px}
  .sx-project{min-height:70svh;border-radius:26px;padding:20px}
  .sx-project__copy h3{font-size:clamp(52px,16vw,92px)}
  .sx-project__copy p{font-size:15px}
  .sx-manifesto__line{grid-template-columns:36px 1fr;gap:14px;min-height:150px}
  .sx-manifesto__line p{grid-column:2}
  .sx-manifesto__line h2{font-size:clamp(40px,12vw,68px)}
  .sx-signal{min-height:88svh}
  .sx-signal__copy h2{font-size:clamp(58px,18vw,100px)}
  .sx-contact>h2{font-size:clamp(62px,19vw,108px)}
  .sx-footer{grid-template-columns:1fr;gap:9px}
  .sx-footer nav{margin-top:10px}
}
@media(prefers-reduced-motion:reduce){
  .sx *{animation:none!important;scroll-behavior:auto!important}
  [data-sx-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .sx-lane,.sx-project,.sx-button{transition:none!important}
}


/* ── Creative polish: readability + spectrum layout ───────────────────── */

/* Button text must never inherit unreadable global link colors. */
body[data-route="/studio/"] .sx-button{
  color:#09090c!important;
  text-shadow:none!important;
}
body[data-route="/studio/"] .sx-button--light{
  background:#fff!important;
  color:#09090c!important;
  border:1px solid rgba(255,255,255,.88)!important;
}
body[data-route="/studio/"] .sx-button--glass{
  background:rgba(8,8,13,.72)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.22);
}
body[data-route="/studio/"] .sx-button--dark{
  background:#09090d!important;
  color:#fff!important;
  border:1px solid #09090d!important;
}
body[data-route="/studio/"] .sx-button--outline{
  background:rgba(255,255,255,.76)!important;
  color:#09090d!important;
  border:1px solid rgba(9,9,13,.62)!important;
  box-shadow:0 10px 28px rgba(9,9,13,.10);
}
body[data-route="/studio/"] .sx-button:focus-visible,
body[data-route="/studio/"] .sx-signal__copy a:focus-visible,
body[data-route="/studio/"] .sx-discipline__link:focus-visible{
  outline:3px solid #fff!important;
  outline-offset:3px!important;
}

/* SECTION 2 — no card grid. A six-track creative spectrum instead. */
.sx-lanes{
  padding:clamp(110px,12vw,190px) clamp(22px,5.4vw,86px) clamp(120px,14vw,220px);
  color:#09090c;
  background:
    radial-gradient(circle at 8% 8%,rgba(83,232,255,.33),transparent 24%),
    radial-gradient(circle at 88% 20%,rgba(255,60,172,.25),transparent 27%),
    linear-gradient(180deg,#f6f2e9 0%,#ebe7df 100%);
  overflow:hidden;
  isolation:isolate;
}
.sx-lanes::before{
  content:"SIX / WAYS / IN";
  position:absolute;
  top:4%;
  right:-2%;
  z-index:-1;
  font-size:clamp(88px,15vw,260px);
  font-weight:1000;
  line-height:.68;
  letter-spacing:-.08em;
  writing-mode:vertical-rl;
  color:rgba(9,9,12,.035);
  background:none;
  inset:auto -2% auto auto;
}
.sx-head--spectrum{max-width:1240px;margin-bottom:clamp(72px,8vw,118px)}
.sx-head--spectrum>span{color:#6e47ff}
.sx-head--spectrum h2{color:#09090c}
.sx-head--spectrum h2 em{color:#ff2f9e}
.sx-head--spectrum p{color:rgba(9,9,12,.62);max-width:800px}

.sx-spectrum{
  position:relative;
  max-width:1560px;
  margin:0 auto;
}
.sx-spectrum::before{
  content:"";
  position:absolute;
  left:clamp(24px,6vw,90px);
  top:-40px;
  bottom:-50px;
  width:1px;
  background:linear-gradient(to bottom,transparent,rgba(9,9,12,.2) 8%,rgba(9,9,12,.2) 92%,transparent);
}
.sx-discipline{
  --lane:#ff3cac;
  --offset:0px;
  position:relative;
  min-height:190px;
  margin-left:var(--offset);
  padding:30px 0 34px clamp(88px,10vw,160px);
  display:grid;
  grid-template-columns:minmax(150px,.42fr) minmax(340px,1.15fr) minmax(260px,.72fr);
  gap:clamp(18px,3vw,52px);
  align-items:center;
  border-top:1px solid rgba(9,9,12,.16);
  color:#09090c;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),padding .35s cubic-bezier(.2,.8,.2,1);
}
.sx-discipline:last-child{border-bottom:1px solid rgba(9,9,12,.16)}
.sx-discipline:nth-child(2),
.sx-discipline:nth-child(5){--offset:clamp(10px,5vw,90px)}
.sx-discipline:nth-child(3){--offset:clamp(24px,9vw,160px)}
.sx-discipline--acid{--lane:#b6dd13}
.sx-discipline--pink{--lane:#ff2f9e}
.sx-discipline--cyan{--lane:#00bad0}
.sx-discipline--violet{--lane:#7049ff}
.sx-discipline--orange{--lane:#ff6424}
.sx-discipline--blue{--lane:#3157ff}
.sx-discipline:hover{transform:translateX(10px);padding-right:12px}
.sx-discipline__signal{
  position:absolute;
  left:clamp(11px,4.4vw,67px);
  top:50%;
  width:52px;
  height:52px;
  transform:translate(calc(-50% + var(--sx-dx,0px)),calc(-50% + var(--sx-dy,0px)));
  transition:transform .24s ease;
}
.sx-discipline__signal::before,
.sx-discipline__signal::after,
.sx-discipline__signal i{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
}
.sx-discipline__signal::before{
  background:var(--lane);
  box-shadow:0 0 0 10px color-mix(in srgb,var(--lane) 12%,transparent),0 12px 30px color-mix(in srgb,var(--lane) 22%,transparent);
}
.sx-discipline__signal::after{
  inset:11px;
  background:#f6f2e9;
}
.sx-discipline__signal i:nth-child(1){
  inset:18px;
  background:var(--lane);
}
.sx-discipline__signal i:nth-child(2){
  inset:-10px;
  border:1px dashed color-mix(in srgb,var(--lane) 66%,transparent);
  animation:sxSpin 14s linear infinite;
}
.sx-discipline__id{
  display:flex;
  flex-direction:column;
  gap:9px;
  align-self:start;
  padding-top:7px;
}
.sx-discipline__id span{
  font:800 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:rgba(9,9,12,.42);
  letter-spacing:.12em;
}
.sx-discipline__id b{
  width:max-content;
  max-width:100%;
  padding:7px 10px;
  border-radius:999px;
  background:var(--lane);
  color:#09090c;
  font-size:10px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.12em;
}
.sx-discipline h3{
  max-width:11ch;
  font-size:clamp(38px,4.4vw,72px);
  line-height:.88;
  letter-spacing:-.065em;
  font-weight:1000;
}
.sx-discipline__detail{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
  padding:7px 0 3px;
}
.sx-discipline__detail p{
  max-width:46ch;
  color:rgba(9,9,12,.64);
  font-size:14px;
  line-height:1.62;
}
.sx-discipline__link{
  width:max-content;
  max-width:100%;
  min-height:42px;
  padding:11px 14px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:18px;
  background:#09090d;
  color:#fff!important;
  font-size:11px;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(9,9,13,.14);
  transition:background .22s ease,color .22s ease,transform .22s ease;
}
.sx-discipline__link:hover{
  background:var(--lane);
  color:#09090c!important;
  transform:translateY(-2px);
}
.sx-discipline__link--static{
  background:rgba(9,9,13,.08);
  color:rgba(9,9,13,.62)!important;
  box-shadow:none;
}

/* Selected Web Design gets custom browser art instead of an unrelated image. */
.sx-project--web{
  background:
    radial-gradient(circle at 82% 18%,rgba(83,232,255,.34),transparent 25%),
    radial-gradient(circle at 12% 26%,rgba(255,60,172,.34),transparent 30%),
    linear-gradient(145deg,#4a25d7 0%,#7c32ff 44%,#ff3cac 100%);
}
.sx-project__media--web{
  background:transparent;
}
.sx-project__media--web .sx-project__wash{
  background:linear-gradient(to bottom,rgba(7,5,18,.08),rgba(7,5,18,.15) 38%,rgba(7,5,18,.78));
}
.sx-web-art{
  position:absolute;
  inset:6% 5% 14%;
  transform:perspective(1400px) rotateX(1.5deg) rotateY(-4deg);
  transform-origin:center;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.sx-project--web:hover .sx-web-art{
  transform:perspective(1400px) rotateX(0deg) rotateY(0deg) translateY(-8px);
}
.sx-web-art__halo{
  position:absolute;
  width:58%;
  aspect-ratio:1;
  right:2%;
  top:-9%;
  border-radius:50%;
  background:radial-gradient(circle,#d9ff43 0 12%,rgba(217,255,67,.38) 13% 28%,rgba(217,255,67,.06) 29% 52%,transparent 53%);
  filter:blur(.2px);
}
.sx-web-art__browser{
  position:absolute;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(10,10,16,.88);
  box-shadow:0 35px 90px rgba(10,4,40,.38);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.sx-web-art__browser--main{
  left:3%;
  top:5%;
  width:72%;
  height:72%;
  border-radius:28px;
  transform:rotate(-2.2deg);
}
.sx-web-art__browser--side{
  right:2%;
  top:26%;
  width:30%;
  height:64%;
  border-radius:26px;
  transform:rotate(5deg);
}
.sx-web-art__chrome{
  height:42px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:7px;
  border-bottom:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.56);
  font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;
}
.sx-web-art__chrome i{
  width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.38)
}
.sx-web-art__chrome span{margin-left:5px}
.sx-web-art__page{
  height:calc(100% - 42px);
  padding:clamp(22px,3vw,50px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(circle at 75% 25%,rgba(217,255,67,.22),transparent 26%),
    linear-gradient(145deg,#0b0b11,#191026);
}
.sx-web-art__eyebrow{
  color:#d9ff43;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.16em;
}
.sx-web-art__page strong{
  margin-top:14px;
  max-width:8ch;
  color:#fff;
  font-size:clamp(42px,6vw,92px);
  line-height:.78;
  letter-spacing:-.075em;
}
.sx-web-art__page>div{display:flex;gap:7px;flex-wrap:wrap;margin-top:25px}
.sx-web-art__page b{
  padding:8px 10px;border-radius:999px;
  background:#fff;color:#09090c;
  font-size:9px;letter-spacing:.08em
}
.sx-web-art__mobile{
  height:calc(100% - 42px);
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:linear-gradient(160deg,#ff82c3,#ff3cac 48%,#8f63ff);
}
.sx-web-art__mobile strong{
  color:#09090c;
  font-size:clamp(28px,3vw,52px);
  line-height:.82;
  letter-spacing:-.065em;
}
.sx-web-art__mobile span{
  margin-top:18px;
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:#09090c;color:#fff;
  font-weight:1000;
}
.sx-web-art__tag{
  position:absolute;
  padding:9px 12px;
  border-radius:999px;
  background:#d9ff43;
  color:#09090c;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.1em;
  box-shadow:0 12px 34px rgba(9,9,13,.2);
}
.sx-web-art__tag--one{left:8%;bottom:5%;transform:rotate(-4deg)}
.sx-web-art__tag--two{right:15%;top:4%;transform:rotate(4deg);background:#fff}

/* Make every showcase label/action readable over imagery. */
.sx-project__meta{
  position:relative;
  z-index:3;
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.sx-project__meta span,
.sx-project__meta b{
  padding:8px 10px;
  border-radius:999px;
  background:rgba(5,5,8,.58);
  backdrop-filter:blur(12px);
}
.sx-project__copy{position:relative;z-index:3}
.sx-project__copy h3{color:#fff;text-shadow:0 4px 28px rgba(0,0,0,.38)}
.sx-project__copy p{color:rgba(255,255,255,.88)}
.sx-project__copy strong{
  width:max-content;
  min-height:44px;
  padding:11px 15px;
  border-radius:999px;
  align-items:center;
  background:#fff;
  color:#09090c!important;
  text-shadow:none;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}

/* The two sections the direction is built around: keep them bold, but make
   every interactive surface unambiguously readable. */
.sx-signal__copy a{
  background:#09090d!important;
  color:#fff!important;
  border-color:#09090d!important;
  box-shadow:0 9px 26px rgba(9,9,13,.16);
}
.sx-signal__copy a:hover{
  background:#fff!important;
  color:#09090d!important;
}
.sx-contact .sx-contact__actions .sx-button--outline{
  background:#fff!important;
  color:#09090d!important;
  border-color:#09090d!important;
}
.sx-contact .sx-contact__actions .sx-button--outline:hover{
  background:#09090d!important;
  color:#fff!important;
}
.sx-footer a{
  color:#09090d!important;
  opacity:1!important;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}
.sx-footer>span{color:rgba(9,9,13,.68);opacity:1}

@media(max-width:1050px){
  .sx-discipline{
    --offset:0px!important;
    grid-template-columns:120px minmax(280px,1fr);
    padding-left:clamp(80px,10vw,120px);
  }
  .sx-discipline__detail{
    grid-column:2;
    padding-top:0;
  }
}
@media(max-width:700px){
  .sx-lanes{padding-top:96px;padding-bottom:110px}
  .sx-spectrum::before{left:25px}
  .sx-discipline{
    grid-template-columns:1fr;
    gap:14px;
    min-height:0;
    padding:26px 0 30px 66px;
  }
  .sx-discipline__signal{left:25px;width:38px;height:38px}
  .sx-discipline__id{padding-top:0}
  .sx-discipline h3{max-width:10ch;font-size:clamp(38px,12vw,62px)}
  .sx-discipline__detail{grid-column:1;gap:18px}
  .sx-discipline__detail p{font-size:14px}
  .sx-discipline__link{min-height:40px}
  .sx-web-art{inset:8% 1% 24% 2%;transform:none}
  .sx-web-art__browser--main{left:0;width:82%;height:69%;border-radius:20px}
  .sx-web-art__browser--side{right:0;top:28%;width:36%;height:62%;border-radius:19px}
  .sx-web-art__chrome{height:32px;padding:0 10px}
  .sx-web-art__page{height:calc(100% - 32px);padding:20px}
  .sx-web-art__page strong{font-size:clamp(34px,11vw,56px)}
  .sx-web-art__mobile{height:calc(100% - 32px);padding:14px}
  .sx-web-art__tag{font-size:7px;padding:7px 9px}
  .sx-project--web{min-height:76svh}
}


/* ── Bespoke selected-work art: Future of Games + VICE ──────────────── */
.sx-project--future{
  background:
    radial-gradient(circle at 75% 20%,rgba(79,236,255,.28),transparent 28%),
    radial-gradient(circle at 20% 28%,rgba(136,89,255,.36),transparent 30%),
    linear-gradient(145deg,#061425 0%,#0d2441 46%,#24144e 100%);
}
.sx-project--vice{
  background:
    radial-gradient(circle at 70% 12%,rgba(82,255,172,.17),transparent 30%),
    radial-gradient(circle at 20% 20%,rgba(67,99,255,.24),transparent 30%),
    linear-gradient(145deg,#07101a,#0b1a27 52%,#151f31);
}
.sx-project__media--future,
.sx-project__media--vice{background:transparent}
.sx-project__wash--future{
  background:linear-gradient(to bottom,rgba(2,11,24,.06),rgba(2,11,24,.14) 42%,rgba(2,8,20,.78));
}
.sx-project__wash--vice{
  background:linear-gradient(to bottom,rgba(4,10,17,.02),rgba(4,10,17,.12) 42%,rgba(4,9,15,.82));
}

/* FUTURE OF GAMES — generative systems / adaptive world visual */
.sx-future-art{
  position:absolute;
  inset:4% 4% 18%;
  overflow:hidden;
  border-radius:34px;
  background:
    radial-gradient(circle at 50% 38%,rgba(99,240,255,.12),transparent 25%),
    linear-gradient(180deg,#071522 0%,#0c1c32 45%,#0d1227 100%);
  border:1px solid rgba(132,240,255,.16);
  box-shadow:0 40px 100px rgba(0,0,0,.28);
}
.sx-future-art__grid{
  position:absolute;
  left:-12%;
  right:-12%;
  bottom:-18%;
  height:63%;
  transform:perspective(720px) rotateX(63deg);
  transform-origin:center bottom;
  background-image:
    linear-gradient(rgba(92,222,255,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(92,222,255,.18) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to top,#000 35%,transparent 100%);
}
.sx-future-art__sun{
  position:absolute;
  width:min(32vw,470px);
  aspect-ratio:1;
  right:6%;
  top:-4%;
  border-radius:50%;
  background:
    radial-gradient(circle,#e9fbff 0 5%,#79efff 6% 11%,rgba(84,228,255,.18) 12% 34%,rgba(84,228,255,.04) 35% 51%,transparent 52%);
  filter:drop-shadow(0 0 40px rgba(86,231,255,.28));
  animation:sxFuturePulse 6s ease-in-out infinite alternate;
}
@keyframes sxFuturePulse{to{transform:scale(1.06);filter:drop-shadow(0 0 62px rgba(130,101,255,.36))}}
.sx-future-art__world{
  position:absolute;
  left:9%;
  bottom:14%;
  width:48%;
  height:42%;
  transform:perspective(900px) rotateX(58deg) rotateZ(-18deg);
  transform-origin:center;
}
.sx-future-art__world i{
  position:absolute;
  width:18%;
  aspect-ratio:1;
  background:linear-gradient(145deg,#203f63,#0d2239);
  border:1px solid rgba(124,236,255,.25);
  box-shadow:
    18px 18px 0 rgba(60,102,144,.22),
    36px 36px 0 rgba(27,56,82,.14);
}
.sx-future-art__world i:nth-child(1){left:0;top:44%;width:22%}
.sx-future-art__world i:nth-child(2){left:19%;top:18%;width:29%;background:linear-gradient(145deg,#5142a4,#1b2d58)}
.sx-future-art__world i:nth-child(3){left:46%;top:39%;width:24%;background:linear-gradient(145deg,#146d7b,#16344d)}
.sx-future-art__world i:nth-child(4){left:66%;top:10%;width:17%;background:linear-gradient(145deg,#6a4fd1,#203258)}
.sx-future-art__world i:nth-child(5){left:73%;top:51%;width:14%;background:linear-gradient(145deg,#2099a6,#183a4e)}
.sx-future-art__world i:nth-child(6){left:35%;top:67%;width:18%;background:linear-gradient(145deg,#274f7e,#152941)}
.sx-future-art__card{
  position:absolute;
  z-index:3;
  padding:14px 15px 15px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:rgba(6,16,31,.72);
  color:#fff;
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 18px 50px rgba(0,0,0,.22);
}
.sx-future-art__card span{
  display:block;
  margin-bottom:10px;
  color:#78edff;
  font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
}
.sx-future-art__card strong{
  display:block;
  font-size:clamp(15px,1.6vw,25px);
  line-height:.92;
  letter-spacing:-.04em;
}
.sx-future-art__card b{
  display:inline-block;
  margin-top:12px;
  color:#d9ff43;
  font-size:8px;
  letter-spacing:.12em;
}
.sx-future-art__card--prompt{left:7%;top:8%;width:min(34%,340px);transform:rotate(-2deg)}
.sx-future-art__card--player{right:7%;top:42%;width:min(28%,280px);transform:rotate(2deg)}
.sx-future-art__card--memory{right:18%;bottom:6%;width:min(31%,310px);transform:rotate(-1deg)}
.sx-future-art__card--player>div{display:flex;gap:4px;margin-top:12px}
.sx-future-art__card--player>div i{
  height:5px;
  flex:1;
  border-radius:999px;
  background:#56e5ff;
}
.sx-future-art__card--player>div i:nth-child(2){opacity:.82}
.sx-future-art__card--player>div i:nth-child(3){opacity:.66}
.sx-future-art__card--player>div i:nth-child(4){opacity:.48}
.sx-future-art__card--player>div i:nth-child(5){opacity:.3}
.sx-future-art__words{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.sx-future-art__words span{
  position:absolute;
  color:rgba(255,255,255,.055);
  font-size:clamp(50px,7vw,110px);
  line-height:.8;
  font-weight:1000;
  letter-spacing:-.07em;
}
.sx-future-art__words span:nth-child(1){right:-1%;top:10%}
.sx-future-art__words span:nth-child(2){left:14%;top:43%}
.sx-future-art__words span:nth-child(3){right:4%;bottom:15%}
.sx-project--future:hover .sx-future-art__sun{transform:scale(1.09)}
.sx-project--future:hover .sx-future-art__card--prompt{transform:rotate(-1deg) translateY(-8px)}
.sx-project--future:hover .sx-future-art__card--player{transform:rotate(1deg) translateY(-6px)}
.sx-project--future:hover .sx-future-art__card--memory{transform:rotate(0deg) translateY(-7px)}
.sx-future-art__card{transition:transform .5s cubic-bezier(.2,.8,.2,1)}

/* VICE — a living Minecraft-style civic/economic system, not generic game art */
.sx-vice-art{
  position:absolute;
  inset:4% 4% 18%;
  overflow:hidden;
  border-radius:34px;
  background:
    linear-gradient(180deg,#0a1725 0%,#122b3d 52%,#101821 100%);
  border:1px solid rgba(116,186,255,.14);
  box-shadow:0 40px 100px rgba(0,0,0,.28);
}
.sx-vice-art__sky{
  position:absolute;
  inset:0 0 43% 0;
  background:
    radial-gradient(circle at 74% 12%,rgba(120,255,185,.18),transparent 30%),
    linear-gradient(180deg,#12243a,#0c1d31 58%,#14283a);
}
.sx-vice-art__sky::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:32px 32px;
}
.sx-vice-art__city{
  position:absolute;
  left:-2%;
  right:-2%;
  bottom:28%;
  height:48%;
  display:flex;
  align-items:flex-end;
  gap:1.1%;
  opacity:.96;
}
.sx-vice-art__city i{
  position:relative;
  flex:1;
  min-width:10%;
  background:
    repeating-linear-gradient(90deg,transparent 0 14%,rgba(125,205,255,.15) 15% 18%,transparent 19% 32%),
    repeating-linear-gradient(0deg,transparent 0 13%,rgba(126,207,255,.14) 14% 17%,transparent 18% 29%),
    linear-gradient(180deg,#173450,#10263b);
  border:1px solid rgba(116,186,255,.12);
  box-shadow:14px 14px 0 rgba(3,11,19,.18);
  image-rendering:pixelated;
}
.sx-vice-art__city i::after{
  content:"";
  position:absolute;
  left:18%;right:18%;top:-10px;height:10px;
  background:#193955;
  border:1px solid rgba(116,186,255,.12);
}
.sx-vice-art__city .b1{height:42%}
.sx-vice-art__city .b2{height:68%}
.sx-vice-art__city .b3{height:52%}
.sx-vice-art__city .b4{height:88%;flex:1.35}
.sx-vice-art__city .b5{height:58%}
.sx-vice-art__city .b6{height:76%}
.sx-vice-art__city .b7{height:48%}
.sx-vice-art__road{
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-4%;
  height:42%;
  transform:perspective(800px) rotateX(62deg);
  transform-origin:center bottom;
  background:
    linear-gradient(90deg,transparent 49.2%,rgba(217,255,67,.82) 49.2% 50.8%,transparent 50.8%),
    repeating-linear-gradient(90deg,#0a1016 0 13%,#111923 13% 25%);
  border-top:1px solid rgba(255,255,255,.09);
}
.sx-vice-art__phone{
  position:absolute;
  z-index:4;
  left:8%;
  top:8%;
  width:min(28%,280px);
  aspect-ratio:.63;
  padding:14px;
  border-radius:30px;
  background:#080b10;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 28px 70px rgba(0,0,0,.38);
  transform:rotate(-5deg);
}
.sx-vice-art__phone::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:23px;
  background:linear-gradient(155deg,#d9ff43 0 42%,#74ffc3 42% 58%,#72a7ff 58% 100%);
}
.sx-vice-art__phone>*{position:relative;z-index:2}
.sx-vice-art__phonebar{
  display:flex;
  justify-content:space-between;
  font-size:8px;
  font-weight:1000;
  color:#09090c;
}
.sx-vice-art__phone>strong{
  display:block;
  margin-top:28%;
  color:#09090c;
  font-size:clamp(28px,3.6vw,54px);
  line-height:.76;
  letter-spacing:-.07em;
}
.sx-vice-art__apps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
  margin-top:17px;
}
.sx-vice-art__apps i{
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#09090d;
  color:#fff;
  font:900 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  font-style:normal;
}
.sx-vice-art__phone small{
  display:block;
  margin-top:14px;
  color:rgba(9,9,13,.68);
  font-size:7px;
  line-height:1.35;
  font-weight:800;
  text-transform:uppercase;
}
.sx-vice-art__id,
.sx-vice-art__money{
  position:absolute;
  z-index:5;
  padding:15px;
  border-radius:18px;
  background:rgba(9,17,27,.82);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 52px rgba(0,0,0,.28);
}
.sx-vice-art__id{
  right:7%;
  top:14%;
  width:min(31%,315px);
  min-height:135px;
  transform:rotate(2deg);
}
.sx-vice-art__id span,
.sx-vice-art__money span{
  color:#d9ff43;
  font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.13em;
}
.sx-vice-art__id strong{
  display:block;
  margin-top:20px;
  font-size:clamp(18px,2vw,30px);
  letter-spacing:-.04em;
}
.sx-vice-art__id small{
  display:block;
  margin-top:7px;
  color:rgba(255,255,255,.55);
  font-size:8px;
  letter-spacing:.1em;
}
.sx-vice-art__id b{
  position:absolute;
  right:13px;
  bottom:11px;
  font-size:28px;
  color:#77a8ff;
}
.sx-vice-art__money{
  right:16%;
  top:52%;
  width:min(20%,210px);
  transform:rotate(-3deg);
}
.sx-vice-art__money strong{
  display:block;
  margin-top:10px;
  font-size:clamp(24px,3vw,42px);
  letter-spacing:-.05em;
}
.sx-vice-art__money small{
  color:rgba(255,255,255,.5);
  font-size:8px;
  letter-spacing:.11em;
}
.sx-vice-art__ticker{
  position:absolute;
  left:0;right:0;bottom:4%;
  z-index:4;
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}
.sx-vice-art__ticker span{
  padding:8px 10px;
  border-radius:999px;
  background:#d9ff43;
  color:#09090c;
  font-size:8px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.1em;
  box-shadow:0 8px 22px rgba(0,0,0,.14);
}
.sx-project--vice:hover .sx-vice-art__phone{transform:rotate(-3deg) translateY(-7px)}
.sx-project--vice:hover .sx-vice-art__id{transform:rotate(1deg) translateY(-5px)}
.sx-project--vice:hover .sx-vice-art__money{transform:rotate(-2deg) translateY(-6px)}
.sx-vice-art__phone,
.sx-vice-art__id,
.sx-vice-art__money{transition:transform .55s cubic-bezier(.2,.8,.2,1)}

@media(max-width:760px){
  .sx-future-art,
  .sx-vice-art{
    inset:5% 2% 26%;
    border-radius:23px;
  }
  .sx-future-art__sun{width:60vw;right:-12%;top:-7%}
  .sx-future-art__world{left:2%;bottom:8%;width:62%;height:38%}
  .sx-future-art__card{padding:10px;border-radius:13px}
  .sx-future-art__card--prompt{left:5%;top:7%;width:47%}
  .sx-future-art__card--player{right:3%;top:41%;width:38%}
  .sx-future-art__card--memory{right:7%;bottom:3%;width:41%}
  .sx-future-art__card strong{font-size:12px}
  .sx-future-art__words span{font-size:46px}

  .sx-vice-art__phone{left:4%;top:5%;width:40%;border-radius:20px;padding:10px}
  .sx-vice-art__phone::before{inset:5px;border-radius:15px}
  .sx-vice-art__phone>strong{font-size:27px;margin-top:24%}
  .sx-vice-art__apps{gap:3px}
  .sx-vice-art__apps i{font-size:8px;border-radius:6px}
  .sx-vice-art__id{right:4%;top:12%;width:45%;min-height:110px;padding:11px}
  .sx-vice-art__money{right:6%;top:49%;width:35%;padding:11px}
  .sx-vice-art__city{bottom:25%;height:43%}
  .sx-vice-art__ticker{bottom:3%;gap:4px}
  .sx-vice-art__ticker span{font-size:6px;padding:6px 7px}
}