:root{--bg:#050507;--ink:#f4f1fa;--mute:#9a93ab;--p1:#3b0f7a;--p2:#6a2fd0;--p3:#b690ff;--line:rgba(182,144,255,.18);color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--ink);font:300 17px/1.6 Inter,system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;line-height:1.02;margin:0}
a{color:inherit;text-decoration:none}
nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:20px 5vw;padding-top:calc(20px + env(safe-area-inset-top,0px))}
nav::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#050507f0,#050507aa 65%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
nav .logo,nav .menu{position:relative;z-index:40}
nav .links a{text-shadow:0 1px 8px #000}
body.noscroll{overflow:hidden}
.logo{font-family:"Cormorant Garamond",serif;font-size:26px;letter-spacing:.18em}
.logo b{color:var(--p3);font-weight:600}
nav .links{display:flex;gap:28px;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
nav .links a:hover{color:var(--p3)}
@media(max-width:700px){nav .links a:not(.cta){display:none}}
.cta{background:linear-gradient(120deg,var(--p2),var(--p1));border:1px solid var(--p3);color:#fff;padding:10px 20px;border-radius:99px;transition:.3s}
nav .links a.cta.act{color:#fff}
.cta:hover{background:var(--p3);color:#000!important}
.hero{min-height:100svh;position:relative;display:flex;flex-direction:column;justify-content:center;padding:120px 5vw 60px;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.75;animation:drift 16s ease-in-out infinite alternate}
.o1{width:60vmax;height:60vmax;background:radial-gradient(circle,var(--p2),transparent 65%);top:-20vmax;right:-15vmax}
.o2{width:45vmax;height:45vmax;background:radial-gradient(circle,var(--p1),transparent 65%);bottom:-18vmax;left:-12vmax;animation-delay:-6s}
@keyframes drift{to{transform:translate(-6vmax,5vmax) scale(1.15)}}
.hero>*:not(.orb){position:relative}
.eyebrow{font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--p3);margin-bottom:28px}
.hero h1{font-size:clamp(46px,9vw,140px);max-width:14ch}
.hero h1 em{font-style:italic;color:var(--p3)}
.hero p{max-width:520px;color:var(--mute);margin:32px 0 40px;font-size:18px}
.btns{display:flex;gap:16px;flex-wrap:wrap}
.btn{padding:16px 34px;border-radius:99px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;background:linear-gradient(120deg,var(--p2),var(--p1));transition:.4s;box-shadow:0 0 0 0 #6a2fd000}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 40px -10px var(--p2)}
.btn.ghost{background:none;border:1px solid var(--line)}
.scroll{position:absolute!important;bottom:28px;left:5vw;font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:var(--mute)}
.scroll::after{content:"";display:block;width:1px;height:46px;margin-top:10px;background:linear-gradient(var(--p3),transparent);animation:line 2s infinite}
@keyframes line{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:22px 0;white-space:nowrap}
.marquee div{display:inline-block;animation:slide 30s linear infinite;font-family:"Cormorant Garamond",serif;font-size:34px;font-style:italic;color:var(--mute)}
.marquee span{margin:0 28px;color:var(--p3)}
@keyframes slide{to{transform:translateX(-50%)}}
section{padding:120px 5vw}
.tag{font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--p3);margin-bottom:20px}
h2{font-size:clamp(40px,6vw,88px);max-width:16ch}
.work{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:64px}
.tile{aspect-ratio:3/4;border-radius:6px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:28px;border:1px solid var(--line)}
.tile::before{content:"";position:absolute;inset:0;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.tile:hover::before{transform:scale(1.12)}
.t1::before{background:radial-gradient(circle at 30% 20%,#7b3fe4,transparent 55%),linear-gradient(160deg,#1a0838,#050507)}
.t2::before{background:radial-gradient(circle at 75% 30%,#b690ff55,transparent 50%),linear-gradient(200deg,#2d0b5e,#050507)}
.t3::before{background:radial-gradient(circle at 40% 80%,#5b21b6,transparent 55%),linear-gradient(120deg,#12041f,#050507)}
.tile div{position:relative}
.tile small{letter-spacing:.3em;text-transform:uppercase;color:var(--p3);font-size:11px}
.tile h3{font-size:34px;margin-top:6px}
.note{margin-top:26px;color:var(--mute);font-size:14px}
.svc{margin-top:64px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:70px 1fr 1.2fr;gap:24px;padding:34px 0;border-bottom:1px solid var(--line);transition:.4s;align-items:baseline}
.row:hover{padding-left:18px;background:linear-gradient(90deg,#6a2fd01f,transparent)}
.row span{color:var(--p3);font-size:13px;letter-spacing:.2em}
.row h3{font-size:clamp(28px,3.4vw,46px)}
.row p{margin:0;color:var(--mute)}
@media(max-width:760px){.row{grid-template-columns:1fr;gap:8px}}
.about{background:linear-gradient(180deg,transparent,#1a083866 120%)}
.stats{display:flex;gap:56px;flex-wrap:wrap;margin-top:56px}
.stats b{display:block;font-family:"Cormorant Garamond",serif;font-size:72px;font-weight:500;color:var(--p3);line-height:1}
.stats span{font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--mute)}
.about p{max-width:620px;color:var(--mute);margin-top:32px}
.contact{text-align:center}
.contact h2{margin:0 auto}
form{max-width:640px;margin:56px auto 0;display:grid;gap:18px;text-align:left}
input,textarea,select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:inherit;padding:14px 0;outline:0;transition:.3s}
select option{background:#0b0614}
input:focus,textarea:focus,select:focus{border-color:var(--p3)}
form .btn{border:0;color:#fff;cursor:pointer;font-family:inherit;justify-self:start}
#ok{display:none;color:var(--p3)}
footer{padding:40px 5vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--mute);font-size:13px}
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s,transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
#intro{position:fixed;inset:0;z-index:100;background:#050507;display:grid;place-items:center;overflow:hidden;cursor:pointer;animation:introOut .9s 4.3s cubic-bezier(.7,0,.2,1) forwards}
#intro::before{content:"";position:absolute;width:70vmax;height:70vmax;background:radial-gradient(circle,#6a2fd055,transparent 60%);animation:glow 4s ease-in-out infinite alternate}
.qwrap{position:absolute;animation:qOut .7s 2.9s cubic-bezier(.6,0,.4,1) forwards}
.q{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(170px,36vw,380px);line-height:1;color:var(--p3);text-shadow:0 0 60px #6a2fd0;transform:rotate(180deg);opacity:0;animation:qIn .8s .2s forwards,qTurn 1.6s 1.1s cubic-bezier(.65,0,.25,1) forwards}
.brand{position:absolute;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(38px,9vw,120px);letter-spacing:.9em;text-transform:uppercase;white-space:nowrap;padding-left:.9em;opacity:0;filter:blur(14px);animation:brandIn 1.3s 3.1s cubic-bezier(.2,.7,.2,1) forwards}
.brand em{color:var(--p3)}
@keyframes qIn{to{opacity:1}}
@keyframes qTurn{to{transform:rotate(0)}}
@keyframes qOut{to{opacity:0;transform:scale(.4);filter:blur(12px)}}
@keyframes brandIn{to{opacity:1;letter-spacing:.22em;padding-left:.22em;filter:blur(0)}}
@keyframes glow{to{transform:scale(1.2);opacity:.7}}
@keyframes introOut{to{opacity:0;visibility:hidden;transform:scale(1.08)}}
.logo img{height:46px;width:auto;display:block}
img.brand{width:min(78vw,760px);height:auto;padding:0;letter-spacing:normal}
.work{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.tile{aspect-ratio:16/10}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.06)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,#050507ee)}
.tile div{z-index:2}
.faces{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:72px}
.faces img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;border:1px solid var(--line);transition:transform .8s}
.faces img:nth-child(2){margin-top:48px}
.faces img:hover{transform:translateY(-8px)}
@media(max-width:700px){.faces{grid-template-columns:1fr 1fr}.faces img:nth-child(3){display:none}}
#stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(120% 70% at 50% -10%,#2a0b55 0%,#0b0418 45%,#050507 80%)}
.beams i{position:absolute;top:-4vh;width:46vw;height:96vh;left:calc(var(--x)*1%);margin-left:-23vw;transform-origin:50% 0;background:linear-gradient(180deg,var(--c),transparent 82%);clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);mix-blend-mode:screen;filter:blur(8px);opacity:.55;animation:sway var(--d) ease-in-out var(--l) infinite alternate}
.beams i:nth-child(1){--x:15;--c:#8b4dff99;--d:7s;--l:-2s}
.beams i:nth-child(2){--x:40;--c:#d946ef66;--d:9s;--l:-5s}
.beams i:nth-child(3){--x:65;--c:#6366f199;--d:8s;--l:-1s}
.beams i:nth-child(4){--x:88;--c:#b690ff88;--d:11s;--l:-7s}
@keyframes sway{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
#bokeh i{position:absolute;border-radius:50%;filter:blur(3px);animation:floaty var(--t) ease-in-out infinite alternate}
@keyframes floaty{to{transform:translate(var(--dx),var(--dy));opacity:.08}}
#crowd{position:absolute;inset:auto 0 0;width:100%;height:30vh}
#crowd svg{width:100%;height:100%;display:block}
.row{animation:bob var(--b) ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-6px)}}
.ph{animation:blink 2.2s infinite}
@keyframes blink{0%,60%,100%{opacity:1}70%,90%{opacity:.15}}
section,.hero,.marquee,footer{position:relative;z-index:1}
.view{display:none;position:relative;z-index:1}.view.on{display:block;animation:vin .8s both}
@keyframes vin{from{opacity:0;transform:translateY(16px)}}
nav .links a.act{color:var(--p3)}
.menu{display:none;background:none;border:1px solid var(--line);color:var(--ink);padding:8px 16px;border-radius:99px;font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
@media(max-width:760px){.menu{display:block}nav .links{display:none}nav .links.open{display:flex;position:fixed;inset:0;background:#050507f7;padding-top:90px;flex-direction:column;justify-content:center;align-items:center;gap:30px;font-size:18px;z-index:30}nav .links.open a:not(.cta){display:block}}
.phead{padding:170px 5vw 20px}
.phead h2{max-width:18ch}
.phead p{max-width:560px;color:var(--mute);margin-top:24px;font-size:18px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px;margin-top:56px}
.card{border:1px solid var(--line);border-radius:8px;padding:36px;background:linear-gradient(160deg,#6a2fd01a,#05050799);backdrop-filter:blur(6px);transition:.4s}
.card:hover{transform:translateY(-6px);border-color:var(--p3)}
.card span{color:var(--p3);font-size:13px;letter-spacing:.2em}
.card h3{font-size:36px;margin:10px 0 12px}
.card p{color:var(--mute);margin:0 0 18px}
.card ul{margin:0;padding:0;list-style:none;font-size:15px}
.card li{padding:8px 0;border-top:1px solid var(--line)}
.card li::before{content:"\2726  ";color:var(--p3)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:28px;margin-top:56px}
.steps div{border-top:1px solid var(--p3);padding-top:20px}
.steps b{font-family:"Cormorant Garamond",serif;font-size:44px;color:var(--p3);font-weight:500}
.steps h3{font-size:28px;margin:6px 0}.steps p{color:var(--mute);margin:0;font-size:15px}
details{border-bottom:1px solid var(--line);padding:22px 0}
summary{cursor:pointer;font-family:"Cormorant Garamond",serif;font-size:28px;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--p3)}details[open] summary::after{content:"\2013"}
details p{color:var(--mute);max-width:680px;margin:14px 0 0}
.faq{margin-top:48px;max-width:860px}
.band{text-align:center}.band h2{margin:0 auto 36px}
.two{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;margin-top:20px;align-items:start}
@media(max-width:860px){.two{grid-template-columns:1fr;gap:40px}}
.two form{margin:0;max-width:none}
.next div{padding:22px 0;border-bottom:1px solid var(--line);color:var(--mute)}
.next b{color:var(--p3);font-family:"Cormorant Garamond",serif;font-size:34px;font-weight:500;margin-right:12px}
.next h3{font-size:30px;margin-bottom:14px}
.story{max-width:680px;color:var(--mute);margin-top:28px}
footer a:hover{color:var(--p3)}
footer .logo img{height:34px}
.scene{position:absolute;inset:0;opacity:0;transition:opacity .9s}
#stage[data-v=home] .s-home,#stage[data-v=about] .s-about,#stage[data-v=services] .s-studio,#stage[data-v=contact] .s-community{opacity:1}
.sk,.com{position:absolute;inset:0;width:100%;height:100%}
.bench{position:absolute;left:0;bottom:0;width:100%;height:38vh}
.fl{animation:fl 7s ease-in-out infinite alternate}@keyframes fl{to{transform:translateY(-14px) rotate(1.5deg)}}
.draw{stroke-dasharray:900;stroke-dashoffset:900;animation:dr 9s ease-in-out infinite alternate}@keyframes dr{to{stroke-dashoffset:0}}
.lamp{position:absolute;top:0;width:0;transform-origin:50% 0;animation:swing 7s ease-in-out infinite alternate}
@keyframes swing{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.cord{position:absolute;left:-1px;top:0;width:2px;height:14vh;background:#b690ff66}
.shade{position:absolute;left:-36px;top:14vh;width:72px;height:36px;border-radius:72px 72px 6px 6px;background:linear-gradient(#2a1550,#0b0418);border:1px solid #b690ff55;box-shadow:0 10px 36px #e9dcff88}
.cone{position:absolute;left:-18vw;top:calc(14vh + 34px);width:36vw;height:72vh;background:linear-gradient(180deg,#e9dcff55,transparent 85%);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);mix-blend-mode:screen;filter:blur(6px)}
.flick{animation:fk 3s infinite}@keyframes fk{0%,100%{opacity:.9}45%{opacity:.55}50%{opacity:1}}
.cvs{animation:hue 8s linear infinite}@keyframes hue{to{filter:hue-rotate(50deg)}}
.tw{animation:tw 2.4s ease-in-out infinite alternate}@keyframes tw{to{opacity:.2}}
.flow{stroke-dasharray:6 10;animation:fw 2s linear infinite}@keyframes fw{to{stroke-dashoffset:-32}}
.pop{transform-box:fill-box;transform-origin:50% 100%;animation:pp 6s ease-in-out infinite}@keyframes pp{0%,8%{transform:scale(0);opacity:0}20%,68%{transform:scale(1);opacity:1}85%,100%{transform:scale(.9);opacity:0}}
.rise{animation:rs 7s ease-in infinite}@keyframes rs{from{opacity:0}15%{opacity:.8}to{transform:translateY(-260px);opacity:0}}
.wave{transform-box:fill-box;transform-origin:50% 100%;animation:wv 1.1s ease-in-out infinite alternate}@keyframes wv{to{transform:rotate(28deg)}}
em.tl{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:22px;color:var(--p3);margin-bottom:6px}
@media(prefers-reduced-motion:reduce){.draw{stroke-dashoffset:0!important}}
.curtain{position:absolute;top:0;bottom:0;width:15vw;background:repeating-linear-gradient(90deg,#10052a 0 3vw,#2a0b55 3vw 5vw,#0b0418 5vw 7vw);box-shadow:inset 0 0 60px #000;opacity:.92;animation:cs 9s ease-in-out infinite alternate}
.curtain.l{left:0;clip-path:polygon(0 0,100% 0,60% 100%,0 100%);transform-origin:0 0}
.curtain.r{right:0;clip-path:polygon(0 0,100% 0,100% 100%,40% 100%);transform-origin:100% 0;animation-delay:-4s}
@keyframes cs{to{transform:skewX(1.6deg)}}
@media(max-width:700px){.curtain{width:9vw}}
.val{position:absolute;top:0;left:0;width:100%;height:11vh}
.br{animation:br 6s ease-in-out infinite alternate}@keyframes br{to{opacity:.55}}
.sl{animation:sl 5s ease-in-out infinite alternate}@keyframes sl{to{opacity:.25}}
.pulse{transform-box:fill-box;transform-origin:center;animation:pl 4s ease-in-out infinite alternate}@keyframes pl{to{transform:scale(1.12);opacity:.7}}
.sw{transform-box:fill-box;transform-origin:50% 0;animation:swb 6s ease-in-out infinite alternate}@keyframes swb{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
.wave2{transform-box:fill-box;transform-origin:50% 100%;animation:wv2 1.1s ease-in-out infinite alternate}@keyframes wv2{to{transform:rotate(-28deg)}}
.fx{transform-box:fill-box;transform-origin:center;opacity:0;animation:fx 4s infinite}@keyframes fx{0%,95%,100%{opacity:0;transform:scale(.3)}97%{opacity:1;transform:scale(2.4)}}
.cf{transform-box:fill-box;transform-origin:center;opacity:.85;animation:cfk 6s linear infinite}@keyframes cfk{from{transform:translateY(0) rotate(0)}to{transform:translateY(700px) rotate(600deg)}}
.swm{transform-box:fill-box;transform-origin:50% 100%;animation:swm 5s ease-in-out infinite alternate}@keyframes swm{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
.fog{position:absolute;left:-20%;width:140%;height:34vh;top:20vh;background:radial-gradient(ellipse at 30% 50%,#b690ff33,transparent 60%);animation:fogd 14s ease-in-out infinite alternate}
@keyframes fogd{to{transform:translateX(12%)}}
.opts{display:grid;gap:10px;color:var(--mute);font-size:14px}.opts b{font-weight:400;letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:var(--p3)}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--mute)}.chk input{width:auto;margin-top:5px;accent-color:#8b5cf6}
input[type=file]{border:0;padding:8px 0;font-size:14px;color:var(--mute)}
@media(prefers-reduced-motion:reduce){#intro{display:none!important}*,*::before{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}