:root{
  --bg:#f6f1e9;
  --text:#2f3e2f;
  --muted:#6f6a5f;
  --accent:#4f6f52;
  --accent-2:#8a7b68;
  --card:#fff8ef;
  --border:#e6dfd3;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{position:sticky;top:0;background:rgba(246,241,233,0.9);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--border);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.1rem}
.logo {width: 100px;  height: auto;  display: inline-block;}
.menu {
  display: flex;
  align-items: center;
  gap: 18px;
}

.menu a {
  display: inline-flex;
  align-items: center;
}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.02);font-weight:600}
.btn.primary{background:var(--accent);color:#fff;border-color:transparent}
.btn.ghost{background:transparent}
.hero{padding:72px 0;background:linear-gradient(180deg,rgba(79,111,82,.08),rgba(0,0,0,0));}
.hero h1{font-size:clamp(28px,5vw,46px);line-height:1.1;margin:0 0 12px}
.hero p{font-size:clamp(16px,2.2vw,20px);color:var(--muted);max-width:720px}
.hero-cta{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px}
.card.soft{background:var(--card)}
.section{padding:48px 0}
.kicker{color:var(--accent-2);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:700}
.h2{font-size:clamp(22px,3.2vw,28px);margin:6px 0 12px}
.lead{color:var(--muted)}
.footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 20px;
  background: var(--bg);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-left {
  flex: 1;
  min-width: 280px;
}

.brand-line {
  display: flex;
  align-items: center;
  gap: 18px;
}

.logo-box {
  flex-shrink: 0;
}

.footer-logo {
  width: 130px;
  height: auto;
  display: block;
}

.tagline {
  max-width: 400px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.footer-right {
  text-align: right;
}

.footer-right ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-right li {
  margin: 6px 0;
}

.footer-right a {
  color: var(--accent);
  text-decoration: none;
}

.footer-right a:hover {
  text-decoration: underline;
}

.copyright {
  text-align: center;
  margin-top: 25px;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Responsive tweaks */
@media (max-width: 700px) {
  .footer-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .brand-line {
    flex-direction: column;
  }
  .footer-right {
    text-align: center;
  }
}

/* Newsletter section alignment */
.newsletter-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: center; /* 👈 aligns left + right boxes perfectly vertically */
}

.newsletter-left {
  grid-column: span 7;
}

.newsletter-right {
  grid-column: span 5;
  display: flex;
  justify-content: center;
}

.subscribe-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 340px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.subscribe-form input.input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.subscribe-form button.btn {
  align-self: flex-start;
}

.subscribe-form p.small {
  margin: 0;
  line-height: 1.4;
}




.input{padding:12px 14px;border:1px solid var(--border);border-radius:12px;width:100%;background:#fff}
.form-row{display:flex;gap:12px;flex-wrap:wrap}
.badge{display:inline-block;background:var(--accent);color:#fff;padding:6px 10px;border-radius:999px;font-size:.8rem}
ul.clean{list-style:none;padding-left:0;margin:0}
li.check{padding-left:26px;position:relative;margin:10px 0}
li.check:before{content:"✓";position:absolute;left:0;top:0.1rem;color:var(--accent)}
.center{text-align:center}
.small{font-size:.92rem;color:var(--muted)}

.copyright {
  text-align: center;
  margin-top: 20px;
  color: var(--muted);
  font-size: 0.9rem;
}
.card.soft a.small {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.card.soft a.small:hover {
  color: var(--accent-2);
  text-decoration: underline;
}

.cards-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
}

/* smooth scrolling (optional but nice) */
html { scroll-behavior: smooth; }

/* header height variable (match your real header height) */
:root { --header-h: 100px; }  /* tweak to 80–96px if needed */

/* ensure anchored sections don’t get hidden under sticky header */
#newsletter { scroll-margin-top: calc(var(--header-h) + 16px); }


/* Responsive adjustments */
@media (max-width:820px){
  .menu{gap:12px}
  .grid.cards-3{grid-template-columns:1fr}
}
@media (min-width:821px){
  .grid.cards-3{grid-template-columns:repeat(3,1fr)}
}

@media (max-width: 800px) {
  .newsletter-grid {
    grid-template-columns: 1fr;
  }
  .newsletter-right {
    justify-content: flex-start;
  }
  .subscribe-form {
    max-width: 100%;
  }
}

@media (min-width: 1000px) {
  .grid.cards-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 999px) and (min-width: 600px) {
  .grid.cards-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 599px) {
  .grid.cards-3 {
    grid-template-columns: 1fr;
  }
}
label.small a {
  color: #17603A;
  text-decoration: underline;
}
label.small a:hover {
  text-decoration: none;
}
/* Base header layout */
.header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.menu {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Mobile toggle hidden on desktop */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
}

/* --- Mobile styles --- */
@media (max-width: 720px) {
  .header .nav { flex-wrap: wrap; }

  .nav-toggle { display: block; }

  /* collapsed by default */
  .menu {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line, #e6e6e6);
  }

  /* when open */
  .menu.open { display: flex; }

  .menu a { padding: 10px 0; }

  /* make the Unsubscribe button full-width on mobile for easy tap */
  .menu .btn {
    width: 100%;
    text-align: center;
  }
}
/* --- Mobile menu button fix --- */
@media (max-width: 860px) {
  /* Make links and button share the same base sizing */
  .menu a,
  .menu .btn {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    line-height: 1.2;
    font: inherit;
    text-align: left;            /* match links */
  }

  /* Keep Unsubscribe as a button but not weirdly tall/misaligned */
  .menu .btn {
    text-align: center;          /* center label for the button */
    background: var(--accent, #17603A);
    color: #fff;
    border: none;
    box-shadow: none;
    margin: 4px 0 0 0;           /* small separation from other items */
    align-self: stretch;         /* full width in the panel */
  }

  /* Consistent hover/focus */
  .menu a:hover,
  .menu a:focus-visible {
    background: var(--surface, #f7f8f8);
  }
  .menu .btn:hover,
  .menu .btn:focus-visible {
    filter: brightness(0.96);
  }

  /* Remove any conflicting transforms/margins some button styles might add */
  .menu .btn:active { transform: none; }
}