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

:root{--paper:#f3f0e9;--ink:#20211e;--charcoal:#20211e;--line:#c8c2b7}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;font-weight:300}
.site-header{height:86px;padding:0 6.5vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:#f7f5f0}
.wordmark{font:400 22px "Libre Caslon Display",serif;letter-spacing:.18em;text-decoration:none;color:inherit;white-space:nowrap}
nav{display:flex;gap:34px}
nav a,.header-cta{color:inherit;text-decoration:none;text-transform:uppercase;font-size:9px;letter-spacing:.19em}
.header-cta{justify-self:end;border:1px solid #6d6c67;padding:12px 21px}

.hero{height:78vh;min-height:610px;position:relative;background-image:url("https://images.pexels.com/photos/33685850/pexels-photo-33685850/free-photo-of-modern-luxury-interior-with-marble-accents.jpeg?auto=compress&cs=tinysrgb&w=2000");background-size:cover;background-position:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,15,13,.54) 0%,rgba(15,15,13,.18) 48%,rgba(15,15,13,.03) 75%)}
.hero-copy{position:absolute;left:8vw;top:50%;transform:translateY(-50%);color:#fff}
.eyebrow{text-transform:uppercase;letter-spacing:.26em;font-size:9px;font-weight:500;margin:0 0 25px}
.eyebrow.dark{color:#555650}
h1,h2,h3{font-family:"Libre Caslon Display",serif;font-weight:400}
h1{font-size:clamp(58px,6.4vw,96px);line-height:.98;margin:0 0 42px;letter-spacing:-.02em}
.light-button{display:inline-block;border:1px solid rgba(255,255,255,.85);padding:14px 24px;color:#fff;text-decoration:none;text-transform:uppercase;font-size:9px;letter-spacing:.2em}

.approach{padding:115px 10vw;display:grid;grid-template-columns:1fr 1fr;gap:12vw;align-items:start}
.approach h2,.services h2,.studio h2,.contact h2{font-size:clamp(46px,5vw,72px);line-height:1.02;margin:0}
.body-copy{padding-top:30px;max-width:520px;font:400 19px/1.75 "Libre Caslon Display",serif}
.body-copy p:first-child{margin-top:0}

.editorial-grid{height:640px;display:grid;grid-template-columns:1.25fr .75fr;gap:3px;background:#f3f0e9}
.image-card{position:relative;background-size:cover;background-position:center}
.image-one{background-image:url("https://images.pexels.com/photos/7722158/pexels-photo-7722158.jpeg?auto=compress&cs=tinysrgb&w=1800")}
.image-two{background-image:url("https://images.pexels.com/photos/7214456/pexels-photo-7214456.jpeg?auto=compress&cs=tinysrgb&w=1400")}
.image-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.28),transparent 45%)}
.image-card span{position:absolute;z-index:2;left:30px;bottom:27px;color:#fff;font-size:9px;letter-spacing:.25em}

.services{padding:120px 10vw;background:#e8e3d9}
.services>h2{max-width:780px}
.service-list{margin-top:75px;margin-left:25%;max-width:850px}
.service-list article{display:grid;grid-template-columns:60px 1fr;border-top:1px solid #aaa397;padding:27px 0}
.service-list article>span{font-size:9px;letter-spacing:.15em}
.service-list h3{font-size:28px;margin:0 0 8px}
.service-list p{font-size:14px;line-height:1.65;margin:0;max-width:600px}

.studio{display:grid;grid-template-columns:1.05fr .95fr;min-height:690px;background:#f7f5f0}
.studio-image{background-image:url("https://images.pexels.com/photos/7214456/pexels-photo-7214456.jpeg?auto=compress&cs=tinysrgb&w=1800");background-size:cover;background-position:center}
.studio-copy{padding:10vw 9vw;align-self:center}
.studio-copy>p:last-child{font:400 18px/1.75 "Libre Caslon Display",serif;max-width:520px;margin-top:35px}

.contact{padding:135px 20px;text-align:center;background:var(--charcoal);color:#f3efe6}
.contact h2{margin-bottom:38px}
.contact>a{color:inherit;text-decoration:none;font:400 20px "Libre Caslon Display",serif;border-bottom:1px solid #aaa;padding-bottom:5px}
.contact address{font-style:normal;font-size:11px;line-height:1.7;letter-spacing:.08em;margin-top:35px;color:#cbc7bd}

footer{padding:40px 6.5vw;background:#161714;color:#e8e3d9;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-size:9px;letter-spacing:.09em}
footer div:last-child{text-align:right}

@media(max-width:800px){
 .site-header{height:auto;padding:22px 6vw;grid-template-columns:1fr auto}.wordmark{font-size:18px}nav{display:none}.header-cta{grid-column:2}
 .hero{height:70vh;min-height:540px}.hero-copy{left:7vw;right:7vw}h1{font-size:54px}
 .approach{grid-template-columns:1fr;padding:80px 8vw;gap:35px}.body-copy{padding-top:0}
 .editorial-grid{height:auto;grid-template-columns:1fr}.image-card{height:58vh}
 .services{padding:85px 8vw}.service-list{margin:55px 0 0}
 .studio{grid-template-columns:1fr}.studio-image{height:58vh}.studio-copy{padding:80px 8vw}
 .contact{padding:100px 20px}
 footer{grid-template-columns:1fr;gap:16px}footer div:last-child{text-align:left}
}