/* Evolve depth and motion. Content stays visible if JavaScript is unavailable. */
.motion-ready .hero-art{perspective:1100px}
.motion-ready .hero-shell .concept-window{transform:rotateX(var(--scene-x,0deg)) rotateY(var(--scene-y,0deg)) rotateZ(-4deg) translateZ(12px);transform-origin:50% 50%;box-shadow:1px 2px 0 #476382,3px 5px 0 #203951,5px 8px 0 #132b43,0 28px 65px #0009;transition:transform .55s cubic-bezier(.2,.7,.25,1)}
.motion-ready .hero-shell .mobile-concept{transform:rotateX(var(--scene-x,0deg)) rotateY(var(--scene-y,0deg)) rotateZ(7deg) translateZ(30px);box-shadow:2px 3px 0 #4a6884,4px 6px 0 #1b354e,-12px 20px 35px #0008;transition:transform .55s cubic-bezier(.2,.7,.25,1)}
.motion-ready .hero-art[data-tilting] .concept-window,.motion-ready .hero-art[data-tilting] .mobile-concept{transition-duration:.15s}
.motion-ready .concept-window:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at var(--light-x,65%) var(--light-y,15%),#d9f6ff1c,transparent 60%);box-shadow:inset 0 1px 0 #e9f7ff35}
.motion-ready .orbit:before{content:'';position:absolute;top:-3px;left:50%;width:6px;height:6px;border-radius:50%;background:#6bd7dc;box-shadow:0 0 15px #6bd7dc8c}
.motion-ready .orbit-two:before{width:4px;height:4px;background:#e7c384;box-shadow:0 0 12px #e7c38466}
html[data-motion=on] .hero-art[data-in-view=true] .concept-window{animation:evolve-desktop-float 7s ease-in-out infinite}
html[data-motion=on] .hero-art[data-in-view=true] .mobile-concept{animation:evolve-phone-float 6s ease-in-out infinite}
html[data-motion=on] .hero-art[data-in-view=true] .orbit{animation:evolve-orbit 38s linear infinite}
html[data-motion=on] .hero-art[data-in-view=true] .orbit-two{animation-duration:55s;animation-direction:reverse}
html[data-motion=on] .hero-art[data-in-view=true] .orbit-star{animation:evolve-star 5s ease-in-out infinite}
html[data-motion=on] .hero-copy>.eyebrow,html[data-motion=on] .hero-copy>h1,html[data-motion=on] .hero-copy>.hero-lead,html[data-motion=on] .hero-copy>.hero-description,html[data-motion=on] .hero-copy>.hero-actions,html[data-motion=on] .hero-copy>.hero-foot{animation:evolve-enter .75s cubic-bezier(.2,.7,.25,1) both}
html[data-motion=on] .hero-copy>h1{animation-delay:.08s}html[data-motion=on] .hero-copy>.hero-lead{animation-delay:.16s}html[data-motion=on] .hero-copy>.hero-description{animation-delay:.23s}html[data-motion=on] .hero-copy>.hero-actions{animation-delay:.3s}html[data-motion=on] .hero-copy>.hero-foot{animation-delay:.37s}
.motion-ready :is(.service-card,.work-card,.journal-card){position:relative;transition:transform .45s cubic-bezier(.2,.7,.25,1),box-shadow .35s,border-color .25s,background .25s}
.motion-ready .service-card{transform-style:preserve-3d;box-shadow:0 4px 0 #071a30,0 9px 22px #081c3021}
.motion-ready .service-card:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--light-x,50%) var(--light-y,50%),#b5e8ff24,transparent 65%);transition:opacity .3s}
.motion-ready .service-card :is(.service-card-top,h3,p,.service-detail){transform:translateZ(14px)}
.motion-ready .service-card-top>.icon{transform:translateZ(14px);transition:transform .4s}
.motion-ready .button{transition:transform .2s,box-shadow .2s,background .2s}
.motion-ready .hero-shell .button.gold{box-shadow:0 4px 0 #123e8d,0 12px 30px #0059e92b}
.motion-ready .button:active{transform:translateY(2px);box-shadow:0 1px 0 #07172833}
.motion-ready .button>.icon,.motion-ready .text-link>span,.motion-ready .service-detail>span{transition:transform .25s}
.motion-ready :is(.button,.text-link,.service-detail):hover>:is(.icon,span){transform:translateX(3px)}
@media(min-width:851px) and (hover:hover) and (pointer:fine){
  html[data-motion=on] :is(.service-card,.work-card,.journal-card):is(:hover,:focus-within){transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-7px);box-shadow:0 7px 0 #0a1c332b,0 24px 42px #071c3a30;z-index:2}
  html[data-motion=on] :is(.service-card,.work-card,.journal-card)[data-tilting]{transition-duration:.14s}
  html[data-motion=on] .service-card:hover:after{opacity:1}
  html[data-motion=on] .service-card:hover .service-card-top>.icon{transform:translateZ(24px) rotate(-7deg)}
  html[data-motion=on] .button:hover{transform:perspective(700px) translateY(-3px) rotateX(5deg)}
}
.motion-ready [data-reveal]{transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.25,1);transition-delay:var(--reveal-delay,0ms)}
.motion-ready :is(.service-card,.work-card,.journal-card)[data-reveal]{transition:opacity .7s var(--reveal-delay,0ms) ease,translate .7s var(--reveal-delay,0ms) cubic-bezier(.2,.7,.25,1),transform .45s cubic-bezier(.2,.7,.25,1),box-shadow .35s,border-color .25s,background .25s}
.motion-ready :is(.service-card,.work-card,.journal-card)[data-tilting]{transition-duration:.14s}
html[data-motion=on] [data-reveal]:not(.is-revealed){opacity:0;translate:0 22px}
html[data-motion=on] [data-reveal]:focus-within{opacity:1;translate:0 0}
.motion-ready .about-skyline{position:relative;isolation:isolate;overflow:hidden}
.motion-ready .about-skyline:before{content:'';position:absolute;inset:-26px 0;z-index:0;background-image:inherit;background-color:inherit;background-size:cover;background-position:inherit;transform:translate3d(0,var(--skyline-shift,0px),0) scale(1.025);pointer-events:none}
.motion-ready .about-skyline .page-hero{position:relative;z-index:1}
.motion-toggle{position:fixed;bottom:20px;left:20px;z-index:19;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:10px 14px;border:1px solid #5d7b9b;border-radius:30px;background:#0d2545ed;color:#e7f4ff;box-shadow:0 4px 20px #06192e26;font-size:10px;line-height:1.2;backdrop-filter:blur(12px)}
.motion-toggle svg{width:12px;height:12px;fill:currentColor;flex-shrink:0;color:#82dce5}.motion-toggle:hover{background:#183e68;border-color:#8acde2}.motion-toggle:focus-visible{outline:2px solid #72d9e4;outline-offset:4px}
body:has(.project-tray:not([hidden])) .motion-toggle{bottom:86px}
@keyframes evolve-desktop-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes evolve-phone-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes evolve-orbit{to{rotate:360deg}}
@keyframes evolve-star{0%,100%{scale:1;rotate:-5deg}50%{scale:1.1;rotate:8deg}}
@keyframes evolve-enter{from{opacity:0;translate:0 17px}to{opacity:1;translate:0 0}}
html[data-motion=off] .hero-art *,html[data-motion=off] .hero-copy>*{animation:none!important;translate:none}
html[data-motion=off] [data-reveal]{opacity:1;translate:none;transition:none}
html[data-motion=off] .about-skyline:before{inset:0;transform:none}
html[data-motion=off] :is(.service-card,.work-card,.journal-card,.button,.button>.icon,.text-link>span,.service-detail>span,.service-card-top>.icon){transition:none}
html[data-motion=off] .service-card :is(.service-card-top,h3,p,.service-detail){transform:none}
html[data-motion=off] :is(.button,.button>.icon,.text-link>span,.service-detail>span):is(:hover,:active){transform:none}
html[data-motion=off] :is(.button,.text-link,.service-detail):is(:hover,:active)>:is(.icon,span){transform:none}
html[data-motion=off] .work-card:hover img{transform:none;transition:none}
@media(max-width:600px){
  .motion-ready .hero-shell .mobile-concept{transform:rotateZ(7deg) translateZ(8px)}
  .motion-ready .hero-shell .concept-window{transform:rotateZ(-4deg);box-shadow:1px 2px 0 #476382,2px 4px 0 #203951,0 20px 45px #0008}
  .motion-ready .service-card :is(.service-card-top,h3,p,.service-detail){transform:none}
  .motion-toggle{left:12px;bottom:12px;min-height:40px;padding:9px 12px;font-size:9px}
  @keyframes evolve-desktop-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
  @keyframes evolve-phone-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
}
@media(prefers-reduced-motion:reduce){
  html:not([data-motion=on]) .hero-art *,html:not([data-motion=on]) .hero-copy>*{animation:none!important}
  html:not([data-motion=on]) [data-reveal]{opacity:1!important;translate:none!important;transition:none}
}