:root{--bg:#14171C;--mid:#0C1118;--gr:#1C2129;--ln:#2E3540;--tx:#EEEAE3;--st:#9EA3AB;--pp:#E8E4DC;--sky:#7DC3EE;--ds:#1F5F9C;--fd:"Hanken Grotesk",system-ui,sans-serif;--fs:"Hanken Grotesk",system-ui,sans-serif;--e:cubic-bezier(.2,.7,.2,1)}
@view-transition{navigation:auto}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font:400 16px/1.7 var(--fs);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.m{overflow:hidden}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
h1,h2{font-family:var(--fd);font-weight:300;line-height:1;letter-spacing:-.04em}
h2{font-size:clamp(40px,6vw,88px)}h3{font-weight:500;font-size:20px;line-height:1.2}
.sec{padding:110px 4vw}.pg{padding-top:150px}.pp{background:var(--pp);color:var(--bg)}.mid{background:var(--mid)}
.hd{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:44px}
.hd p,.mut{color:var(--st)}.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:16px 4vw;transition:transform .5s var(--e),background .4s}
.nav.sc{background:rgba(20,23,28,.95)}.nav.hd{transform:translateY(-100%)}.nav>a{font:500 18px var(--fs);letter-spacing:-.01em;position:relative;z-index:61}
.nav nav{display:flex;align-items:center;gap:30px;font-size:14px;color:var(--st)}
.nav nav a:not(.btn):hover,.nav nav a.on{color:var(--tx)}.mb{display:none;position:relative;z-index:61;font-size:14px}
/* buttons */
.btn{position:relative;display:inline-block;overflow:hidden;padding:13px 26px;border:1px solid var(--tx);font-size:14px;border-radius:2px;z-index:0;transition:color .4s,border-color .4s;text-align:center}
.btn:before{content:"";position:absolute;inset:0;background:var(--sky);transform:translateY(101%);transition:transform .45s var(--e);z-index:-1}
.btn:hover:before{transform:none}.btn:hover{color:var(--bg);border-color:var(--sky)}.btn.p{background:var(--tx);color:var(--bg)}
/* reveals */
.js [data-r]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--e) var(--w,0s),transform .9s var(--e) var(--w,0s)}
.js [data-r].in{opacity:1;transform:none}
.rv{overflow:hidden;background:var(--gr)}
.js .rv{opacity:0;clip-path:inset(18% 0 0 0);transition:opacity .9s var(--e) var(--w,0s),clip-path 1.3s var(--e) var(--w,0s)}
.js .rv.in{opacity:1;clip-path:inset(0)}
.rv img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e) var(--w,0s)}
.js .rv img{transform:scale(1.18)}.js .rv.in img{transform:none}.js .rv.in:hover img{transform:scale(1.045);transition:transform .9s var(--e)}
.mk{display:block;overflow:hidden;padding-bottom:.14em}
.js .mk>span{display:block;transform:translateY(112%);transition:transform 1.2s var(--e) var(--w,0s)}.js.go .mk>span{transform:none}
#intro{position:fixed;inset:0;z-index:100;display:flex;align-items:center;background:var(--mid);cursor:pointer;transition:transform 1s var(--e)}
#intro.up{transform:translateY(-100%)}#intro .ln,#intro .sp{flex:1}
#intro .ln{height:1.5px;background:var(--sky);transform:scaleX(0);transform-origin:left;animation:ln .6s var(--e) .15s forwards}
.ic{position:relative;flex:none;padding:clamp(18px,3vw,34px) clamp(26px,4vw,52px)}
.il{display:block;height:clamp(60px,12vw,110px);width:auto;max-width:56vw;object-fit:contain;animation:lg .6s var(--e) .05s both}
.if{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.if path{fill:none;stroke:var(--sky);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;animation:dr .8s var(--e) .7s forwards}
@keyframes lg{from{opacity:0;transform:scale(.92)}}@keyframes ln{to{transform:none}}@keyframes dr{to{stroke-dashoffset:0}}@keyframes fi{from{opacity:0;transform:translateY(14px)}}
/* hero */
.hero{min-height:100vh;padding:130px 4vw 80px}
.hero h1{font-size:clamp(68px,14vw,230px);line-height:.9;letter-spacing:-.05em}
.role{margin-top:26px;font:500 clamp(18px,2.2vw,30px)/1.3 var(--fs)}.hero .l{margin-top:10px;max-width:520px;color:var(--st)}
.tiles{display:grid;grid-template-columns:1.5fr 1fr 1fr .85fr;gap:12px;margin-top:64px;align-items:start}
.tiles a:nth-child(2){margin-top:44px}.tiles a:nth-child(3){margin-top:88px}.tiles a:nth-child(4){margin-top:24px}
.tiles .rv{aspect-ratio:3/4}.tiles span{display:block;margin-top:10px;font-size:13px;color:var(--st);transition:color .3s}.tiles a:hover span{color:var(--sky)}
.stw{font:300 clamp(30px,4.6vw,68px)/1.12 var(--fd);max-width:1100px;letter-spacing:-.03em}
.stw span{opacity:.18;transition:opacity .6s var(--e) calc(var(--i)*40ms)}.stw.in span{opacity:1}
/* grid */
.g{columns:3;column-gap:14px;transition:opacity .25s,transform .25s}.g.out{opacity:0;transform:translateY(12px)}
.g>.rv{break-inside:avoid;margin-bottom:14px;min-height:140px;cursor:zoom-in;border-radius:3px}.g img{height:auto}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.tabs button{padding:10px 20px;border:1px solid var(--ln);border-radius:2px;font-size:14px;transition:background .3s,color .3s,border-color .3s}
.tabs button:hover{border-color:var(--sky)}.tabs button.on{background:var(--sky);color:var(--bg);border-color:var(--sky)}
/* film, clients, process */
.film{position:relative;aspect-ratio:16/9;cursor:pointer;border-radius:3px}.film span{position:absolute;z-index:2;left:22px;bottom:20px;background:var(--sky);color:var(--bg);padding:9px 18px;font-size:14px;border-radius:2px}
.mq{overflow:hidden}.mt{display:flex;width:max-content;animation:mq 45s linear infinite}.mq:hover .mt,.mq:focus-within .mt{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-25%)}}
.lg{position:relative;flex:none;width:170px;height:84px;margin-right:16px;background:#fff;border-radius:4px}
.lg img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);object-fit:contain}
.lgs{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.lgs .lg{width:auto;height:auto;aspect-ratio:3/2;margin:0}.lgs .lg:hover{box-shadow:0 0 0 2px var(--ds)}
.steps,.pks,.qs,.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.steps{grid-template-columns:repeat(4,1fr);gap:28px}
.steps div{border-top:1px solid var(--ln);padding-top:18px}.steps b{font-size:14px;color:var(--sky);font-weight:400}.steps h3{margin:6px 0 8px}.steps p{font-size:14px;color:var(--st)}
.pk{display:block;padding:30px;background:var(--gr);border:1px solid var(--ln);border-radius:3px;transition:transform .5s var(--e),border-color .4s}.pk:hover{transform:translateY(-6px);border-color:var(--sky)}
.pk b{display:block;font:300 clamp(28px,3vw,40px) var(--fd);margin-top:16px}.pk p{color:var(--st);font-size:14px}
.q{border-top:1px solid var(--ln);padding-top:16px}.q p{font:300 24px/1.3 var(--fd)}.q span{font-size:14px;color:var(--st)}
.cta{background:var(--sky);color:var(--bg);padding:120px 4vw}.cta h2{max-width:1000px}.cta p{margin-top:18px;max-width:520px}
.cta .btn{border-color:var(--bg)}.cta .btn:before{background:var(--bg)}.cta .btn:hover{color:var(--sky);border-color:var(--bg)}.cta .btn.p{background:var(--bg);color:var(--tx)}
/* packages */
.ptabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.ptabs button{text-align:left;padding:24px;border:1px solid var(--ln);border-radius:3px;transition:background .4s,border-color .4s}.ptabs button:hover{border-color:var(--sky)}
.ptabs button.on{background:var(--tx);color:var(--bg);border-color:var(--tx)}.ptabs b{display:block;font:300 clamp(26px,2.8vw,38px)/1.1 var(--fd);margin-top:8px}.ptabs small{font-size:13px;opacity:.7}
.pan{padding:34px;background:var(--gr);border-radius:3px}.pan[hidden]{display:none}.pan:not([hidden]){animation:fi .7s var(--e)}.intro{max-width:660px;color:var(--st)}
.tiers{margin-top:28px}.tier{display:flex;flex-direction:column;padding:28px;background:var(--bg);border:1px solid var(--ln);border-radius:3px;transition:transform .5s var(--e),border-color .4s}.tier:hover{transform:translateY(-6px);border-color:var(--sky)}
.tier .pr{font:300 clamp(34px,3.4vw,46px)/1.1 var(--fd);margin-top:14px}.tier .pr small{font:400 13px var(--fs);color:var(--st)}.tier ul{margin:16px 0 26px}.tier .btn{margin-top:auto}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:28px}.cols h4{font-weight:500;margin-bottom:6px}
ul.l{list-style:none;color:var(--st);font-size:14px;line-height:1.8}ul.l li{padding-left:14px;position:relative}ul.l li:before{content:"–";position:absolute;left:0}
.rt{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--ln);font-size:14px}
.note{margin-top:22px;max-width:660px;font-size:13px;color:var(--st)}
.terms{margin-top:12px;padding:20px 26px;background:var(--gr);border-radius:3px;font-size:14px;color:var(--st)}.terms summary{cursor:pointer;color:var(--tx)}.terms ul{margin:12px 0 0 18px}
.ab{display:grid;grid-template-columns:.8fr 1.2fr;gap:5vw;align-items:center}.ab .rv{aspect-ratio:4/5}.ab p{margin-top:20px;max-width:560px;color:var(--st)}
.foot{display:flex;justify-content:space-between;gap:16px;padding:28px 4vw;font-size:13px;color:var(--st)}
.lb{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:3vw;background:rgba(8,10,13,.97);cursor:zoom-out}
.lb.on{display:flex}.lb img{max-width:94vw;max-height:92vh;width:auto;height:auto}.lb iframe{width:min(1100px,94vw);aspect-ratio:16/9;border:0}
@media(max-width:900px){.tiles{grid-template-columns:1fr 1fr}.tiles a:nth-child(n){margin-top:0}.tiles a:nth-child(even){margin-top:36px}
.pks,.tiers,.cols,.ptabs,.ab,.steps,.qs{grid-template-columns:1fr}.g{columns:2;column-gap:8px}.g>.rv{margin-bottom:8px}.pan{padding:22px}.sec{padding:80px 4vw}}
@media(max-width:800px){.mb{display:block}
.nav nav{position:fixed;inset:0;z-index:60;background:var(--mid);flex-direction:column;justify-content:center;gap:16px;font:300 42px var(--fd);color:var(--tx);clip-path:circle(0 at 100% 0);transition:clip-path .7s var(--e)}
.m .nav nav{clip-path:circle(150% at 100% 0)}.m .nav{transform:none}.nav nav a{opacity:0;transform:translateY(20px);transition:opacity .5s var(--e),transform .5s var(--e)}
.m .nav nav a{opacity:1;transform:none;transition-delay:calc(.2s + var(--i)*.07s)}.nav nav .btn{font:500 15px var(--fs);margin-top:14px}}
@media(prefers-reduced-motion:reduce){*,:before,:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.js [data-r],.js .mk>span,.js .rv,.js .rv img{opacity:1!important;transform:none!important;clip-path:none!important}#intro{display:none}.stw span{opacity:1!important}.lg[data-d]{display:none}.mt{flex-wrap:wrap;width:auto}}
@media(max-width:900px){.lgs{grid-template-columns:repeat(3,1fr)}}@media(max-width:520px){.lgs{grid-template-columns:repeat(2,1fr)}}