:root{
      --leaf: #2f6f3e;
      --leaf-700:#245532;
      --cream:#f7f1e4;
      --panel:#fff7e8;
      --ink:#203020;
      --shadow: 0 10px 30px rgba(0,0,0,.08);
      --radius: 20px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color:var(--ink); background:linear-gradient(180deg,#eaf4e6, #dfeee0 30%, #d6ead8 100%); background-attachment: fixed; 
    }
    .wrap{max-width:1160px; margin:48px auto; padding:24px;}

    .canvas{
      background:var(--panel);
      border-radius:calc(var(--radius) + 8px);
      box-shadow:var(--shadow);
      padding:28px 28px 40px;
    }

    .nav{display:flex; align-items:center; justify-content:space-between; gap:16px;}
    .brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.5px; color:var(--leaf);}
    .brand-dot{width:10px; height:10px; border-radius:50%; background:var(--leaf);}
    .links{display:flex; gap:28px; align-items:center;}
    .links a{color:var(--leaf-700); text-decoration:none; font-weight:600}
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5ch; font-weight:700; border:0; cursor:pointer;}
    .btn-primary{background:var(--leaf); color:#fff; padding:10px 18px; border-radius:999px; box-shadow:0 4px 12px rgba(47,111,62,.25);} 
    .btn-primary:hover{background:var(--leaf-700)}

    .hero{display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:36px; padding:24px 10px 0;}
    .hero h1{font-size:clamp(32px, 4vw, 64px); line-height:1.05; margin:0; color:var(--leaf-700);}    
    .hero p{font-size:clamp(16px, 1.3vw, 20px); opacity:.9; max-width:50ch}
    .btn-ghost{background:transparent; border:4px solid var(--leaf); color:var(--leaf); padding:10px 18px; border-radius:999px; font-weight:700}
    .btn-ghost:hover{background:var(--leaf); color:#fff}
    .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; align-items:center; justify-content:center;}
    .cta a{text-decoration:none; font-size: 1.2em;}
    .icons {display: flex; gap: 16px; align-items:center; height: 3em; width: auto; padding: 128px;}
    .icons img {height: 3em; width: 3em; }
    .maps-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:20px}
    .maps-grid a{display:block}
    .maps-grid img{width:100%; height:auto; border:3px solid #ddd; border-radius: 12px; box-sizing:border-box; object-fit:cover; transition:transform 0.3s ease, box-shadow 0.3s ease; cursor:pointer;}
    .maps-grid img:hover{transform: translateY(-5px) scale(1.03); box-shadow: 0 12px 30px rgba(0,0,0,0.15);}




    .art{position:relative;}
    .art img{width:100%; max-width:560px; height:auto; border-radius:24px; box-shadow:0 18px 50px rgba(20,50,30,.18)}
    .tag{position:absolute; bottom:12px; right:12px; background:#ffffffb3; color:#2b2b2b; padding:6px 10px; border-radius:10px; font-size:12px; backdrop-filter: blur(4px);}

    .footer{margin-top:36px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:space-between; font-size:14px; opacity:.8}

    @media (max-width: 900px){
      .hero{grid-template-columns:1fr; text-align:center}
      .hero p{margin-inline:auto}
      .cta{justify-content:center}
      .art img{max-width:460px; margin:0 auto; display:block}
      .links{display:none}
    }