/* ============================================
   Tokens
   ============================================ */
:root{
  --cream:      #EDE7D9;
  --cream-2:    #E4DCC9;
  --forest:     #2F3B2C;
  --forest-dark:#212B1F;
  --leather:    #7A4B2B;
  --rust:       #B15A2B;
  --charcoal:   #2A2622;
  --gold:       #C79A3B;
  --white:      #FBF9F4;

  --font-head: "Fraunces", Georgia, serif;
  --font-body: "Public Sans", -apple-system, Segoe UI, Roboto, sans-serif;

  --radius: 4px;
  --max-w: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--cream);
  color:var(--charcoal);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;display:block;}

h1,h2,h3{
  font-family:var(--font-head);
  color:var(--forest-dark);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:600;
}

h1{font-size:clamp(2.1rem, 4.2vw, 3.4rem); font-weight:600;}
h2{font-size:clamp(1.6rem, 3vw, 2.2rem);}
h3{font-size:1.15rem; font-weight:600;}

p{margin:0 0 1em;}

a{color:inherit;}

.wrap{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 24px;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--forest-dark); color:var(--white);
  padding:10px 16px; z-index:100;
}
.skip-link:focus{left:16px; top:16px;}

:focus-visible{
  outline:3px solid var(--rust);
  outline-offset:2px;
}

/* ============================================
   Buttons
   ============================================ */
.btn{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.98rem;
  padding:.85em 1.6em;
  border-radius:var(--radius);
  text-decoration:none;
  border:2px solid transparent;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{
  background:var(--rust);
  color:var(--white);
}
.btn-primary:hover{background:#9a4a22;}
.btn-ghost{
  border-color:var(--forest-dark);
  color:var(--forest-dark);
  background:transparent;
}
.btn-ghost:hover{background:var(--forest-dark); color:var(--white);}

/* ============================================
   Header
   ============================================ */
.site-header{
  background:var(--cream);
  border-bottom:1px solid rgba(42,38,34,.12);
  position:sticky; top:0; z-index:50;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-head);
  font-weight:600; font-size:1.15rem;
  color:var(--forest-dark);
  text-decoration:none;
}
.logo-mark{color:var(--forest-dark);}
.logo em{font-style:normal; color:var(--rust);}

.main-nav{
  display:flex; align-items:center; gap:28px;
}
.main-nav a{
  text-decoration:none;
  font-weight:500;
  color:var(--charcoal);
}
.main-nav a:hover{color:var(--rust);}
.nav-cta{
  background:var(--forest-dark);
  color:var(--white) !important;
  padding:.6em 1.2em;
  border-radius:var(--radius);
}
.nav-cta:hover{background:var(--rust) !important;}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}
.nav-toggle span{
  width:24px; height:2px; background:var(--forest-dark);
}

/* ============================================
   Hero
   ============================================ */
.hero{padding:64px 0 40px;}
.hero-inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:48px;
  align-items:center;
}
.eyebrow{
  color:var(--leather);
  font-weight:600;
  margin-bottom:.6em;
  font-size:.95rem;
}
.hero-lede{
  font-size:1.1rem;
  max-width:46ch;
  color:#4a453e;
}
.hero-actions{
  display:flex; gap:14px; flex-wrap:wrap;
  margin:1.6em 0 1.8em;
}
.hero-trust{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:6px;
  font-size:.92rem; color:#5a5449;
}
.hero-trust li::before{
  content:"— ";
  color:var(--gold);
}
.hero-art{color:var(--forest-dark);}

/* ============================================
   Sections
   ============================================ */
.section{padding:76px 0;}
.section-alt{background:var(--cream-2);}
.section-lede{
  max-width:60ch;
  color:#4a453e;
  font-size:1.05rem;
}
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}

