:root { --green:#24402C; --green-2:#35593F; --sage:#DCE5D5; --sand:#F4EFE6; --sand-2:#E9E1D2; --clay:#C4693D; --clay-l:#F6E3D8; --ink:#1B241E; --soft:#5A6359; --line:#DDD5C5; --white:#fff; --blue:#2D5B8A; }
* { box-sizing:border-box; }
html { scroll-padding-top:84px; }
body { margin:0; background:var(--sand); color:var(--ink); font:17.5px/1.62 'Satoshi',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { max-width:100%; height:auto; display:block; }
h1, h2, h3 { font-family:'Zodiak',Georgia,serif; font-weight:700; line-height:1.04; letter-spacing:-.015em; }
.wrap { max-width:1200px; margin:0 auto; padding:0 24px; }
.skip { position:absolute; left:-999px; top:8px; background:var(--green); color:#fff; padding:8px 12px; z-index:50; }
.skip:focus { left:8px; }
:focus-visible { outline:3px solid var(--clay); outline-offset:3px; }
.top { position:sticky; top:0; z-index:20; background:rgba(244,239,230,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; gap:26px; height:68px; }
.logo { display:flex; align-items:baseline; gap:.06em; text-decoration:none; color:var(--green); font:700 27px/1 'Zodiak',serif; letter-spacing:-.02em; }
.logo svg { height:.86em; width:auto; flex:none; transform:translateY(.1em); }
.logo b { color:var(--clay); font-weight:700; }
.foot .logo { color:#F4EFE6; }
.top nav { display:flex; gap:24px; margin-left:auto; }
.top nav a { text-decoration:none; font-weight:600; font-size:16px; color:var(--soft); padding:6px 0; border-bottom:2px solid transparent; }
.top nav a:hover, .top nav a[aria-current] { color:var(--ink); border-color:var(--clay); }
.top .cta { text-decoration:none; font-weight:700; font-size:15px; background:var(--green); color:#fff; padding:10px 18px; border-radius:999px; }
.top .cta:hover { background:var(--green-2); }
.menu-toggle { display:none; margin-left:auto; background:none; border:2px solid var(--green); font:700 14px 'Satoshi'; padding:7px 14px; border-radius:999px; color:var(--green); }
.btn { display:inline-block; background:var(--green); color:#fff; font-weight:700; text-decoration:none; padding:14px 22px; border-radius:999px; border:0; font-size:16px; cursor:pointer; font-family:inherit; }
.btn:hover { background:var(--green-2); }
.btn.clay { background:var(--clay); } .btn.clay:hover { background:#A9572F; }
.btn.line { background:transparent; color:inherit; box-shadow:inset 0 0 0 2px currentColor; }
.sec { padding:92px 0; }
.sec h2 { font-size:clamp(36px,4.6vw,62px); margin:0 0 16px; }
.lede { font-size:clamp(18px,1.5vw,20.5px); color:var(--soft); max-width:36em; margin:0 0 38px; }
.dark { background:var(--green); color:#EEF1E9; }
.dark .lede { color:#B9C6B6; }
.white { background:var(--white); }
.page-intro { padding:76px 0 54px; background:var(--sand-2); border-bottom:1px solid var(--line); }
.page-intro h1 { font-size:clamp(44px,6.4vw,94px); margin:0 0 16px; max-width:13em; }
.page-intro h1 em { font-style:italic; color:var(--clay); }
.page-intro p { font-size:clamp(18px,1.6vw,21px); color:var(--soft); max-width:35em; margin:0; }
.src { font-size:13.5px; color:var(--soft); }
.dark .src { color:#A9B8A6; }
.foot { background:var(--ink); color:#A9B0A6; font-size:14.5px; padding:56px 0 28px; }
.foot .wrap { display:grid; grid-template-columns:1fr auto; gap:28px; }
.foot p { margin:12px 0 0; max-width:34em; }
.foot nav { display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.foot nav a { text-decoration:none; color:#E3E7DF; font-weight:600; }
.fine { grid-column:1 / -1; display:flex; gap:8px 24px; flex-wrap:wrap; border-top:1px solid #2E3A31; padding-top:20px; margin:0 !important; color:#7F877C; max-width:none !important; }
@media (max-width:1000px) {
  .menu-toggle { display:block; } .top .cta { display:none; }
  .top nav { display:none; position:absolute; top:68px; left:0; right:0; background:var(--sand); flex-direction:column; gap:0; padding:6px 24px 18px; border-bottom:1px solid var(--line); }
  .top nav.open { display:flex; } .top nav a { padding:12px 0; font-size:18px; border-bottom:1px solid var(--line); }
  .sec { padding:68px 0; }
}
@media (max-width:600px) { .foot .wrap { grid-template-columns:1fr; } .page-intro { padding:56px 0 44px; } }

/* lot planner */
.lp { display:grid; grid-template-columns:1.15fr 1fr; gap:26px; align-items:start; }
.lp-svg { width:100%; height:auto; display:block; border-radius:16px; border:1px solid var(--line); background:#F7F3EB; position:sticky; top:88px; }
.lp-ctl { display:grid; gap:12px; }
.lp fieldset { border:1px solid var(--line); background:#fff; border-radius:14px; padding:14px 16px 16px; margin:0; }
.lp legend { font:700 18px 'Zodiak'; padding:0 6px; }
.lp-g { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
.lp label { display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:14px; color:var(--soft); }
.lp input[type=number] { font:600 17px 'Satoshi'; padding:9px 11px; border:2px solid var(--line); border-radius:10px; background:var(--sand); color:var(--ink); width:100%; min-width:0; }
.lp input[type=number]:focus { border-color:var(--green); outline:none; }
.lp-r { margin-bottom:10px; } .lp-r b { color:var(--ink); font-size:17px; }
.lp-r input { accent-color:var(--clay); width:100%; }
.lp-seg { display:inline-flex; background:var(--sand); border-radius:999px; padding:3px; margin:12px 0 10px; }
.lp-seg button { border:0; background:none; border-radius:999px; padding:7px 14px; font:700 14px 'Satoshi'; cursor:pointer; color:var(--soft); }
.lp-seg button[aria-pressed=true] { background:var(--green); color:#fff; }
.lp-out { border-radius:14px; padding:16px 18px; font-size:16.5px; }
.lp-out.ok { background:#E2EEDD; color:#1F4A2A; } .lp-out.no { background:var(--clay-l); color:#7A3417; }
.lp-m { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.lp-m div { background:var(--sand); border-radius:10px; padding:10px 12px; }
.lp-m b { display:block; font:700 22px 'Zodiak'; }
.lp-m span { font-size:13px; color:var(--soft); }
@media (max-width:980px) { .lp { grid-template-columns:1fr; } .lp-svg { position:static; } }
@media (max-width:520px) { .lp-m { grid-template-columns:1fr; } }

[hidden] { display:none !important; }