:root { --ink:#101212; --paper:#f3f0ea; --acid:#d6e62a; --line:rgba(16,18,18,.23); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,Arial,sans-serif; }
.site-header { height:86px; padding:0 4vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:2; }
.brand { color:inherit; font-size:18px; font-weight:700; letter-spacing:-1.4px; text-decoration:none; } .brand span { font-weight:400; font-size:11px; letter-spacing:-.6px; margin:0 2px; }
nav { display:flex; gap:25px; } nav a,.menu-button { font:500 11px/1 "DM Mono",monospace; color:inherit; text-decoration:none; text-transform:uppercase; letter-spacing:.04em; }
.menu-button { display:none; border:0; background:none; padding:0; }
.hero { min-height:calc(100vh - 86px); display:grid; grid-template-columns:1fr minmax(390px,43vw); align-items:stretch; }
.hero-copy { padding:14vh 7vw 8vh 10vw; display:flex; flex-direction:column; justify-content:center; } .eyebrow { margin:0 0 25px; font:500 10px/1.3 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.11em; }
h1,h2 { margin:0; font:500 clamp(48px,6vw,91px)/.94 "Playfair Display",serif; letter-spacing:-.055em; } h1 em,h2 em { font-weight:500; }
.intro { width:min(310px,100%); margin:35px 0 43px; font-size:15px; line-height:1.6; }
.text-link { color:inherit; font:500 11px/1.2 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.02em; text-decoration:none; border-bottom:1px solid var(--ink); padding:0 0 9px; width:max-content; } .text-link span { margin-left:18px; font-size:17px; }
.hero-image { margin:0; position:relative; height:calc(100vh - 86px); background:#dbe0e2; overflow:hidden; } .hero-image img { width:100%; height:100%; object-fit:cover; object-position:47% center; filter:saturate(.82) contrast(1.05); } figcaption { font:500 9px/1 "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.hero-image figcaption { position:absolute; bottom:26px; right:27px; color:#fff; mix-blend-mode:difference; }
.statement { padding:150px 10vw; display:grid; grid-template-columns:1fr 2fr; border-top:1px solid var(--line); } .statement-text { grid-column:2; max-width:790px; margin:0 0 43px; font:500 clamp(36px,4.7vw,70px)/1.04 "Playfair Display",serif; letter-spacing:-.05em; } .body-copy { grid-column:2; max-width:385px; font-size:15px; line-height:1.7; margin:0; }
.work { background:var(--ink); color:var(--paper); display:grid; grid-template-columns:1fr 1fr; padding:9vw 10vw; gap:8vw; align-items:end; } .section-heading { padding-bottom:3vw; } .work-image { margin:0; position:relative; } .work-image img { display:block; width:100%; aspect-ratio: .81; object-fit:cover; object-position:center; } .work-image figcaption { margin-top:14px; color:#c7c5bf; }
.services { padding:10vw; display:grid; grid-template-columns:1fr 1fr; gap:8vw; } .service-list { border-top:1px solid var(--ink); } .service-list article { display:grid; grid-template-columns:43px 1fr; padding:23px 0 25px; border-bottom:1px solid var(--line); } .service-list span { font:500 10px "DM Mono",monospace; } h3 { margin:0; font:500 25px/1.05 "Playfair Display",serif; letter-spacing:-.03em; } .service-list p { grid-column:2; margin:12px 0 0; font-size:13px; line-height:1.55; max-width:265px; }
.contact { background:var(--acid); padding:10vw; min-height:650px; display:flex; flex-direction:column; align-items:flex-start; } .contact > p:not(.eyebrow):not(.location) { margin:29px 0; max-width:340px; font-size:15px; line-height:1.6; } .button { padding:15px 17px; background:var(--ink); color:var(--paper); text-decoration:none; font:500 11px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.04em; } .button span { margin-left:23px; font-size:15px; } .location { margin-top:auto; font:500 10px/1.6 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }
footer { background:var(--ink); color:var(--paper); padding:22px 4vw; display:flex; justify-content:space-between; font:500 9px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.05em; }
@media (max-width:700px) { .site-header { height:70px; padding:0 6vw; } nav { display:none; } .site-header.menu-open nav { display:flex; position:absolute; top:69px; left:0; right:0; padding:26px 6vw 30px; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; gap:20px; } .menu-button { display:block; } .hero { min-height:auto; display:flex; flex-direction:column; } .hero-copy { padding:90px 7vw 65px; min-height:530px; } .hero-image { height:600px; } .statement,.services { padding:90px 7vw; display:block; } .statement .eyebrow { margin-bottom:50px; } .statement-text { margin-bottom:31px; } .work { padding:90px 7vw; display:block; } .section-heading { padding-bottom:50px; } .services > div:first-child { margin-bottom:53px; } .contact { padding:90px 7vw; min-height:560px; } h1,h2 { font-size:clamp(49px,14vw,72px); } }