:root { --black:#050505; --off:#f4f2ed; --coral:#ff5c4d; --lime:#d7ff49; --ink:#1320ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--black); }
body { margin:0; background:var(--black); color:var(--off); font-family:Manrope, Arial, sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.nav { position:fixed; inset:0 0 auto; z-index:10; display:flex; align-items:center; justify-content:space-between; height:74px; padding:0 3.3vw; mix-blend-mode:difference; color:#fff; }
.wordmark { font-size:25px; font-weight:800; letter-spacing:-2px; }
.nav nav { display:flex; gap:31px; font-size:12px; font-weight:600; }
.nav-cta { font-size:12px; font-weight:600; } .nav-cta span { padding-left:8px; font-size:16px; }
.hero { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:space-between; padding:142px 3.3vw 38px; isolation:isolate; overflow:hidden; }
.hero::before { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at 50% 50%,rgba(8,8,8,.28) 0,rgba(3,3,3,.58) 75%,rgba(0,0,0,.7) 100%); }
.hero-video { position:absolute; z-index:-2; inset:0; overflow:hidden; background:#050505; pointer-events:none; }
.hero-video::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.1)); }
.hero-video iframe { width:177.78vh; min-width:100%; height:56.25vw; min-height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:0; filter:brightness(.8) saturate(.78) contrast(1.08); }
.hero-grain { position:absolute; z-index:-1; inset:-50%; opacity:.075; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); background-size:100px 100px; animation:grain .16s steps(2) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(.7%,-1%)} 50%{transform:translate(-1%,.7%)} 75%{transform:translate(1%,1%)} }
.eyebrow,.section-label,.project-info p { font:500 10px/1.2 "DM Mono",monospace; letter-spacing:.04em; text-transform:uppercase; }
.hero-title { position:absolute; top:50%; left:50%; width:max-content; margin:0; white-space:nowrap; color:#f8f8f8; font-size:clamp(55px,12.1vw,186px); letter-spacing:-.095em; line-height:.82; transform:translate(-50%,-50%); }
.hero-title span { display:inline-block; } .hero-title .heavy { font-weight:800; } .hero-title .light { font-weight:400; }
.hero-bottom { display:flex; justify-content:space-between; align-items:flex-end; font-size:13px; line-height:1.5; font-weight:500; }
.scroll-prompt { display:flex; align-items:center; gap:12px; font:500 10px "DM Mono",monospace; text-transform:uppercase; } .scroll-prompt i { width:34px; height:1px; background:currentColor; display:block; position:relative; } .scroll-prompt i::after { content:""; position:absolute; right:0; top:-3px; width:6px; height:6px; border-right:1px solid; border-bottom:1px solid; transform:rotate(45deg); }
.section-pad { padding-left:8.2vw; padding-right:8.2vw; }
.intro { min-height:87vh; padding-top:18vh; padding-bottom:13vh; display:grid; grid-template-columns:1fr 2.5fr; gap:4vw; color:var(--off); background:linear-gradient(90deg,rgba(0,0,0,.66),rgba(0,0,0,.3)),url("assets/mc-gross.png") center/cover; }
.intro h2 { margin:0; grid-column:2; font-size:clamp(44px,7.3vw,113px); line-height:.99; letter-spacing:-.07em; font-weight:700; }
.intro-copy { grid-column:2; display:flex; justify-content:space-between; align-items:flex-end; margin-top:7vw; max-width:880px; } .intro-copy p { max-width:360px; margin:0; font-size:16px; line-height:1.5; font-weight:500; }
.arrow-link { font-size:13px; font-weight:700; white-space:nowrap; } .arrow-link span { margin-left:12px; font-size:20px; }
.work { background:var(--black); padding:22px 0 12vw; }.work-head { display:flex; justify-content:space-between; padding-top:0; padding-bottom:9vw; font-size:13px; }
.project { margin:0 3.3vw 7vw; overflow:hidden; }.project-visual { height:min(59vw,830px); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.project-info { padding:18px 0 0; display:grid; grid-template-columns:1fr 1fr auto; align-items:start; }.project-info h3 { margin:-8px 0 0; font-size:clamp(26px,3.4vw,52px); line-height:.98; letter-spacing:-.065em; }.project-info a { font-size:26px; }
.project-coral .project-visual { background:var(--coral); color:#151515; }.visual-one { gap:.02em; font-size:clamp(90px,24vw,370px); line-height:.7; letter-spacing:-.13em; font-weight:800; }.visual-one span:nth-child(2){ font-weight:400; }.visual-one span:last-child { font-size:.43em; letter-spacing:-.1em; transform:translateY(-.35em); }.project-video iframe { width:177.78vh; min-width:100%; height:56.25vw; min-height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:0; }
.project-lime .project-visual { background:#e7e1d5; color:#101010; }.visual-two p { z-index:1; margin:0; font-size:clamp(62px,14vw,220px); font-weight:800; line-height:.75; letter-spacing:-.11em; text-align:center; }.sphere { display:none; }
.project-buttons { position:absolute; z-index:2; left:26px; right:26px; bottom:25px; display:flex; justify-content:center; gap:9px; flex-wrap:wrap; }.project-buttons a { display:flex; align-items:center; gap:20px; padding:11px 15px; border:1px solid rgba(16,16,16,.72); border-radius:999px; background:rgba(255,255,255,.32); backdrop-filter:blur(7px); font-size:11px; font-weight:800; transition:background .25s,color .25s,transform .25s; }.project-buttons a span { font-size:16px; line-height:0; }.project-buttons a:hover { background:#101010; color:#e7e1d5; transform:translateY(-3px); }
.project-ink .project-visual { background:var(--ink); color:var(--off); justify-content:flex-start; padding-left:10vw; }.visual-three { font-size:clamp(110px,30vw,470px); font-weight:800; letter-spacing:-.16em; line-height:.65; }.visual-three span:last-child { margin-left:-.05em; font-weight:400; }
.statement { min-height:100svh; padding-top:14vw; padding-bottom:6vw; background:#e7e1d5; color:#111; display:flex; flex-direction:column; }.statement h2 { margin:8vw 0 auto; font-size:clamp(55px,10.5vw,163px); line-height:.86; letter-spacing:-.09em; }.statement h2 em { font-family:Georgia,serif; font-weight:400; }.statement-footer { display:flex; justify-content:space-between; align-items:end; }.statement-footer p { max-width:330px; font-size:14px; line-height:1.55; }.round-link { display:flex; width:120px; height:120px; border:1px solid #111; border-radius:100%; flex-direction:column; align-items:center; justify-content:center; font-size:11px; font-weight:700; transition:.35s; }.round-link span { margin-top:6px; font-size:18px; }.round-link:hover { background:#111; color:var(--off); transform:rotate(12deg); }
.contact { padding:10vw 8.2vw 2.6vw; min-height:93svh; display:flex; flex-direction:column; }.contact-title { margin:7vw 0 auto; font-size:clamp(86px,20vw,310px); letter-spacing:-.11em; font-weight:700; line-height:.7; transition:color .3s; }.contact-title:hover { color:var(--coral); }.contact-title span { color:var(--coral); }.contact-bottom { display:flex; justify-content:space-between; align-items:end; font:400 10px/1.5 "DM Mono",monospace; text-transform:uppercase; }.contact-bottom a { border-bottom:1px solid #666; padding-bottom:3px; }
.jobs-page { background:#e7e1d5; color:#101010; }.jobs-page .nav { color:#101010; mix-blend-mode:normal; }.jobs-main { min-height:100svh; padding:150px 8.2vw 8vw; }.jobs-main h1 { margin:10vw 0 7vw; font-size:clamp(70px,15vw,230px); letter-spacing:-.105em; line-height:.78; }.jobs-main h1 em { font-family:Georgia,serif; font-weight:400; }.jobs-intro { display:flex; justify-content:space-between; align-items:end; max-width:920px; margin-left:auto; }.job-facts { display:grid; gap:15px; }.job-facts div { display:grid; grid-template-columns:100px minmax(220px,1fr); gap:16px; align-items:baseline; }.job-facts span { font:500 10px "DM Mono",monospace; text-transform:uppercase; }.job-facts strong { font-size:15px; line-height:1.3; }.jobs-intro a { border-bottom:1px solid #101010; padding-bottom:5px; font-size:12px; font-weight:800; }.jobs-intro a span { margin-left:13px; font-size:18px; }.jobs-list { margin-top:14vw; }.jobs-list > .section-label { margin-bottom:20px; }.job-row { display:grid; grid-template-columns:1.25fr 1fr auto; align-items:center; gap:24px; padding:25px 0; border-top:1px solid rgba(16,16,16,.4); }.job-row:last-child { border-bottom:1px solid rgba(16,16,16,.4); }.job-row h2 { margin:0; font-size:clamp(23px,3vw,44px); line-height:1; letter-spacing:-.07em; }.job-row p,.job-row a { margin:0; font-size:12px; font-weight:600; }.job-row a { white-space:nowrap; }.job-row a:hover { text-decoration:underline; }
.reveal,.project,.intro h2,.statement h2,.contact-title { opacity:0; transform:translateY(24px); transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1); }.is-visible { opacity:1; transform:none; }.hero-title { animation:hero-in 1.2s .15s cubic-bezier(.2,.7,.2,1) both; } @keyframes hero-in { from{opacity:0;transform:translate(-50%,calc(-50% + 40px))}to{opacity:1;transform:translate(-50%,-50%)} }
@media (max-width:700px) { .nav { height:62px; padding:0 5vw; }.nav nav { display:none; }.nav-cta { font-size:10px; }.hero { padding:112px 5vw 28px; }.hero-title { font-size:14.1vw; }.hero-bottom { font-size:11px; }.section-pad { padding-left:5vw; padding-right:5vw; }.intro { display:block; min-height:76vh; padding-top:18vw; }.intro h2 { margin:21vw 0 0; }.intro-copy { display:block; margin-top:13vw; }.intro-copy p { font-size:14px; }.arrow-link { display:inline-block; margin-top:30px; }.work-head { padding-bottom:12vw; }.work-head > p:last-child { display:none; }.project { margin:0 5vw 16vw; }.project-visual { height:83vw; }.project-info { grid-template-columns:1fr auto; gap:12px; }.project-info h3 { grid-row:2; margin:0; }.project-info a { grid-column:2; grid-row:1 / span 2; }.sphere { width:52vw; height:52vw; }.project-buttons { left:14px; right:14px; bottom:14px; gap:6px; }.project-buttons a { padding:7px 9px; gap:9px; font-size:8px; }.project-buttons a span { font-size:12px; }.statement { min-height:85vh; padding-top:15vw; padding-bottom:8vw; }.statement h2 { margin-top:19vw; }.statement-footer { display:block; }.round-link { width:105px; height:105px; margin-top:30px; }.contact { padding:17vw 5vw 5vw; min-height:80svh; }.contact-title { margin-top:20vw; }.contact-bottom { font-size:8px; }.contact-bottom p:nth-child(2) { display:none; } }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.hero-grain{animation:none}.reveal,.project,.intro h2,.statement h2,.contact-title,.hero-title{animation:none;opacity:1;transform:none;transition:none} }
@media (max-width:700px) { .jobs-main { padding:110px 5vw 12vw; }.jobs-main h1 { margin:22vw 0 18vw; }.jobs-intro { display:block; }.job-facts div { grid-template-columns:82px 1fr; gap:8px; }.job-facts strong { font-size:13px; }.jobs-intro a { display:inline-block; margin-top:28px; }.jobs-list { margin-top:24vw; }.job-row { grid-template-columns:1fr; gap:10px; padding:21px 0; }.job-row h2 { font-size:30px; } }