:root { --bg:#080808; --fg:#f0ebe3; --muted:#a3a3a3; --lime:#e8ff3d; --line:rgba(255,255,255,.06); }
* { box-sizing:border-box; } ::selection { background:var(--lime); color:#000; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--fg); font-family:Inter,Arial,sans-serif; overflow-x:hidden; } a { color:inherit; text-decoration:none; } button,input,textarea { font:inherit; }
.container { width:min(1440px,100%); margin:auto; padding-inline:40px; }.site-nav { position:fixed; inset:0 0 auto; z-index:10; transition:.3s; }.site-nav.scrolled { background:rgba(8,8,8,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }.nav-inner { height:64px; max-width:1440px; padding:0 40px; margin:auto; display:flex; align-items:center; justify-content:space-between; }.logo,footer strong { font-size:20px; font-weight:900; letter-spacing:-.03em; }.nav-links { display:flex; align-items:center; gap:40px; color:#a3a3a3; font-size:11px; letter-spacing:.2em; }.nav-links a:hover,.mobile-menu a:hover { color:#fff; }.contact-link { padding:10px 20px; background:var(--lime); color:#000!important; font-weight:700; }.menu-toggle { display:none; padding:5px; border:0; background:transparent; }.menu-toggle span { display:block; width:24px; height:1px; margin:6px; background:#fff; transition:.25s; }.menu-toggle.active span:first-child { transform:translateY(7px) rotate(45deg); }.menu-toggle.active span:nth-child(2) { opacity:0; }.menu-toggle.active span:last-child { transform:translateY(-7px) rotate(-45deg); }.mobile-menu { display:none; flex-direction:column; gap:24px; padding:28px 24px; border-top:1px solid var(--line); background:var(--bg); color:#d4d4d4; font-size:14px; letter-spacing:.2em; }.mobile-menu.open { display:flex; }
.video-section { position:relative; overflow:hidden; }.hero { height:100svh; display:flex; align-items:end; }.cover-video,.card-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.hero-shade { position:absolute; inset:0; background:linear-gradient(to top,#080808,rgba(8,8,8,.4),rgba(8,8,8,.1)); }.dark-shade { position:absolute; inset:0; background:rgba(0,0,0,.55); }.dark-shade.light { background:rgba(0,0,0,.2); }.hero-content { position:relative; z-index:1; display:flex; align-items:end; justify-content:space-between; width:min(1440px,100%); margin:auto; padding:0 40px 112px; }.hero h1,.section-heading h2,.about h2,.services h2,.contact h2,.process h2 { margin:0; font-size:clamp(4.5rem,13vw,13rem); font-weight:900; line-height:.85; letter-spacing:-.04em; }.hero em { color:#a3a3a3; }.hero-content span { margin-bottom:12px; color:#737373; font-size:10px; letter-spacing:.25em; }.scroll-line { position:absolute; z-index:1; bottom:32px; left:50%; width:1px; height:40px; background:linear-gradient(transparent,#737373,transparent); }
.ticker { overflow:hidden; padding:14px 0; border-block:1px solid var(--line); white-space:nowrap; }.ticker-track { display:inline-block; color:#737373; font-size:10px; font-weight:700; letter-spacing:.3em; animation:marquee 32s linear infinite; }.ticker-track b { padding:0 26px; color:#555; } @keyframes marquee { to { transform:translateX(-50%); } }
.work,.about { padding-block:128px; }.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:48px; }.section-heading h2 { font-size:clamp(2.5rem,6vw,6rem); }.section-heading a { padding-bottom:3px; border-bottom:1px solid #555; color:#aaa; font-size:10px; letter-spacing:.2em; }.section-heading a:hover { border-color:var(--lime); color:var(--lime); }.featured-grid,.project-grid { display:grid; gap:1px; background:var(--line); }.featured-grid { grid-template-columns:repeat(2,1fr); margin-bottom:1px; }.project-grid { grid-template-columns:repeat(4,1fr); }.featured-card,.project-card { position:relative; overflow:hidden; background:var(--bg); }.featured-card { aspect-ratio:16/10; }.project-card { aspect-ratio:4/5; }.card-video { transition:transform .7s ease; }.featured-card:hover .card-video,.project-card:hover .card-video { transform:scale(1.05); }.card-shade { position:absolute; inset:0; background:rgba(0,0,0,.4); transition:.5s; }.featured-card .card-shade { background:rgba(0,0,0,.35); }.featured-card:hover .card-shade,.project-card:hover .card-shade { background:rgba(0,0,0,.15); }.featured-copy,.project-copy { position:absolute; inset:auto 0 0; padding:24px; }.project-copy { padding:20px; }.featured-copy h3,.project-copy h3 { margin:0; font-size:clamp(1.25rem,2vw,1.875rem); font-weight:900; letter-spacing:-.04em; }.project-copy h3 { font-size:16px; }.featured-copy span,.project-copy span { display:block; margin-top:5px; color:#a3a3a3; font-size:10px; }.featured-copy span { font-size:12px; }.showreel { height:65svh; }
.about { display:grid; grid-template-columns:1fr 1fr; gap:96px; border-top:1px solid var(--line); }.eyebrow { margin:0 0 32px; color:var(--lime); font-size:10px; font-weight:700; letter-spacing:.35em; }.about h2,.services h2 { font-size:clamp(2rem,4.5vw,5rem); line-height:1.02; }.about-copy>p:not(.eyebrow),.contact>div>p:not(.eyebrow),.service-list p { max-width:520px; color:#a3a3a3; font-size:15px; line-height:1.65; }.about-video { position:relative; overflow:hidden; aspect-ratio:3/4; background:#111; }.about-video video { width:100%; height:100%; object-fit:cover; }.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; padding-top:40px; border-top:1px solid var(--line); }.stats strong { display:block; color:var(--lime); font-size:40px; font-weight:900; letter-spacing:-.04em; }.stats span { color:#737373; font-size:9px; font-weight:700; letter-spacing:.25em; }
.services { padding-block:128px; border-top:1px solid var(--line); }.services-grid { display:grid; grid-template-columns:1fr 2fr; gap:96px; }.services h2 { font-size:clamp(2.5rem,5vw,5rem); line-height:.9; }.service-list article { display:flex; gap:32px; padding:32px 16px; border-bottom:1px solid var(--line); transition:.2s; }.service-list article:hover { background:rgba(255,255,255,.02); }.service-list span { color:#666; font:11px monospace; }.service-list h3 { margin:0 0 10px; font-size:20px; }.service-list article:hover h3 { color:var(--lime); }.service-list p { margin:0; }.process { display:flex; align-items:center; height:45svh; }.process-copy { position:relative; z-index:1; }.process h2 { max-width:800px; font-size:clamp(1.25rem,3vw,3rem); line-height:1.1; }.process .eyebrow { margin-bottom:16px; }
.contact { display:grid; grid-template-columns:1fr 1fr; gap:96px; padding-block:144px; border-top:1px solid var(--line); }.contact h2 { margin-bottom:40px; font-size:clamp(4rem,10vw,10rem); }.contact-details { display:grid; gap:12px; margin-top:36px; color:#a3a3a3; font-size:14px; }.contact form { padding-top:8px; }.contact input,.contact textarea { display:block; width:100%; padding:20px 0; border:0; border-bottom:1px solid rgba(255,255,255,.1); outline:0; background:transparent; color:var(--fg); font-size:13px; letter-spacing:.1em; }.contact input:focus,.contact textarea:focus { border-color:var(--lime); }.contact input::placeholder,.contact textarea::placeholder { color:#666; font-size:11px; letter-spacing:.2em; }.contact textarea { resize:vertical; }.contact button { margin-top:40px; padding:16px 40px; border:0; background:var(--lime); color:#000; font-size:11px; font-weight:700; letter-spacing:.2em; cursor:pointer; }.contact button:hover { background:#fff; } footer { padding:32px 0; border-top:1px solid var(--line); }.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }.footer-inner div { display:flex; gap:32px; }.footer-inner a,.footer-inner span { color:#737373; font-size:10px; letter-spacing:.2em; }.footer-inner a:hover { color:#fff; }
@media (max-width:768px) { .container,.nav-inner,.hero-content { padding-inline:24px; }.nav-links { display:none; }.menu-toggle { display:block; }.hero-content { flex-direction:column; align-items:start; gap:28px; padding-bottom:80px; }.hero-content span { margin:0; }.work,.about,.services { padding-block:96px; }.featured-grid,.about,.services-grid,.contact { grid-template-columns:1fr; }.project-grid { grid-template-columns:repeat(2,1fr); }.showreel { height:55svh; }.about,.services-grid,.contact { gap:64px; }.about-video { max-width:560px; }.contact { padding-block:96px; }.footer-inner { flex-direction:column; }.footer-inner div { gap:24px; }.section-heading h2 { font-size:clamp(2.5rem,12vw,5rem); } }