@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;700;800&display=swap');

:root { --ink:#10100e; --paper:#f2ebdd; --acid:#d8ff3e; --blue:#3155ff; --coral:#ff5c3a; --line:rgba(242,235,221,.28); --font-display:'Archivo Black',Impact,sans-serif; --font-sans:'Manrope',Arial,sans-serif; --font-mono:'DM Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--paper); font-family:var(--font-sans),Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1440px, calc(100% - 64px)); margin-inline:auto; }
.site-header { height:104px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:14px; font-weight:800; text-transform:uppercase; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; background:var(--acid); color:var(--ink); border-radius:50%; font:500 12px var(--font-mono); }
nav { display:flex; gap:38px; font:400 12px var(--font-mono); text-transform:uppercase; letter-spacing:.08em; }
nav a { padding-block:10px; border-bottom:1px solid transparent; }
nav a:hover { border-color:var(--acid); }
.hero { min-height:740px; padding:38px 0 72px; display:flex; flex-direction:column; justify-content:space-between; }
.eyebrow { display:flex; justify-content:space-between; font:400 11px var(--font-mono); text-transform:uppercase; letter-spacing:.12em; }
.hero h1 { margin:48px 0; font:400 clamp(78px,13.4vw,198px)/.78 var(--font-display); text-transform:uppercase; letter-spacing:-.075em; }
.hero h1 span { display:block; }
.hero h1 span:last-child { color:var(--acid); margin-left:8vw; }
.hero-foot { display:flex; align-items:end; justify-content:flex-end; gap:8vw; }
.hero-foot>p { width:390px; margin:0; font-size:20px; line-height:1.45; }
.round-link { width:128px; height:128px; border:1px solid var(--paper); border-radius:50%; display:flex; align-items:center; justify-content:space-around; padding:24px; font:400 11px/1.3 var(--font-mono); text-transform:uppercase; transition:.25s; }
.round-link b { font-size:24px; font-weight:300; }
.round-link:hover { background:var(--acid); color:var(--ink); border-color:var(--acid); transform:rotate(-8deg); }
.ticker { overflow:hidden; background:var(--paper); color:var(--ink); padding:15px 0; font:500 12px var(--font-mono); white-space:nowrap; letter-spacing:.16em; }
.ticker div { width:max-content; animation:marquee 24s linear infinite; }
.ticker i { color:var(--coral); margin:0 26px; font-style:normal; }
@keyframes marquee { to { transform:translateX(-50%); } }
.intro { display:grid; grid-template-columns:1fr 2fr; gap:40px; padding:150px 0 120px; }
.section-number { font:400 11px var(--font-mono); letter-spacing:.14em; }
.intro h2,.more h2 { margin:0; font:400 clamp(52px,7vw,100px)/.92 var(--font-display); text-transform:uppercase; letter-spacing:-.055em; }
.intro h2 em,.more h2 em { color:var(--acid); font-style:normal; }
.intro>div:last-child>p { max-width:620px; margin:42px 0 0 auto; font-size:20px; line-height:1.55; color:#c8c2b7; }
.projects { border-top:1px solid var(--line); }
.project { padding:88px 0 128px; border-bottom:1px solid var(--line); }
.project-preview { display:block; position:relative; overflow:hidden; height:clamp(420px,58vw,780px); background:#1a1a18; }
.preview-canvas { position:absolute; inset:0; overflow:hidden; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.project-preview:hover .preview-canvas { transform:scale(1.025); }
.preview-bar { position:absolute; top:0; left:0; right:0; height:58px; display:flex; gap:8px; align-items:center; padding:0 22px; border-bottom:1px solid currentColor; opacity:.75; }
.preview-bar i { width:8px; height:8px; border-radius:50%; background:currentColor; }
.open-stamp { position:absolute; right:26px; bottom:26px; z-index:2; display:grid; place-items:center; width:108px; height:108px; border-radius:50%; background:var(--acid); color:var(--ink); font:500 11px var(--font-mono); text-transform:uppercase; transform:rotate(-7deg); transition:.25s; }
.project-preview:hover .open-stamp { transform:rotate(0) scale(1.08); }
.bison-preview { background:#efe5cf; color:#9b3d22; }
.bison-mark { position:absolute; right:8%; top:11%; font:400 clamp(230px,40vw,560px)/1 var(--font-display); color:#b14a2c; opacity:.13; }
.bison-preview p,.uppercut-preview p,.trees-preview p { position:absolute; left:7%; bottom:13%; margin:0; font:500 clamp(34px,6vw,90px)/.92 var(--font-sans); letter-spacing:-.055em; }
.bison-preview p strong { font-family:var(--font-display); }
.bison-preview>span,.uppercut-preview>span,.trees-preview>span { position:absolute; right:7%; top:17%; font:500 10px var(--font-mono); letter-spacing:.18em; }
.uppercut-preview { background:var(--blue); color:#f7eee1; }
.uppercut-slash { position:absolute; width:22%; height:120%; top:-10%; left:55%; background:var(--coral); transform:skew(-21deg); box-shadow:80px 0 0 rgba(255,92,58,.3); }
.uppercut-preview p { z-index:1; font-family:var(--font-display); text-transform:uppercase; }
.uppercut-preview p strong { color:var(--acid); }
.trees-preview { background:#062f22; color:var(--acid); }
.tree-rings { position:absolute; width:60vw; height:60vw; min-width:600px; min-height:600px; right:-12%; top:-20%; border:2px solid currentColor; border-radius:48% 52% 49% 51%; opacity:.32; }
.tree-rings b { position:absolute; inset:8%; border:2px solid currentColor; border-radius:52% 48% 47% 53%; }
.tree-rings b:nth-child(2) { inset:22%; }.tree-rings b:nth-child(3) { inset:36%; }
.trees-preview p { font-family:var(--font-display); text-transform:uppercase; color:var(--paper); }
.trees-preview p strong { color:var(--acid); }
.project-meta { display:grid; grid-template-columns:70px 1fr 1.2fr; gap:28px; padding-top:32px; }
.project-meta>span,.project-meta p,.project-meta a { font:400 11px/1.5 var(--font-mono); text-transform:uppercase; letter-spacing:.08em; }
.project-meta h3 { margin:8px 0 0; font:400 clamp(44px,6vw,84px)/1 var(--font-display); text-transform:uppercase; }
.project-meta h4 { margin:0 0 14px; font-size:22px; }
.project-meta p { margin:0; color:#aaa59c; max-width:520px; }
.project-meta a { display:inline-block; margin-top:24px; border-bottom:1px solid currentColor; padding-bottom:5px; }
.more { padding:150px 0; display:grid; grid-template-columns:1fr 1.4fr; gap:70px; }
.more-heading .section-number { display:block; margin-bottom:60px; }
.future-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; align-content:end; }
.future-card { min-height:220px; border:1px solid var(--line); padding:24px; display:flex; flex-direction:column; justify-content:space-between; transition:.2s; }
.future-card:hover { border-color:var(--paper); transform:translateY(-4px); }
.future-card span { font:400 11px var(--font-mono); }.future-card b { font:700 26px var(--font-sans); text-transform:uppercase; }.future-card i { font:400 10px var(--font-mono); text-transform:uppercase; color:#89857e; font-style:normal; }
.future-card.accent { background:var(--acid); color:var(--ink); border-color:var(--acid); grid-column:2; }.future-card.accent i { color:var(--ink); }
.cta { padding:100px 0 120px; border-top:1px solid var(--line); }
.cta>p { font:400 11px var(--font-mono); text-transform:uppercase; letter-spacing:.1em; }
.cta>a { display:flex; justify-content:space-between; align-items:center; margin-top:54px; font:400 clamp(50px,8vw,116px)/.95 var(--font-display); text-transform:uppercase; letter-spacing:-.06em; border-bottom:4px solid var(--acid); padding-bottom:22px; }
.cta>a span { color:var(--acid); font-family:var(--font-sans); font-weight:300; }
.footer { display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:30px; padding:38px 0; border-top:1px solid var(--line); font:400 10px var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:#aaa59c; }
.footer .brand { font-family:var(--font-sans); color:var(--paper); }
.footer .brand-mark { width:34px; height:34px; }

@media (max-width:800px) {
  .shell { width:min(100% - 32px, 1440px); }.site-header { height:82px; }.site-header nav a:first-child { display:none; } nav { gap:12px; }
  .hero { min-height:650px; padding-bottom:50px; }.eyebrow span:last-child { display:none; }.hero h1 { font-size:clamp(61px,19vw,124px); }.hero h1 span:last-child { margin-left:0; }
  .hero-foot { justify-content:space-between; gap:20px; }.hero-foot>p { width:auto; max-width:280px; font-size:15px; }.round-link { width:96px; height:96px; padding:16px; flex:none; }
  .intro,.more { grid-template-columns:1fr; padding:90px 0; }.intro { gap:50px; }.intro>div:last-child>p { margin-left:0; font-size:17px; }.project { padding:55px 0 85px; }.project-preview { height:68vw; min-height:330px; }
  .preview-bar { height:40px; }.bison-preview>span,.uppercut-preview>span,.trees-preview>span { display:none; }.open-stamp { width:82px; height:82px; right:16px; bottom:16px; }
  .project-meta { grid-template-columns:40px 1fr; }.project-meta>div:last-child { grid-column:2; }.project-meta h3 { font-size:44px; }
  .future-grid { grid-template-columns:1fr 1fr; }.future-card { min-height:170px; }.cta { padding:80px 0; }.cta>a { font-size:13vw; }.footer { grid-template-columns:1fr auto; }.footer>p { display:none; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.ticker div { animation:none; }.preview-canvas,.open-stamp,.round-link,.future-card { transition:none; } }