:root {
  --linen: #f7f3ea;
  --sage: #5d7c5b;
  --leaf: #2c5534;
  --river: #3a6d7c;
  --ink: #1c2a20;
  --mute: #5a655c;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Nunito Sans", sans-serif; background: var(--linen); color: var(--ink); line-height: 1.65; }
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 16px 6vw; background: rgba(247, 243, 234, 0.95); border-bottom: 1px solid rgba(44, 85, 52, 0.12);
}
.mark { font-family: Cardo, serif; font-size: 1.6rem; color: var(--leaf); text-decoration: none; }
.mark span { color: var(--river); font-style: italic; }
#nav { display: flex; flex-wrap: wrap; gap: 12px 16px; }
#nav a { color: var(--mute); text-decoration: none; font-size: 0.9rem; }
#nav a:hover { color: var(--leaf); }
#nav-btn { display: none; background: var(--leaf); color: #fff; border: 0; padding: 8px 14px; border-radius: 999px; cursor: pointer; font: inherit; }
.hero { padding: 72px 6vw 56px; max-width: 900px; }
.kicker { color: var(--river); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; margin-bottom: 12px; }
h1 { font-family: Cardo, serif; font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.1; font-weight: 400; }
h1 i { color: var(--sage); }
.lede { margin: 18px 0 26px; color: var(--mute); max-width: 62ch; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn, form button { background: var(--leaf); color: #fff; text-decoration: none; padding: 12px 18px; border-radius: 999px; border: 0; font: inherit; cursor: pointer; }
.btn.line { background: transparent; color: var(--leaf); border: 2px solid var(--leaf); }
.block { padding: 64px 6vw; }
.block.tint { background: #eef3ea; }
h2 { font-family: Cardo, serif; font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 18px; }
h3 { font-family: Cardo, serif; font-size: 1.3rem; margin-bottom: 8px; }
.lead, .split p { color: var(--mute); margin-bottom: 14px; }
.split { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; }
.leaf, .cards article, .trio article { background: #fff; border-radius: 18px; padding: 20px; }
.leaf ul, .fine, .steps { margin-left: 18px; color: var(--mute); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.chips button { border: 1px solid var(--sage); background: #fff; border-radius: 999px; padding: 8px 14px; cursor: pointer; font: inherit; }
.chips button.on { background: var(--sage); color: #fff; }
.cards, .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cards article.hide { display: none; }
.note { margin-top: 20px; padding: 14px 16px; border-left: 3px solid var(--river); color: var(--mute); }
.faq details { padding: 12px 0; border-bottom: 1px solid rgba(28, 42, 32, 0.12); }
.faq summary { cursor: pointer; font-weight: 700; }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 64px 6vw; background: var(--leaf); color: #f4f7f2; }
.contact a { color: #cfe6d4; }
form { display: grid; gap: 12px; }
label { display: grid; gap: 6px; }
input, select, textarea { border: 0; border-radius: 12px; padding: 10px; font: inherit; }
footer { padding: 20px 6vw 36px; }
a { color: var(--river); }
@media (max-width: 900px) {
  .split, .cards, .trio, .contact { grid-template-columns: 1fr; }
  #nav { display: none; width: 100%; flex-direction: column; }
  #nav.open { display: flex; }
  #nav-btn { display: inline-block; margin-left: auto; }
}