:root { --ink:#090909; --paper:#f2f1ec; --muted:#a7a59d; --line:rgba(242,241,236,.22); --acid:#d8ff00; }
* { box-sizing:border-box; }
html { background:var(--ink); scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--paper); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
.site-shell { overflow:hidden; }
.topbar { position:relative; z-index:10; height:88px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 4vw; border-bottom:1px solid var(--line); background:var(--ink); }
.wordmark { display:inline-flex; align-items:center; width:150px; line-height:0; }.wordmark img,.wordmark-motion { display:block; width:100%; height:auto; }
.topbar nav { display:flex; gap:29px; font-size:12px; color:#d6d4cd; }.topbar nav a,.topbar-action { transition:color .2s ease; }.topbar nav a:hover,.topbar-action:hover { color:var(--acid); }
.topbar-action { justify-self:end; font-size:12px; font-weight:700; }
.hero { position:relative; min-height:calc(100svh - 88px); display:flex; align-items:flex-end; isolation:isolate; padding:clamp(38px,8vh,105px) 4vw 46px; background:#050505; }
.hero-video { position:absolute; z-index:-3; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; filter:saturate(.72) contrast(1.08) brightness(.76); transform:scale(1.03); transition:opacity .85s ease,transform 1.3s cubic-bezier(.2,.74,.24,1),filter .85s ease; }
.hero-playing .hero-video { opacity:1; transform:scale(1); }
.hero-veil { position:absolute; z-index:-2; inset:0; background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.07),transparent 21%),linear-gradient(0deg,rgba(5,5,5,.9),rgba(5,5,5,.27) 68%); transition:background .85s ease; }
.hero-playing .hero-veil { background:linear-gradient(90deg,rgba(5,5,5,.88),rgba(5,5,5,.35) 53%,rgba(5,5,5,.05)),linear-gradient(0deg,rgba(5,5,5,.74),transparent 64%); }
.hero-copy { position:relative; max-width:900px; }.hero-start-copy { max-width:800px; }.hero-play-copy { animation:hero-copy-in .62s .18s ease both; }.eyebrow { margin:0 0 20px; color:var(--muted); font-size:10px; font-weight:600; letter-spacing:.15em; line-height:1.4; text-transform:uppercase; }.eyebrow span { color:var(--acid); margin:0 7px; }
h1,h2,p { margin-top:0; }h1 { max-width:760px; margin-bottom:25px; font-size:clamp(58px,8.8vw,140px); font-weight:400; letter-spacing:-.09em; line-height:.82; }.hero-description { max-width:290px; margin-bottom:32px; color:#d4d2ca; font-size:14px; line-height:1.4; }
.button { display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; padding:16px 18px; font-size:12px; font-weight:800; transition:background .2s ease,transform .2s ease,border-color .2s ease; }.button:hover { transform:translateY(-2px); }.button-bright { color:#0b0b0b; background:var(--acid); }.button-bright:hover { background:var(--paper); }.button-outline { border-color:rgba(255,255,255,.62); color:var(--paper); background:rgba(5,5,5,.14); backdrop-filter:blur(4px); }.button-outline:hover { border-color:var(--acid); color:var(--acid); }
.hero-index { position:absolute; right:4vw; bottom:45px; display:grid; gap:7px; color:#d0cdc5; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; letter-spacing:.04em; text-align:right; }
.motion-ticker { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--acid); background:#0b0b0b; white-space:nowrap; }
.motion-ticker-track { display:flex; align-items:center; width:max-content; padding:15px 0; animation:ticker 30s linear infinite; will-change:transform; }
.motion-ticker span { padding:0 20px; font-size:11px; font-weight:800; letter-spacing:.1em; }
.motion-ticker i { color:var(--paper); font-size:12px; font-style:normal; }
.section-wrap { padding:clamp(82px,12vw,175px) 4vw; }.reels,.studio { border-top:1px solid var(--line); }
.cut-section { position:relative; }
.section-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:45px; align-items:end; margin-bottom:56px; }.section-heading .eyebrow { grid-column:1/-1; }.section-number { display:inline-block; margin-right:12px; color:var(--acid); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }.section-heading h2,.studio h2 { margin:0; font-size:clamp(38px,5vw,77px); font-weight:400; letter-spacing:-.075em; line-height:.96; }.section-heading>p:last-child { max-width:340px; margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.reel-grid { display:flex; gap:18px; width:100vw; margin-left:-4vw; padding:0 4vw 20px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; }.reel-grid::-webkit-scrollbar { display:none; }.reel-card { flex:0 0 min(37vw,480px); padding:0; border:0; color:var(--paper); background:transparent; scroll-snap-align:start; text-align:left; }.reel-card-2,.reel-card-3 { margin-top:0; }.reel-frame { position:relative; display:block; aspect-ratio:9/14; overflow:hidden; background:#181818; }.reel-frame:before { position:absolute; z-index:3; inset:12px; border:1px solid rgba(242,241,236,.36); content:""; opacity:0; pointer-events:none; transform:scale(1.045); transition:opacity .36s ease,transform .58s cubic-bezier(.2,.7,.2,1); }.reel-frame video { width:100%; height:100%; display:block; object-fit:cover; filter:saturate(.68) contrast(1.08); transform:scale(1.08); transition:transform .78s cubic-bezier(.2,.7,.2,1),filter .48s ease; }.reel-shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.7),transparent 58%); transition:opacity .35s ease; }.reel-corners { position:absolute; z-index:4; inset:19px; opacity:0; pointer-events:none; transition:opacity .24s ease; }.reel-corners:before,.reel-corners:after { position:absolute; width:17px; height:17px; content:""; }.reel-corners:before { top:0; left:0; border-top:1px solid var(--acid); border-left:1px solid var(--acid); box-shadow:calc(100% + 0px) calc(100% + 0px) 0 0 var(--acid); }.reel-corners:after { right:0; bottom:0; border-right:1px solid var(--acid); border-bottom:1px solid var(--acid); }.reel-open { position:absolute; z-index:4; top:21px; right:21px; color:var(--paper); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; letter-spacing:.07em; opacity:0; transform:translateY(-5px); transition:opacity .26s ease,transform .3s ease,color .2s ease; }.reel-number,.reel-timecode { position:absolute; z-index:4; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; letter-spacing:.05em; }.reel-number { left:21px; bottom:19px; }.reel-timecode { right:21px; bottom:19px; color:var(--acid); opacity:0; transform:translateX(8px); transition:opacity .26s ease,transform .32s ease; }.reel-caption { position:absolute; z-index:4; right:21px; bottom:47px; left:21px; display:grid; gap:4px; opacity:0; transform:translateY(10px); transition:opacity .32s ease,transform .42s cubic-bezier(.2,.7,.2,1); }.reel-caption strong { font-size:clamp(22px,2.3vw,35px); font-weight:400; letter-spacing:-.065em; line-height:.92; }.reel-caption em { color:#d7d5ce; font-size:10px; font-style:normal; letter-spacing:.08em; text-transform:uppercase; }.reel-card:hover .reel-frame:before,.reel-card:focus-visible .reel-frame:before { opacity:1; transform:scale(1); }.reel-card:hover video,.reel-card:focus-visible video { transform:scale(1); filter:saturate(1) contrast(1.02); }.reel-card:hover .reel-shade,.reel-card:focus-visible .reel-shade { opacity:.5; }.reel-card:hover .reel-corners,.reel-card:focus-visible .reel-corners,.reel-card:hover .reel-caption,.reel-card:focus-visible .reel-caption,.reel-card:hover .reel-open,.reel-card:focus-visible .reel-open,.reel-card:hover .reel-timecode,.reel-card:focus-visible .reel-timecode { opacity:1; transform:translate(0); }.reel-card:hover .reel-open,.reel-card:focus-visible .reel-open { color:var(--acid); }.reel-card:focus-visible { outline:1px solid var(--acid); outline-offset:5px; }.reel-meta { display:flex; justify-content:space-between; gap:15px; padding-top:13px; font-size:12px; }.reel-meta strong { font-weight:700; }.reel-meta em { color:var(--muted); font-style:normal; }
.studio-grid { display:grid; grid-template-columns:1.2fr .6fr; gap:12vw; align-items:end; }.studio-copy { padding-bottom:8px; }.studio-copy p { margin-bottom:30px; color:var(--muted); font-size:16px; line-height:1.55; }.text-link { display:inline-flex; align-items:center; padding-bottom:7px; border-bottom:1px solid var(--acid); font-size:12px; font-weight:700; }
.contacts { min-height:min(760px,100svh); display:flex; flex-direction:column; justify-content:space-between; border-top:1px solid var(--line); background:linear-gradient(145deg,#111 0%,#080808 58%,#10110c 100%); }.contact-grid { display:grid; grid-template-columns:1.12fr .88fr; gap:8vw; align-items:end; }.contact-grid h2 { max-width:720px; margin:0; font-size:clamp(48px,6.7vw,108px); font-weight:400; letter-spacing:-.085em; line-height:.87; }.contact-list { align-self:end; }.contact-row { display:grid; grid-template-columns:minmax(92px,.55fr) minmax(0,1fr); gap:18px; align-items:center; padding:20px 0; border-top:1px solid var(--line); transition:color .2s ease,border-color .2s ease; }.contact-row:last-child { border-bottom:1px solid var(--line); }.contact-row span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }.contact-row strong { overflow-wrap:anywhere; font-size:clamp(16px,1.65vw,27px); font-weight:400; letter-spacing:-.045em; }.contact-row:hover { color:var(--acid); border-color:var(--acid); }
footer { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 4vw; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }footer a:last-child { color:var(--paper); }
.dialog-backdrop[hidden] { display:none; }
.dialog-backdrop { position:fixed; z-index:40; inset:0; display:grid; place-items:center; padding:24px; background:rgba(0,0,0,.91); backdrop-filter:blur(9px); }.video-dialog { position:relative; width:min(960px,100%); max-height:90svh; overflow:auto; padding:34px; border:1px solid var(--line); background:#111; }.video-dialog h2 { margin-bottom:20px; font-size:clamp(31px,4vw,58px); font-weight:400; letter-spacing:-.07em; }.dialog-close { position:absolute; top:13px; right:16px; z-index:1; border:0; color:var(--paper); background:transparent; font-size:31px; line-height:1; }.dialog-video { width:100%; max-height:63svh; background:#050505; }
@keyframes hero-copy-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }@keyframes ticker { to { transform:translateX(-50%); } }
@media (min-width:761px) { .motion-ready .cut-section { opacity:0; transform:translateY(22px); transition:opacity .48s ease,transform .65s cubic-bezier(.16,.8,.27,1); }.motion-ready .cut-section:before { position:absolute; z-index:5; top:0; right:4vw; left:4vw; height:1px; background:var(--acid); content:""; opacity:0; transform:scaleX(.18); transform-origin:left; }.motion-ready .cut-section.is-inview { opacity:1; transform:translateY(0); }.motion-ready .cut-section.is-inview:before { animation:cut-line .55s .04s ease both; } }@keyframes cut-line { 0% { opacity:0; transform:scaleX(.18); } 34% { opacity:.92; } 100% { opacity:0; transform:scaleX(1); } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
@media (max-width:760px) { .topbar { height:70px; grid-template-columns:1fr auto; padding:0 20px; }.wordmark { width:118px; }.topbar nav { display:none; }.topbar-action { font-size:10px; }.hero { min-height:calc(100svh - 70px); padding:40px 20px 26px; }.hero-video { object-position:center; }.hero-veil { background:linear-gradient(0deg,rgba(5,5,5,.92),rgba(5,5,5,.2) 82%),linear-gradient(90deg,rgba(5,5,5,.62),transparent); }.hero-playing .hero-veil { background:linear-gradient(0deg,rgba(5,5,5,.82),rgba(5,5,5,.12) 80%),linear-gradient(90deg,rgba(5,5,5,.62),transparent); }.hero-index { display:none; }h1 { font-size:clamp(56px,16vw,82px); }.section-wrap { padding:82px 20px; }.section-heading,.studio-grid,.contact-grid { grid-template-columns:1fr; gap:27px; }.section-heading { margin-bottom:38px; }.reel-grid { width:calc(100vw + 20px); margin-left:-20px; padding:0 20px 16px; gap:12px; }.reel-card,.reel-card-2,.reel-card-3 { flex-basis:76vw; margin:0; }.reel-frame { aspect-ratio:9/13; }.reel-frame:before { inset:9px; opacity:1; transform:scale(1); }.reel-corners,.reel-caption,.reel-timecode { opacity:1; transform:translate(0); }.reel-open { display:none; }.reel-caption { right:15px; bottom:39px; left:15px; }.reel-number { left:15px; bottom:14px; }.reel-timecode { right:15px; bottom:14px; }.motion-ticker-track { padding:13px 0; animation-duration:24s; }.motion-ticker span { padding:0 15px; font-size:10px; }.studio-copy { padding:0; }.studio-copy p { max-width:330px; }.contacts { min-height:620px; }.contact-grid h2 { font-size:clamp(50px,15vw,78px); }.contact-list { width:100%; }.contact-row { grid-template-columns:1fr; gap:8px; }.contact-row span { grid-column:auto; }.contact-row strong { font-size:20px; }footer { min-height:108px; align-items:flex-start; flex-direction:column; justify-content:center; padding:18px 20px; }.video-dialog { padding:26px 17px; }.dialog-video { max-height:63svh; } }