:root {
  --bg:      #f3f0ea;
  --bg2:     #ece8e0;
  --bg3:     #e4e0d6;
  --ink:     #1c1b18;
  --ink2:    #48453e;
  --ink3:    #7a7670;
  --green:   #3a5f48;
  --gpale:   #dde6e0;
  --border:  rgba(28,27,24,.11);
  --borderM: rgba(28,27,24,.20);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Inter',sans-serif;font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-top:56px;
}

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:56px;display:flex;align-items:center;justify-content:space-between;
  padding:0 3rem;
  background:rgba(243,240,234,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-logo{display:flex;align-items:center;gap:11px;cursor:pointer;user-select:none;text-decoration:none}
.nav-wordmark{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:300;letter-spacing:.02em;color:var(--ink)}
.nav-links{display:flex;gap:2.5rem;list-style:none}
.nav-links a{
  font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink3);text-decoration:none;transition:color .15s;cursor:pointer;
}
.nav-links a:hover,.nav-links a.cur{color:var(--ink)}
.nav-cta{
  font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bg);background:var(--ink);
  border:none;padding:.5rem 1.2rem;cursor:pointer;transition:background .15s;
  text-decoration:none;display:inline-block;
}
.nav-cta:hover{background:var(--green)}

/* TYPOGRAPHY */
.lbl{
  font-family:'IBM Plex Mono',monospace;font-size:.59rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:.9rem;
}
h1,h2{
  font-family:'Fraunces',serif;font-weight:300;line-height:1.08;
  letter-spacing:-.012em;color:var(--ink);
}
h1{font-size:clamp(2.8rem,4.5vw,5rem)}
h2{font-size:clamp(1.8rem,2.6vw,2.6rem)}
em{font-style:italic;color:var(--green)}

/* SECTIONS */
.sec{padding:5rem 3rem;border-bottom:1px solid var(--border)}
.sec-alt{background:var(--bg2)}

/* BUTTONS */
.btn-dark{
  font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bg);background:var(--ink);
  border:none;padding:.7rem 1.4rem;cursor:pointer;transition:background .15s;display:inline-block;
  text-decoration:none;
}
.btn-dark:hover{background:var(--green)}
.btn-ghost{
  font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3);background:transparent;
  border:1px solid var(--borderM);padding:.7rem 1.4rem;cursor:pointer;transition:all .15s;display:inline-block;
  text-decoration:none;
}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}

/* FADE */
.fade{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
.fade.in{opacity:1;transform:none}

/* CTA STRIP */
.cta-strip{
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;padding:2.75rem 3rem;border-bottom:1px solid var(--border);
}
.cta-hed{font-family:'Fraunces',serif;font-weight:300;font-style:italic;font-size:clamp(1.3rem,2vw,1.85rem);color:var(--ink)}
.cta-btns{display:flex;gap:.75rem;flex-shrink:0}

/* FOOTER */
footer{
  padding:1.6rem 3rem;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;background:var(--bg);
}
.f-l{display:flex;align-items:center;gap:2rem}
.f-wm{font-family:'Fraunces',serif;font-size:.95rem;font-weight:300;color:var(--ink)}
.f-copy{font-family:'IBM Plex Mono',monospace;font-size:.55rem;color:var(--ink3);letter-spacing:.05em}
.f-r{display:flex;gap:2rem}
.f-r a{font-family:'IBM Plex Mono',monospace;font-size:.55rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);text-decoration:none;cursor:pointer;transition:color .15s}
.f-r a:hover{color:var(--ink)}

/* RESPONSIVE — shared */
@media(max-width:860px){
  nav{padding:0 1.5rem}
  .nav-links{display:none}
  .sec,.cta-strip{padding-left:1.5rem;padding-right:1.5rem}
  .cta-strip{flex-direction:column;align-items:flex-start}
  footer{flex-direction:column;gap:1.2rem;padding:1.5rem}
}