/* Scoped enhancement: the Home hero, work and service scenes keep their styles. */
.capabilities.experience{background:#110e17;padding-bottom:70px}
.experience .cap-heading>p{max-width:330px}
.experience-stage{height:clamp(420px,44vw,660px);position:relative;margin:10px -2vw 0;isolation:isolate;touch-action:pan-y;background:radial-gradient(ellipse at 50% 80%,#7d6b8b24,transparent 65%);overflow:hidden}
.experience-stage:after{content:'';position:absolute;inset:auto 15% 5%;height:1px;background:linear-gradient(90deg,transparent,#c4b9d238,transparent);pointer-events:none}
.experience-stage canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.experience-stage[data-renderer=webgl] .experience-fallback{opacity:0;pointer-events:none}
.experience-fallback{position:absolute;inset:0;perspective:1100px;transition:opacity .2s}
.experience-art{position:absolute;inset:0;visibility:hidden;opacity:0;transform:translateY(16px);transition:opacity .35s,transform .65s cubic-bezier(.23,1,.32,1),visibility .65s}
.experience-art[data-active=true]{visibility:visible;opacity:1;transform:none}
.experience-art img{position:absolute;height:auto;border-radius:8px;box-shadow:2px 3px 0 #9c96a3,5px 7px 0 #302b37,12px 35px 45px #0009;object-fit:cover;backface-visibility:hidden}
.experience-art .art-main{width:61%;left:14%;top:13%;transform:rotateX(12deg) rotateY(-13deg) rotateZ(-6deg)}
.experience-art .art-side{width:23%;left:65%;top:21%;transform:rotateY(-12deg) rotateZ(8deg);border:6px solid #37323d;border-radius:18px}
.experience-art[data-chapter="0"] .art-side{width:21%;top:29%;left:70%;transform:rotateY(-8deg) rotateZ(13deg);border:0;border-radius:4px}
.experience-art[data-chapter="2"] .art-main{width:29%;left:22%;top:7%;transform:rotateY(12deg) rotateZ(-8deg)}
.experience-art[data-chapter="2"] .art-side{width:23%;left:55%;top:12%;transform:rotateY(-12deg) rotateZ(7deg)}
.experience-art .art-data{width:44%;left:30%;top:73%;transform:rotateX(24deg) rotateZ(-3deg);border:1px solid #7d708b}
.experience-caption{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #c6a4ee30;padding:15px 0 23px;font-size:12px;color:#bdafcb}
.experience .cap-controls{margin:24px 0 16px;gap:10px}
.experience .cap-controls button{padding:13px 24px;border-radius:4px}
.experience .cap-controls button[aria-pressed=true]{background:#ded3ed;color:#201727;border-color:#ded3ed}
.experience-status{min-height:1em}
.experience-introduced[data-renderer=fallback] .experience-art[data-active=true]{animation:concept-reveal 1.2s cubic-bezier(.23,1,.32,1) both}
@keyframes concept-reveal{from{opacity:.35;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.experience-art,.experience .cap-controls button{will-change:auto}
.experience-note{font-size:12px;color:#b6a9c1;margin-top:15px}
.experience-summary{padding:18px 0;border-top:1px solid #c6a4ee30}
.experience-summary h3{margin-bottom:10px}
.studio-statement>img{height:auto}
.studio-process{position:relative}
.studio-process .approach-heading{display:block}
.studio-process .approach-heading h2{margin-top:22px;font-size:clamp(40px,4.2vw,64px)}
#process.studio-process ol{display:grid;grid-template-columns:1fr;gap:25px;margin:0}
.studio-process ol li{min-height:210px}
.studio-process .process-stage{margin:30px 0 45px;position:relative;min-height:350px;max-width:620px;aspect-ratio:900/640;perspective:1200px}
.process-stage img{position:absolute;inset:0;width:100%;height:auto;border-radius:8px;box-shadow:0 20px 35px #21112a25;opacity:0;transform:translateY(14px) rotate(-3deg);transition:opacity .3s,transform .6s cubic-bezier(.23,1,.32,1)}
.process-stage img[data-active=true]{opacity:1;transform:rotate(-2deg)}
.process-stage figcaption{position:absolute;bottom:-32px;font-size:11px;color:#6c6178}
.studio-process ol li{transition:border-color .2s}
.studio-process ol li[data-current=true]{border-color:#843dff}
.process-mobile-art{display:none}
.studio-evidence{font-size:14px;margin-top:25px;max-width:38ch}
.studio-evidence a{text-decoration:underline;text-underline-offset:5px}
.cinematic-contact{position:relative;isolation:isolate}
.cinematic-contact:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 75% 60%,#843dff20,transparent 65%);opacity:0;z-index:-1}
.cinematic-contact.is-seen:before{animation:contact-light .6s ease-out both}
@keyframes contact-light{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(min-width:1000px){.studio-process{display:grid;grid-template-columns:1.1fr 1fr;gap:0 100px}.studio-process .approach-heading{grid-column:1;align-self:start}.studio-process .process-stage{grid-column:1;grid-row:2;position:sticky;top:90px;align-self:start}.studio-process ol{grid-column:2;grid-row:1 / span 3}.studio-process .studio-evidence{grid-column:1;align-self:end}}
@media(max-width:650px){.experience-stage{height:460px;margin:10px -20px 0}.experience-art .art-main{width:86%;left:5%;top:16%;transform:rotateY(-8deg) rotateZ(-7deg)}.experience-art .art-side{width:38%;left:52%;top:34%;border-width:4px}.experience-art[data-chapter="0"] .art-side{width:35%;left:55%;top:40%}.experience-art[data-chapter="2"] .art-main{width:52%;left:8%;top:7%}.experience-art[data-chapter="2"] .art-side{width:39%;left:51%;top:24%}.experience-art .art-data{width:77%;left:12%;top:79%}.experience .cap-controls{gap:7px}.experience .cap-controls button{padding:10px 14px;font-size:12px}.experience-caption{font-size:11px}.experience-caption span:last-child{max-width:120px;text-align:right}.studio-process .process-stage{display:none}.process-mobile-art{display:block;width:100%;max-width:400px;height:auto;margin:22px 0 6px;border-radius:6px;box-shadow:0 12px 20px #24152b18}.studio-process ol li{padding-bottom:30px}.experience .cap-detail{gap:20px}}
@media(prefers-reduced-motion:reduce){.experience-art,.process-stage img{transition:none!important;animation:none!important;transform:none}.experience-art img{transform:none!important}.cinematic-contact.is-seen:before{animation:none;opacity:1}}
@view-transition{navigation:auto}
::view-transition-old(root){animation:experience-out .18s ease-out both}
::view-transition-new(root){animation:experience-in .2s ease-out both}
@keyframes experience-out{to{opacity:0}}
@keyframes experience-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-old(root),::view-transition-new(root){animation:none}}
