@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,600&display=swap');

:root { --ink:#0a0a0a; --paper:#f2efe7; --acid:#d9ff43; --line:rgba(10,10,10,.22); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Manrope",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.topbar { height:104px; display:grid; grid-template-columns:1fr 1fr auto; align-items:center; padding:18px 26px; border-bottom:1px solid var(--ink); position:relative; z-index:2; }
.wordmark { font-size:20px; font-weight:700; line-height:.82; letter-spacing:-.08em; }
.location,.eyebrow,.section-head,.side-note,.project-meta p,.project-meta time,.footer-row { font:400 10px/1.3 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.location { margin:0; }
nav { display:flex; gap:30px; font:500 12px "DM Mono",monospace; text-transform:uppercase; }
nav a { position:relative; }
nav a:after { content:""; height:1px; width:0; background:currentColor; position:absolute; left:0; bottom:-4px; transition:.25s; }
nav a:hover:after { width:100%; }
.hero { min-height:calc(100vh - 104px); padding:31px 26px 0; display:flex; flex-direction:column; overflow:hidden; position:relative; isolation:isolate; background:#0b1834; color:#f2efe7; }
.hero-image { position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero-image img { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.86) contrast(1.08); transform:scale(1.01); }
.hero:after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(4,8,18,.88) 0%,rgba(4,8,18,.5) 46%,rgba(4,8,18,.14) 78%),linear-gradient(0deg,rgba(4,8,18,.62),transparent 48%); }
.eyebrow { margin:0 0 2.5vh; }
h1 { margin:0; font-size:clamp(72px,12.3vw,190px); line-height:.78; letter-spacing:-.085em; text-transform:uppercase; font-weight:600; }
h1 span { display:block; white-space:nowrap; }
h1 span:nth-child(2) { padding-left:9vw; }
h1 i,.big-email i { font-family:"Playfair Display",serif; font-weight:600; text-transform:none; }
.hero-bottom { margin:auto 0 24px; display:grid; grid-template-columns:1fr auto; align-items:end; }
.hero-bottom>p { max-width:440px; font-size:17px; line-height:1.35; letter-spacing:-.02em; margin:30px 0 0 18vw; }
.round-link { width:104px; height:104px; border:1px solid currentColor; border-radius:50%; display:flex; align-items:center; justify-content:center; gap:12px; font:500 10px/1.1 "DM Mono"; text-transform:uppercase; transition:.25s; backdrop-filter:blur(8px); }
.round-link b { font-size:20px; }
.round-link:hover { background:var(--acid); color:var(--ink); transform:rotate(-8deg); }
.ticker { width:calc(100% + 52px); margin-left:-26px; padding:10px 0; background:var(--ink); color:var(--paper); display:flex; overflow:hidden; font:500 11px "DM Mono"; letter-spacing:.12em; white-space:nowrap; }
.ticker span { animation:marquee 18s linear infinite; padding-right:1em; }
@keyframes marquee { to { transform:translateX(-100%); } }
.hero-v2 { padding:0; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); background:var(--paper); color:var(--ink); min-height:calc(100svh - 104px); overflow:hidden; }
.hero-v2:after { display:none; }
.hero-copy { display:flex; flex-direction:column; min-width:0; padding:26px 26px 20px; }
.hero-status { align-self:flex-end; display:flex; gap:8px; align-items:center; font:500 9px "DM Mono"; text-transform:uppercase; letter-spacing:.08em; }
.hero-status span { width:7px; height:7px; border-radius:50%; background:#56a834; box-shadow:0 0 0 4px rgba(86,168,52,.12); }
.hero-copy>.eyebrow { margin-top:clamp(28px,6vh,80px); }
.hero-v2 h1 { font-size:clamp(68px,8.6vw,138px); line-height:.82; margin:0; }
.hero-v2 h1 span:nth-child(2) { padding-left:0; }
.hero-v2 h1 span:nth-child(3) { padding-left:7vw; white-space:nowrap; }
.hero-v2 h1 i { color:#2446e8; }
.hero-intro { display:grid; grid-template-columns:minmax(210px,1fr) auto; gap:32px; align-items:end; margin:auto 0 28px; padding-top:36px; }
.hero-intro p { max-width:430px; margin:0; font-size:16px; line-height:1.45; letter-spacing:-.025em; }
.hero-cta { display:flex; gap:24px; align-items:center; padding:15px 0; border-bottom:1px solid currentColor; font:500 10px "DM Mono"; text-transform:uppercase; white-space:nowrap; transition:color .2s; }
.hero-cta:hover { color:#2446e8; }
.hero-cta b { font-size:18px; }
.hero-disciplines { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding-top:16px; border-top:1px solid var(--ink); font:400 8px "DM Mono"; text-transform:uppercase; letter-spacing:.05em; }
.hero-portrait { position:relative; min-height:100%; overflow:hidden; background:#16203b; }
.hero-portrait:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(2,8,18,.62),transparent 42%); }
.hero-portrait img { width:100%; height:100%; object-fit:cover; object-position:60% center; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.hero-portrait:hover img { transform:scale(1.025); }
.portrait-label { position:absolute; z-index:1; left:18px; right:18px; bottom:18px; display:flex; justify-content:space-between; color:white; font:500 9px "DM Mono"; text-transform:uppercase; letter-spacing:.07em; }
.work { padding:30px 26px 100px; }
.section-head { display:flex; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--ink); }
.section-head p { margin:0; }
.projects { display:grid; }
.project { border-bottom:1px solid var(--ink); padding:24px 0; }
.project-link { display:block; color:inherit; text-decoration:none; }
.project-art { height:clamp(300px,55vw,760px); position:relative; overflow:hidden; background:#151515; color:#fff; }
.project-art img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s; }
.project-art:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.58)); pointer-events:none; }
.project:hover .project-art img { transform:scale(1.025); filter:saturate(1.08) contrast(1.05); }
.art-index { position:absolute; top:15px; right:18px; z-index:1; font:500 clamp(34px,6vw,88px)/1 "DM Mono"; letter-spacing:-.08em; mix-blend-mode:difference; }
.art-caption { position:absolute; z-index:1; left:18px; bottom:18px; font:500 9px/1.25 "DM Mono"; }
.project-meta { display:grid; grid-template-columns:44px 1fr 190px 80px 28px; align-items:baseline; gap:16px; padding-top:14px; }
.project-meta h2 { margin:0; font-size:clamp(23px,3vw,42px); letter-spacing:-.055em; font-weight:500; }
.project-meta p { margin:0; }.arrow { font-size:22px; }
.about { background:var(--ink); color:var(--paper); padding:30px 26px 80px; }
.section-head.light { border-color:rgba(242,239,231,.5); }
.about-grid { display:grid; grid-template-columns:1fr 3fr; gap:20px; padding:70px 0 100px; }
.side-note { margin:8px 0; }
.about-grid h2 { grid-column:2; margin:0; font-size:clamp(65px,10vw,150px); line-height:.86; letter-spacing:-.07em; text-transform:uppercase; font-weight:500; }
.about-grid h2 em { font-family:"Playfair Display",serif; text-transform:none; color:var(--acid); }
.about-copy { grid-column:2; display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:800px; margin-top:45px; font-size:16px; line-height:1.45; }
.about-copy p { margin:0; }
.services { border-top:1px solid rgba(242,239,231,.5); display:grid; grid-template-columns:repeat(4,1fr); font:400 11px "DM Mono"; text-transform:uppercase; }
.services span { padding:18px 0; border-right:1px solid rgba(242,239,231,.25); }
.services span:not(:first-child) { padding-left:18px; }
footer { background:var(--acid); padding:34px 26px 22px; }
.big-email { display:block; font-size:clamp(62px,11.5vw,175px); line-height:.8; letter-spacing:-.08em; font-weight:600; text-transform:uppercase; margin:70px 0 90px; }
.big-email:hover i { color:#2e49ff; }
.footer-row { border-top:1px solid var(--ink); padding-top:16px; display:flex; justify-content:space-between; align-items:end; }
.footer-row div { display:flex; gap:22px; }

/* Portfolio */
.portfolio-page { background:#0a0a0a; color:var(--paper); }
.portfolio-page .topbar { border-color:rgba(242,239,231,.5); }
.portfolio-hero { min-height:72vh; padding:48px 26px 70px; display:flex; flex-direction:column; justify-content:space-between; border-bottom:1px solid rgba(242,239,231,.45); }
.portfolio-hero h1 { font-size:clamp(85px,15vw,225px); }
.portfolio-hero h1 i { color:var(--acid); }
.portfolio-intro { width:min(520px,88%); margin:50px 0 0 auto; font-size:18px; line-height:1.45; letter-spacing:-.025em; }
.portfolio-list { padding:0 26px 110px; }
.portfolio-card { display:block; padding:28px 0 0; border-bottom:1px solid rgba(242,239,231,.45); }
.portfolio-visual { position:relative; height:clamp(360px,56vw,760px); overflow:hidden; display:flex; align-items:center; justify-content:center; isolation:isolate; }
.portfolio-visual:after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 74% 20%,rgba(255,255,255,.22),transparent 28%),linear-gradient(130deg,transparent,rgba(0,0,0,.25)); }
.portfolio-visual img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.portfolio-card:hover .portfolio-visual img { transform:scale(1.03); }
.portfolio-visual strong { font-size:clamp(110px,27vw,410px); line-height:.72; letter-spacing:-.13em; font-weight:700; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.portfolio-card:hover .portfolio-visual strong { transform:scale(.97) rotate(-1deg); }
.visual-kicker,.visual-stamp { position:absolute; font:500 9px/1.2 "DM Mono"; text-transform:uppercase; letter-spacing:.08em; }
.visual-kicker { top:18px; left:18px; }.visual-stamp { right:18px; bottom:18px; }
.schoolops-card .portfolio-visual { background:#d9ff43; color:#101010; }
.schoolops-card .portfolio-visual:before { content:""; position:absolute; inset:12% 8%; border:1px solid currentColor; border-radius:50%; opacity:.4; }
.nook-card .portfolio-visual { background:#dfc5a3; color:#5b261b; }
.nook-card .portfolio-visual strong { font-family:"Playfair Display",serif; font-style:italic; font-weight:600; }
.tycoon-card .portfolio-visual strong { color:#ff6b20; mix-blend-mode:screen; }
.quote-card .portfolio-visual { background:#2446e8; color:#f4ff8f; }
.quote-card .portfolio-visual:before { content:""; position:absolute; width:32%; aspect-ratio:1; border:1px solid currentColor; transform:rotate(18deg); opacity:.6; }
.portfolio-card-copy { display:grid; grid-template-columns:54px 1fr auto; gap:24px; padding:18px 0 28px; align-items:start; }
.portfolio-card-copy>span { font:500 10px "DM Mono"; }.portfolio-card-copy h2 { margin:0 0 7px; font-size:clamp(28px,4vw,58px); line-height:1; letter-spacing:-.06em; font-weight:500; }.portfolio-card-copy p { max-width:620px; margin:0; color:rgba(242,239,231,.68); font-size:13px; line-height:1.5; }.portfolio-card-copy .card-arrow { font-size:28px; }
.portfolio-cta { background:var(--acid); color:var(--ink); padding:38px 26px 50px; }
.portfolio-cta>a { display:block; margin-top:70px; font-size:clamp(62px,12vw,180px); line-height:.8; letter-spacing:-.08em; font-weight:600; }
.portfolio-cta>a i { font-family:"Playfair Display",serif; font-weight:600; }
.portfolio-hero-compact { min-height:0; height:auto; display:grid; grid-template-columns:1.4fr .6fr; align-items:end; gap:70px; padding:54px 26px 48px; }
.portfolio-hero-compact h1 { font-size:clamp(72px,10vw,150px); line-height:.78; }
.portfolio-hero-compact .portfolio-intro { margin:0 0 6px; width:auto; font-size:15px; }
.portfolio-filter { display:flex; gap:26px; align-items:center; padding:17px 26px; border-bottom:1px solid rgba(242,239,231,.45); font:500 9px "DM Mono"; text-transform:uppercase; letter-spacing:.06em; position:sticky; top:0; z-index:5; background:rgba(10,10,10,.92); backdrop-filter:blur(12px); }
.portfolio-filter span:first-child { color:var(--acid); }.portfolio-filter b { margin-left:auto; font-weight:500; opacity:.55; }
.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px 22px; padding:24px 26px 110px; }
.project-tile { display:block; min-width:0; }
.browser-preview { position:relative; aspect-ratio:1.6; overflow:hidden; background:#222; border:1px solid rgba(242,239,231,.32); }
.browser-bar { height:30px; display:flex; align-items:center; gap:6px; padding:0 10px; background:#e9e7e0; color:#111; }
.browser-bar i { width:6px; height:6px; border-radius:50%; background:#b6b3ac; }.browser-bar i:first-child{background:#ff6b5f}.browser-bar i:nth-child(2){background:#e9b949}.browser-bar i:nth-child(3){background:#62b76a}.browser-bar span { margin:auto; padding-right:34px; font:500 7px "DM Mono"; text-transform:uppercase; letter-spacing:.04em; opacity:.6; }
.browser-preview>img { display:block; width:100%; height:calc(100% - 30px); object-fit:cover; object-position:top; transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s; }
.open-overlay { position:absolute; inset:30px 0 0; display:flex; align-items:center; justify-content:center; background:rgba(10,10,10,.72); color:white; font:500 10px "DM Mono"; text-transform:uppercase; letter-spacing:.08em; opacity:0; transition:opacity .25s; }
.project-tile:hover .open-overlay { opacity:1; }.project-tile:hover .browser-preview>img { transform:scale(1.025); filter:saturate(.8); }
.tile-info { display:grid; grid-template-columns:1fr auto; gap:18px; padding:15px 2px 0; }.tile-info span { font:500 8px "DM Mono"; text-transform:uppercase; letter-spacing:.08em; color:var(--acid); }.tile-info h2 { margin:7px 0 6px; font-size:clamp(28px,3.2vw,46px); line-height:1; letter-spacing:-.055em; font-weight:500; }.tile-info p { margin:0; max-width:500px; color:rgba(242,239,231,.62); font-size:12px; line-height:1.45; }.tile-info>b { font:500 10px "DM Mono"; white-space:nowrap; }

@media (max-width:720px) {
  .topbar { height:80px; grid-template-columns:1fr auto; padding:15px; }.location { display:none; }nav { gap:14px; font-size:9px; }
  .hero { min-height:calc(100svh - 80px); padding:22px 15px 0; }.hero-image img{object-position:62% center}.hero:after{background:linear-gradient(90deg,rgba(4,8,18,.82),rgba(4,8,18,.2)),linear-gradient(0deg,rgba(4,8,18,.78),transparent 52%)}h1 { font-size:19vw; line-height:.82; }h1 span:nth-child(2){padding-left:0}.hero-bottom>p{margin-left:0;max-width:65%;font-size:13px}.round-link{width:78px;height:78px}.ticker{width:calc(100% + 30px);margin-left:-15px}
  .hero-v2{display:flex;padding:0;min-height:auto}.hero-copy{padding:18px 15px 20px;min-height:74svh}.hero-status{align-self:flex-start}.hero-copy>.eyebrow{margin-top:10vh}.hero-v2 h1{font-size:18vw}.hero-v2 h1 span:nth-child(3){padding-left:0}.hero-intro{grid-template-columns:1fr;margin-top:auto;margin-bottom:28px;gap:20px}.hero-intro p{font-size:13px;max-width:88%}.hero-cta{justify-content:space-between}.hero-disciplines{grid-template-columns:1fr 1fr}.hero-disciplines span:last-child{display:none}.hero-portrait{min-height:72svh}.hero-portrait img{position:absolute;inset:0}.portrait-label{bottom:14px;left:15px;right:15px}
  .work,.about,footer { padding-left:15px; padding-right:15px; }.work{padding-bottom:70px}.project-art{height:92vw}.project-meta{grid-template-columns:28px 1fr 25px;gap:8px}.project-meta p,.project-meta time{display:none}.project-meta h2{font-size:24px}
  .about-grid { display:block; padding:50px 0 70px; }.about-grid h2{margin-top:35px;font-size:18vw}.about-copy{display:block;margin-top:35px}.about-copy p+ p{margin-top:18px}.services{grid-template-columns:1fr 1fr}.services span{border-bottom:1px solid rgba(242,239,231,.25);padding:14px 0!important}
  .big-email{font-size:17vw;margin:55px 0 70px}.footer-row{align-items:flex-start}.footer-row div{flex-direction:column;gap:5px}
  .portfolio-hero{min-height:62svh;padding:30px 15px 50px}.portfolio-hero h1{font-size:20vw}.portfolio-intro{font-size:14px}.portfolio-list{padding:0 15px 70px}.portfolio-card{padding-top:15px}.portfolio-visual{height:98vw}.portfolio-card-copy{grid-template-columns:28px 1fr 22px;gap:10px;padding:14px 0 22px}.portfolio-card-copy h2{font-size:29px}.portfolio-card-copy p{font-size:11px}.portfolio-cta{padding:30px 15px 40px}.portfolio-cta>a{font-size:17vw;margin-top:50px}
  .portfolio-hero-compact{display:block;min-height:0;padding:34px 15px 36px}.portfolio-hero-compact h1{font-size:18vw}.portfolio-hero-compact .portfolio-intro{margin-top:28px;max-width:92%;font-size:13px}.portfolio-filter{padding:14px 15px;gap:18px;overflow-x:auto;white-space:nowrap}.portfolio-filter b{display:none}.project-grid{grid-template-columns:1fr;gap:48px;padding:18px 15px 70px}.browser-preview{aspect-ratio:1.45}.tile-info h2{font-size:32px}.tile-info p{font-size:11px}.open-overlay{display:none}
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.ticker span{animation:none}*{transition:none!important} }