/* Homepage cinematic stage and project exploration. Existing company identity remains canonical. */
.studio-stage{position:relative;isolation:isolate;min-height:1040px;max-height:none;padding:66px var(--pad) 26px;overflow:hidden;background:#050911;border-bottom:1px solid var(--line)}
.stage-cinema{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 70% 70%,#08314b 0,transparent 60%),#050911}
.stage-cinema video{width:100%;height:100%;object-fit:cover;opacity:.78}
.stage-cinema::after{position:absolute;inset:0;content:"";background:linear-gradient(180deg,rgba(2,5,10,.22),rgba(2,5,10,.12) 45%,#02050a),linear-gradient(90deg,rgba(2,5,10,.85),transparent 68%);pointer-events:none}
.stage-heading{position:relative;z-index:2;max-width:1000px;pointer-events:none}
.stage-heading a{pointer-events:auto}
.stage-kicker{display:flex;align-items:center;gap:28px;color:var(--cyan);font:400 .68rem/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.stage-kicker span{color:#adbacb;letter-spacing:.02em;text-transform:none}
.stage-heading h1{margin:34px 0 24px;font:600 clamp(3.8rem,7.5vw,8rem)/.98 var(--display);letter-spacing:-.06em;text-wrap:balance;color:var(--ink)}
.stage-heading h1 em{font-style:normal;color:#98f0f0}
.stage-declaration{max-width:490px;color:#c7d5e3;font-size:1.08rem;line-height:1.7}
.stage-action{display:inline-flex;align-items:center;gap:40px;padding:13px 0;margin-top:22px;border-bottom:1px solid #9bb9c9;color:var(--ink);font-size:.9rem}
.stage-action span{font-size:1.3rem;color:var(--cyan)}
.project-constellation{position:relative;z-index:1;height:430px;width:100%;max-width:1440px;margin:20px auto 0;perspective:1500px}
.floating-project{position:absolute;display:block;width:clamp(250px,27vw,380px);overflow:hidden;background:#08111c;border:1px solid rgba(198,230,247,.28);border-radius:12px;box-shadow:0 30px 70px rgba(0,0,0,.38);transform:rotate(var(--tilt,0deg));transform-origin:50% 60%;transition:transform .75s cubic-bezier(.22,1,.36,1),box-shadow .65s,border-color .45s;color:var(--ink);animation:project-float var(--float-duration,9s) ease-in-out infinite,project-sway var(--sway-duration,14s) ease-in-out infinite;animation-delay:var(--float-phase,0s),var(--sway-phase,0s)}
.floating-project--1{top:48px;left:4%;--tilt:-7deg;--float-duration:7.8s;--sway-duration:13s;--float-phase:-2.1s;--sway-phase:-4.8s;--drift-x:12px;--drift-y:18px}
.floating-project--2{top:5px;left:38%;--tilt:5deg;--float-duration:9.6s;--sway-duration:16.4s;--float-phase:-6.4s;--sway-phase:-10.6s;--drift-x:-15px;--drift-y:22px}
.floating-project--3{top:95px;right:0;--tilt:-4deg;--float-duration:11.8s;--sway-duration:19.2s;--float-phase:-9.3s;--sway-phase:-3.5s;--drift-x:10px;--drift-y:16px}
.project-window{display:flex;align-items:center;gap:9px;padding:11px 15px;background:#0b1520;color:#c4d2df;font:400 .58rem/1.2 var(--mono);letter-spacing:.025em}
.project-window i{width:5px;height:5px;border-radius:50%;background:var(--cyan)}
.project-window>span:last-child{margin-left:auto;color:var(--cyan);font-size:.9rem}
.floating-project>img{width:100%;height:clamp(142px,16vw,206px);object-fit:cover;object-position:top;transition:transform .85s cubic-bezier(.22,1,.36,1)}
.floating-caption{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:60px;padding:12px 15px;background:#08111c}
.floating-caption strong{font-family:var(--display);font-weight:600;font-size:.85rem;max-width:65%}
.floating-caption>span{font-size:.57rem;color:#b6c9d7;max-width:90px}
.floating-project:hover,.floating-project:focus-visible{transform:translateY(-14px) rotate(0) rotateX(4deg) rotateY(-5deg) scale(1.025);border-color:var(--cyan);box-shadow:0 38px 85px rgba(0,36,72,.65);z-index:3}
.floating-project:focus-visible{animation-play-state:paused}
.floating-project:hover>img,.floating-project:focus-visible>img{transform:scale(1.035)}
.floating-project:focus-visible,.work-tile:focus-visible,.work-filters button:focus-visible,.motion-control:focus-visible,.stage-action:focus-visible,.gallery-close a:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}
.stage-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:2}
.stage-footnote{font:400 .65rem/1.5 var(--mono);color:#a1b4c5}
.motion-control{display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:8px 15px;border:1px solid #547184;border-radius:28px;background:rgba(4,11,20,.85);color:#d8e8f2;cursor:pointer;font-size:.75rem}
.motion-control:disabled{cursor:default;color:#adbdca}
.studio-stage.is-still .floating-project{animation-play-state:paused}
/* Independent drift and 3D sway keep the cards from moving as a synchronized row.
   Individual translate/rotate compose with the hover transform without snapping. */
@keyframes project-float{0%,100%{translate:calc(var(--drift-x)*-.5) calc(var(--drift-y)*.5)}50%{translate:calc(var(--drift-x)*.5) calc(var(--drift-y)*-.5)}}
@keyframes project-sway{0%,100%{rotate:1 .65 .4 -3deg}50%{rotate:1 .65 .4 3deg}}
.work-gallery{padding:100px var(--pad) 88px;max-width:1800px;margin:auto;background:#02050a}
.work-gallery-head{display:grid;grid-template-columns:1.3fr .55fr;gap:8vw;align-items:end;margin-bottom:56px}
.gallery-kicker{font:400 .65rem/1.5 var(--mono);color:var(--cyan);letter-spacing:.1em;text-transform:uppercase;margin-bottom:25px}
.work-gallery h2{font:600 clamp(2.8rem,5.5vw,6rem)/1.02 var(--display);letter-spacing:-.055em}
.work-gallery h2 em{font-style:normal;color:#9eecef}
.work-gallery-head>p{font-size:1.05rem;color:#a5b5c7}
.work-gallery-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0 28px;border-top:1px solid var(--line)}
.work-filters{display:flex;flex-wrap:wrap;gap:8px}
.work-filters button{border:1px solid #405366;border-radius:30px;min-height:44px;padding:10px 20px;background:transparent;color:#bbc9d7;cursor:pointer;font-size:.78rem;transition:background .2s,color .2s}
.work-filters button[aria-pressed=true]{background:#d6f5f5;color:#05161f;border-color:#d6f5f5}
.work-gallery-toolbar>p{color:#a0b3c6;font:400 .6rem/1.5 var(--mono);white-space:nowrap}
.work-mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px 26px}
.work-tile{grid-column:span 6;min-width:0;transition:transform .3s}
.work-tile:nth-child(4n+2){padding-top:60px}
.work-tile:nth-child(4n+3){padding-top:10px}
.work-tile figure{position:relative;aspect-ratio:1.7;overflow:hidden;border-radius:12px;background:#0a121e;border:1px solid var(--line-strong);box-shadow:0 12px 55px rgba(0,29,52,.18)}
.work-tile img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .55s}
.work-open{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#07111b;color:#d2ffff;font-size:1.4rem;border:1px solid #6c95a2}
.work-tile:hover img,.work-tile:focus-visible img{transform:scale(1.025)}
.work-tile:hover .work-open{background:#d6f5f5;color:#05161f}
.work-tile-copy{position:relative;padding:23px 0 0}
.work-tile-copy>span{font:400 .56rem/1.5 var(--mono);color:#9db6c7;letter-spacing:.08em;text-transform:uppercase}
.work-tile h3{margin:11px 0 9px;font:600 clamp(1.4rem,2.2vw,2.4rem)/1.1 var(--display);letter-spacing:-.035em}
.work-tile p{color:#adbacb;font-size:.85rem}
.gallery-close{display:flex;justify-content:space-between;gap:30px;align-items:center;margin-top:60px;padding-top:26px;border-top:1px solid var(--line)}
.gallery-close p{max-width:530px;color:#9faebe;font-size:.73rem}
.gallery-close a{display:flex;align-items:center;gap:25px;font-size:.85rem;color:var(--ink);padding:14px 0;white-space:nowrap}
.gallery-close a span{color:var(--cyan)}
@media(min-width:1450px){.studio-stage{min-height:1120px}.project-constellation{height:490px}.floating-project--1{left:7%;top:38px}.floating-project--2{left:40%;top:16px}.floating-project--3{right:0;top:105px}.stage-heading{max-width:1200px}}
@media(max-width:1050px){.studio-stage{min-height:auto;padding-top:60px}.project-constellation{height:410px}.floating-project{width:29%}.floating-caption{display:block;min-height:73px}.floating-caption strong{max-width:none;display:block}.floating-caption>span{display:block;margin-top:5px;max-width:none}.floating-project--1{left:1%;top:64px}.floating-project--2{left:35%;top:20px}.floating-project--3{right:0;top:105px}.work-gallery-head{grid-template-columns:1fr .6fr;gap:40px}}
@media(max-width:720px){.studio-stage{padding:42px 22px 25px}.stage-kicker{display:block;font-size:.6rem}.stage-kicker span{display:block;margin-top:8px}.stage-heading h1{font-size:clamp(2.75rem,11.5vw,5rem);margin-top:27px}.stage-declaration{max-width:430px;font-size:.94rem}.stage-action{font-size:.83rem}.project-constellation{height:auto;display:grid;grid-template-columns:1fr;gap:22px;width:min(100%,480px);margin-top:52px;margin-bottom:36px;perspective:none}.floating-project{position:relative;inset:auto;width:100%;--tilt:0deg;transform:none;animation:none;display:grid;grid-template-columns:1fr 1fr;border-radius:10px}.project-window{grid-column:1/-1;padding:11px 13px;font-size:.58rem}.floating-project>img{height:125px;width:100%;border-right:1px solid var(--line)}.floating-caption{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:12px;padding:14px}.floating-caption strong{font-size:.95rem}.floating-caption>span{font-size:.65rem}.floating-project:hover,.floating-project:focus-visible{transform:translateY(-3px)}.stage-footer{align-items:flex-end;gap:16px}.stage-footnote{max-width:160px;font-size:.55rem}.motion-control{font-size:.65rem;gap:9px}.work-gallery{padding:70px 22px}.work-gallery-head{grid-template-columns:1fr;gap:26px;margin-bottom:35px}.work-gallery-head>p{font-size:.92rem;max-width:450px}.work-gallery h2{font-size:clamp(2.3rem,9vw,4rem)}.work-gallery-toolbar{display:block}.work-filters{gap:7px}.work-filters button{padding:10px 14px;font-size:.72rem}.work-gallery-toolbar>p{margin-top:17px}.work-mosaic{grid-template-columns:1fr;gap:36px}.work-tile{grid-column:auto}.work-tile:nth-child(n){padding-top:0}.work-tile h3{font-size:1.7rem}.gallery-close{display:block;margin-top:35px}.gallery-close a{margin-top:15px}.stage-cinema video{object-position:65% center;opacity:.6}}
@media(prefers-reduced-motion:reduce){.floating-project{animation:none}.floating-project,.floating-project>img,.work-tile img{transition:none}.floating-project:hover,.floating-project:focus-visible{transform:rotate(var(--tilt,0deg))}.floating-project:hover>img,.floating-project:focus-visible>img{transform:none}}