:root{
  --bg:#070b12;--panel:#0b111b;--text:#edf3f8;--muted:#8d9aa9;--line:rgba(255,255,255,.13);
  --accent:#8be9ff;--warm:#d7b184;--radius:2px;--pad:clamp(20px,4vw,72px)
}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;color:var(--text);background:var(--bg);font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;overflow-x:hidden}button,a{font:inherit}a{color:inherit;text-decoration:none}button{color:inherit}.noise{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}.cursor-glow{position:fixed;width:500px;height:500px;border-radius:50%;pointer-events:none;z-index:0;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(80,189,255,.09),transparent 68%);left:-999px;top:-999px}#network{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.45}main,.site-header,footer{position:relative;z-index:2}
.site-header{position:fixed;top:0;left:0;right:0;height:82px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.09);background:linear-gradient(to bottom,rgba(5,8,13,.78),rgba(5,8,13,.18));backdrop-filter:blur(12px);z-index:20}.brand{display:flex;gap:12px;align-items:center}.brand-mark{width:30px;height:30px;border:1px solid rgba(255,255,255,.75);position:relative;transform:rotate(45deg)}.brand-mark:before,.brand-mark:after{content:"";position:absolute;background:var(--accent)}.brand-mark:before{width:1px;height:44px;left:14px;top:-8px}.brand-mark:after{height:1px;width:44px;top:14px;left:-8px}.brand b{font-size:14px;letter-spacing:.18em}.brand small{display:block;color:var(--muted);font-size:8px;letter-spacing:.22em;margin-top:3px}.site-header nav{display:flex;gap:clamp(18px,3vw,48px)}.site-header nav a{font-size:12px;letter-spacing:.14em;color:#c3ced8;position:relative}.site-header nav a:after{content:"";position:absolute;height:1px;left:0;right:100%;bottom:-9px;background:var(--accent);transition:.3s}.site-header nav a:hover:after{right:0}.sound-toggle{display:flex;gap:3px;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer}.sound-toggle span{display:block;width:2px;height:12px;background:var(--accent);animation:eq .9s ease-in-out infinite alternate}.sound-toggle span:nth-child(2){animation-delay:-.35s;height:20px}.sound-toggle span:nth-child(3){animation-delay:-.65s;height:8px}.sound-toggle[aria-pressed="false"] span{animation:none;height:2px}@keyframes eq{to{height:3px}}
.hero{height:min(940px,100svh);min-height:680px;position:relative;display:flex;align-items:flex-end;padding:0 var(--pad) clamp(72px,10vh,120px);overflow:hidden}.hero-image{position:absolute;inset:0}.hero-image picture,.hero-image img{width:100%;height:100%;display:block}.hero-image img{object-fit:cover;transform:scale(1.04);animation:heroIn 1.8s cubic-bezier(.2,.8,.2,1) both}@keyframes heroIn{from{transform:scale(1.13);filter:brightness(.5)}to{transform:scale(1.04);filter:brightness(1)}}.hero-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,6,11,.92) 0%,rgba(2,6,11,.54) 42%,rgba(2,6,11,.12) 70%),linear-gradient(0deg,rgba(2,6,11,.94),transparent 50%),linear-gradient(180deg,rgba(2,6,11,.42),transparent 25%)}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:9vw 9vw;mask-image:linear-gradient(90deg,black,transparent 70%)}.hero-copy{position:relative;max-width:860px}.eyebrow,.section-kicker{font-size:10px;letter-spacing:.28em;color:#a8bac8;text-transform:uppercase}.eyebrow span{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border:1px solid rgba(139,233,255,.5);margin-right:12px;color:var(--accent)}.hero h1{font-weight:300;font-size:clamp(54px,8vw,128px);line-height:.93;letter-spacing:-.055em;margin:28px 0}.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.78)}.lead{font-size:clamp(15px,1.4vw,20px);color:#c4d0d8;letter-spacing:.05em}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:40px}.primary,.text-button{height:50px;padding:0 24px;display:inline-flex;align-items:center;gap:38px;border:1px solid rgba(255,255,255,.25);background:rgba(9,17,27,.35);backdrop-filter:blur(8px);font-size:11px;letter-spacing:.16em;cursor:pointer;transition:.3s}.primary:hover,.text-button:hover{background:var(--text);color:#05080d;border-color:var(--text)}.text-button{border:0;background:transparent;padding:0}.hero-index{position:absolute;right:var(--pad);bottom:88px;display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.15em}.hero-index i{width:92px;height:1px;background:linear-gradient(90deg,var(--accent) 38%,rgba(255,255,255,.25) 38%)}.scroll-cue{position:absolute;right:var(--pad);top:50%;writing-mode:vertical-rl;font-size:8px;letter-spacing:.28em;color:#93a1af;display:flex;gap:12px;align-items:center}.scroll-cue span{height:70px;width:1px;background:linear-gradient(var(--accent),transparent)}
.intro{padding:clamp(100px,13vw,190px) var(--pad);display:grid;grid-template-columns:1fr 2.3fr 1fr;gap:clamp(32px,6vw,100px);border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(8,14,23,.8),rgba(7,11,18,.96))}.intro h2,.section-head h2,.contact h2{font-size:clamp(36px,5vw,78px);font-weight:300;line-height:1.05;letter-spacing:-.04em;margin:0 0 32px}.intro>div>p{max-width:680px;color:var(--muted);font-size:15px;line-height:1.9}.intro dl{margin:0}.intro dl div{border-top:1px solid var(--line);padding:18px 0;display:flex;align-items:baseline;gap:18px}.intro dt{font-size:30px;font-weight:300;color:var(--accent)}.intro dd{margin:0;color:var(--muted);font-size:11px;letter-spacing:.12em}
.works{padding:clamp(100px,11vw,170px) var(--pad);background:rgba(7,11,18,.92)}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:60px}.section-head h2{margin:14px 0 0}.filters{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.filters button{border:1px solid var(--line);background:transparent;padding:10px 14px;font-size:10px;letter-spacing:.12em;cursor:pointer;color:#9ba9b6;transition:.25s}.filters button.active,.filters button:hover{border-color:rgba(139,233,255,.65);color:var(--text);background:rgba(139,233,255,.08)}.filters sup{color:var(--accent);margin-left:4px}.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,26px)}.work-card{grid-column:span 4;position:relative;border:0;padding:0;background:transparent;text-align:left;cursor:pointer;perspective:1000px;min-width:0}.work-card.wide{grid-column:span 8}.work-card.tall{grid-column:span 4}.card-inner{position:relative;display:block;transform-style:preserve-3d;transition:transform .18s ease}.media{position:relative;display:block;overflow:hidden;background:#0f1721;aspect-ratio:16/10;border:1px solid rgba(255,255,255,.08)}.work-card.tall .media{aspect-ratio:4/5}.media:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,6,10,.72),transparent 52%);opacity:.55;transition:.35s}.media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s}.work-card:hover .media img{transform:scale(1.045);filter:saturate(1.08) contrast(1.04)}.work-card:hover .media:after{opacity:.9}.card-no{position:absolute;left:16px;top:16px;font-size:9px;letter-spacing:.18em;padding:8px 9px;background:rgba(3,6,10,.68);border:1px solid rgba(255,255,255,.18);z-index:2}.open-icon{position:absolute;right:16px;top:16px;width:38px;height:38px;display:grid;place-items:center;background:rgba(3,6,10,.58);border:1px solid rgba(255,255,255,.2);z-index:2;transition:.3s}.work-card:hover .open-icon{background:var(--accent);color:#071018;transform:rotate(90deg)}.card-copy{display:flex;justify-content:space-between;gap:15px;padding:16px 2px 28px;border-bottom:1px solid var(--line)}.card-copy strong{display:block;font-size:14px;font-weight:500;letter-spacing:.03em}.card-copy small{display:block;color:var(--muted);font-size:9px;letter-spacing:.13em;margin-top:7px}.card-copy>span{font-size:8px;letter-spacing:.15em;color:var(--accent);white-space:nowrap}.work-card[hidden]{display:none}
.showreel{height:min(820px,82svh);min-height:620px;position:relative;margin:0 var(--pad);padding:clamp(32px,5vw,70px);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line)}.showreel-bg,.showreel-overlay{position:absolute;inset:0}.showreel-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3);transform:scale(1.04)}.showreel-overlay{background:radial-gradient(circle at center,rgba(7,12,19,.28),rgba(7,12,19,.88)),linear-gradient(90deg,rgba(5,8,13,.7),transparent,rgba(5,8,13,.7))}.showreel>*:not(.showreel-bg,.showreel-overlay){position:relative}.showreel h2{font-size:clamp(72px,14vw,220px);font-weight:200;letter-spacing:-.075em;margin:10px 0 34px;color:rgba(255,255,255,.16);line-height:.8}.play{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}.play-ring{width:100px;height:100px;border-radius:50%;border:1px solid rgba(255,255,255,.6);display:grid;place-items:center;transition:.3s}.play-ring i{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid var(--text);margin-left:4px}.play:hover .play-ring{background:var(--text);transform:scale(1.08)}.play:hover .play-ring i{border-left-color:#071018}.play b{font-size:11px;letter-spacing:.2em;margin-top:8px}.play small{font-size:8px;letter-spacing:.16em;color:#a1adba}.timecode{position:absolute!important;right:24px;bottom:22px;font-size:8px;letter-spacing:.2em;color:#a2aeba}.contact{padding:clamp(120px,16vw,230px) var(--pad);position:relative}.contact h2{font-size:clamp(52px,8vw,126px);margin:25px 0 60px}.contact a{display:inline-flex;gap:60px;border-bottom:1px solid var(--accent);padding:0 0 12px;font-size:10px;letter-spacing:.2em}.contact a span{color:var(--accent)}footer{min-height:90px;padding:0 var(--pad);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:#778391;font-size:8px;letter-spacing:.18em}
.lightbox{width:100vw;height:100vh;max-width:none;max-height:none;border:0;padding:0;margin:0;background:rgba(2,4,7,.96);color:var(--text);overflow:hidden}.lightbox::backdrop{background:rgba(0,0,0,.88)}.lightbox[open]{display:grid;grid-template-columns:86px 1fr 86px;align-items:center}.lightbox figure{margin:0;height:100%;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:38px 0 22px}.lightbox figure img{display:block;max-width:100%;max-height:calc(100vh - 120px);object-fit:contain;opacity:0;transition:opacity .25s}.lightbox figure img.loaded{opacity:1}.lightbox figcaption{height:68px;width:min(100%,1500px);display:flex;align-items:center;gap:24px;padding-top:14px}.lb-count{font-size:10px;color:var(--accent);letter-spacing:.18em}.lightbox figcaption strong{display:block;font-weight:500;font-size:13px}.lightbox figcaption small{display:block;margin-top:5px;color:#788696;font-size:9px;letter-spacing:.12em}.close,.nav{border:1px solid var(--line);background:rgba(255,255,255,.025);cursor:pointer;transition:.25s}.close{position:absolute;right:24px;top:24px;width:46px;height:46px;font-size:25px;z-index:3}.nav{width:50px;height:50px;justify-self:center;font-size:18px}.close:hover,.nav:hover{background:var(--text);color:#071018}.loader{position:absolute;width:44px;height:44px;border:1px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.loader.hidden{display:none}@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:1050px){.intro{grid-template-columns:1fr}.intro dl{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.work-card,.work-card.tall{grid-column:span 6}.work-card.wide{grid-column:span 12}.site-header nav{display:none}}
@media (max-width:680px){:root{--pad:18px}.site-header{height:68px}.brand small{display:none}.sound-toggle{width:36px;height:36px}.hero{min-height:720px;padding-bottom:74px}.hero-vignette{background:linear-gradient(90deg,rgba(2,6,11,.8),rgba(2,6,11,.25)),linear-gradient(0deg,rgba(2,6,11,.96),transparent 60%)}.hero h1{font-size:clamp(48px,15vw,76px)}.hero-actions{align-items:flex-start;flex-direction:column;gap:10px}.hero-index,.scroll-cue{display:none}.intro dl{grid-template-columns:1fr}.section-head{align-items:flex-start;flex-direction:column}.filters{justify-content:flex-start}.work-card,.work-card.tall,.work-card.wide{grid-column:span 12}.work-card.tall .media{aspect-ratio:16/10}.showreel{margin:0 var(--pad);min-height:560px}.showreel h2{font-size:21vw}.lightbox[open]{grid-template-columns:1fr}.lightbox figure{padding:70px 12px 86px}.lightbox figure img{max-height:calc(100vh - 190px)}.lightbox .nav{position:absolute;bottom:24px;z-index:4}.lightbox .prev{left:18px}.lightbox .next{right:18px}.lightbox figcaption{padding:12px 64px 0;height:72px}.close{right:16px;top:16px}footer{flex-direction:column;justify-content:center;gap:8px;text-align:center}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-image img,.sound-toggle span,.loader{animation:none}.card-inner,.media img{transition:none}#network,.cursor-glow{display:none}}