/* 2026-09-12 selected visual direction: portal + optical cobalt + liquid controls */

/* Optical glass navigation stays light and stable while the page moves below it */
.site-header {
  contain:layout paint;
  backface-visibility:hidden;
  will-change:transform}
.nav-pill,
.wordmark {
  background:linear-gradient(145deg,rgb(255 255 255 / .82),rgb(224 232 255 / .5));
  border:1px solid rgb(255 255 255 / .86);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .95),0 14px 40px rgb(5 15 45 / .14);
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%)}
.nav-pill {color:var(--studio-ink)}
.nav-pill a {color:rgb(8 9 12 / .62)}
.nav-pill a:hover {color:var(--studio-white);background:var(--studio-blue)}

/* Selected liquid capsule language */
.header-contact,
.button:not(.button-white) {
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,rgb(78 112 255 / .96),rgb(34 65 186 / .94));
  border:1px solid rgb(255 255 255 / .46);
  box-shadow:inset 0 2px 1px rgb(255 255 255 / .55),inset 0 -16px 30px rgb(2 20 91 / .2),0 18px 44px rgb(49 92 255 / .25)}
.header-contact::before,
.button:not(.button-white)::before {
  content:'';
  position:absolute;
  inset:2px 34% 52% 9%;
  border-radius:999px;
  background:linear-gradient(90deg,rgb(255 255 255 / .34),rgb(255 255 255 / .08));
  filter:blur(6px);
  pointer-events:none}
.header-contact>* ,
.button:not(.button-white)>* {position:relative;z-index:1}
.button:not(.button-white)>.arrow {
  width:38px;
  height:38px;
  margin:-8px -12px -8px 0;
  border-radius:50%;
  color:var(--studio-blue);
  background:var(--studio-white);
  mask:none;
  -webkit-mask:none}
.button:not(.button-white)>.arrow::after {
  content:'';
  position:absolute;
  inset:10px;
  background:currentColor;
  mask:var(--icon-arrow-up-right) center/contain no-repeat;
  -webkit-mask:var(--icon-arrow-up-right) center/contain no-repeat}
