:root{
  --soil:#201713;
  --green:#173d25;
  --sand:#f3ede2;
  --paper:#fffaf1;
  --soft:#f6ecda;
  --line:#ddceb7;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,system-ui,sans-serif;background:var(--sand);color:var(--soil)}
a{text-decoration:none;color:inherit}
.nav{position:sticky;top:0;z-index:20;background:#fffaf2;padding:10px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;box-shadow:0 3px 16px #0001}
.nav a{padding:10px 14px;border-radius:999px;font-weight:800}
.nav .active{background:var(--soil);color:white}
.hero{min-height:52vh;background:linear-gradient(rgba(23,61,37,.82),rgba(32,23,19,.42)),url('https://images.unsplash.com/photo-1416879595882-3373a0480b5b?q=80&w=1800&auto=format&fit=crop') center/cover;color:white;display:flex;align-items:end}
.wrap{max-width:1180px;margin:auto;padding:22px;width:100%}
h1{font-size:clamp(42px,8vw,92px);line-height:.9;letter-spacing:-.065em;margin:14px 0}
h2{font-size:clamp(28px,4vw,48px);line-height:1;margin:0 0 14px}
h3{margin:0 0 8px}
p{font-size:17px;line-height:1.55;color:#62584e}
.hero p{color:#f8ead2;font-size:21px;max-width:760px}
.grid{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card,.panel{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:0 10px 28px #0001}
.tag{display:inline-block;background:#e3f4e7;color:#14532d;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900}
.price{font-size:34px;font-weight:950;margin:10px 0}
.btn{display:block;text-align:center;background:var(--soil);color:white;border-radius:15px;padding:13px;font-weight:900;border:0;cursor:pointer}
.btn.light{background:#e9dcc7;color:var(--soil)}
.btn.google{background:#1a73e8;color:white}
.btn.osm{background:#2d7f43;color:white}
.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.map-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.matrix{width:100%;border-collapse:separate;border-spacing:0 8px}
.matrix th{text-align:left;width:140px;color:#766650;font-size:14px;vertical-align:top}
.matrix td{background:var(--soft);border:1px solid #eadfcc;border-radius:14px;padding:10px}
.info{position:relative;border-bottom:1px dotted #333;cursor:help}
.info:after{content:attr(data-info);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:var(--soil);color:white;padding:9px 11px;border-radius:12px;white-space:pre;opacity:0;pointer-events:none;transition:.15s;z-index:40;font-size:12px;line-height:1.35;box-shadow:0 10px 22px #0004}
.info:hover:after{opacity:1}
.fake-map{height:360px;border-radius:20px;background:linear-gradient(135deg,#dbeed1,#efdba3);position:relative;overflow:hidden;border:1px solid var(--line)}
.fake-map:before{content:"";position:absolute;left:8%;top:15%;width:43%;height:46%;border-radius:50%;background:#fff7}
.fake-map:after{content:"";position:absolute;right:8%;top:20%;width:45%;height:50%;border-radius:50%;background:#fff5}
.pin{position:absolute;transform:translate(-50%,-50%);background:var(--green);color:white;border-radius:999px;padding:8px 11px;font-size:12px;font-weight:900;z-index:2;box-shadow:0 10px 22px #0003}
.item{display:block;background:white;border-radius:18px;padding:14px;border:1px solid var(--line);margin-bottom:10px}
.item:hover{border-color:#201713}
.notice{background:#e3f4e7;border:1px solid #bdd8c5;border-radius:18px;padding:14px;margin:0 0 12px}
.form input,.form textarea{width:100%;padding:12px;border:0;border-radius:14px;background:white;box-shadow:0 4px 14px #0001;margin:0 0 9px}
.form textarea{min-height:360px;font-family:monospace;font-size:13px}
footer{text-align:center;padding:30px;color:#746859}
@media(max-width:840px){
  .grid,.two,.actions,.map-actions{grid-template-columns:1fr}
  .hero{min-height:42vh}
  .matrix th,.matrix td{display:block;width:100%}
}