/* =========================================================
   SAVANNA CARBON · Design System
   ========================================================= */

:root{
  --clay:#e9e0cf;
  --clay-2:#dfd3bb;
  --bark:#2a2417;
  --bark-2:#3d3423;
  --moss:#3a4a24;
  --moss-2:#556b35;
  --sage:#8a9a6b;
  --soil:#6b4a2b;
  --ochre:#c68a3a;
  --rust:#9c4a2a;
  --cream:#f4ecd8;
  --paper:#f7efdc;
  --ink:#1a1509;
  --line:rgba(42,36,23,.18);
  --line-soft:rgba(42,36,23,.09);
  --serif:'Fraunces', ui-serif, Georgia, serif;
  --display:'Instrument Serif', ui-serif, Georgia, serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--clay);
  color:var(--bark);
  font-family:var(--serif);
  font-weight:400;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;flex-direction:column;
}
main{flex:1;}

/* Paper grain overlay */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:1000;
  opacity:.35;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.14 0 0 0 0 0.09 0 0 0 0.4 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

a{color:inherit;}

/* =========================================================
   NAV
   ========================================================= */
nav.site-nav{
  position:sticky;top:0;z-index:100;
  padding:1.1rem 2.2rem;
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(233,224,207,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.logo{
  font-family:var(--display);
  font-size:1.55rem;
  letter-spacing:-.01em;
  color:var(--bark);
  display:flex;align-items:center;gap:.55rem;
  font-style:italic;
  text-decoration:none;
}
.logo-leaf{
  width:22px;height:22px;
  display:inline-block;
}
.nav-links{
  display:flex;gap:1.8rem;align-items:center;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.nav-links a{color:var(--bark);text-decoration:none;transition:color .2s ease;position:relative;padding:.3rem 0;}
.nav-links a:hover{color:var(--moss);}
.nav-links a.active{color:var(--moss);}
.nav-links a.active::after{
  content:"";position:absolute;bottom:-6px;left:0;right:0;height:1px;background:var(--moss);
}
.nav-cta{
  background:var(--bark);color:var(--cream);
  padding:.7rem 1.2rem;border-radius:100px;
  font-family:var(--mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;
  transition:all .25s ease;
  border:1px solid var(--bark);
}
.nav-cta:hover{background:transparent;color:var(--bark);}

.mobile-toggle{
  display:none;
  background:none;border:none;cursor:pointer;
  padding:.5rem;
  color:var(--bark);
}

@media(max-width:960px){
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;
    background:var(--paper);
    padding:1.5rem;
    gap:1rem;
    border-bottom:1px solid var(--line);
    transform:translateY(-20px);opacity:0;pointer-events:none;
    transition:all .3s ease;
  }
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .mobile-toggle{display:block;}
  nav.site-nav{padding:1rem 1.2rem;}
}

/* =========================================================
   FOOTER
   ========================================================= */
footer.site-footer{
  background:var(--bark);
  color:var(--cream);
  padding:4rem 2.2rem 2rem;
}
.footer-top{
  max-width:1400px;margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:3rem;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(244,236,216,.15);
}
.footer-brand .logo{color:var(--cream);}
.footer-tag{
  margin-top:1rem;
  font-family:var(--display);
  font-style:italic;
  font-size:1.2rem;
  color:rgba(244,236,216,.7);
  max-width:28ch;
}
.footer-col h4{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ochre);
  margin-bottom:1.2rem;
}
.footer-col a{
  display:block;
  color:rgba(244,236,216,.7);
  text-decoration:none;
  padding:.4rem 0;
  font-size:.92rem;
  transition:color .2s ease, padding .2s ease;
}
.footer-col a:hover{color:var(--cream);padding-left:.3rem;}
.footer-bottom{
  max-width:1400px;margin:2rem auto 0;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:1rem;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color:rgba(244,236,216,.5);
}
@media(max-width:960px){
  .footer-top{grid-template-columns:1fr 1fr;gap:2rem;}
  footer.site-footer{padding:3rem 1.2rem 1.5rem;}
}

/* =========================================================
   TYPOGRAPHY / UTILITIES
   ========================================================= */
.container{max-width:1400px;margin:0 auto;padding:0 2.2rem;}
.container-narrow{max-width:900px;margin:0 auto;padding:0 2.2rem;}

.section-label{
  font-family:var(--mono);font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--moss);
  margin-bottom:1.5rem;
  display:flex;align-items:center;gap:.7rem;
}
.section-label::before{
  content:"";width:28px;height:1px;background:var(--moss);
}
.section-title{
  font-family:var(--display);
  font-size:clamp(2.5rem, 6vw, 5rem);
  line-height:.98;
  letter-spacing:-.02em;
  max-width:18ch;
  margin-bottom:1.5rem;
}
.section-title em{font-family:var(--serif);font-style:italic;color:var(--moss);font-weight:300;}

/* Buttons */
.btn{
  font-family:var(--mono);font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;
  padding:1rem 1.6rem;
  border-radius:100px;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:.55rem;
  transition:all .3s cubic-bezier(.2,.7,.2,1);
  cursor:pointer;border:none;
  white-space:nowrap;
}
.btn-primary{background:var(--moss);color:var(--cream);border:1px solid var(--moss);}
.btn-primary:hover{background:var(--bark);border-color:var(--bark);transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--bark);border:1px solid var(--bark);}
.btn-outline:hover{background:var(--bark);color:var(--cream);transform:translateY(-2px);}
.btn-ochre{background:var(--ochre);color:var(--bark);border:1px solid var(--ochre);}
.btn-ochre:hover{background:var(--bark);color:var(--cream);border-color:var(--bark);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--bark);border:none;padding:.6rem 1rem;}
.btn-ghost:hover{color:var(--moss);}
.btn .arrow{transition:transform .3s ease;}
.btn:hover .arrow{transform:translate(3px,-3px);}
.btn-sm{padding:.7rem 1.1rem;font-size:.65rem;}

/* =========================================================
   PAGE HEADER (for non-home pages)
   ========================================================= */
.page-header{
  padding:5rem 2.2rem 3.5rem;
  border-bottom:1px solid var(--line);
}
.page-header .container{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:end;}
.page-header h1{
  font-family:var(--display);
  font-size:clamp(2.8rem,6.5vw,6rem);
  line-height:.95;
  letter-spacing:-.025em;
  color:var(--bark);
}
.page-header h1 em{font-family:var(--serif);font-style:italic;color:var(--moss);font-weight:300;}
.page-header .lede{
  font-size:1.1rem;
  line-height:1.5;
  color:var(--bark-2);
  max-width:40ch;
}
.breadcrumb{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--bark-2);
  margin-bottom:2rem;
}
.breadcrumb a{color:var(--bark-2);text-decoration:none;}
.breadcrumb a:hover{color:var(--moss);}
.breadcrumb .sep{margin:0 .6rem;opacity:.5;}

@media(max-width:960px){
  .page-header{padding:3rem 1.2rem 2.5rem;}
  .page-header .container{grid-template-columns:1fr;gap:1.5rem;}
  .container, .container-narrow{padding:0 1.2rem;}
}

/* =========================================================
   CARDS
   ========================================================= */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
  padding:1.6rem 1.4rem;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -20px rgba(42,36,23,.2);
}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.visible{opacity:1;transform:translateY(0);}