*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff7e8;font-family:Georgia,serif;color:#17221b}
.hero{position:relative;width:100%;height:100vh;background:#70d9f3;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;display:block}
.hotspot{position:absolute;display:block;border-radius:999px}
.hotspot:focus{outline:4px solid #fff;box-shadow:0 0 0 8px #23513f}
.letsgo{left:39%;top:49%;width:22%;height:12%}
.treehouse{left:2%;top:70%;width:17%;height:21%}
.lagos{right:11%;top:17%;width:18%;height:17%}
.baobab{left:50%;top:24%;width:19%;height:17%}
.kente{right:9%;top:32%;width:20%;height:17%}
.storycastle{left:43%;bottom:22%;width:18%;height:14%}
.leaderlab{right:24%;bottom:22%;width:20%;height:15%}
.shop{right:14%;bottom:2%;width:12%;height:12%}
.panel{padding:80px 6vw;text-align:center}
.panel h1,.panel h2{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1;color:#23513f;margin:0 0 18px}
.panel p{font-size:1.25rem;line-height:1.6;max-width:900px;margin:0 auto;color:#6b3f22}
.green{background:#23513f;color:white}.green h2,.green h3,.green p{color:white}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.grid article{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:28px;padding:28px;text-align:left}
.grid small{color:#f4b23b;font-weight:900;text-transform:uppercase;letter-spacing:.12em}
@media(max-width:900px){
  .hero{height:72vh}
  .hero img{object-position:center top}
  .letsgo{left:33%;top:40%;width:35%;height:10%}
  .treehouse{left:1%;top:67%;width:23%;height:24%}
  .lagos{right:4%;top:15%;width:28%;height:18%}
  .baobab{left:48%;top:24%;width:24%;height:15%}
  .kente{right:1%;top:32%;width:25%;height:16%}
  .storycastle{left:40%;bottom:23%;width:22%;height:15%}
  .leaderlab{right:21%;bottom:21%;width:23%;height:15%}
  .shop{right:8%;bottom:1%;width:15%;height:12%}
  .grid{grid-template-columns:1fr}
}