:root { --blue:#080cdf; --ink:#08080b; --paper:#f8f8f6; --grey:#d9dce0; --line:rgba(8,12,223,.28); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; }
body { margin:0; color:var(--blue); background:var(--paper); font-family:"Space Grotesk",Arial,sans-serif; overflow-x:hidden; }
.page-grain { position:fixed; z-index:10; inset:0; pointer-events:none; opacity:.12; 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='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
.site-header { display:flex; justify-content:space-between; align-items:center; padding:24px 3.1vw; position:absolute; z-index:5; width:100%; color:white; }
.wordmark { color:inherit; text-decoration:none; font:700 17px/1 "Archivo Black",Arial,sans-serif; letter-spacing:-.06em; display:flex; flex-direction:column; }.wordmark span { font:600 8px/1.1 "Space Grotesk",sans-serif; letter-spacing:.08em; margin-top:3px; }
.site-nav { display:flex; align-items:center; gap:29px; font:700 11px "Space Grotesk",sans-serif; letter-spacing:.04em; text-transform:uppercase; }.site-nav a { color:inherit; text-decoration:none; }.site-nav a:not(.nav-contact):hover { text-decoration:underline; text-underline-offset:4px; }.nav-contact { border:1px solid currentColor; padding:10px 13px 9px; }.nav-contact span { margin-left:9px; }.menu-toggle { display:none; }
.hero { min-height:100svh; padding:130px 3.1vw 29px; position:relative; background:var(--blue); color:white; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }.hero:before { content:""; width:67vw; height:67vw; background:radial-gradient(circle, rgba(255,255,255,.45) 0,rgba(255,255,255,.14) 25%,transparent 68%); filter:blur(14px); position:absolute; right:-18vw; top:-18vw; opacity:.82; }
.hero-topline { display:flex; justify-content:space-between; gap:20px; font:700 11px "Space Grotesk",sans-serif; letter-spacing:.04em; text-transform:uppercase; position:relative; }.hero-topline p { margin:0; }.hero-copy { position:relative; z-index:1; padding:5vh 0 10vh; }.hero h1,.section h2,.contact h2 { font:clamp(56px,9.5vw,150px)/.82 "Archivo Black",Arial,sans-serif; letter-spacing:-.085em; margin:0; text-transform:uppercase; max-width:1000px; }.hero h1 em,.section h2 em,.contact h2 em { font-style:normal; color:transparent; -webkit-text-stroke:2px currentColor; }.hero-intro { max-width:290px; margin:34px 0 0 clamp(180px,25vw,370px); font-size:17px; font-weight:500; line-height:1.3; }.hero-logo { position:absolute; width:min(51vw,670px); right:-3vw; bottom:1vw; overflow:hidden; mix-blend-mode:screen; }.hero-logo img { width:100%; display:block; transform:scale(1.35); }.scroll-prompt { color:inherit; text-decoration:none; display:flex; justify-content:space-between; border-top:1px solid rgba(255,255,255,.7); padding-top:9px; font:700 11px "Space Grotesk",sans-serif; letter-spacing:.04em; text-transform:uppercase; position:relative; }.scroll-prompt b { font-size:19px; line-height:11px; }
.marquee { background:var(--ink); color:white; overflow:hidden; padding:15px 0 13px; }.marquee-track { display:flex; align-items:center; gap:26px; width:max-content; animation:marquee 24s linear infinite; white-space:nowrap; font:700 14px "Space Grotesk",sans-serif; letter-spacing:.04em; text-transform:uppercase; }.marquee-track i { color:var(--blue); font-style:normal; font-size:18px; } @keyframes marquee { to { transform:translateX(-50%); } }
.section { padding:150px 3.1vw; }.section-heading { display:grid; grid-template-columns:30% 1fr; }.eyebrow { font:700 11px "Space Grotesk",sans-serif; letter-spacing:.04em; text-transform:uppercase; margin:5px 0 0; }.work-section { background:var(--paper); }.work-section h2,.services h2 { font-size:clamp(46px,6.4vw,100px); }.work-section h2 em,.services h2 em { -webkit-text-stroke:1.5px var(--blue); }.work-grid { margin-top:100px; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,80px); align-items:start; }.project { display:block; color:inherit; text-decoration:none; }.project-offset { margin-top:20vw; }.project-wide { width:57%; margin-left:8%; margin-top:4vw; }.project-visual { overflow:hidden; position:relative; aspect-ratio:1/1.15; }.project:hover .project-visual > * { transform:scale(1.04); }.project-visual > * { transition:transform .5s cubic-bezier(.2,.7,.2,1); }.alabaster { background:var(--blue); display:flex; align-items:flex-end; justify-content:center; padding-bottom:12%; color:white; }.alabaster > span { position:absolute; left:7%; top:7%; font:clamp(22px,3.5vw,53px)/.88 "Archivo Black",sans-serif; letter-spacing:-.07em; z-index:1; }.alabaster-arch { width:64%; height:65%; background:var(--paper); border-radius:260px 260px 0 0; }.alabaster-sun { width:21%; aspect-ratio:1; border-radius:50%; position:absolute; background:var(--grey); left:18%; top:28%; filter:blur(6px); }.highline { background:var(--grey); display:grid; place-items:center; aspect-ratio:1; }.highline-card { width:70%; height:76%; background:var(--blue); color:white; padding:8%; display:flex; flex-direction:column; box-shadow:13px 13px 0 var(--ink); }.highline-card small { font:42px/1 "Archivo Black",sans-serif; }.highline-card strong { margin-top:auto; font:clamp(25px,3.7vw,56px)/.8 "Archivo Black",sans-serif; letter-spacing:-.1em; }.highline-card em { margin-top:18px; font-size:12px; font-style:normal; text-transform:uppercase; }.residue { background:var(--ink); color:white; aspect-ratio:1.7; display:grid; place-items:center; }.residue > span { z-index:2; font:clamp(44px,7vw,104px)/.75 "Archivo Black",sans-serif; text-align:center; letter-spacing:-.1em; }.residue-paint { position:absolute; border-radius:50%; filter:blur(14px); }.paint-a { width:47%; height:80%; left:5%; top:8%; background:var(--blue); transform:rotate(-36deg); }.paint-b { width:37%; height:47%; right:11%; top:6%; background:white; opacity:.55; transform:rotate(37deg); }.paint-c { width:33%; height:27%; bottom:9%; right:21%; background:var(--blue); }.project-meta { display:flex; justify-content:space-between; gap:15px; margin-top:10px; font:700 10px "Space Grotesk",sans-serif; letter-spacing:.04em; text-transform:uppercase; }.all-work { margin:85px 0 0 30%; }.text-link { display:inline-block; color:inherit; text-decoration:none; font:700 12px "Space Grotesk",sans-serif; letter-spacing:.04em; text-transform:uppercase; border-bottom:1px solid currentColor; padding-bottom:5px; }.text-link span { margin-left:36px; }
.manifesto { background:var(--blue); color:white; padding-bottom:0; overflow:hidden; }.manifesto-copy { display:grid; grid-template-columns:30% 1fr; margin-top:50px; }.manifesto h2 { font-size:clamp(51px,7.2vw,112px); grid-column:2; }.manifesto h2 em { -webkit-text-stroke:2px white; }.manifesto-note { grid-column:2; display:flex; justify-content:space-between; align-items:end; gap:30px; margin:80px 0 100px; }.manifesto-note p { max-width:380px; margin:0; font-size:17px; line-height:1.4; font-weight:500; }.manifesto .text-link { white-space:nowrap; }.manifesto-art { height:clamp(230px,34vw,480px); position:relative; margin:0 -3.3vw; border-top:1px solid rgba(255,255,255,.5); overflow:hidden; }.art-word { position:absolute; font:clamp(140px,21vw,350px)/.8 "Archivo Black",sans-serif; letter-spacing:-.12em; top:-.13em; left:1vw; z-index:2; }.art-word.word-child { top:auto; bottom:-.25em; left:auto; right:-.02em; }.art-orb { width:38vw; aspect-ratio:1; border-radius:50%; background:white; color:var(--blue); position:absolute; left:32%; top:13%; display:grid; place-items:center; font:30vw/1 "Archivo Black",sans-serif; }
.services { background:var(--grey); }.services-list { margin:90px 0 0 30%; border-top:1px solid var(--line); }.service { display:grid; grid-template-columns:9% 1fr auto; gap:25px; padding:24px 0 28px; border-bottom:1px solid var(--line); transition:padding .3s,background .3s,color .3s; }.service:hover { padding-left:18px; padding-right:18px; background:var(--blue); color:white; }.service > span,.service b { font:700 11px "Space Grotesk",sans-serif; }.service h3 { font:clamp(24px,2.9vw,44px)/.9 "Archivo Black",sans-serif; letter-spacing:-.075em; margin:0; text-transform:uppercase; }.service p { margin:12px 0 0; max-width:410px; line-height:1.35; font-weight:500; }.service b { font-size:19px; }
.contact { min-height:97svh; padding:140px 3.1vw 28px; background:var(--ink); color:white; display:flex; flex-direction:column; position:relative; overflow:hidden; }.contact-mark { position:absolute; width:min(50vw,740px); right:-9vw; top:-6vw; mix-blend-mode:screen; opacity:.98; }.contact-mark img { width:100%; display:block; transform:scale(1.28); }.contact .eyebrow,.contact h2,.contact-email { position:relative; }.contact h2 { margin-top:75px; font-size:clamp(63px,10vw,156px); }.contact h2 em { -webkit-text-stroke:2px white; }.contact-email { color:inherit; font:700 clamp(18px,2.6vw,38px) "Space Grotesk",sans-serif; letter-spacing:-.05em; text-transform:uppercase; margin-top:54px; text-decoration:none; border-bottom:2px solid currentColor; padding-bottom:12px; align-self:flex-start; }.contact-email span { margin-left:35px; }.contact-bottom { margin-top:auto; display:flex; justify-content:space-between; border-top:1px solid rgba(255,255,255,.7); padding-top:10px; font:700 10px "Space Grotesk",sans-serif; letter-spacing:.04em; text-transform:uppercase; position:relative; }.contact-bottom p { margin:0; }.contact-bottom a { color:inherit; }.reveal { opacity:0; transform:translateY(22px); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1); }.reveal.is-visible { opacity:1; transform:none; }
@media (max-width:700px) { .site-header { padding:19px 20px; }.site-nav { display:none; position:absolute; left:0; right:0; top:0; padding:90px 20px 26px; background:var(--blue); flex-direction:column; align-items:flex-start; gap:18px; font-size:14px; }.site-nav.is-open { display:flex; }.menu-toggle { z-index:1; display:flex; align-items:center; gap:8px; border:0; background:none; font:700 11px "Space Grotesk",sans-serif; letter-spacing:.04em; text-transform:uppercase; color:white; padding:7px 0; }.menu-toggle i { width:17px; height:1px; display:block; background:currentColor; }.hero { padding:100px 20px 22px; min-height:750px; }.hero-topline { flex-direction:column; gap:5px; }.hero-copy { padding:86px 0 0; }.hero h1 { font-size:clamp(56px,16vw,100px); }.hero h1 em { -webkit-text-stroke:1.5px white; }.hero-intro { margin:25px 0 0; max-width:245px; font-size:15px; }.hero-logo { width:90vw; right:-23vw; bottom:45px; }.section { padding:90px 20px; }.section-heading { display:block; }.section-heading h2 { margin-top:35px; }.work-grid { display:block; margin-top:50px; }.project-offset { margin-top:48px; margin-left:12%; }.project-wide { width:88%; margin:48px 0 0; }.project-meta { font-size:9px; }.all-work { margin:55px 0 0; }.manifesto-copy { display:block; margin-top:37px; }.manifesto h2 { font-size:clamp(52px,14vw,85px); }.manifesto-note { display:block; margin:42px 0 70px; }.manifesto-note .text-link { margin-top:33px; }.manifesto-art { margin:0 -20px; height:250px; }.art-orb { width:60vw; left:25%; top:21%; font-size:47vw; }.services-list { margin:48px 0 0; }.service { grid-template-columns:35px 1fr 20px; gap:12px; }.service p { font-size:14px; }.contact { padding:100px 20px 20px; min-height:720px; }.contact h2 { margin-top:55px; }.contact-bottom { flex-wrap:wrap; gap:12px; font-size:9px; }.contact-bottom a { width:100%; }.contact-mark { width:95vw; right:-40vw; top:3vw; }.contact-email { font-size:16px; margin-top:42px; }.contact-email span { margin-left:13px; } }