/* One white exhibition, opening from the screen into physical depth. */
.depth-portal{scroll-margin-top:-100px;position:relative;height:155svh;background:#eef2fa;isolation:isolate}
.portal-stage{position:sticky;top:0;height:100svh;min-height:0;overflow:clip;display:grid;place-items:center}
.portal-stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.portal-copy{position:absolute;top:13%;text-align:center;pointer-events:none;z-index:1;width:100%;padding:0 20px}
.portal-copy h2{font-size:clamp(44px,6.5vw,92px);line-height:1.12;font-weight:500;letter-spacing:-.035em;margin:0;text-wrap:balance}
.portal-copy h2 span{display:block;color:#2554ee}
.portal-caption{position:absolute;bottom:7%;left:8%;right:8%;display:flex;justify-content:space-between;align-items:center;color:#536174;font-size:13px}
.portal-caption a{color:#2554ee;pointer-events:auto;min-height:44px;display:flex;align-items:center;gap:12px}
.depth-plane{transform-origin:50% 70%;backface-visibility:hidden}
.depth-plane:focus-visible,.depth-plane:has(:focus-visible){transform:none!important;opacity:1!important}
.studio{overflow:visible;position:relative;z-index:2}
.service-list{position:relative;perspective:none;padding-bottom:0}
.service-list>a{position:relative;top:auto;min-height:340px;margin-bottom:32px;padding:45px 35px;background:#f1f4fa;border:0;border-radius:16px;box-shadow:0 22px 42px #233b591c;grid-template-columns:minmax(0,1fr) minmax(250px,43%) 44px;isolation:isolate;transform-origin:center top}
.service-list>a:nth-child(2){background:#eaf0fc}.service-list>a:nth-child(3){background:#e3ebfc}.service-list>a:nth-child(4){background:#dce6fc;margin-bottom:0}
.service-list>a:last-child{border-bottom:0}
.service-list>a:hover,.service-list>a:focus-visible{padding-inline:35px;background:#eaf0fc}
.service-list .service-example figcaption{color:#42526d}
.service-example img{height:auto;aspect-ratio:1.44;object-fit:cover}
.service-list>a .service-example{transform:perspective(900px) rotateY(-9deg) rotateX(3deg);transform-origin:center;transition:transform 300ms cubic-bezier(.16,1,.3,1)}
.service-list>a:focus-visible .service-example{transform:none}
.maker{overflow:clip;min-height:85svh;position:relative;perspective:1400px}
.maker-name{position:relative;z-index:1}
.maker-copy{position:relative;z-index:1}
.maker-solid{width:110px;height:110px;position:relative;margin-top:55px;perspective:800px;direction:ltr}
.solid-core{position:absolute;width:100%;height:100%;transform-style:preserve-3d;animation:studio-solid-turn 20s linear infinite;animation-play-state:paused}
.maker.in-depth-view .solid-core{animation-play-state:running}
.solid-core i{position:absolute;inset:0;background:linear-gradient(135deg,#f9fbff,#bdc9df 52%,#edf3ff);border:1px solid #7f96bc55;border-radius:3px;backface-visibility:visible}
.solid-core i:nth-child(1){transform:translateZ(55px)}.solid-core i:nth-child(2){transform:rotateY(90deg) translateZ(55px);background:#2554ee}.solid-core i:nth-child(3){transform:rotateY(180deg) translateZ(55px)}.solid-core i:nth-child(4){transform:rotateY(-90deg) translateZ(55px);background:#1435a5}.solid-core i:nth-child(5){transform:rotateX(90deg) translateZ(55px)}.solid-core i:nth-child(6){transform:rotateX(-90deg) translateZ(55px);background:#4268c4}
@keyframes studio-solid-turn{from{transform:rotateX(-22deg) rotateY(25deg) rotateZ(-8deg)}to{transform:rotateX(338deg) rotateY(385deg) rotateZ(-8deg)}}
.process{perspective:1600px}.process-window{transform-style:preserve-3d;transform-origin:center}
.faq-layout,.contact-layout{perspective:1600px}
.depth-reading-bar{position:fixed;inset:0 0 auto;height:3px;z-index:140;pointer-events:none;transform-origin:right;background:#2554ee;transform:scaleX(0)}
.depth-paused .solid-core{animation-play-state:paused!important}
@media(hover:hover) and (pointer:fine){.service-list>a:hover .service-example{transform:perspective(900px) rotateY(0) rotateX(0)}}
@media(max-width:650px){
 .depth-portal{height:145svh}.portal-stage{min-height:0}.portal-copy{top:18%}.portal-copy h2{font-size:clamp(40px,10vw,60px)}
 .portal-caption{bottom:6%;font-size:12px;left:6%;right:6%}.portal-caption>span{max-width:45%}
 .studio{padding-inline:6%}.service-list>a{top:auto;grid-template-columns:minmax(0,1fr) 35px;gap:18px;padding:25px;min-height:0;margin-bottom:24px;align-content:start}
 .service-list>a:hover,.service-list>a:focus-visible{padding-inline:25px}.service-list .service-copy{grid-column:1;grid-row:1}.service-list .service-arrow{grid-column:2;grid-row:1}
 .service-list .service-example{display:block;grid-column:1/-1;grid-row:2;width:100%;max-width:none;margin:0;opacity:1}
 .service-example img{width:100%;max-height:210px;aspect-ratio:1.8;object-position:top}.service-list h3{font-size:24px;line-height:1.3}.service-list p{font-size:14px;margin-top:8px}.service-action{margin-top:10px;font-size:12px}
 .maker-solid{width:78px;height:78px;margin:35px 25px 15px}.solid-core i:nth-child(1){transform:translateZ(39px)}.solid-core i:nth-child(2){transform:rotateY(90deg) translateZ(39px)}.solid-core i:nth-child(3){transform:rotateY(180deg) translateZ(39px)}.solid-core i:nth-child(4){transform:rotateY(-90deg) translateZ(39px)}.solid-core i:nth-child(5){transform:rotateX(90deg) translateZ(39px)}.solid-core i:nth-child(6){transform:rotateX(-90deg) translateZ(39px)}
}
.compact-depth .service-list>a{position:relative;top:auto;min-height:0;margin-bottom:24px}
.compact-depth .portal-stage{min-height:0}
@media(prefers-reduced-motion:reduce){.depth-portal{height:auto}.portal-stage{height:75svh}.solid-core{animation:none;transform:rotateX(-22deg) rotateY(25deg)}.depth-plane{transform:none!important;opacity:1!important}.service-list>a{position:relative;top:auto;margin-bottom:35px}}
html:is(.reduce-motion,.nomotion) .depth-portal{height:auto}
html:is(.reduce-motion,.nomotion) .portal-stage{height:75svh}
html:is(.reduce-motion,.nomotion) .depth-plane{transform:none!important;opacity:1!important}
html:is(.reduce-motion,.nomotion) .solid-core{animation:none;transform:rotateX(-22deg) rotateY(25deg)}
html:is(.reduce-motion,.nomotion) .service-list>a{position:relative;top:auto;margin-bottom:35px}

/* Stable geometry: Safari toolbar resizing must never reflow the exhibition. */
.depth-viewport{position:fixed;left:0;top:0;width:0;height:100svh;visibility:hidden;pointer-events:none;contain:strict}
.global-scene #universe.is-ready{display:block}
.portal-stage #portal-webgl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.process-window{will-change:auto}
.portal-stage:after{content:'';position:absolute;left:50%;top:64%;width:60%;height:1px;background:linear-gradient(90deg,transparent,#7d95bd60,transparent);transform:translate(-50%,160px);pointer-events:none;z-index:-1}
@media(max-width:650px){.portal-stage:after{width:80%;transform:translate(-50%,130px)}}

.global-scene{height:100svh;bottom:auto}

/* Service cards keep their layout space while their visual surface moves in depth. */
.service-list>a{transform:none;opacity:1;will-change:auto;backface-visibility:visible}

.service-list>a{transform-origin:50% 50%;animation:none}
@keyframes service-depth-pass {
  0% { transform:perspective(1400px) translate3d(0,24px,-40px) rotateX(7deg) rotateY(var(--service-turn,2deg)) scale(.95); opacity:.72; }
  38%,62% { transform:perspective(1400px) translate3d(0,0,0) rotateX(0) rotateY(0) scale(1); opacity:1; }
  100% { transform:perspective(1400px) translate3d(0,0,-24px) rotateX(-3deg) rotateY(0) scale(.975); opacity:.88; }
}
.service-list>a:nth-child(even){--service-turn:-2deg}
@supports(animation-timeline:view()) and (animation-range:cover 0% cover 100%) {
 html.service-scroll-native:not(.reduce-motion):not(.nomotion) .service-list>a {
  animation:service-depth-pass linear both;
  animation-timeline:view(block);
  animation-range:cover 0% cover 100%;
 }
}
.service-list>a:focus-visible,.service-list>a:focus-within{animation:none!important;transform:none!important;opacity:1!important}
@media(prefers-reduced-motion:reduce){.service-list>a{animation:none!important;transform:none!important;opacity:1!important}}