@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root { --ink:#0a0a09; --paper:#f3f0e9; --red:#e52c27; --muted:#b7b3aa; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--paper); background:var(--ink); font-family:"Bebas Neue", Impact, sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { position:absolute; z-index:5; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:22px clamp(24px,5vw,78px); letter-spacing:.25em; text-transform:uppercase; font:500 10px "IBM Plex Mono",monospace; }
.wordmark { letter-spacing:.27em; text-transform:uppercase; font:500 10px "IBM Plex Mono",monospace; }
nav { display:flex; gap:clamp(22px,4vw,56px); }
nav a, .socials a { transition:color .2s ease; } nav a:hover,.socials a:hover { color:var(--red); }
.menu-toggle { display:none; background:none;border:0;color:white;text-transform:uppercase;font:500 10px "IBM Plex Mono",monospace;letter-spacing:.2em; }
.hero { min-height:780px; height:100vh; position:relative; overflow:hidden; border-bottom:1px solid #34332f; }
.hero-image,.project img,.about>img,.contact>img { height:100%;width:100%;object-fit:cover; display:block; }
.hero-image { position:absolute; inset:0; animation:scale-in 1.8s ease-out both; }
.hero-shade { position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.52) 46%,rgba(0,0,0,.03) 78%),linear-gradient(0deg,rgba(0,0,0,.62),transparent 48%); }
.hero-content { position:relative; z-index:1; height:100%; padding:clamp(118px,16vh,180px) clamp(24px,5vw,78px) 50px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.eyebrow { margin:0 0 24px; letter-spacing:.28em; text-transform:uppercase; font:500 9px "IBM Plex Mono",monospace; color:#d5d0c5; } .eyebrow span { display:inline-block; vertical-align:middle;width:28px;height:2px;background:var(--red);margin-right:12px; }
h1,h2,p { margin-top:0; }
h1 { margin:0; color:var(--paper); text-transform:uppercase; font:400 clamp(112px,16.2vw,260px)/.72 "Bebas Neue",Impact,sans-serif; letter-spacing:-.025em; text-shadow:0 2px 20px rgba(0,0,0,.28); }
.role { margin:26px 0 0; text-transform:uppercase; letter-spacing:.35em; font:500 clamp(8px,1vw,12px) "IBM Plex Mono",monospace; }
.hero-line { margin:30px 0 26px; font:italic 600 clamp(24px,2vw,34px) "Cormorant Garamond",serif; letter-spacing:.1em; }
.play-link { display:flex;align-items:center;gap:18px;text-transform:uppercase;letter-spacing:.28em;font:500 10px "IBM Plex Mono",monospace; }
.play-icon { width:47px;height:47px;border:1px solid var(--red);border-radius:50%;display:grid;place-items:center;color:var(--paper);font-size:14px;padding-left:2px;transition:.25s ease; }.play-link:hover .play-icon { background:var(--red); }
.hero-disciplines { position:absolute; z-index:2;right:clamp(24px,5vw,78px);bottom:clamp(50px,10vh,105px);list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--red);text-transform:uppercase;letter-spacing:.25em;font:500 8px/1.95 "IBM Plex Mono",monospace; }
.work { padding:28px 0 0; }.section-heading { padding:0 clamp(24px,5vw,78px) 22px; }.section-heading h2 { margin:0; text-transform:uppercase; font:400 clamp(68px,9.5vw,154px)/.8 "Bebas Neue",Impact,sans-serif; letter-spacing:.005em; }.section-heading>p:last-child { float:right; transform:translateY(-36px); font:500 9px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.22em;color:#d5d0c5; }
.project-list { clear:both; }.project { position:relative;display:block;overflow:hidden;height:clamp(230px,32vw,480px);border-top:5px solid var(--ink); }.project img { transition:transform .7s cubic-bezier(.2,.65,.2,1),filter .5s ease;filter:saturate(.82) contrast(1.04); }.project:hover img { transform:scale(1.05);filter:saturate(1.05); }.project-overlay { position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.12) 65%,rgba(0,0,0,.04)); }.project-copy { position:absolute;left:clamp(24px,5vw,78px);bottom:28px;display:flex;flex-direction:column;align-items:flex-start;text-transform:uppercase; }.project-copy--right { left:auto;right:clamp(24px,5vw,78px);align-items:flex-end; }.project-copy small { color:var(--red);font:500 9px "IBM Plex Mono",monospace;letter-spacing:.2em;margin-bottom:8px; }.project-copy strong { font:400 clamp(28px,3.6vw,52px)/.9 "Bebas Neue",Impact,sans-serif;letter-spacing:.18em; }.project-copy em { margin-top:9px;font-style:normal;font:500 8px "IBM Plex Mono",monospace;letter-spacing:.23em;color:#ece8de; }
.about { display:grid;grid-template-columns:42% 58%;border-top:5px solid var(--ink); }.about>img { min-height:500px;filter:grayscale(1) contrast(1.15); }.about-copy { padding:clamp(45px,7vw,105px); background:#11110f; }.about h2 { font:400 clamp(38px,4.5vw,72px)/.88 "Bebas Neue",Impact,sans-serif;letter-spacing:.12em;text-transform:uppercase; }.about-copy>p:not(.eyebrow) { max-width:570px;color:#c5c0b6;font:500 18px/1.55 "Cormorant Garamond",serif; }.capabilities { display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #4c4a44;padding:20px 0 0;margin:38px 0 0;list-style:none; }.capabilities li { display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-height:152px;padding:0 18px 12px;border-left:1px solid #4c4a44;transition:background .25s ease; }.capabilities li:first-child { padding-left:0;border-left:0; }.capabilities li:hover { background:linear-gradient(180deg,rgba(229,44,39,.06),transparent); }.capability-art { display:block;width:100%;max-width:156px;height:108px;object-fit:contain;object-position:left center;filter:drop-shadow(0 10px 14px rgba(0,0,0,.42)); }.capabilities span { color:#c5c0b6;text-transform:uppercase;font:500 8px "IBM Plex Mono",monospace;letter-spacing:.14em; }
.contact { position:relative;min-height:540px;overflow:hidden;border-top:5px solid var(--ink); }.contact>img { position:absolute;inset:0;filter:saturate(.75); }.contact-shade { position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,.82) 65%); }.contact-content { position:relative;margin-left:50%;padding:clamp(65px,8vw,120px) clamp(24px,5vw,78px); }.contact h2 { text-transform:uppercase;font:400 clamp(52px,5.5vw,88px)/.84 "Bebas Neue",Impact,sans-serif;letter-spacing:.04em; }.button { display:inline-flex;align-items:center;justify-content:space-between;min-width:235px;border:1px solid var(--red);padding:18px 22px;text-transform:uppercase;letter-spacing:.22em;font:500 9px "IBM Plex Mono",monospace;transition:.25s ease; }.button:hover { background:var(--red); }.button span { font-size:18px; }.contact-note { color:#aaa59c;font:400 8px "IBM Plex Mono",monospace;margin-top:17px;letter-spacing:.06em; }
footer { display:flex;justify-content:space-between;align-items:center;padding:34px clamp(24px,5vw,78px);border-top:1px solid #393833; }footer p { margin:9px 0 0;color:#aaa59c;font:500 8px "IBM Plex Mono",monospace;letter-spacing:.18em;text-transform:uppercase; }.socials { display:flex;gap:25px;text-transform:uppercase;font:500 8px "IBM Plex Mono",monospace;letter-spacing:.14em; }
@keyframes scale-in { from{transform:scale(1.08)}to{transform:scale(1)}}
@media (max-width:700px) { .site-header { padding:18px 22px; }.menu-toggle { display:block;z-index:6; }nav { display:none;position:absolute;right:0;top:0;width:100%;padding:72px 24px 24px;background:#10100e;flex-direction:column;gap:22px; }nav.open { display:flex; }.hero { min-height:670px; }.hero-content { padding:115px 24px 36px;justify-content:flex-end; }.hero-shade { background:linear-gradient(0deg,rgba(0,0,0,.86),rgba(0,0,0,.08) 80%); }.hero-disciplines { display:none; }h1 { font-size:clamp(77px,25vw,150px); }.role { letter-spacing:.22em;line-height:1.5; }.section-heading { padding:0 24px 18px; }.section-heading>p:last-child { float:none;transform:none;margin:18px 0 0;font-size:8px;line-height:1.7; }.project { height:310px;border-top-width:4px; }.project-copy,.project-copy--right { left:24px;right:auto;align-items:flex-start;bottom:24px; }.project-copy strong { font-size:31px; }.about { grid-template-columns:1fr; }.about>img { min-height:320px; }.about-copy { padding:48px 24px; }.capabilities { grid-template-columns:repeat(2,1fr); }.contact { min-height:520px; }.contact-shade { background:linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.1)); }.contact-content { margin:0;padding:160px 24px 45px; }.contact h2 { font-size:48px; }.socials { gap:14px;font-size:8px; }footer { align-items:flex-start;gap:25px;flex-direction:column; } }