:root{
  --brand:#2a6b2f;      /* deep leaf green */
  --brand-2:#8bc34a;    /* light lime */
  --brown:#3e2b20;      /* soil brown */
  --brown-2:#5a3d2b;
  --ink:#15211e;        /* dark slate/green */
  --muted:#4b5850;      /* neutral */
  --bg:#fbfaf7;         /* warm paper */
  --paper:#fffdfa;
  --ring: rgba(42,107,47,.22);
  --shadow: 0 18px 40px rgba(34,24,18,.12), 0 2px 8px rgba(34,24,18,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
     color:var(--ink); background:var(--bg); line-height:1.6}
img{max-width:100%; display:block}
.container{width:100%; max-width:1200px; margin:0 auto; padding:0 18px}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
/* ---- Header ---- */
.site-header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(10px);
             border-bottom:1px solid #e7e1d8}
.header-inner{display:flex; align-items:center; gap:14px; padding:12px 0}
.logo{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px; color:var(--brown); font-size:1.05rem}
.logo b{color:var(--brand)}
.nav{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
.nav a{color:#1d2a23; padding:8px 12px; border-radius:12px; font-weight:700}
.nav a:hover{background:#eef3ec}
.nav a.active{background:linear-gradient(135deg, var(--brand), #388e3c); color:#fff}
.nav-toggle{display:none}
@media (max-width:840px){
  .nav{display:none}
  .nav.open{display:flex; flex-direction:column; width:100%; margin:8px 0 0 0; gap:8px}
  .nav-toggle{display:inline-flex; margin-left:auto; padding:8px 12px; border:1px solid #e7e1d8; border-radius:12px; background:#fff}
}

/* ---- Hero ---- */
.hero{position:relative; isolation:isolate; padding:76px 0 52px; background:var(--paper); border-bottom:1px solid #e7e1d8}
.hero--image{
  background: radial-gradient(1200px 400px at 50% -220px, rgba(139,195,74,.24) 0%, transparent 60%), var(--paper);
}
.hero h1{font-size:clamp(1.6rem,3vw,3rem); margin:6px 0 8px; letter-spacing:.3px}
.hero p{color:#5c665f; margin:0}
.ribbon{display:inline-block; background:#cdeaa7; color:#1a1a1a; font-weight:900; padding:6px 10px; border-radius:8px; border-left:5px solid var(--brand-2)}
.ribbon--brown{background:#f1e9d9; border-left-color:var(--brown)}

/* Soil divider + veggie pattern */
.divider{position:relative; height:52px; overflow:hidden}
.divider img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* ---- Cards & Layout ---- */
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:20px}
.card{grid-column:span 12; border:1px solid #eadfd2; border-radius:20px; padding:18px; background:#ffffff; box-shadow:var(--shadow);
      transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-2px) scale(1.004)}
@media (min-width:760px){ .md-3{grid-column:span 3} .md-4{grid-column:span 4} .md-6{grid-column:span 6} .md-8{grid-column:span 8} }

.section{padding:42px 0}
.kicker{letter-spacing:.14em; text-transform:uppercase; color:var(--brand); font-weight:800; font-size:.8rem}
.badge{display:inline-block; padding:4px 10px; border-radius:999px; background:#e9f7eb; color:var(--brand); font-size:.75rem; border:1px solid #cde9d1}

.btn{display:inline-flex; align-items:center; gap:8px; border-radius:14px; padding:11px 16px; border:1px solid #e5e0d5; background:#fff; color:#1d2a23; font-weight:700; transition:box-shadow .2s ease, transform .15s ease}
.btn:hover{box-shadow:0 0 0 4px var(--ring); transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg, var(--brand), #388e3c); color:#fff; border-color:transparent}
.btn.ghost{background:transparent}
.btn .icon{width:18px;height:18px;display:inline-block}

/* ---- Brown feature strip ---- */
.strip{background:var(--brown); color:#fff; padding:38px 0; position:relative}
.strip h2,.strip h3{color:#fff}
.strip .card{background:linear-gradient(180deg, #4a3529, #3e2b20); border-color:#705343}
.strip .badge{background:#2d8a34; color:#eaffec; border-color:#2d8a34}

/* ---- Footer ---- */
.site-footer{border-top:1px solid #e7e1d8; padding:28px 0 0 0; background:#f4efe6; color:#374151}
.footer-grid{display:grid; gap:20px}
@media(min-width:760px){ .footer-grid{grid-template-columns:2fr 1fr 1fr} }
.footer-title{font-weight:800; color:var(--brand); margin-bottom:8px}
.footer-bottom{margin-top:10px; background:#e7e1d8; height:1px}
.veg-strip{width:100%; display:block}

/* ---- Form ---- */
input,select,textarea{width:100%; border:1px solid #e7e1d8; border-radius:12px; padding:12px 12px; font:inherit; background:#fff}
label{display:block; font-weight:700; margin:10px 0 6px}
.form-row{display:grid; gap:14px}
@media (min-width:760px){ .cols-2{grid-template-columns:1fr 1fr} .cols-3{grid-template-columns:1fr 1fr 1fr} }
.table{border-collapse:collapse; width:100%}
.table th,.table td{border:1px solid #e7e1d8; padding:10px; text-align:left}
.table th{background:#f3efe7}
.alert{padding:12px 14px; border-radius:12px; background:#ecfeff; border:1px solid #a5f3fc; color:#155e75}

/* ---- Reveal animation ---- */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}