@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Manrope:wght@300;400;500&display=swap');

:root{
  --paper:#f4efe5;
  --ink:#262823;
  --olive:#5f6550;
  --moss:#79806a;
  --warm:#d8cdbb;
  --line:rgba(38,40,35,.18);
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Manrope", Arial, sans-serif;
  --max:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
a:hover{opacity:.7}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:.97;margin:0;letter-spacing:-.035em}
p{margin:0 0 1.2rem}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}
.eyebrow,.nav,.text-link,.meta,label,.button{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.site-header{position:sticky;top:0;z-index:20;background:rgba(244,239,229,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(38,40,35,.08)}
.header-inner{height:74px;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{font-family:var(--serif);font-size:1.75rem;letter-spacing:.02em}
.nav{display:flex;gap:1.65rem}
.menu-button{display:none;border:0;background:none;font:inherit;padding:0}
.hero{min-height:calc(100vh - 74px);display:grid;align-items:end;padding:7rem 0 3.5rem}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:5rem;align-items:end}
.hero h1{font-size:clamp(5rem,10vw,10rem)}
.hero-copy{max-width:34rem;padding-bottom:1rem}
.lede{font-family:var(--serif);font-size:clamp(1.7rem,2.8vw,2.7rem);line-height:1.18}
.visual{position:relative;overflow:hidden;background:#cfc5b3}
.visual:before{content:"";position:absolute;inset:0;background:
radial-gradient(circle at 70% 25%,rgba(255,255,255,.7),transparent 22%),
linear-gradient(135deg,rgba(93,101,80,.22),rgba(255,255,255,.06) 55%,rgba(38,40,35,.08));
}
.visual:after{content:attr(data-label);position:absolute;left:1rem;bottom:.8rem;font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(38,40,35,.55)}
.hero-image{height:min(68vw,760px)}
.section{padding:8rem 0}
.rule{border-top:1px solid var(--line)}
.intro-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:7rem}
.quote{padding:9rem 2rem;background:var(--olive);color:#fbf8f1;text-align:center}
.quote p{max-width:980px;margin:auto;font-family:var(--serif);font-size:clamp(2.8rem,5.7vw,6.2rem);line-height:1.02;letter-spacing:-.035em}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.card .visual{height:480px;margin-bottom:1.3rem}
.card h3{font-size:2.45rem;margin:.55rem 0 .5rem}
.card p{color:#66685f}
.text-link{display:inline-block;margin-top:.55rem;padding-bottom:.15rem;border-bottom:1px solid currentColor}
.page-hero{padding:9rem 0 6rem}
.page-hero h1{font-size:clamp(4.5rem,8.6vw,8.8rem)}
.page-hero .lede{max-width:850px;margin-top:2rem}
.two-column{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:start}
.two-column .visual{height:680px}
.prose{max-width:690px;font-size:1.05rem}
.prose p:first-child::first-letter{float:left;font-family:var(--serif);font-size:4.8rem;line-height:.72;padding:.15rem .55rem 0 0}
.service-list{border-top:1px solid var(--line)}
.service{display:grid;grid-template-columns:.7fr 1.3fr;gap:3rem;padding:2.4rem 0;border-bottom:1px solid var(--line)}
.service h3{font-size:2.1rem}.service p{margin:0;color:#66685f;max-width:680px}
.project-feature{display:grid;grid-template-columns:1.25fr .75fr;gap:3.5rem;align-items:end}
.project-feature .visual{height:720px}
.notes-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem}
.note-card:nth-child(1){grid-column:span 7}.note-card:nth-child(2){grid-column:span 5;padding-top:7rem}
.note-card:nth-child(3){grid-column:3/span 5}.note-card:nth-child(4){grid-column:span 4}
.note-card .visual{height:460px;margin-bottom:1.2rem}
.note-card h3{font-size:2.45rem;margin:.5rem 0}
.meta{color:#77796f}
.contact-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:7rem}
form{display:grid;gap:1.35rem}.field{display:grid;gap:.4rem}
input,textarea,select{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;border-radius:0;padding:.9rem 0;font:inherit;color:var(--ink)}
textarea{min-height:150px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ink)}
.button{justify-self:start;margin-top:.6rem;padding:1rem 1.3rem;border:1px solid var(--ink);background:transparent;cursor:pointer}
.button:hover{background:var(--ink);color:var(--paper)}
.footer{border-top:1px solid var(--line);padding:3rem 0}
.footer-grid{display:flex;justify-content:space-between;align-items:end;gap:2rem}
.footer-brand{font-family:var(--serif);font-size:2.2rem}.small{font-size:.82rem;color:#77796f}
.article{max-width:820px;margin:auto}.article h1{font-size:clamp(4rem,7vw,7.2rem);margin:1rem 0 2rem}
.article .visual{height:640px;margin:3rem 0}.article h2{font-size:3.2rem;margin:3.5rem 0 1.2rem}
.article blockquote{margin:3.5rem 0;padding-left:2rem;border-left:1px solid var(--ink);font-family:var(--serif);font-size:2.2rem;line-height:1.22}
@media(max-width:850px){
  .container{width:min(100% - 28px,var(--max))}
  .header-inner{height:66px}.menu-button{display:block}.nav{display:none;position:absolute;top:66px;left:0;right:0;background:var(--paper);padding:1.5rem 14px 2rem;border-bottom:1px solid var(--line);flex-direction:column}.nav.open{display:flex}
  .hero{min-height:auto;padding:5rem 0 2.5rem}.hero-grid,.intro-grid,.two-column,.project-feature,.contact-grid{grid-template-columns:1fr;gap:2.5rem}
  .hero h1{font-size:clamp(4.7rem,21vw,7rem)}.hero-image,.two-column .visual,.project-feature .visual{height:520px}
  .section{padding:5.5rem 0}.cards{grid-template-columns:1fr;gap:3.5rem}.card .visual{height:420px}
  .service{grid-template-columns:1fr;gap:1rem}.notes-grid{grid-template-columns:1fr}.note-card:nth-child(n){grid-column:auto;padding-top:0}
  .quote{padding:6rem 1rem}.footer-grid{flex-direction:column;align-items:start}
}