:root {
  --ink: #171714;
  --paper: #f4f1e9;
  --paper-2: #ebe6db;
  --stone: #b8aea0;
  --muted: #6f6b63;
  --white: #fbfaf6;
  --line: rgba(23,23,20,.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 82px;
  padding: 0 4.5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(244,241,233,.90);
  backdrop-filter: blur(16px);
}
.brand {
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  letter-spacing: .18em;
  white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: 2rem; font-size: .84rem; }
.nav a { opacity: .72; transition: opacity .2s ease; }
.nav a:hover { opacity: 1; }
.nav-cta { border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.menu-toggle { display: none; background: transparent; border: 0; font: inherit; }

.hero {
  min-height: calc(100vh - 82px);
  padding: 9vw 4.5vw 5vw;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: 6vw;
  align-items: start;
}
.hero-kicker, .eyebrow {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero h1 {
  grid-column: 1;
  margin: 1.5rem 0 1.8rem;
  max-width: 920px;
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: clamp(4rem, 7vw, 7.4rem);
  line-height: .92;
  font-weight: 400;
  letter-spacing: -.045em;
}
.hero h1 span { color: #7a7369; }
.hero-copy {
  grid-column: 1;
  max-width: 660px;
  margin: 0;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.65;
  color: #4d4942;
}
.hero-actions { grid-column: 1; display: flex; align-items: center; gap: 1.7rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: .95rem 1.25rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .11em; }
.button-dark { background: var(--ink); color: var(--white); }
.text-link { font-size: .86rem; border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.text-link span { margin-left: .45rem; }
.hero-visual {
  grid-column: 2;
  grid-row: 1 / span 4;
  min-height: 650px;
  position: relative;
  align-self: stretch;
  overflow: hidden;
  background: #d8d1c5;
}
.panel { position: absolute; }
.panel-a { inset: 0 34% 38% 0; background: linear-gradient(140deg,#c7b8a2,#8a7e70); }
.panel-b { inset: 33% 0 0 42%; background: linear-gradient(160deg,#2d2c2a,#76716a 48%,#c6b9a6); }
.panel-c { left: 9%; right: 18%; bottom: 9%; height: 25%; background: linear-gradient(90deg,#a9977d,#d8cec0); box-shadow: 0 26px 60px rgba(0,0,0,.15); }
.hero-visual::before { content:""; position:absolute; width:42%; height:78%; right:12%; top:0; background:rgba(248,245,238,.42); border-left:1px solid rgba(255,255,255,.55); }
.hero-visual::after { content:""; position:absolute; width:60%; height:1px; left:9%; bottom:38%; background:rgba(255,255,255,.45); }
.visual-label { position:absolute; left:1rem; bottom:1rem; color:white; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; }

.statement, .services, .process, .contact { padding: 9vw 4.5vw; }
.statement { border-top: 1px solid var(--line); }
.statement-grid { display:grid; grid-template-columns:1.2fr .8fr; gap: 8vw; margin-top:2rem; }
.statement h2, .section-heading h2, .process h2, .project-banner h2, .contact h2 {
  font-family: "Libre Caslon Display", Georgia, serif;
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.04;
}
.statement h2 { font-size: clamp(3rem, 5vw, 5.8rem); margin:0; }
.statement-copy { max-width: 600px; align-self:end; }
.statement-copy p { margin:0 0 1.2rem; color:#504c45; line-height:1.8; font-size:1.02rem; }

.services { background: var(--ink); color: var(--white); }
.services .eyebrow { color: #aaa398; }
.section-heading { display:grid; grid-template-columns:.55fr 1.45fr; gap:4vw; align-items:end; margin-bottom:5rem; }
.section-heading h2 { font-size: clamp(2.8rem, 4.7vw, 5.2rem); margin:0; max-width:900px; }
.service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid rgba(255,255,255,.16); }
.service-card { min-height:290px; padding:2rem 2rem 3rem 0; border-bottom:1px solid rgba(255,255,255,.16); }
.service-card:nth-child(odd) { border-right:1px solid rgba(255,255,255,.16); padding-right:3rem; }
.service-card:nth-child(even) { padding-left:3rem; }
.service-number { display:block; font-size:.72rem; color:#9d9589; margin-bottom:4rem; }
.service-card h3 { font-family:"Libre Caslon Display",Georgia,serif; font-size:2rem; font-weight:400; margin:0 0 1rem; }
.service-card p { max-width:520px; color:#bbb5ab; line-height:1.65; margin:0; }

.process { display:grid; grid-template-columns:.75fr 1.25fr; gap:8vw; background:var(--paper-2); }
.process-intro { position:sticky; top:120px; align-self:start; }
.process-intro h2 { font-size:clamp(3rem,4.5vw,5rem); margin:1rem 0; }
.process-intro > p:last-child { color:var(--muted); line-height:1.7; max-width:430px; }
.process-list { list-style:none; margin:0; padding:0; }
.process-list li { display:grid; grid-template-columns:70px 1fr; gap:1rem; padding:2rem 0 2.4rem; border-top:1px solid var(--line); }
.process-list li:last-child { border-bottom:1px solid var(--line); }
.process-list span { font-size:.72rem; color:var(--muted); }
.process-list h3 { margin:0 0 .7rem; font-size:1.5rem; font-weight:500; }
.process-list p { margin:0; color:#59554e; line-height:1.7; max-width:620px; }

.project-banner { padding:8vw 4.5vw; background:#8c8172; color:#f7f2e9; display:grid; grid-template-columns:1.4fr .6fr; gap:7vw; align-items:end; }
.project-banner .light { color:#ddd3c7; }
.project-banner h2 { margin:1rem 0 0; font-size:clamp(3rem,5vw,5.7rem); max-width:1000px; }
.project-banner > p { margin:0; line-height:1.8; color:#e7dfd4; }

.contact { min-height:70vh; display:flex; flex-direction:column; justify-content:center; }
.contact-grid { margin-top:2rem; display:grid; grid-template-columns:1.15fr .85fr; gap:8vw; align-items:end; }
.contact h2 { font-size:clamp(3.5rem,6vw,7rem); margin:0 0 1.5rem; }
.contact p { max-width:650px; color:var(--muted); line-height:1.7; }
.contact-links { display:flex; flex-direction:column; border-top:1px solid var(--line); }
.contact-links a { padding:1.4rem 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:2rem; font-size:1rem; }

footer { padding:3rem 4.5vw; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; }
.footer-brand { font-size:1rem; }
.footer-meta { display:flex; gap:2rem; font-size:.72rem; color:var(--muted); }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 920px) {
  .site-header { height:72px; }
  .menu-toggle { display:block; }
  .nav { position:fixed; inset:72px 0 auto 0; background:var(--paper); flex-direction:column; align-items:flex-start; padding:2rem 4.5vw 2.5rem; border-bottom:1px solid var(--line); transform:translateY(-130%); transition:transform .25s ease; }
  .nav.open { transform:translateY(0); }
  .hero { min-height:auto; grid-template-columns:1fr; padding-top:12vw; }
  .hero h1,.hero-copy,.hero-actions,.hero-visual { grid-column:1; }
  .hero-visual { grid-row:auto; min-height:500px; margin-top:4rem; }
  .statement-grid,.section-heading,.process,.project-banner,.contact-grid { grid-template-columns:1fr; }
  .section-heading { gap:1rem; }
  .process-intro { position:static; }
  .service-grid { grid-template-columns:1fr; }
  .service-card:nth-child(odd) { border-right:0; padding-right:0; }
  .service-card:nth-child(even) { padding-left:0; }
  footer { align-items:flex-start; flex-direction:column; }
  .footer-meta { flex-direction:column; gap:.5rem; }
}

@media (max-width: 600px) {
  .site-header,.hero,.statement,.services,.process,.project-banner,.contact,footer { padding-left:6vw; padding-right:6vw; }
  .hero h1 { font-size:clamp(3.35rem,16vw,5.5rem); }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .hero-visual { min-height:420px; }
  .statement,.services,.process,.contact { padding-top:18vw; padding-bottom:18vw; }
  .project-banner { padding-top:16vw; padding-bottom:16vw; }
  .service-number { margin-bottom:2.5rem; }
  .contact-links a { font-size:.88rem; }
}