:root { --ink:#28231f; --paper:#f4f0ea; --sand:#d9cfc1; --clay:#8f7661; --line:rgba(40,35,31,.24); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; font-size:16px; } img { display:block; width:100%; } a { color:inherit; text-decoration:none; } .site-header { height:82px; padding:0 4.7vw; display:flex; align-items:center; justify-content:space-between; position:absolute; top:0; z-index:2; width:100%; color:#fff; } .brand { display:flex; align-items:center; gap:11px; text-transform:uppercase; } .brand-mark { font:600 27px/1 "Playfair Display",serif; letter-spacing:-2px; } .brand-name { font:500 8px/1.25 "DM Mono",monospace; letter-spacing:.7px; } .nav { display:flex; align-items:center; gap:28px; font-size:12px; } .nav a { opacity:.88; } .nav .nav-cta { border:1px solid rgba(255,255,255,.7); padding:11px 15px; opacity:1; } .hero { min-height:738px; height:100vh; color:#fff; position:relative; overflow:hidden; display:grid; grid-template-columns:44% 56%; align-items:end; } .hero-image-wrap { position:absolute; inset:0; z-index:-2; } .hero-image-wrap:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(17,15,13,.72),rgba(17,15,13,.2) 65%,rgba(17,15,13,.08)); } .hero-image { height:100%; object-fit:cover; object-position:center; } .hero-content { margin-left:10.7vw; padding-bottom:105px; max-width:570px; } .eyebrow { font:500 10px/1.2 "DM Mono",monospace; text-transform:uppercase; letter-spacing:1px; margin:0 0 24px; } .hero .eyebrow span { width:25px; height:1px; background:currentColor; display:inline-block; margin:0 9px 3px; opacity:.7; } h1,h2,h3,p { margin-top:0; } h1,h2 { font:500 clamp(42px,5.5vw,80px)/1.04 "Playfair Display",serif; letter-spacing:-2.7px; } h1 { margin-bottom:26px; } em { font-weight:500; } .hero-copy { font-size:15px; line-height:1.6; max-width:360px; color:rgba(255,255,255,.88); margin-bottom:33px; } .text-link { display:inline-flex; align-items:center; gap:18px; font-size:12px; border-bottom:1px solid currentColor; padding-bottom:7px; } .text-link i { font-style:normal; font-size:17px; } .hero-caption { position:absolute; right:4.7vw; bottom:39px; font:10px/1.5 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.8px; text-align:right; } .section-pad { padding-left:10.7vw; padding-right:10.7vw; } .intro { padding-top:145px; padding-bottom:148px; } .intro-grid { display:grid; grid-template-columns:1.2fr .65fr; gap:9vw; align-items:end; } .intro h2 { margin:0; font-size:clamp(38px,4.7vw,66px); } .intro-text { font-size:15px; line-height:1.75; padding-bottom:6px; } .intro-text p:last-child { margin-bottom:0; } .featured { padding-bottom:142px; } .section-head { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:38px; } .section-head .eyebrow { margin:0; } .project-grid { max-width:1170px; padding:0 5vw; margin:auto; display:grid; grid-template-columns:1.35fr 1fr; gap:58px 26px; } .project { position:relative; } .project img { height:390px; object-fit:cover; filter:saturate(.9); transition:transform .5s ease; } .project:hover img { transform:scale(1.015); } .project-large { grid-row:span 2; } .project-large img { height:586px; } .project-shift { margin-top:38px; } .project-wide { grid-column:1 / -1; width:75%; } .project-wide img { height:475px; } .project-meta { padding-top:13px; } .project-meta span { font:10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.8px; } .project-meta h3 { font:500 25px "Playfair Display",serif; margin:7px 0 0; } .services { background:#d9cfc1; padding-top:130px; padding-bottom:136px; display:grid; grid-template-columns:.9fr 1.15fr; gap:8vw; } .services h2 { font-size:clamp(36px,4.25vw,59px); margin:0; } .service-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); } .service-list li { display:grid; grid-template-columns:42px 1fr 18px; column-gap:15px; padding:21px 0 24px; border-bottom:1px solid var(--line); } .service-list li > span { font:10px "DM Mono",monospace; padding-top:7px; } .service-list h3 { font:500 25px/1.1 "Playfair Display",serif; margin:0 0 9px; letter-spacing:-.5px; } .service-list p { font-size:13px; line-height:1.55; margin:0; max-width:370px; } .service-list i { font-style:normal; font-size:17px; padding-top:5px; } .statement { padding-top:150px; padding-bottom:150px; display:grid; grid-template-columns:37% 1fr; gap:9vw; align-items:center; max-width:1200px; margin:auto; } .statement img { height:500px; object-fit:cover; } .statement h2 { font-size:clamp(36px,4.25vw,60px); margin:0 0 28px; } .statement div > p:last-child { font-size:15px; line-height:1.7; max-width:430px; margin-bottom:0; } .contact { text-align:center; background:var(--ink); color:var(--paper); padding:130px 30px; } .contact .eyebrow { color:#d9cfc1; } .contact h2 { font-size:clamp(42px,5vw,70px); margin:0 0 38px; } .contact-link { font:500 30px "Playfair Display",serif; border-bottom:1px solid #d9cfc1; padding-bottom:9px; } .contact-link span { font-size:23px; margin-left:15px; } .contact-note { font-size:12px; color:#d9cfc1; margin:28px 0 0; } footer { background:#28231f; color:#f4f0ea; border-top:1px solid rgba(244,240,234,.22); padding:35px 4.7vw 26px; display:grid; grid-template-columns:1.2fr 1.3fr .65fr 1fr; align-items:center; font-size:11px; } footer .footer-brand { color:#fff; } footer p,footer a { margin:0; } footer a:not(.brand) { text-decoration:underline; } footer small { text-align:right; color:#b8afa3; font-size:10px; } .menu-toggle { display:none; }
@media (max-width: 720px) { .site-header { height:70px; padding:0 22px; } .nav { position:absolute; left:0; right:0; top:0; min-height:100vh; background:var(--ink); flex-direction:column; align-items:flex-start; padding:120px 30px; gap:28px; transform:translateX(100%); transition:transform .3s ease; font:500 24px "Playfair Display",serif; } .nav.open { transform:translateX(0); } .nav .nav-cta { font:14px "DM Sans",sans-serif; } .menu-toggle { z-index:3; display:flex; width:34px; border:0; background:none; padding:7px 0; flex-direction:column; gap:5px; } .menu-toggle span:not(.sr-only) { background:#fff; height:1px; width:100%; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } .hero { min-height:670px; height:100svh; display:block; } .hero-image-wrap:after { background:linear-gradient(0deg,rgba(17,15,13,.62),rgba(17,15,13,.08) 75%); } .hero-content { position:absolute; bottom:78px; left:24px; right:24px; margin:0; padding:0; } h1 { font-size:48px; letter-spacing:-1.9px; } .hero-copy { font-size:14px; margin-bottom:24px; } .hero-caption { display:none; } .section-pad { padding-left:24px; padding-right:24px; } .intro { padding-top:94px; padding-bottom:95px; } .intro-grid,.services,.statement { grid-template-columns:1fr; gap:34px; } .intro h2 { font-size:43px; } .intro-text { font-size:14px; } .featured { padding-bottom:94px; } .section-head { padding-bottom:25px; } .project-grid { padding:0 24px; grid-template-columns:1fr; gap:40px; } .project-large,.project-wide { grid-row:auto; grid-column:auto; width:auto; } .project img,.project-large img,.project-wide img { height:355px; } .project-shift { margin:0; } .project-meta h3 { font-size:24px; } .services { padding-top:93px; padding-bottom:94px; } .services h2 { font-size:41px; } .service-list li { grid-template-columns:27px 1fr 15px; column-gap:10px; } .service-list h3 { font-size:22px; } .service-list p { font-size:12px; } .statement { padding:94px 24px; gap:35px; } .statement img { height:430px; } .statement h2 { font-size:40px; } .contact { padding:95px 22px; } .contact h2 { font-size:44px; letter-spacing:-1.7px; } .contact-link { font-size:25px; } footer { padding:34px 24px 25px; grid-template-columns:1fr 1fr; row-gap:25px; } footer p { font-size:10px; } footer small { grid-column:1/-1; text-align:left; } }