:root{--forest:#173f33;--deep:#0c2d24;--leaf:#2f7455;--lime:#d8eb87;--cream:#f5f2e8;--paper:#fffdf7;--ink:#17322a;--gold:#e5b45d}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
button,a{font:inherit}
.hero{height:min(820px,92vh);min-height:650px;position:relative;overflow:hidden;background:var(--deep);color:white}
.hero-photo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,35,28,.96) 0%,rgba(8,35,28,.75) 43%,rgba(8,35,28,.08) 75%),url('images/01.jpg') center/cover;transform:scale(1.02)}
nav{position:relative;z-index:2;max-width:1300px;margin:auto;height:96px;display:flex;align-items:center;gap:34px;padding:0 34px;border-bottom:1px solid rgba(255,255,255,.16)}
nav a{color:white;text-decoration:none;font-size:14px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;font-size:19px!important}
.brand span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--lime)}
.hero-copy{position:relative;z-index:1;max-width:1300px;margin:0 auto;padding:100px 34px}
.eyebrow,.intro>span,.feature-intro>span,.other>span{font-weight:800;letter-spacing:.16em;font-size:12px;color:var(--lime)}
h1{font-family:Georgia,serif;font-size:clamp(62px,8vw,118px);line-height:.85;margin:25px 0 28px;letter-spacing:-.055em}
.hero-copy p{font-size:19px;line-height:1.65;max-width:600px;color:#e7eee9}
.primary{display:inline-flex;gap:34px;align-items:center;margin-top:20px;padding:18px 24px;background:var(--lime);color:var(--deep);text-decoration:none;border-radius:4px;font-weight:800}
.intro,.feature-intro,.other{max-width:1200px;margin:0 auto;padding:100px 32px 45px}
.intro span,.feature-intro span,.other>span{color:var(--leaf)}
.intro h2,.feature-intro h2,.other h2{font-family:Georgia,serif;font-size:clamp(40px,5vw,67px);line-height:1;margin:14px 0}
.intro p,.feature-intro p{max-width:720px;font-size:18px;line-height:1.7;color:#587067}
.map-shell{max-width:1300px;margin:0 auto 110px;background:var(--forest);color:white;padding:32px;border-radius:30px}
.map-top{display:flex;justify-content:space-between;align-items:end;padding:5px 5px 26px}
.map-top small,.place-detail small{color:var(--lime);font-weight:bold;letter-spacing:.13em}
.map-top h2{font:42px Georgia,serif;margin:8px 0 0}
.legend{font-size:13px;color:#d7e4dd}
.legend i{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 6px rgba(216,235,135,.15);margin-right:10px}
.garden-map{position:relative;aspect-ratio:3/2;min-height:0;border-radius:20px;overflow:hidden;background:#446c50;isolation:isolate}
.garden-map:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,31,24,.03),rgba(6,31,24,.12));z-index:1;pointer-events:none}
.garden-map>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.map-viewport{overflow:auto;border-radius:20px;scrollbar-color:var(--lime) var(--deep)}
.map-menu{display:flex;gap:8px;overflow:auto;padding:0 2px 18px;scrollbar-width:thin}
.map-menu-item{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:white;border-radius:999px;padding:7px 14px 7px 8px;display:flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer}
.map-menu-item b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--lime);color:var(--deep)}
.map-menu-item:hover,.map-menu-item.active{background:var(--lime);color:var(--deep)}
.pin{position:absolute;width:44px;height:44px;border:0;background:transparent;color:var(--deep);cursor:pointer;text-align:center;z-index:5;transform:translate(-50%,-50%)}
.pin em{font-style:normal;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;transform:none;background:white;box-shadow:0 7px 24px rgba(5,25,19,.48);border:3px solid var(--forest);transition:.22s;font-weight:900;font-size:17px}
.pin span{position:absolute;top:calc(100% + 5px);left:0;display:block;background:rgba(255,255,255,.94);padding:6px 9px;border-radius:10px;margin-top:0;font-size:11px;font-weight:800;white-space:nowrap;box-shadow:0 4px 14px #0003}
.pin.smallfarm span,.pin.insect span,.pin.geo span,.pin.grow span{left:auto;right:0}
.pin.insect span{left:0;right:auto}
.pin:hover em,.pin:focus em,.pin.active em{transform:scale(1.14);background:var(--lime)}
.pin:before{content:"";position:absolute;left:22px;top:22px;width:44px;height:44px;border:2px solid rgba(216,235,135,.9);border-radius:50%;transform:translate(-50%,-50%);animation:mapPulse 3.2s ease-out infinite;pointer-events:none}
.pin:nth-of-type(3n):before{animation-delay:1.1s}
.pin:nth-of-type(3n+1):before{animation-delay:2.1s}
.pin:after{content:"";position:absolute;left:50%;top:calc(100% + 9px);width:104px;height:68px;border:4px solid white;border-radius:12px;background:var(--thumb) center/cover;box-shadow:0 12px 28px rgba(5,25,19,.45);opacity:0;transform:translate(-50%,-7px) scale(.88);transition:.22s;pointer-events:none}
.pin:hover:after,.pin:focus-visible:after,.pin.active:after{opacity:1;transform:translate(-50%,0) scale(1)}
@keyframes mapPulse{0%{opacity:.85;transform:translate(-50%,-50%) scale(.65)}70%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.65)}}
.grow{left:75%;top:74%}
.water{left:48%;top:79%}
.chess{left:38%;top:79%}
.eco{left:37%;top:66%}
.stage-pin{left:33%;top:53%}
.smallfarm{left:72%;top:34%}
.boards{left:60%;top:27%}
.pin.boards span{left:auto;right:0;top:auto;bottom:calc(100% + 5px)}
.compost{left:70%;top:22%}
.pin.compost span{left:auto;right:0;top:auto;bottom:calc(100% + 6px)}
.insect{left:83%;top:29%}
.geo{left:86%;top:17%}
.bees-pin{left:52%;top:5%}
.kiln{left:26%;top:6%}
.grill{left:28%;top:19%}
.gazebo{left:13%;top:17%}
.preschool{left:10%;top:50%}
.api-pin{left:4.3%;top:16%}
.orchard-pin{left:22%;top:30%}
.pin.api-pin span,.pin.orchard-pin span{left:0;right:auto}
.map-beyond{position:absolute;z-index:6;left:12px;top:23%;display:flex;align-items:center;gap:10px;padding:10px 15px 10px 11px;border:2px solid #f4d998;border-radius:12px;background:#12392feF;color:#fff9e9;box-shadow:0 8px 24px #071b16a8;pointer-events:none;white-space:nowrap}
.map-beyond>b{font:900 29px/1 system-ui,sans-serif;color:#f4d998}
.map-beyond>span{display:grid;gap:2px}
.map-beyond strong{font:900 12px/1.2 system-ui,sans-serif;letter-spacing:.08em}
.map-beyond small{font:600 11px/1.2 system-ui,sans-serif;color:#e9e0c9}
.pin.api-pin:after{left:100%;transform:translate(0,-7px) scale(.88)}
.pin.api-pin:hover:after,.pin.api-pin:focus-visible:after,.pin.api-pin.active:after{transform:translate(0,0) scale(1)}
.place-detail{display:grid;grid-template-columns:210px 1fr;gap:28px;background:var(--paper);color:var(--ink);margin-top:18px;border-radius:18px;padding:18px;min-height:190px}
.place-detail img{width:100%;height:100%;min-height:155px;object-fit:cover;border-radius:12px}
.place-detail h3{font:34px Georgia,serif;margin:8px 0}
.place-detail p{color:#5a6c65;line-height:1.6;margin:0 0 15px}
.place-detail button,.feature button{border:0;background:transparent;color:var(--leaf);font-weight:800;cursor:pointer;padding:5px 0}
.place-detail button span,.feature button b{margin-left:20px}
.features{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:0 32px 110px}
.feature{height:610px;position:relative;overflow:hidden;border-radius:24px;color:white}
.feature img{width:100%;height:100%;object-fit:cover;transition:.6s}
.feature:hover img{transform:scale(1.04)}
.shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,34,26,.96),rgba(7,34,26,.04) 70%)}
.feature-copy{position:absolute;left:36px;right:36px;bottom:34px}
.feature-copy>span{font-size:12px;letter-spacing:.14em;font-weight:bold;color:var(--lime)}
.feature-copy h2{font:55px Georgia,serif;margin:12px 0}
.feature-copy p{line-height:1.65;color:#edf3ef}
.feature button{color:var(--lime);font-size:15px}
.feature-link{display:inline-block;color:var(--lime);font-size:15px;font-weight:800;text-decoration:none;padding:5px 0}.feature-link b{margin-left:20px}
.other{padding-bottom:80px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:35px}
.tile{background:var(--paper);padding:24px;border-radius:16px;border:0;text-align:left;cursor:pointer;min-height:160px;transition:.2s}
.tile:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(19,58,45,.12)}
.tile em{font-size:28px;font-style:normal}
.tile strong{font:24px Georgia,serif;display:block;margin:17px 0 8px}
.tile small{color:#6c7d76}
.modal{position:fixed;inset:0;z-index:50;background:rgba(5,25,19,.76);display:none;place-items:center;padding:20px}
.modal.open{display:grid}
.modal-card{position:relative;background:var(--paper);width:min(900px,96vw);max-height:90vh;overflow:auto;border-radius:24px;padding:35px}
.close{position:absolute;right:18px;top:18px;width:46px;height:46px;border:0;border-radius:50%;font-size:28px;cursor:pointer}
.demo-head{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.demo-head img{width:100%;height:360px;object-fit:cover;border-radius:17px}
.demo-head h2{font:50px Georgia,serif;margin:8px 0}
.demo-list{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}
.demo-list button{border:0;background:#eaf1e8;padding:13px 16px;border-radius:10px;font-weight:bold}
footer{background:var(--deep);color:#d9e5df;padding:42px max(32px,calc((100% - 1200px)/2));display:flex;justify-content:space-between}
@media(min-width:761px) and (max-width:1050px){.pin span{display:none}}
@media(max-width:760px){nav{height:74px;padding:0 18px}
nav>a:not(.brand){display:none}
.hero{min-height:680px}
.hero-photo{background:linear-gradient(0deg,rgba(8,35,28,.95),rgba(8,35,28,.2)),url('images/01.jpg') center/cover}
.hero-copy{padding:200px 20px 40px}
h1{font-size:58px}
.intro,.feature-intro,.other{padding:70px 20px 35px}
.map-shell{margin:0 12px 80px;padding:15px;border-radius:20px}
.map-top{align-items:start}
.legend{display:none}
.map-top h2{font-size:31px}
.garden-map{width:900px;min-height:0}
.pin span{display:none}
.pin{width:38px;height:38px}
.pin em{width:38px;height:38px}
.pin:before{left:19px;top:19px;width:38px;height:38px}
.pin:after{width:88px;height:58px}
.place-detail{grid-template-columns:1fr;scroll-margin-top:12px}
.place-detail img{height:190px}
.features{grid-template-columns:1fr;padding:0 12px 80px}
.feature{height:520px}
.feature-copy{left:24px;right:24px}
.feature-copy h2{font-size:43px}
.tiles{grid-template-columns:1fr}
.demo-head{grid-template-columns:1fr}
.demo-head img{height:240px}
.demo-head h2{font-size:38px}
footer{display:grid;gap:10px}
}