:root { --ink:#0b0d12; --paper:#f1f0ea; --acid:#c9ff35; --coral:#ff715b; --sky:#73ceff; --lavender:#c3b4ff; --mono:"DM Mono",monospace; --sans:"Manrope",sans-serif; --serif:"Playfair Display",serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); overflow-x:hidden; } .grain { position:fixed; inset:0; opacity:.075; pointer-events:none; z-index:5; 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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
.site-header { height:86px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,4.6vw,72px); background:var(--ink); color:var(--paper); position:relative; z-index:2; } .wordmark { color:inherit; text-decoration:none; font-weight:800; font-size:29px; line-height:1; letter-spacing:-1.8px; } .wordmark span { color:var(--acid); font-size:9px; vertical-align:top; margin-left:2px; letter-spacing:0; } nav { display:flex; gap:34px; } nav a,.header-link { color:inherit; text-decoration:none; font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:11px; } .header-link span { font-size:17px; color:var(--acid); padding-left:4px; }
.hero { background:var(--ink); color:var(--paper); min-height:640px; display:grid; grid-template-columns:minmax(0,1fr) minmax(390px,.95fr); padding:clamp(56px,9vw,130px) clamp(24px,8vw,135px) clamp(60px,9vw,126px); gap:35px; overflow:hidden; position:relative; } .hero-copy { max-width:620px; position:relative; z-index:1; } .eyebrow { color:inherit; display:flex; align-items:center; gap:10px; margin:0 0 29px; font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; } .eyebrow span { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 4px rgba(201,255,53,.16); } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(48px,6.6vw,100px); line-height:.96; letter-spacing:-.071em; max-width:780px; margin-bottom:29px; font-weight:700; } em { font-family:var(--serif); font-weight:600; letter-spacing:-.05em; } .hero-body { max-width:435px; color:#c7c9c8; font-size:16px; line-height:1.65; margin-bottom:37px; } .pill-button { display:inline-flex; gap:31px; align-items:center; padding:15px 18px 15px 21px; background:var(--acid); color:var(--ink); border-radius:100px; text-decoration:none; font-size:13px; font-weight:800; } .pill-button span { font-size:20px; line-height:10px; }
.hero-art { min-height:445px; position:relative; margin-top:-30px; } .orb { position:absolute; border-radius:50%; filter:blur(1px); } .orb-one { width:320px; height:320px; background:var(--acid); right:10%; top:25px; opacity:.87; } .orb-two { width:180px; height:180px; background:var(--coral); right:43%; bottom:11px; mix-blend-mode:screen; } .phone { position:absolute; background:#151a20; border:7px solid #222731; border-radius:31px; overflow:hidden; margin:0; box-shadow:0 23px 45px rgba(0,0,0,.38); } .phone img { width:100%; display:block; } .phone-main { width:190px; right:22%; top:36px; z-index:3; transform:rotate(5deg); } .phone-back { width:162px; right:47%; top:110px; z-index:2; transform:rotate(-11deg); opacity:.98; } .phone-front { width:145px; right:-1%; top:172px; z-index:4; transform:rotate(13deg); } .orbit-text { position:absolute; color:var(--ink); font:500 10px var(--mono); letter-spacing:.11em; white-space:nowrap; top:176px; right:-27px; z-index:5; transform:rotate(89deg); } .art-caption { position:absolute; bottom:4px; left:3%; color:#b9bbb9; font:500 11px/1.5 var(--mono); letter-spacing:.04em; }
.ticker { overflow:hidden; background:var(--acid); white-space:nowrap; height:71px; display:flex; align-items:center; } .ticker-track { display:flex; align-items:center; gap:27px; width:max-content; animation:marquee 28s linear infinite; font:800 21px/1 var(--sans); letter-spacing:-.06em; } .ticker i { font-style:normal; font-size:17px; } @keyframes marquee { to { transform:translateX(-50%); } }
.work-section { padding:clamp(85px,11vw,170px) clamp(24px,8vw,135px); } .section-intro { display:grid; grid-template-columns:27% 1fr; margin-bottom:65px; } .section-intro .eyebrow,.ethos-head .eyebrow { color:#71736f; } .section-intro .eyebrow span,.ethos-head .eyebrow span { background:var(--coral); box-shadow:none; } h2 { font-size:clamp(42px,5.5vw,82px); line-height:.98; letter-spacing:-.065em; margin-bottom:20px; } .section-intro h2 + p { font-size:16px; line-height:1.65; max-width:470px; color:#646560; } .projects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } .project { border-radius:4px; min-height:480px; padding:clamp(24px,3vw,47px); overflow:hidden; position:relative; display:flex; flex-direction:column; justify-content:space-between; } .project-wide { grid-column:span 2; min-height:450px; background:#ee704d; color:#151515; } .project-road { background:#142a2c; color:#eff3ee; } .project-nucleus { background:#b7aaff; color:#1e1833; } .project-docnest { background:#e9dac9; color:#344437; } .project-tally { background:#1e4055; color:#f2efe9; } .project-copy { position:relative; z-index:2; max-width:330px; } .project-number { font:500 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; opacity:.68; margin-bottom:20px; } .project h3 { font-size:clamp(32px,3.6vw,55px); line-height:.95; letter-spacing:-.07em; margin-bottom:14px; } .project-copy > p:not(.project-number) { font-size:14px; line-height:1.6; margin-bottom:21px; } .status { display:inline-block; padding:8px 10px; border:1px solid currentColor; border-radius:30px; font:500 9px/1 var(--mono); text-transform:uppercase; letter-spacing:.08em; } .project-art { position:absolute; z-index:1; overflow:hidden; } .project-art img { width:100%; display:block; } .tank { width:54%; right:-2%; bottom:-9%; border-radius:8px; transform:rotate(-4deg); box-shadow:0 21px 37px rgba(0,0,0,.2); } .road { width:51%; right:-4%; bottom:-9%; transform:rotate(8deg); filter:drop-shadow(0 15px 18px rgba(0,0,0,.4)); } .nucleus { width:42%; right:8%; bottom:-8%; transform:rotate(8deg); filter:drop-shadow(0 15px 18px rgba(45,30,75,.28)); } .docnest { width:44%; right:5%; bottom:-9%; transform:rotate(9deg); filter:drop-shadow(0 15px 18px rgba(30,60,36,.26)); } .tally { width:44%; right:6%; bottom:-9%; transform:rotate(9deg); filter:drop-shadow(0 15px 18px rgba(0,0,0,.28)); }
.ethos { background:#d3ff56; padding:clamp(80px,10vw,150px) clamp(24px,8vw,135px); } .ethos-head { display:grid; grid-template-columns:27% 1fr; margin-bottom:90px; } .ethos h2 { margin:0; max-width:700px; } .principles { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(11,13,18,.28); } .principle { padding:24px 36px 10px 0; min-height:192px; border-right:1px solid rgba(11,13,18,.28); } .principle:not(:first-child) { padding-left:30px; } .principle:last-child { border:none; } .principle span { font:500 10px var(--mono); } .principle h3 { font-size:21px; letter-spacing:-.05em; margin:30px 0 10px; } .principle p { font-size:13px; line-height:1.55; max-width:265px; }
.contact { min-height:560px; padding:clamp(82px,11vw,155px) clamp(24px,8vw,135px); background:#11131b; color:var(--paper); position:relative; overflow:hidden; } .contact:after { content:""; position:absolute; width:430px; height:430px; border-radius:50%; background:var(--coral); right:-70px; bottom:-220px; filter:blur(1px); } .contact h2 { max-width:800px; position:relative; z-index:1; } .contact .eyebrow { color:#c8cbc5; } .contact-link { color:var(--acid); text-decoration:none; border-bottom:1px solid rgba(201,255,53,.5); padding-bottom:8px; font:700 clamp(17px,2vw,25px)/1 var(--sans); position:relative; z-index:1; } .contact-link span { padding-left:12px; }
footer { min-height:130px; padding:40px clamp(24px,4.6vw,72px); display:flex; align-items:end; justify-content:space-between; gap:20px; background:#08090c; color:var(--paper); } footer p { margin:0; font:500 10px/1.5 var(--mono); color:#a3a6a5; text-transform:uppercase; letter-spacing:.06em; } .reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; } .reveal.is-visible { opacity:1; transform:none; }
@media (max-width:800px) { .site-header { height:70px; } nav { display:none; } .hero { grid-template-columns:1fr; min-height:auto; padding-top:72px; } .hero-art { min-height:360px; margin-top:10px; } .phone-main { right:25%; width:158px; } .phone-back { right:52%; width:135px; } .phone-front { width:122px; } .orb-one { width:250px; height:250px; right:12%; } .section-intro,.ethos-head { grid-template-columns:1fr; gap:22px; } .section-intro { margin-bottom:42px; } .projects { grid-template-columns:1fr; } .project-wide { grid-column:auto; } .project { min-height:420px; } .principles { grid-template-columns:1fr; } .principle,.principle:not(:first-child) { border-right:none; border-bottom:1px solid rgba(11,13,18,.28); padding:25px 0; min-height:0; } .principle:last-child { border-bottom:none; } .principle h3 { margin-top:22px; } footer { align-items:flex-start; flex-direction:column; } }
@media (max-width:430px) { .header-link { font-size:9px; } h1 { font-size:49px; } .hero-art { transform:scale(.9); transform-origin:top center; margin-bottom:-30px; } .project-copy { max-width:270px; } .project-art { opacity:.92; } }