.header-contact:hover,
.button:not(.button-white):hover {
  background:linear-gradient(135deg,#5f82ff,#2449ca);
  transform:translateY(-2px);
  box-shadow:inset 0 2px 1px rgb(255 255 255 / .62),inset 0 -16px 30px rgb(2 20 91 / .22),0 24px 54px rgb(49 92 255 / .32)}
.button-white {
  border:1px solid rgb(255 255 255 / .7);
  box-shadow:inset 0 1px 0 #fff,inset 0 -12px 25px rgb(49 92 255 / .09),0 18px 42px rgb(5 15 45 / .16)}

/* Hero → one meaningful portal instead of a door with two unrelated screens */
.hero {
  min-height:100svh;
  padding-top:88px;
  overflow:hidden;
  color:var(--studio-white);
  background:radial-gradient(circle at 76% 48%,#0c2945 0,#09152a 30%,#08090d 68%)}
.hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(112deg,rgb(255 255 255 / .035),transparent 38%),repeating-linear-gradient(90deg,transparent 0 119px,rgb(255 255 255 / .018) 120px);
  pointer-events:none}
.hero-center {
  position:relative;
  z-index:1;
  min-height:calc(100svh - 88px);
  padding:48px 0 34px;
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(520px,1.14fr);
  align-items:center;
  gap:clamp(12px,2vw,40px);
  text-align:left}
.hero-copy {position:relative;z-index:4;max-width:720px}
.hero h1 {
  width:auto;
  margin:0 0 34px;
  font-size:clamp(64px,6.7vw,112px);
  line-height:.88;
  letter-spacing:-.075em}
.hero h1 .hero-second {
  margin-top:10px;
  font-size:.78em;
  line-height:.92}
.hero-stage {display:block}
.hero-description {align-items:flex-start;gap:34px}
.hero-description p {
  max-width:500px;
  color:rgb(255 255 255 / .59);
  font-size:clamp(16px,1.3vw,20px)}
.studio-hero-visual {
  position:relative;
  min-height:min(72vh,720px);
  perspective:1100px;
  transform-style:preserve-3d}
.studio-hero-visual img {height:auto}
.studio-hero-halo {
  position:absolute;
  width:72%;
  aspect-ratio:1;
  top:12%;
  left:17%;
  border-radius:50%;
  background:var(--studio-blue);
  filter:blur(110px);
  opacity:.2}
.studio-hero-portal,
.studio-hero-signal {
  position:absolute;
  filter:drop-shadow(0 45px 70px rgb(0 0 0 / .42));
  will-change:transform;
  transition:transform 650ms var(--ease-reveal),opacity 500ms ease}
.studio-hero-portal {
  z-index:1;
  width:min(640px,76%);
  top:0;
  right:2%;
  transform:translate3d(calc(var(--hero-x,0)*18px),calc(var(--hero-y,0)*18px),0) rotate(-4deg)}
.studio-hero-motion {
  position:absolute;
  z-index:2;
  width:154%;
  max-width:none;
  height:auto;
  top:50%;
  right:-31%;
  opacity:0;
  filter:saturate(1.08) contrast(1.03);
  mix-blend-mode:screen;
  mask-image:radial-gradient(ellipse 68% 52% at 68% 50%,#000 0 61%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 68% 52% at 68% 50%,#000 0 61%,transparent 100%);
  transform:translate3d(calc(var(--hero-x,0)*14px),calc(-50% + var(--hero-y,0)*14px),0);
  transition:opacity 700ms ease,transform 650ms var(--ease-reveal)}
.studio-hero-motion.is-ready {opacity:1}
.studio-hero-visual.has-motion .studio-hero-portal {opacity:0}
.studio-hero-signal {
  z-index:3;
  width:min(260px,31%);
  left:0;
  bottom:1%;
  transform:translate3d(calc(var(--hero-x,0)*-24px),calc(var(--hero-y,0)*-18px),70px) rotate(-18deg)}
.studio-hero-note {
  position:absolute;
  z-index:4;
  right:0;
  bottom:4%;
  width:230px;
  min-height:150px;
  padding:22px;
  display:flex;
  flex-direction:column;
  color:var(--studio-white);
  background:linear-gradient(145deg,rgb(255 255 255 / .2),rgb(255 255 255 / .055));
  border:1px solid rgb(255 255 255 / .34);
  border-radius:30px;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .42),0 28px 70px rgb(0 0 0 / .3);
  backdrop-filter:blur(26px) saturate(140%);
  -webkit-backdrop-filter:blur(26px) saturate(140%);
  transform:rotate(5deg)}
.studio-hero-note span {font-size:9px;letter-spacing:.12em;opacity:.55}
.studio-hero-note strong {margin:auto 0 0;font-size:23px;line-height:.94;letter-spacing:-.045em}

/* The utility labels requested for removal no longer reserve space */
.word-pile-footer,
.scatter-kicker,
.scatter-footer {display:none!important}

/* Why AI Room → reversible scroll stack */
.why-stack-story {
  padding:clamp(100px,10vw,160px) 0;
  color:var(--studio-white);
  background:var(--studio-ink)}
.why-stack-sticky {
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  align-items:center;
  gap:clamp(36px,5vw,80px)}
.why-studio-heading {margin:0}
.why-studio-heading h2 {
  max-width:650px;
  margin:18px 0 28px;
  font-size:clamp(58px,6vw,96px);
  line-height:.88}
.why-studio-heading h2 span {color:#6380ff}
.why-studio-heading>p:last-child {
  max-width:500px;
  color:rgb(255 255 255 / .48);
  font-size:16px;
  line-height:1.5}
.why-stack-stage {
  min-height:650px;
  display:grid;
  gap:14px}
.why-stack-card {
  position:relative;
  min-height:520px;
  padding:38px;
  overflow:hidden;
  border:1px solid rgb(255 255 255 / .2);
  border-radius:54px;
  box-shadow:0 45px 95px rgb(0 0 0 / .38)}
.why-stack-card>span {font-size:9px;letter-spacing:.13em}
.why-stack-card h3 {
  position:relative;
  z-index:2;
  margin:22px 0 18px;
  font-size:clamp(46px,4.7vw,72px);
  line-height:.91}
.why-stack-card p {
  position:relative;
  z-index:2;
  max-width:330px;
  font-size:15px;
  line-height:1.45;
  opacity:.64}
.why-stack-card img {
  position:absolute;
  right:-10%;
  bottom:-12%;
  width:72%;
  height:auto;
  filter:drop-shadow(0 30px 50px rgb(0 0 0 / .32))}
.why-stack-card-one {color:var(--studio-ink);background:var(--studio-white)}
.why-stack-card-two {background:var(--studio-blue)}
.why-stack-card-two img {width:64%;right:-6%;bottom:-8%}
.why-stack-card-three {
  background:linear-gradient(145deg,rgb(255 255 255 / .2),rgb(255 255 255 / .055));
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px)}
.why-stack-card-three img {width:92%;right:-22%;bottom:1%}
.why-stack-story.is-enhanced {
  height:280svh;
  padding:0}
.why-stack-story.is-enhanced .why-stack-sticky {
  position:sticky;
  top:0;
  height:100svh;
  min-height:660px;
  overflow:hidden}
.why-stack-story.is-enhanced .why-stack-stage {
  position:relative;
  height:min(72vh,700px);
  min-height:0;
  perspective:1200px}
.why-stack-story.is-enhanced .why-stack-stage::before {
  content:'';
  position:absolute;
  width:78%;
  aspect-ratio:1;
  top:8%;
  left:12%;
  border-radius:50%;
  background:var(--studio-blue);
  filter:blur(120px);
  opacity:.16}
.why-stack-story.is-enhanced .why-stack-card {
  position:absolute;
  inset:5% 3% auto auto;
  width:min(560px,88%);
  height:min(620px,80vh);
  min-height:0;
  transform-origin:50% 90%;
  will-change:transform,opacity}

/* Five rooms → one active room, not five competing cards */
.process-rooms-story {
  padding:clamp(100px,10vw,160px) var(--studio-gutter);
  color:var(--studio-white);
  background:radial-gradient(circle at 72% 48%,#173da9,#090b12 58%)}
.process-rooms-sticky {padding:0;display:grid;grid-template-columns:.78fr 1.22fr;align-items:center;gap:clamp(32px,5vw,80px)}
.process-rooms-heading h2 {
  max-width:620px;
  margin:20px 0 28px;
  font-size:clamp(58px,6vw,96px);
  line-height:.88}
.process-rooms-heading h2 span {color:#6380ff}
.process-rooms-heading>p:last-child {max-width:450px;color:rgb(255 255 255 / .5);font-size:16px;line-height:1.5}
.process-room-viewport {
  position:relative;
  min-height:620px;
  overflow:hidden;
  border:1px solid rgb(255 255 255 / .16);
  border-radius:52px;
  background:linear-gradient(145deg,rgb(255 255 255 / .12),rgb(255 255 255 / .035));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .22),0 45px 100px rgb(0 0 0 / .32);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px)}
.process-room-viewport::before,
.process-room-viewport::after {
  content:'';
  position:absolute;
  inset:34px;
  border:1px solid rgb(255 255 255 / .13);
  border-radius:38px;
  transform:perspective(900px) rotateY(-7deg)}
.process-room-viewport::after {inset:66px;border-color:rgb(91 125 255 / .28);transform:perspective(900px) rotateY(8deg)}
.process-room-list {position:relative;z-index:3;min-height:620px;margin:0;padding:0;list-style:none}
.process-room-list li {
  min-height:620px;
  padding:72px clamp(32px,5vw,72px);
  display:flex;
  flex-direction:column;
  justify-content:center}
.process-room-list li>span {font-size:10px;letter-spacing:.13em;opacity:.52}
.process-room-list h3 {
  margin:26px 0 24px;
  font-size:clamp(60px,6vw,96px);
  line-height:.88}
.process-room-list p {max-width:390px;color:rgb(255 255 255 / .58);font-size:17px;line-height:1.45}
.process-room-object {
  position:absolute;
  z-index:2;
  right:4%;
  bottom:4%;
  width:38%;
  height:auto;
  pointer-events:none}
.process-room-object {
  filter:drop-shadow(0 35px 55px rgb(0 0 0 / .35));
  transition:transform 700ms var(--ease-reveal),opacity 420ms ease}
.process-room-progress {
  position:absolute;
  z-index:6;
  right:34px;
  bottom:30px;
  left:34px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:7px}
.process-room-progress i {height:3px;border-radius:3px;background:rgb(255 255 255 / .15);transition:background 240ms,transform 240ms}
.process-room-progress i.is-active {background:#6c88ff;transform:scaleY(1.7)}
.process-rooms-story.is-enhanced {height:300svh;padding:0;background:radial-gradient(circle at 72% 48%,#173da9,#090b12 58%)}
.process-rooms-story.is-enhanced .process-rooms-sticky {
  position:sticky;
  top:0;
  height:100svh;
  min-height:660px;
  padding-left:var(--studio-gutter);
  padding-right:var(--studio-gutter);
  overflow:hidden}
.process-rooms-story.is-enhanced .process-room-list li {
  position:absolute;
  inset:0;
  opacity:0;
  transform:translate3d(22%,0,0) scale(.94);
  transition:opacity 280ms ease,transform 620ms var(--ease-reveal);
  will-change:transform,opacity}

/* Case hover remains inside its field and gains depth without jumping over the heading */
.case-index {overflow:hidden}
.case-mini {
  transition:transform 320ms var(--ease-reveal),background-color 180ms,border-color 180ms,box-shadow 320ms var(--ease-reveal)}
.case-mini:hover {
  z-index:1;
  transform:scale(.985);
  border-color:rgb(122 151 255 / .72);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),0 22px 45px rgb(0 0 0 / .24)}
.case-mini>i {
  background:rgb(255 255 255 / .08);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .2),0 8px 18px rgb(0 0 0 / .16);
  backdrop-filter:blur(10px)}

@media(max-width:1100px) and (min-width:768px) {
  .hero-center {grid-template-columns:minmax(0,.9fr) minmax(440px,1.1fr)}
  .hero h1 {font-size:clamp(58px,7.2vw,82px)}
  .why-stack-sticky,.process-rooms-sticky {grid-template-columns:1fr;gap:24px}
  .why-studio-heading,.process-rooms-heading {align-self:end}
  .why-stack-story.is-enhanced .why-stack-stage {height:56vh}
  .why-stack-story.is-enhanced .why-stack-card {left:6%;right:auto;height:52vh}
  .process-room-viewport,.process-room-list,.process-room-list li {min-height:48vh}
  .process-room-object {right:4%;bottom:2%;width:min(44%,calc(48vh - 40px))}
}

@media(max-width:767px) {
  .nav-pill {background:rgb(8 9 12 / .94);border-color:rgb(255 255 255 / .14)}
  .nav-pill a {color:var(--studio-white)}
  .wordmark {background:rgb(255 255 255 / .78)}
  .hero {padding:68px 18px 36px;min-height:auto}
  .hero-center {
    min-height:auto;
    padding:68px 0 20px;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:18px}
  .hero h1 {font-size:clamp(52px,15.7vw,68px);line-height:.88;margin-bottom:28px}
  .hero h1 .hero-second {font-size:.88em}
  .hero-description p {font-size:15px}
  .studio-hero-visual {min-height:470px;margin-top:8px}
  .studio-hero-portal {width:92%;right:-8%;top:5%}
  .studio-hero-motion {width:205%;right:-59%;top:48%;mask-image:radial-gradient(ellipse 70% 54% at 68% 50%,#000 0 58%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 70% 54% at 68% 50%,#000 0 58%,transparent 100%)}
  .studio-hero-signal {width:42%;left:-6%;bottom:0}
  .studio-hero-note {width:154px;min-height:108px;padding:14px;right:0;bottom:3%;border-radius:20px}
  .studio-hero-note span {font-size:7px}.studio-hero-note strong {font-size:16px}

  .why-stack-story {padding:90px 18px}
  .why-stack-sticky {display:block;padding:0}
  .why-studio-heading h2 {font-size:clamp(49px,14vw,64px)}
  .why-studio-heading>p:last-child {font-size:13px}
  .why-stack-stage {margin-top:42px;min-height:0}
  .why-stack-card {min-height:410px;padding:26px;border-radius:36px}
  .why-stack-card h3 {font-size:42px}.why-stack-card p {font-size:13px;max-width:250px}
  .why-stack-story.is-enhanced {height:300svh;padding:0}
  .why-stack-story.is-enhanced .why-stack-sticky {padding:86px 18px 22px;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:18px}
  .why-stack-story.is-enhanced .why-stack-stage {height:47vh;min-height:330px;margin-top:0}
  .why-stack-story.is-enhanced .why-stack-card {top:2%;left:4%;right:auto;width:92%;height:42vh;min-height:320px;padding:24px;border-radius:34px}
  .why-stack-story.is-enhanced .why-stack-card h3 {font-size:36px}
  .why-stack-card img {width:66%}.why-stack-card-three img {width:96%;right:-28%}

  .process-rooms-story {padding:90px 18px}
  .process-rooms-sticky {display:block;padding:0}
  .process-rooms-heading h2 {font-size:clamp(49px,14vw,64px)}
  .process-rooms-heading>p:last-child {font-size:13px}
  .process-room-viewport {min-height:430px;margin-top:40px;border-radius:36px}
  .process-room-list,.process-room-list li {min-height:430px}
  .process-room-list li {padding:48px 26px 76px}
  .process-room-list h3 {font-size:54px}
  .process-room-list p {font-size:14px;max-width:270px}
  .process-room-object {width:56%;right:6%;bottom:4%}
  .process-rooms-story.is-enhanced {height:320svh;padding:0}
  .process-rooms-story.is-enhanced .process-rooms-sticky {padding:82px 18px 20px;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:18px}
  .process-rooms-story.is-enhanced .process-room-viewport {min-height:0;height:48vh;margin-top:0}
  .process-rooms-story.is-enhanced .process-room-list,.process-rooms-story.is-enhanced .process-room-list li {min-height:0;height:100%}
  .process-room-progress {right:24px;bottom:22px;left:24px}
  .case-mini:hover {transform:none}}

@media(prefers-reduced-motion:reduce) {
  .studio-hero-motion {display:none}
  .studio-hero-portal,.studio-hero-signal,.process-room-object {transition:none!important;transform:none!important}
  .why-stack-story.is-enhanced,.process-rooms-story.is-enhanced {height:auto;padding:90px 18px}
  .why-stack-story.is-enhanced .why-stack-sticky,.process-rooms-story.is-enhanced .process-rooms-sticky {position:relative;height:auto;min-height:0;display:block;padding:0;overflow:visible}
  .why-stack-story.is-enhanced .why-stack-stage {height:auto;margin-top:40px}
  .why-stack-story.is-enhanced .why-stack-card {position:relative;inset:auto;width:auto;height:auto;min-height:410px;margin:12px 0;opacity:1!important;transform:none!important}
  .process-rooms-story.is-enhanced .process-room-viewport {height:auto;margin-top:40px}
  .process-rooms-story.is-enhanced .process-room-list,.process-rooms-story.is-enhanced .process-room-list li {height:auto;min-height:0}
  .process-rooms-story.is-enhanced .process-room-list li {position:relative;inset:auto;min-height:360px;opacity:1!important;transform:none!important}
  .process-room-progress {display:none}}