/* Feature list */
.feature-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px 48px;
  margin-top:40px;
}
.feature{
  display:flex; gap:16px;
  padding-top:20px;
  border-top:1px solid rgba(42,38,34,.15);
}
.feature svg{color:var(--rust); flex-shrink:0; margin-top:2px;}
.feature h3{margin-bottom:.3em;}
.feature p{margin:0; color:#4a453e; font-size:.98rem;}

/* Spec list */
.spec-list{
  margin:0;
  display:flex; flex-direction:column;
  border-top:1px solid rgba(42,38,34,.18);
}
.spec-list > div{
  display:flex; justify-content:space-between; gap:20px;
  padding:14px 0;
  border-bottom:1px solid rgba(42,38,34,.18);
}
.spec-list dt{
  color:#5a5449; font-weight:500;
}
.spec-list dd{
  margin:0; font-weight:600; text-align:right;
  color:var(--forest-dark);
}

/* Steps */
.steps{
  list-style:none; margin:40px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:32px;
}
.steps li{display:flex; flex-direction:column; gap:14px;}
.step-num{
  font-family:var(--font-head);
  font-size:1.6rem; font-weight:600;
  color:var(--rust);
  border-bottom:2px solid var(--gold);
  width:fit-content;
  padding-bottom:6px;
}
.steps h3{margin-bottom:.3em;}
.steps p{color:#4a453e; font-size:.95rem; margin:0;}

/* Price table */
.price-table{
  margin-top:36px;
  border-top:2px solid var(--forest-dark);
}
.price-row{
  display:flex; justify-content:space-between;
  padding:14px 4px;
  border-bottom:1px solid rgba(42,38,34,.18);
}
.price-head{
  font-weight:600; color:var(--forest-dark);
  border-bottom:1px solid rgba(42,38,34,.18);
}
.price-note{
  margin-top:16px; font-size:.9rem; color:#5a5449;
}

/* Contact */
.contact-list{
  list-style:none; padding:0; margin:28px 0 0;
  display:flex; flex-direction:column; gap:16px;
}
.contact-list li{
  display:flex; flex-direction:column; gap:2px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(42,38,34,.15);
}
.contact-label{
  font-size:.85rem; color:#5a5449; font-weight:500;
}
.contact-list a{text-decoration:none; font-weight:600; color:var(--forest-dark);}
.contact-list a:hover{color:var(--rust);}

.contact-form{
  background:var(--white);
  border:1px solid rgba(42,38,34,.15);
  border-radius:var(--radius);
  padding:28px;
  display:flex; flex-direction:column; gap:16px;
}
.contact-form label{
  display:flex; flex-direction:column; gap:6px;
  font-size:.92rem; font-weight:500; color:var(--forest-dark);
}
.contact-form input,
.contact-form textarea{
  font-family:var(--font-body);
  font-size:1rem;
  padding:.7em .8em;
  border:1px solid rgba(42,38,34,.3);
  border-radius:var(--radius);
  background:var(--cream);
  color:var(--charcoal);
  resize:vertical;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:2px solid var(--rust);
  outline-offset:1px;
}
.form-hint{
  margin:0; font-size:.82rem; color:#5a5449;
}

/* ============================================
   Footer
   ============================================ */
.site-footer{
  background:var(--forest-dark);
  color:var(--cream);
  padding:28px 0;
  margin-top:40px;
}
.footer-inner{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.9rem;
}
.footer-nav a{
  color:var(--cream);
  text-decoration:none;
  margin-left:20px;
  opacity:.85;
}
.footer-nav a:hover{opacity:1; text-decoration:underline;}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 860px){
  .hero-inner{grid-template-columns:1fr; gap:32px;}
  .hero-art{order:-1; max-width:320px; margin:0 auto;}
  .two-col{grid-template-columns:1fr;}
  .feature-list{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr 1fr;}
}

@media (max-width: 640px){
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--cream);
    flex-direction:column; align-items:flex-start;
    padding:8px 24px 20px;
    border-bottom:1px solid rgba(42,38,34,.12);
    display:none;
  }
  .main-nav.open{display:flex;}
  .nav-toggle{display:flex;}
  .steps{grid-template-columns:1fr;}
  .footer-inner{flex-direction:column;}
  .footer-nav a{margin-left:0; margin-right:16px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .btn{transition:none;}
}