:root { --ink:#0c0d0d; --paper:#e8e5de; --muted:#96958e; --line:rgba(232,229,222,.22); --accent:#ef5b35; --acid:#c9d978; --blue:#2d5665; --shell:min(1200px, calc(100vw - 72px)); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--paper); background:var(--ink); font-family:Manrope, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing:-.02em; }
body::selection { color:var(--ink); background:var(--acid); }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
.site-noise { position:fixed; inset:0; pointer-events:none; opacity:.045; z-index:20; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' 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='.36'/%3E%3C/svg%3E"); }
.shell { width:var(--shell); margin-inline:auto; }
.site-header { position:fixed; top:0; left:0; width:100%; padding:22px 36px; display:flex; align-items:center; justify-content:space-between; z-index:10; mix-blend-mode:screen; }
.brand { display:flex; align-items:center; gap:12px; font:500 12px/1 "DM Mono", monospace; letter-spacing:.08em; }
.brand em { color:var(--accent); font-style:normal; }
.brand-mark { display:flex; position:relative; width:25px; height:20px; transform:skewY(-28deg); }
.brand-mark i { position:absolute; width:13px; height:13px; border:1px solid currentColor; transform:rotate(45deg); }
.brand-mark i:nth-child(1){left:0;top:0}.brand-mark i:nth-child(2){left:7px;top:0;background:var(--paper)}.brand-mark i:nth-child(3){left:14px;top:0}
.main-nav { display:flex; gap:28px; font:11px "DM Mono", monospace; letter-spacing:.08em; text-transform:uppercase; }
.main-nav a { opacity:.7; transition:opacity .25s,color .25s; }.main-nav a:hover{opacity:1;color:var(--acid)}
.menu-toggle { display:none; border:0; background:none; font:11px "DM Mono",monospace; }
.hero { min-height:100svh; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:0 0 64px; }
.hero-backdrop { position:absolute; inset:0; background:center/cover no-repeat; filter:saturate(.75) contrast(1.06); transform:scale(1.03); transition:background-image .8s ease; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,9,9,.93) 0%,rgba(7,9,9,.48) 48%,rgba(7,9,9,.1) 100%),linear-gradient(0deg,rgba(7,9,9,.9),transparent 52%); }
.hero-content,.hero-meta { position:relative; z-index:1; }.hero-content { padding-top:25vh; }
.eyebrow,.section-label,.card-no { font:500 10px "DM Mono", monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.signal { width:7px;height:7px;display:inline-block;border-radius:50%;background:var(--accent);margin-right:10px;box-shadow:0 0 14px var(--accent); }
.hero h1 { max-width:930px; margin:34px 0 22px; font-size:clamp(54px,8vw,118px); line-height:.91; letter-spacing:-.08em; font-weight:700; }
h1 span,h2 i { color:var(--acid); font-style:normal; }
.hero-intro { font-size:17px; line-height:1.8; color:rgba(232,229,222,.78); }.hero-intro strong{font-weight:500;color:var(--paper)}
.text-link { display:inline-flex; align-items:center; gap:18px; padding-bottom:8px; border-bottom:1px solid currentColor; margin-top:34px; font:11px "DM Mono",monospace; letter-spacing:.1em; }.text-link span{font-size:20px;color:var(--accent)}
.hero-meta { width:var(--shell); display:flex; gap:18px; font:10px "DM Mono",monospace; letter-spacing:.08em; color:rgba(232,229,222,.58); }.hero-meta span+span::before{content:"/";margin-right:18px;color:var(--accent)}.hero-index{margin-left:auto;color:var(--accent)}
section { padding:130px 0; }.section-label{display:flex;gap:18px;align-items:center;border-top:1px solid var(--line);padding-top:13px}.section-label span:first-child{color:var(--accent)}
.intro-grid { display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-top:78px; }.intro h2,.trilogy h2,.contact h2{font-size:clamp(42px,5vw,76px);line-height:.98;letter-spacing:-.075em;margin:0;font-weight:600}.intro-copy{max-width:500px;color:var(--muted);font-size:15px;line-height:1.85}.intro-copy .lead{font-size:21px;line-height:1.4;color:var(--paper);margin-top:0}.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1px solid var(--line);margin-top:46px;padding-top:18px}.stat-row strong{display:block;color:var(--accent);font-size:28px;font-weight:500;letter-spacing:-.06em}.stat-row span{display:block;color:var(--muted);font:10px/1.45 "DM Mono",monospace;margin-top:6px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end}.section-heading>p{margin:0;color:var(--muted);font:14px "DM Mono",monospace}.filter-row{display:flex;gap:9px;flex-wrap:wrap;margin:52px 0 30px}.filter{border:1px solid var(--line);background:transparent;padding:12px 18px;font:14px "DM Mono",monospace;letter-spacing:.03em;color:var(--muted);cursor:pointer;transition:.25s}.filter:hover,.filter.is-active{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.work-grid{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;padding-bottom:15px}.work-card{position:relative;flex:0 0 clamp(260px,24vw,330px);overflow:hidden;aspect-ratio:4/5;background:#1a1c1c;cursor:pointer;scroll-snap-align:start}.work-card img,.work-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .35s;}.work-card video{opacity:0}.work-card:hover img{transform:scale(1.05)}.work-card:hover video{opacity:1}.work-card.has-video:hover img{opacity:0}.work-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.84),transparent 60%);pointer-events:none}.work-card-content{position:absolute;bottom:0;left:0;right:0;padding:22px;z-index:1}.work-card-content .type{font:11px "DM Mono",monospace;color:var(--acid);letter-spacing:.08em}.work-card h3{font-size:23px;letter-spacing:-.05em;margin:8px 0 3px}.work-card p{margin:0;font-size:12px;color:rgba(232,229,222,.7)}.work-card .role{color:var(--muted);font:11px "DM Mono",monospace;margin-top:11px}.play-hint{position:absolute;right:18px;top:18px;z-index:2;border:1px solid rgba(232,229,222,.45);border-radius:99px;padding:7px 9px;font:10px "DM Mono",monospace;color:rgba(232,229,222,.8)}
.approach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:65px}.approach-card{border-top:1px solid var(--line);padding-top:17px;min-height:240px}.approach-card .card-no{color:var(--accent)}.approach-card h3{font-size:40px;letter-spacing:-.06em;margin:44px 0 17px}.approach-card p{max-width:270px;color:var(--muted);font-size:13px;line-height:1.75}.credits{padding-top:60px}.credits-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:65px}.credits h3{font:10px "DM Mono",monospace;color:var(--accent);letter-spacing:.12em}.credits p{font-size:19px;line-height:1.6;max-width:520px}
.contact{padding-bottom:80px}.contact-card{display:grid;grid-template-columns:1fr 1fr;gap:80px;background:var(--accent);color:var(--ink);padding:60px}.contact-card .signal{background:var(--ink);box-shadow:none}.contact-card h2 i{color:var(--ink)}.contact-info{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:10px;font:12px "DM Mono",monospace}.contact-info p{margin:0 0 18px;font-size:14px}.contact-info a{font-size:20px;border-bottom:1px solid rgba(12,13,13,.5)}.contact-info span{margin-top:8px}.site-footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:23px 0 26px;color:var(--muted);font:10px "DM Mono",monospace}.site-footer a{color:var(--paper)}
.project-dialog{width:min(720px,calc(100vw - 30px));padding:0;border:0;background:var(--paper);color:var(--ink);box-shadow:0 22px 100px rgba(0,0,0,.55)}.project-dialog::backdrop{background:rgba(0,0,0,.75)}.dialog-close{position:absolute;right:18px;top:12px;background:none;border:0;font-size:30px;color:var(--ink);cursor:pointer}.dialog-media-wrap{position:relative;width:100%;aspect-ratio:16/8;overflow:hidden;background:#111}.dialog-media-poster,.dialog-media-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.dialog-media-video{opacity:0;transition:opacity .25s}.dialog-media-wrap.is-playing .dialog-media-video{opacity:1}.dialog-play-hint{position:absolute;right:18px;top:18px;border:1px solid rgba(232,229,222,.6);border-radius:99px;padding:7px 10px;font:10px "DM Mono",monospace;color:var(--paper)}.trailer-page-link{position:absolute;left:22px;bottom:20px;background:var(--accent);color:var(--ink);padding:10px 14px;font:11px "DM Mono",monospace}.dialog-body{padding:30px}.dialog-body .eyebrow{color:#777}.dialog-body h2{font-size:42px;letter-spacing:-.06em;margin:15px 0 5px}.dialog-body p{font-size:14px;line-height:1.8;max-width:560px;color:#5f5f5a}.dialog-meta{display:flex;gap:20px;border-top:1px solid #c9c7c1;margin-top:24px;padding-top:15px;font:10px "DM Mono",monospace;color:#777}
@media (max-width:800px){:root{--shell:calc(100vw - 36px)}.site-header{padding:18px}.main-nav{display:none}.menu-toggle{display:block}.hero{min-height:90svh;padding-bottom:33px}.hero h1{font-size:clamp(48px,14vw,80px)}.hero-meta{display:none}section{padding:90px 0}.intro-grid,.trilogy-head,.credits-grid,.contact-card{grid-template-columns:1fr;gap:35px}.intro-grid{padding-top:50px}.work-grid{gap:8px}.work-card{flex-basis:78vw;aspect-ratio:3/4}.work-card-content{padding:15px}.work-card h3{font-size:17px}.work-card p{font-size:10px}.trilogy{padding-inline:18px}.trilogy-grid,.approach-grid{grid-template-columns:1fr}.trilogy-card{min-height:300px}.approach-card{min-height:190px}.approach-card h3{margin-top:30px}.contact-card{padding:35px 25px}.contact-info a{font-size:17px}.site-footer{gap:12px;flex-wrap:wrap}.site-footer span:nth-child(2){display:none}}