:root{--bg:#050709;--s1:#0a0f12;--s2:#0f171b;--line:#17252c;--text:#f4f7f8;--mute:#8d9fa7;--a:#1ca2be;--ice:#a9e6f4;--pad:clamp(20px,3.4vw,64px)}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip;max-width:100%}
html{scroll-padding-top:90px}html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--text);font:500 17px/1.7 "Manrope",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;line-height:1.04;letter-spacing:-.01em;margin:0 0 .45em}
h1{font-size:clamp(2.8rem,5.4vw,6rem)}
h2{font-size:clamp(2.3rem,4.4vw,4.4rem);max-width:18ch}
h3{font-size:1.9rem}
.it{font-style:italic;color:var(--ice)}
p{margin:0 0 1em;max-width:58ch}a{color:inherit}
.wrap{width:min(1500px,100% - var(--pad)*2);margin-inline:auto}.narrow{max-width:900px}
section{padding:clamp(80px,9vw,150px) 0;position:relative}
.mute{color:var(--mute)}.center{text-align:center;margin-inline:auto}
:focus-visible{outline:3px solid var(--ice);outline-offset:3px}

.btn{display:inline-flex;gap:10px;align-items:center;justify-content:center;background:var(--a);color:#02181e;font:800 .98rem "Manrope",sans-serif;padding:16px 32px;border-radius:999px;border:0;text-decoration:none;cursor:pointer;transition:box-shadow .3s,background .3s}
.btn:hover{background:var(--ice);box-shadow:0 12px 44px #1ca2be66}
.btn.ghost{background:transparent;color:var(--text);border:1px solid #ffffff30}
.btn.ghost:hover{border-color:var(--ice);background:#ffffff0c;box-shadow:none}
.row{display:flex;gap:14px;flex-wrap:wrap}

.hdr{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px var(--pad);background:linear-gradient(#050709e6,#05070900)}
.logo{font:400 1.7rem "Instrument Serif",serif;text-decoration:none;letter-spacing:.01em}.logo span{color:var(--a);font-style:italic}
.hdr nav{display:flex;gap:6px}.hdr nav a{padding:8px 16px;text-decoration:none;color:#c5d2d7;font-size:.93rem;border-radius:99px;transition:background .2s}.hdr nav a:hover{background:#ffffff12}
.hdr .btn{padding:11px 24px;font-size:.9rem}
@media(max-width:900px){.hdr nav{display:none}}

/* hero: viewfinder + live timecode + anamorphic flare */
.hero{min-height:100vh;display:flex;align-items:center;padding:130px 0 90px;overflow:hidden;background:radial-gradient(900px 600px at 85% 30%,#1ca2be26,transparent 70%),linear-gradient(#050709,#070c0f)}
.hero::before{content:"";position:absolute;left:0;right:0;top:52%;height:2px;background:linear-gradient(90deg,transparent,#1ca2be00 15%,var(--a) 50%,#1ca2be00 85%,transparent);box-shadow:0 0 60px 8px #1ca2be55;opacity:.55;animation:flare 7s ease-in-out infinite}
@keyframes flare{50%{opacity:.15;transform:scaleX(.7)}}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(40px,5vw,96px);align-items:center;position:relative;z-index:2}
.lead{font-size:1.2rem;color:#b3c2c8;max-width:50ch}
.ticks{list-style:none;padding:0;margin:26px 0 38px;display:flex;flex-wrap:wrap;gap:12px 28px;color:#d6e0e4;font-size:.98rem}.ticks i{color:var(--a);margin-right:9px}
.vf{position:absolute;inset:100px var(--pad) 36px;pointer-events:none;z-index:1}
.vf i{position:absolute;width:30px;height:30px;border:0 solid #ffffff55}
.vf i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px}.vf i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0}
.vf i:nth-child(3){left:0;bottom:0;border-width:0 0 2px 2px}.vf i:nth-child(4){right:0;bottom:0;border-width:0 2px 2px 0}
.tc{position:absolute;right:48px;bottom:20px;font:700 .8rem "Manrope",monospace;letter-spacing:.14em;color:#ffffff99}.tc::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff4d4d;margin-right:10px;animation:rec 1.4s infinite}.tc b{font-variant-numeric:tabular-nums;color:var(--ice)}
@keyframes rec{50%{opacity:.2}}
.ap{position:absolute;right:-6vw;top:8vh;width:clamp(320px,42vw,680px);aspect-ratio:1;pointer-events:none;z-index:1}
.ap i{position:absolute;inset:0;border-radius:50%;border:1px solid #1ca2be44}.ap i:nth-child(2){inset:13%;border-style:dashed}.ap i:nth-child(3){inset:28%;border:10px solid #1ca2be14}

.card{background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--line);border-radius:22px;padding:34px;transition:border-color .3s}
.glass{background:#0a0f12e6;backdrop-filter:blur(18px);border-color:#1ca2be55;box-shadow:0 50px 120px #000c}
form{padding:30px 32px}form h2{font-size:2rem;margin-bottom:.2em}
label{display:block;font-size:.76rem;color:var(--mute);margin:14px 0 6px;letter-spacing:.06em;text-transform:uppercase}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,select,textarea{width:100%;background:#050709;border:1px solid var(--line);color:var(--text);border-radius:12px;padding:12px 14px;font:inherit;font-size:.95rem;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--a);box-shadow:0 0 0 3px #1ca2be33;outline:0}
textarea{min-height:64px;resize:vertical}
form .btn{width:100%;margin-top:20px}
.msg{min-height:1.3em;margin-top:8px;font-size:.9rem;color:var(--ice)}

.logos{padding:44px 0 50px;border-block:1px solid var(--line);background:var(--s1)}
.logos p{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:0}
.marq{overflow:hidden;mask-image:linear-gradient(90deg,#0000,#000 12%,#000 88%,#0000);-webkit-mask-image:linear-gradient(90deg,#0000,#000 12%,#000 88%,#0000);margin-top:26px}
.track{display:flex;width:max-content;gap:20px;animation:mq 38s linear infinite}
.marq:hover .track{animation-play-state:paused}
.marq span{display:grid;place-items:center;min-width:220px;height:84px;padding:0 28px;border:1px solid var(--line);border-radius:16px;background:var(--s2);font:400 1.5rem "Instrument Serif",serif;color:#7d929b;white-space:nowrap;transition:.3s}
.marq span:hover{color:var(--ice);border-color:var(--a)}
.marq img{height:38px;filter:grayscale(1) brightness(1.8);opacity:.7}
@keyframes mq{to{transform:translateX(calc(-50% - 10px))}}

.video{position:relative;margin-top:44px;aspect-ratio:2.39/1;border-radius:26px;border:1px solid #1ca2be44;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,#1ca2be33,#050709 70%);overflow:hidden;box-shadow:0 50px 130px #000}
.video::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 4px)}
.video span{position:absolute;bottom:20px;color:var(--mute);font-size:.85rem}
.play{position:relative;width:112px;height:112px;border-radius:50%;border:1.5px solid var(--ice);background:#050709b3;color:var(--ice);font-size:1.8rem;cursor:pointer;animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #1ca2be77}100%{box-shadow:0 0 0 46px #1ca2be00}}

.cols{display:flex;gap:18px;margin-top:56px;height:520px}
.cols .card{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:40px;position:relative;overflow:hidden;background:linear-gradient(180deg,#0000 20%,#050709f0),radial-gradient(circle at 30% 20%,#1ca2be38,#0a0f12 65%);transition:flex .7s cubic-bezier(.2,.8,.2,1),border-color .4s}
.cols .card:hover{flex:1.7;border-color:var(--a)}
.cols p{color:#b3c2c8;max-width:44ch}.cols small{color:var(--ice);font-size:.88rem}
.ico{position:absolute;top:34px;left:40px;font-size:1.5rem;color:var(--ice);width:60px;height:60px;display:grid;place-items:center;border-radius:50%;border:1px solid #1ca2be77;background:#1ca2be1a}

.bandw{overflow:hidden;padding:46px 0}
.band{background:var(--a);color:#02181e;transform:rotate(-1.6deg);width:106%;margin-left:-3%;overflow:hidden;padding:18px 0}
.band .track{gap:48px;animation-duration:30s}
.band b{font:400 clamp(1.8rem,3.4vw,3rem) "Instrument Serif",serif;font-style:italic;white-space:nowrap}
.band b::after{content:"✦";margin-left:48px;font-style:normal;font-size:.7em}

.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid var(--line)}
.stats div{padding:40px 30px 10px 0;color:var(--mute);border-right:1px solid var(--line);padding-left:30px}.stats div:first-child{padding-left:0}.stats div:last-child{border:0}
.stats strong{display:block;font:400 clamp(3.4rem,6vw,6rem) "Instrument Serif",serif;color:var(--text);line-height:1;margin-bottom:10px}

.work{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:56px}
.work a{position:relative;grid-column:span 4;min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;padding:30px;border-radius:24px;text-decoration:none;border:1px solid var(--line);overflow:hidden;background:linear-gradient(180deg,#0000 35%,#000e),linear-gradient(135deg,#1b4351,#0a0f12) center/cover;transition:transform .5s,border-color .3s,box-shadow .5s}
.work a:first-child{grid-column:span 8;min-height:460px}
.work a:nth-child(2){min-height:460px}
.work a::before{content:"\f04b";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;top:24px;right:24px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#050709aa;border:1px solid var(--ice);color:var(--ice);font-size:.9rem;padding-left:3px;transition:.3s}
.work a:hover{transform:translateY(-8px);border-color:var(--a);box-shadow:0 30px 90px #1ca2be30}
.work a:hover::before{background:var(--a);color:#02181e;border-color:var(--a)}
.work b{font:400 1.9rem "Instrument Serif",serif}.work small{color:var(--ice);font-size:.88rem}

.steps{list-style:none;counter-reset:s;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:var(--line)}
.steps li{counter-increment:s;padding:0 32px 0 0;position:relative}
.steps li::before{content:counter(s);display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--bg);border:1px solid var(--a);color:var(--ice);font:400 1.6rem "Instrument Serif",serif;margin-bottom:26px;position:relative}
.steps p{color:var(--mute)}

details{border-bottom:1px solid var(--line);padding:28px 0}
summary{cursor:pointer;list-style:none;font:400 1.7rem "Instrument Serif",serif;padding-right:40px;position:relative}
summary::after{content:"+";position:absolute;right:0;top:0;color:var(--a);font:300 2rem "Manrope",sans-serif;line-height:1}
details[open] summary::after{content:"–"}details p{color:var(--mute);margin:1em 0 0}

.two{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(40px,6vw,110px);align-items:center}
.photo{aspect-ratio:4/5;border-radius:26px;border:1px solid #1ca2be44;background:linear-gradient(160deg,#1b4351,#0a0f12);display:grid;place-items:center;color:#1ca2be55;font-size:4rem}
.photo::after{content:"\f007";font-family:"Font Awesome 6 Free";font-weight:900}
.final{padding:clamp(100px,12vw,190px) 0;background:radial-gradient(900px 380px at 50% 0,#1ca2be30,transparent 70%),var(--s1);border-top:1px solid var(--line)}
.final h2{margin-inline:auto;max-width:16ch;font-size:clamp(2.8rem,6vw,6.4rem)}.final p{margin-inline:auto}
footer{padding:34px 0 110px;border-top:1px solid var(--line);color:var(--mute);font-size:.9rem}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
.soc a{margin-left:22px;font-size:1.25rem;color:var(--mute);transition:color .2s}.soc a:hover{color:var(--ice)}
.fab{position:fixed;right:24px;bottom:24px;z-index:40;width:62px;height:62px;color:rgb(255,255,255);display:grid;font-size:1.9rem;box-shadow:rgba(0,0,0,.733) 0 12px 34px;border-radius:50%;background:rgb(37,211,102);place-items:center;text-decoration:none}

.cursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--a);border-radius:50%;pointer-events:none;z-index:99;opacity:0;transition:width .25s,height .25s,margin .25s,background .25s}
.cursor.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:#1ca2be1f}
@media(hover:none),(pointer:coarse){.cursor{display:none}}

.rv{opacity:0;transform:translateY(36px)}.js-off .rv{opacity:1;transform:none}
.line{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .12em}.line>span{display:inline-block}

@media(max-width:1100px){.hero-grid{grid-template-columns:1fr}.hero{padding-top:120px}.cols{flex-direction:column;height:auto}.cols .card{min-height:300px}.cols .card:hover{flex:1}.two{grid-template-columns:1fr}.photo{max-width:420px}.work a,.work a:first-child,.work a:nth-child(2){grid-column:span 6;min-height:320px}.work a:first-child{grid-column:span 12}.steps{grid-template-columns:1fr 1fr;row-gap:44px}.steps::before{display:none}.vf,.tc{display:none}}
@media(max-width:700px){body{font-size:16px}.stats{grid-template-columns:1fr 1fr}.stats div{padding:28px 16px 10px 0!important;border-bottom:1px solid var(--line)}.stats div:nth-child(2n){border-right:0}.work a,.work a:first-child,.work a:nth-child(2){grid-column:span 12;min-height:280px}.steps{grid-template-columns:1fr}.f2{grid-template-columns:1fr}.btn{width:100%}.marq span{min-width:170px;height:70px}.ticks{flex-direction:column;gap:10px}}
@media(prefers-reduced-motion:reduce){.track,.play,.hero::before,.tc::before{animation:none}.rv{opacity:1;transform:none}}

/* ===== v3 additions ===== */
html.lock,html.lock body{overflow:hidden}
.btn.sm{padding:11px 20px;font-size:.88rem}
option{background:#0a0f12;color:#f4f7f8}
select{-webkit-appearance:none;appearance:none;padding-right:46px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23a9e6f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;background-size:12px 8px}
.hdr-r{display:flex;align-items:center;gap:12px}
.hdr nav a.on{background:#ffffff14;color:#fff}
.burger{display:none;width:46px;height:46px;padding:0;border-radius:50%;border:1px solid #ffffff30;background:#ffffff0a;cursor:pointer;place-content:center;gap:5px}
.burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px}
@media(max-width:1080px){.hdr nav{display:none}.burger{display:grid}}
@media(max-width:560px){.hdr-r .btn{display:none}}

.cta{margin-top:24px}
.scrim{position:fixed;inset:0;z-index:70;background:#000b;backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.scrim.open{opacity:1;visibility:visible;transition:opacity .35s}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(88vw,420px);display:flex;flex-direction:column;padding:22px 28px 30px;overflow:auto;background:linear-gradient(#0b1115,#050709);border-left:1px solid #1ca2be44;transform:translateX(105%);visibility:hidden;transition:transform .5s cubic-bezier(.77,0,.18,1),visibility 0s .5s}
.drawer.open{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.77,0,.18,1)}
.d-top{display:flex;justify-content:space-between;align-items:center}
.x,.d-x{width:42px;height:42px;border-radius:50%;border:1px solid #ffffff30;background:#ffffff0d;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.drawer nav{display:grid;margin:26px 0}
.drawer nav a{font:400 2.3rem "Instrument Serif",serif;padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:color .2s,padding .3s}
.drawer nav a:hover,.drawer nav a.on{color:var(--ice);padding-left:8px;background:none}
.d-cta{display:grid;gap:12px;margin-top:auto}.drawer .soc{margin-top:22px}.drawer .soc a{margin:0 22px 0 0}

.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:#000c;backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.modal.open{opacity:1;visibility:visible;transition:opacity .3s}
.modal-box{position:relative;width:min(560px,100%);max-height:94vh;overflow:auto;border-radius:24px;transform:translateY(26px) scale(.97);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.modal.open .modal-box{transform:none}
.modal-box form{margin:0}.modal-box .x{position:absolute;top:16px;right:16px;z-index:2}

/* intro loader */
#loader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;animation:ldFail .01s linear 6s forwards}
@keyframes ldFail{to{visibility:hidden;pointer-events:none}}
#loader.open{pointer-events:none}
.ld-top,.ld-bot{position:absolute;left:0;right:0;height:50.3%;background:#050709;transition:transform .85s cubic-bezier(.77,0,.18,1) .15s}
.ld-top{top:0;border-bottom:2px solid var(--a);box-shadow:0 8px 40px #1ca2be66}.ld-bot{bottom:0;border-top:2px solid var(--a)}
#loader.open .ld-top{transform:translateY(-102%)}#loader.open .ld-bot{transform:translateY(102%)}
.ld-c{position:relative;display:grid;justify-items:center;gap:24px;transition:opacity .3s}
#loader.open .ld-c{opacity:0}
.ring{position:relative;width:min(48vw,210px);aspect-ratio:1}
.ring svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--a);stroke-width:1.2}
.sweep{position:absolute;inset:5%;border-radius:50%;background:conic-gradient(from 0deg,#1ca2be66,transparent 30%);animation:spin .56s linear 3}
@keyframes spin{to{transform:rotate(360deg)}}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:400 clamp(4rem,14vw,6rem) "Instrument Serif",serif;color:var(--ice)}
.ld-tc{font:700 .78rem "Manrope",monospace;letter-spacing:.16em;color:#ffffff99}.ld-tc::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff4d4d;margin-right:10px;animation:rec 1s infinite}.ld-tc span{color:var(--ice);font-variant-numeric:tabular-nums}
.ld-logo{font:400 1.7rem "Instrument Serif",serif}.ld-logo span{color:var(--a);font-style:italic}
.ld-bar{width:min(60vw,240px);height:2px;background:var(--line);overflow:hidden}.ld-bar i{display:block;height:100%;width:0;background:var(--a);animation:bar 1.8s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes bar{to{width:100%}}
@media(max-width:700px){.cta .btn{width:auto;flex:1 1 140px}}
@media(prefers-reduced-motion:reduce){#loader{display:none}}