:root { --ink:#080809; --paper:#f4f1ea; --acid:#d7ff3f; --violet:#8c5cff; --line:rgba(244,241,234,.2); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--ink); color:var(--paper); font-family:Manrope,Arial,sans-serif; overflow-x:hidden; } a { color:inherit; text-decoration:none; } .noise { position:fixed; inset:0; pointer-events:none; opacity:.035; z-index:9; 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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); } .cursor-glow { position:fixed; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(140,92,255,.13),transparent 65%); pointer-events:none; z-index:-1; transition:transform .3s ease-out; }
.site-header { height:88px; padding:0 4.8vw; display:flex; align-items:center; justify-content:space-between; position:absolute; top:0; inset-inline:0; z-index:4; } .logo { font-size:1.25rem; font-weight:800; letter-spacing:-.09em; } .logo span:not(.logo-mark) { font-weight:400; } .logo-mark { color:var(--acid); font-size:.9em; vertical-align:top; margin-right:2px; } nav { display:flex; gap:2.2rem; margin-left:10vw; } nav a, .nav-cta { font:500 .67rem 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.07em; } nav a { opacity:.72; transition:opacity .2s; } nav a:hover { opacity:1; } .nav-cta { border:1px solid var(--line); border-radius:30px; padding:.75rem 1rem; transition:background .2s,color .2s,transform .3s; } .nav-cta:hover { background:var(--acid); color:var(--ink); }
.hero { min-height:100svh; position:relative; padding:clamp(130px,21vh,215px) 4.8vw 4vh; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; } .eyebrow { margin:0; font:500 .65rem 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; color:#b5b1ac; } .eyebrow i { display:inline-block; height:5px; width:5px; background:var(--acid); border-radius:50%; margin:0 .5rem 2px; } .hero-title { margin:3.5vh 0 auto; max-width:1000px; font-size:clamp(4rem,9.3vw,9.6rem); line-height:.88; letter-spacing:-.085em; font-weight:700; position:relative; z-index:1; } .hero-title span { display:block; } .serif, .hero-title em, .manifesto h2 span, .contact h2 span { font-family:'Playfair Display',serif; font-weight:600; letter-spacing:-.07em; } .hero-title em { color:var(--acid); font-style:italic; } .hero-bottom { display:flex; justify-content:space-between; align-items:end; gap:2rem; z-index:1; } .hero-bottom p { width:min(330px,55vw); font-size:.92rem; line-height:1.6; color:#b5b1ac; } .round-link { height:108px; width:108px; border:1px solid var(--line); border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.35rem; font:500 .62rem 'DM Mono',monospace; text-transform:uppercase; transition:background .3s,color .3s,transform .3s; } .round-link b { color:var(--acid); font-size:1.1rem; } .round-link:hover { background:var(--acid); color:var(--ink); } .round-link:hover b { color:var(--ink); }.hero-stamp { position:absolute; right:10vw; top:29%; color:var(--acid); font:500 .58rem 'DM Mono',monospace; line-height:1.4; letter-spacing:.08em; transform:rotate(15deg); animation:float 4s ease-in-out infinite; } .hero-stamp span { font-size:2.2rem; display:block; margin-top:.5rem; }.hero-orbit { position:absolute; border:1px solid rgba(215,255,63,.36); border-radius:50%; transform:rotate(-30deg); }.orbit-one { width:48vw; height:13vw; right:-5vw; top:26%; animation:orbit 13s linear infinite; }.orbit-two { width:36vw; height:9vw; right:2vw; top:29%; border-color:rgba(140,92,255,.75); animation:orbit 9s linear infinite reverse; }
.marquee { border-block:1px solid var(--line); overflow:hidden; white-space:nowrap; padding:1.1rem 0; background:#111114; }.marquee div { display:inline-block; padding-left:100%; animation:marquee 28s linear infinite; font-size:clamp(1.4rem,2.4vw,2.5rem); font-weight:700; letter-spacing:-.06em; }.marquee span { color:var(--acid); margin:0 1.1rem; }.section-pad { padding:clamp(6rem,13vw,11rem) 4.8vw; }.section-intro { display:grid; grid-template-columns:1fr 2fr 1fr; gap:2rem; align-items:start; margin-bottom:7rem; }.section-intro h2,.manifesto h2,.contact h2 { margin:0; font-size:clamp(3rem,6.7vw,7rem); letter-spacing:-.08em; line-height:.9; }.section-intro h2 span { font-family:'Playfair Display',serif; font-style:italic; color:var(--acid); }.section-intro > p:last-child { font-size:.9rem; line-height:1.65; color:#b5b1ac; margin:0; }
.project-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:4vw 2vw; }.project-card { grid-column:span 5; cursor:pointer; }.project-card.large { grid-column:span 7; }.project-card.offset { grid-column:9 / span 4; padding-top:16vw; }.project-card.wide { grid-column:4 / span 8; }.project-visual { height:clamp(260px,44vw,610px); overflow:hidden; position:relative; transition:transform .55s cubic-bezier(.2,.7,.2,1); }.project-card:hover .project-visual { transform:scale(.975); }.project-meta { display:flex; justify-content:space-between; align-items:end; border-bottom:1px solid var(--line); padding:1rem 0 1.25rem; }.project-meta p { margin:0 0 .35rem; font:500 .58rem 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; color:#a6a29b; }.project-meta h3 { margin:0; font-size:1.35rem; letter-spacing:-.06em; }.project-meta>span { font-size:1.35rem; transition:transform .3s; }.project-card:hover .project-meta>span { transform:translate(4px,-4px); color:var(--acid); }.project-a { background:radial-gradient(circle at 35% 70%,#9e6eff 0,transparent 21%),radial-gradient(circle at 67% 35%,#ec613d 0,transparent 30%),#251c60; }.ghost-word { position:absolute; left:-2%; bottom:-10%; font-size:clamp(8rem,22vw,22rem); line-height:.8; font-weight:800; letter-spacing:-.14em; color:rgba(244,241,234,.14); }.sphere { height:40%; aspect-ratio:1; position:absolute; border-radius:50%; background:linear-gradient(135deg,#f7ff8b,#ccff33 42%,#a987ff 70%,#2b1759); right:17%; top:25%; box-shadow:0 0 80px rgba(215,255,63,.4); animation:float 6s ease-in-out infinite; }.project-b { background:#e6e1d5; color:#111; display:grid; place-items:center; font-size:clamp(2.6rem,5.4vw,6rem); line-height:.74; letter-spacing:-.1em; font-weight:800; }.project-b i { font-family:'Playfair Display',serif; font-weight:600; }.wire-cube { position:absolute; width:35%; aspect-ratio:1; border:1px solid #111; transform:rotate(30deg); right:10%; bottom:4%; opacity:.5; }.project-c { background:linear-gradient(145deg,#e840ac,#fa963c); color:#210523; padding:7%; }.project-c .sun { font-size:clamp(9rem,20vw,19rem); line-height:.65; color:#ffef65; position:absolute; right:4%; top:15%; animation:spin 14s linear infinite; }.project-c>span { font:600 clamp(2rem,4vw,4.5rem)/.88 'Playfair Display',serif; position:relative; z-index:1; }.project-d { height:clamp(280px,33vw,490px); background:#d4ff3f; color:#121310; display:flex; align-items:center; justify-content:center; overflow:hidden; }.project-d>span { font:italic 600 clamp(3rem,8vw,8rem)/1 'Playfair Display',serif; letter-spacing:-.08em; position:relative; z-index:2; }.ribbon { position:absolute; width:130%; height:23%; border-radius:50%; border:5vw solid #6040d4; transform:rotate(-18deg); }.ribbon-a { top:9%; }.ribbon-b { bottom:6%; border-color:#f35462; transform:rotate(18deg); }
.manifesto { background:#f0ede5; color:var(--ink); }.manifesto-copy { margin:4rem 0 8rem!important; max-width:1050px; }.manifesto h2 span { color:#7350dd; }.principles { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(8,8,9,.25); }.principle { min-height:270px; padding:1.25rem 2rem 1rem 0; border-right:1px solid rgba(8,8,9,.25); margin-right:2rem; display:flex; flex-direction:column; }.principle:last-child { border:0; }.principle span { font:.62rem 'DM Mono',monospace; }.principle h3 { margin:auto 0 1rem; font-size:clamp(1.7rem,2.7vw,3rem); line-height:.9; letter-spacing:-.07em; }.principle p { margin:0; max-width:260px; font-size:.8rem; line-height:1.65; }.contact { min-height:92svh; padding:clamp(6rem,13vw,11rem) 4.8vw 2.5rem; position:relative; overflow:hidden; display:flex; flex-direction:column; }.contact-glow { width:min(55vw,700px); aspect-ratio:1; position:absolute; right:-10vw; top:-14vw; border-radius:50%; background:radial-gradient(circle at 30% 35%,#ef6ac1, #7247e5 33%, #101017 70%); filter:blur(2px); opacity:.9; }.contact h2 { margin-top:4rem; position:relative; z-index:1; }.contact h2 span { color:var(--acid); }.contact-link { margin-top:4rem; font-size:clamp(1.25rem,3.2vw,3.5rem); font-weight:500; letter-spacing:-.06em; border-bottom:1px solid var(--paper); align-self:start; position:relative; z-index:2; }.contact-link b { color:var(--acid); font-weight:400; }footer { margin-top:auto; padding-top:6rem; display:flex; justify-content:space-between; align-items:center; font:500 .58rem 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.07em; color:#aaa6a0; } footer .logo { color:var(--paper); font-family:Manrope,sans-serif; text-transform:none; font-size:1.2rem; }footer div { display:flex; gap:1rem; }
.reveal,.reveal-word { opacity:0; transform:translateY(28px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.65,.2,1); }.reveal-word:nth-child(2){transition-delay:.08s}.reveal-word:nth-child(3){transition-delay:.16s}.reveal.is-visible,.reveal-word.is-visible { opacity:1; transform:translateY(0); }@keyframes float { 50% { transform:translateY(-15px) rotate(8deg); } }@keyframes orbit { to { transform:rotate(330deg); } }@keyframes marquee { to { transform:translateX(-50%); } }@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:700px) { .site-header { height:76px; padding:0 1.25rem; } nav { display:none; }.nav-cta { font-size:.56rem; }.hero { padding:130px 1.25rem 2rem; min-height:740px; }.hero-title { font-size:clamp(3.8rem,16.5vw,6rem); margin-top:4rem; }.hero-bottom p { width:62%; font-size:.78rem; }.round-link { width:78px; height:78px; font-size:.51rem; }.hero-stamp { right:10%; top:22%; }.orbit-one { width:95vw; height:30vw; right:-24vw; top:32%; }.orbit-two { width:75vw; height:23vw; right:-12vw; top:35%; }.section-pad { padding:5.8rem 1.25rem; }.section-intro { display:block; margin-bottom:3.5rem; }.section-intro h2 { margin:2.6rem 0 1.5rem; }.section-intro > p:last-child { max-width:300px; }.project-grid { display:block; }.project-card,.project-card.large,.project-card.offset,.project-card.wide { padding:0; margin-bottom:3.5rem; }.project-visual { height:104vw; }.project-card.wide .project-visual { height:72vw; }.project-b { font-size:4rem; }.principles { display:block; }.principle { min-height:210px; border-right:0; border-bottom:1px solid rgba(8,8,9,.25); margin:0; padding-right:0; }.principle:last-child { border-bottom:0; }.manifesto-copy { margin:3rem 0 4rem!important; }.contact { padding:5.8rem 1.25rem 1.5rem; min-height:680px; }.contact-glow { width:110vw; right:-42vw; top:-5vw; }.contact h2 { margin-top:3.2rem; font-size:clamp(3.4rem,14.5vw,5.5rem); }.contact-link { margin-top:3rem; font-size:1.25rem; }.cursor-glow { display:none; }footer { padding-top:5rem; font-size:.5rem; }footer p { display:none; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }