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

:root{
  --ink:#302c28;
  --muted:#746b63;
  --paper:#f4f0e9;
  --warm:#e6ddd1;
  --line:rgba(48,44,40,.18);
  --serif:"Playfair Display", Georgia, serif;
  --sans:"DM Sans", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.6}
a{color:inherit;text-decoration:none}
.nav{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:30px 4vw}
.logo{font-size:12px;line-height:1.05;letter-spacing:.14em;font-weight:500}
.nav nav{display:flex;gap:32px;text-transform:uppercase;letter-spacing:.14em;font-size:10px}
.hero{min-height:100vh;display:grid;grid-template-columns:1.12fr .88fr;position:relative}
.hero-image{min-height:100vh}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:13vw 8vw 8vw 7vw}
.eyebrow{font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 24px;color:var(--muted)}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:var(--serif);font-weight:400;line-height:1.03}
h1{font-size:clamp(58px,7vw,108px);margin-bottom:30px}
h2{font-size:clamp(42px,5vw,76px)}
em{font-family:var(--serif);font-weight:400}
.intro{font-size:17px;max-width:390px;color:var(--muted);margin-bottom:36px}
.button{display:inline-block;width:max-content;border-bottom:1px solid var(--ink);padding-bottom:6px;text-transform:uppercase;font-size:10px;letter-spacing:.16em}
.image-placeholder{background:linear-gradient(135deg,#d7cec2,#eee8df 55%,#c8bbaa);display:flex;align-items:center;justify-content:center;overflow:hidden}
.image-placeholder span{font-size:9px;letter-spacing:.16em;color:rgba(48,44,40,.48)}
.statement{padding:14vw 13vw;max-width:1100px}
.statement h2{max-width:850px;margin-bottom:28px}
.statement>p:last-child{max-width:570px;color:var(--muted);font-size:16px}
.section{padding:8vw 4vw}
.section-head{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px;margin-bottom:48px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.work-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px 30px}
.project-large{grid-row:span 2}
.project-wide{grid-column:1/-1}
.project .image-placeholder{height:42vw;min-height:420px}
.project-large .image-placeholder{height:68vw;max-height:850px}
.project-wide .image-placeholder{height:52vw;max-height:700px}
.project-meta{padding-top:15px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line)}
.project-meta h3{font-family:var(--serif);font-weight:400;font-size:23px;margin:0}
.project-meta p{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:4px 0}
.services{background:var(--warm)}
.service-list{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
.service-list article{padding:42px 30px 40px 0;border-bottom:1px solid var(--line)}
.service-list article:nth-child(even){padding-left:30px;border-left:1px solid var(--line)}
.service-list span{font-size:10px;color:var(--muted)}
.service-list h3{font-family:var(--serif);font-size:35px;font-weight:400;margin:18px 0 12px}
.service-list p{max-width:440px;color:var(--muted);font-size:14px}
.about{display:grid;grid-template-columns:1fr 1fr;min-height:750px}
.about-image{min-height:650px}
.about-copy{padding:12vw 8vw;align-self:center}
.about-copy h2{margin-bottom:36px}
.about-copy p:not(.eyebrow){max-width:500px;color:var(--muted);font-size:15px}
.contact{text-align:center;padding:15vw 5vw;border-top:1px solid var(--line)}
.contact h2{margin-bottom:28px}
.contact>p:not(.eyebrow){color:var(--muted);max-width:500px;margin:0 auto 40px}
.contact-link{display:inline-block;margin:8px 14px;border-bottom:1px solid var(--ink);padding-bottom:5px;font-size:12px;letter-spacing:.08em}
footer{display:flex;justify-content:space-between;padding:30px 4vw;border-top:1px solid var(--line);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media(max-width:760px){
  .nav{padding:22px 5vw}.nav nav{gap:14px;font-size:8px}.hero{grid-template-columns:1fr;display:flex;flex-direction:column}.hero-image{height:68vh;min-height:500px}.hero-copy{padding:80px 8vw 90px}.hero-copy h1{font-size:64px}.statement{padding:100px 8vw}.section{padding:80px 6vw}.work-grid{grid-template-columns:1fr;gap:55px}.project-large{grid-row:auto}.project-large .image-placeholder,.project .image-placeholder,.project-wide .image-placeholder{height:115vw;max-height:none;min-height:0}.project-wide{grid-column:auto}.service-list{grid-template-columns:1fr}.service-list article,.service-list article:nth-child(even){padding:32px 0;border-left:0}.about{grid-template-columns:1fr}.about-image{min-height:110vw}.about-copy{padding:90px 8vw}.contact{padding:110px 7vw}footer{padding:25px 6vw;gap:20px;flex-direction:column}}