/* ============================================================
   KBD — Option 3 (Forest & Gold)
   Shared design tokens + base styles
   Edit tokens here and every section updates.
   ============================================================ */
:root{
  --midnight:#0D2117;   /* Deep Forest (exact logo background) */
  --emerald:#1F5238;    /* Emerald Forest  */
  --pine:#173322;       /* Deep Pine       */
  --moss:#5A7A61;       /* Moss            */
  --sage:#A8B59D;       /* Sage            */
  --gold:#D3B15D;       /* Antique Gold (logo B) */
  --gold-h:#E2C170;     /* Gold hover      */
  --ivory:#F4EEE1;      /* Warm Ivory      */
  --stone:#EAE3D4;      /* Stone           */
  --char:#1E241E;       /* Charcoal (green-tinted) */
  --ink:#2b2b2b;

  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,sans-serif;color:var(--ink);background:var(--ivory);line-height:1.6}
h1,h2,h3,.serif{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:.2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{padding:90px 0}

/* Buttons */
.btn{display:inline-block;padding:14px 28px;border-radius:6px;font-weight:600;font-size:15px;text-decoration:none;transition:.2s;cursor:pointer}
.btn-gold{background:var(--gold);color:var(--midnight)}
.btn-gold:hover{background:var(--gold-h)}
.btn-pine{background:var(--pine);color:var(--ivory)}
.btn-pine:hover{background:var(--emerald)}
.btn-ghost{border:1.5px solid rgba(196,175,122,.7);color:var(--gold)}
.btn-ghost:hover{background:rgba(196,175,122,.12)}

.eyebrow{color:var(--gold);letter-spacing:3.5px;font-size:13px;font-weight:700;text-transform:uppercase}

/* Shared section header */
.head{text-align:center;max-width:640px;margin:0 auto 56px}
.head .eyebrow{color:var(--emerald)}
.head h2{font-size:42px;color:var(--midnight);margin-bottom:14px}
.head p{color:#5b6459}

@media(max-width:860px){
  section{padding:64px 0}
  .head h2{font-size:32px}
}