:root { --paper:#f2f0ea; --ink:#121212; --muted:#6d6b66; --line:#c9c6bd; --acid:#d8ee32; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:"DM Mono", monospace; font-size:11px; line-height:1.35; text-transform:uppercase; }
a { color:inherit; text-decoration:none; }
.site-header { position:absolute; z-index:2; top:0; left:0; right:0; display:flex; justify-content:space-between; padding:23px 25px; color:#fff; mix-blend-mode:difference; }
.site-header--light { position:relative; color:var(--ink); mix-blend-mode:normal; }
.monogram { font-weight:500; letter-spacing:.04em; }
nav { display:flex; gap:22px; }
nav a:hover, .project a:hover, .contact a:hover { text-decoration:underline; text-underline-offset:4px; }
.hero { height:100svh; min-height:650px; position:relative; display:grid; grid-template-rows:auto 1fr auto; padding:82px 25px 23px; overflow:hidden; background:#14191b; color:white; }
.hero-image { position:absolute; inset:0; background:linear-gradient(90deg, rgba(6,10,11,.72) 0%, rgba(6,10,11,.27) 57%, rgba(6,10,11,.12)), url("assets/ecm-hero.png") center/cover; filter:saturate(.72) contrast(1.06); }
.hero::after { content:""; position:absolute; inset:0; opacity:.28; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.hero > *:not(.hero-image) { position:relative; z-index:1; }
.motion-ready [data-fade] { opacity:0; }
.hero-meta { margin:0; align-self:start; }
h1,h2,h3 { font-family:Oswald, Impact, sans-serif; font-weight:600; line-height:.8; letter-spacing:-.055em; margin:0; }
.wordmark { align-self:center; width:min(69vw, 1040px); }
.wordmark img { display:block; width:100%; height:auto; }
@media print { .hero { color:#111; background:#fff; min-height:auto; } .hero-image,.site-header,.hero-meta,.hero-bottom { display:none; } .wordmark img { filter:invert(1); } }
.hero-bottom { display:flex; align-items:end; justify-content:space-between; gap:20px; }
.hero-bottom p { margin:0; max-width:250px; }
.eyebrow { color:var(--muted); margin:0; }
.statement { min-height:66vh; padding:25px; display:grid; grid-template-columns:1fr 2fr; align-content:center; border-bottom:1px solid var(--line); }
.statement div { max-width:610px; font-size:clamp(18px,2.3vw,31px); letter-spacing:-.06em; line-height:1.04; text-transform:none; }
.statement p { margin:0 0 1.1em; }
.statement .eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:0; }
.contact { min-height:92vh; background:var(--ink); color:var(--paper); padding:25px; display:grid; grid-template-columns:1fr 2fr; grid-template-rows:auto 1fr; }
.contact .eyebrow { color:#9d9b94; }
.contact h2 { font-size:clamp(95px,16vw,250px); align-self:center; }
.contact-details { align-self:end; display:grid; grid-template-columns:1fr 1fr; gap:16px 25px; padding-bottom:3px; }
.contact-details p { margin:0; }
footer { display:grid; grid-template-columns:1.4fr 1fr 1.4fr .5fr; gap:20px; padding:25px; color:var(--muted); }
footer p { margin:0; } footer span, footer a:hover { color:var(--ink); }
.legal-page { min-height:calc(100vh - 105px); padding:13vh 25px 80px; }
.legal-page h1 { font-size:clamp(100px, 18vw, 290px); margin:42px 0 75px; }
.legal-copy { max-width:570px; margin-left:33.333%; font-size:clamp(16px,1.5vw,22px); line-height:1.14; letter-spacing:-.055em; text-transform:none; }
.legal-copy p { margin:0 0 1.15em; }
.legal-copy a { text-decoration:underline; text-underline-offset:4px; }
@media (max-width:700px) { .site-header { padding:17px; } nav { gap:13px; font-size:9px; }.hero { min-height:100svh; padding:76px 17px 17px; }.hero-image { background-position:62% center; }.hero-meta { font-size:9px; }.wordmark { width:min(92vw,400px); }.hero-bottom { font-size:8px; line-height:1.5; }.hero-bottom p:first-child { max-width:220px; }.statement,.contact { grid-template-columns:1fr; gap:44px; padding:17px; }.statement { min-height:61vh; }.statement div { font-size:clamp(21px,6.4vw,29px); }.contact { min-height:78vh; }.contact h2 { align-self:start; font-size:clamp(83px,21vw,96px); }.contact-details { grid-template-columns:1fr; gap:17px; }.contact-details a { font-size:12px; } footer { grid-template-columns:1fr 1fr; padding:17px; gap:20px; }.legal-page { padding:70px 17px 55px; }.legal-page h1 { margin:42px 0 65px; }.legal-copy { margin-left:0; } }