:root{--green:#448c74;--green-deep:#2f6450;--gold:#e5c466;--gold-deep:#d3ad4d;--ink:#181a17;--muted:#5e6b62;--line:#e7ece8;--bg:#e9f0ec}
        *{margin:0;padding:0;box-sizing:border-box}
        body{font-family:'Poppins',sans-serif;color:var(--ink);background:#fff}
        a{text-decoration:none;color:inherit}
        .pagebanner{position:relative;margin:0;padding-top:clamp(86px,8vw,112px);border-radius:0 0 26px 26px;overflow:hidden;min-height:min(46vh,360px);display:flex;align-items:center;background:#1f2a25 center/cover no-repeat;color:#fff}
        .pagebanner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 70%)}
        .pb-inner{position:relative;z-index:2;padding:0 clamp(28px,5vw,70px)}
        .pagebanner h1{font-family:'Sora',sans-serif;font-size:clamp(32px,4.6vw,56px);font-weight:700;margin-bottom:14px;text-shadow:0 4px 24px rgba(0,0,0,.35)}
        .pb-crumb{font-family:'Sora',sans-serif;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.92)}
        .pb-crumb .sep{color:var(--gold);margin:0 8px}

        .dest-intro{max-width:780px;margin:0 auto;text-align:center;padding:64px clamp(20px,3vw,46px) 10px}
        .dest-intro .sub{font-family:'Sora',sans-serif;color:var(--green);font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase}
        .dest-intro h2{font-family:'Sora',sans-serif;font-size:clamp(28px,3.4vw,44px);font-weight:700;margin:10px 0 16px;letter-spacing:-.5px}
        .dest-intro p{font-size:15px;line-height:1.8;color:var(--muted)}

        .dest-h{max-width:1340px;margin:0 auto;padding:30px clamp(20px,3vw,46px) 0;font-family:'Sora',sans-serif;font-size:22px;font-weight:700;display:flex;align-items:center;gap:14px}
        .dest-h span{flex:0 0 auto}
        .dest-h::after{content:"";flex:1;height:1px;background:var(--line)}
        .dest-grid{max-width:1340px;margin:0 auto;padding:24px clamp(20px,3vw,46px) 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
        .dest-grid:last-of-type{padding-bottom:80px}
        .dest-card{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:3/4;background:#1f2a25;display:flex;align-items:flex-end;color:#fff;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
        .dest-card:hover{transform:translateY(-8px);box-shadow:0 26px 54px rgba(20,40,30,.24)}
        .dest-card::before{content:"";position:absolute;inset:0;z-index:0;background:var(--img) center/cover no-repeat;transition:transform .7s cubic-bezier(.22,1,.36,1)}
        .dest-card:hover::before{transform:scale(1.1)}
        .dest-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.05) 40%,rgba(0,0,0,.78));transition:.3s}
        /* scroll reveal */
        .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
        .reveal.in{opacity:1;transform:none}
        @keyframes floatUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
        .pb-inner{animation:floatUp .8s ease both}
        .dest-card:hover::after{background:linear-gradient(180deg,rgba(47,100,80,.2),rgba(0,0,0,.4) 40%,rgba(0,0,0,.85))}
        .dest-card .body{position:relative;z-index:2;padding:24px;width:100%;transition:.3s}
        .dest-card .cnt{display:inline-block;font-family:'Sora',sans-serif;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;background:var(--gold);color:#1d2a22;padding:5px 12px;border-radius:20px;margin-bottom:12px}
        .dest-card h3{font-family:'Sora',sans-serif;font-size:22px;font-weight:700;line-height:1.2;margin-bottom:6px}
        .dest-card p{font-size:13px;line-height:1.5;color:rgba(255,255,255,.85);max-height:0;opacity:0;overflow:hidden;transition:.3s}
        .dest-card:hover p{max-height:80px;opacity:1;margin-top:4px}
        .dest-card .go{position:absolute;top:18px;right:18px;z-index:2;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);display:grid;place-items:center;font-size:14px;border:1px solid rgba(255,255,255,.4);transition:.25s}
        .dest-card:hover .go{background:#fff;color:var(--ink);transform:rotate(45deg)}
        @media(max-width:1100px){.dest-grid{grid-template-columns:repeat(3,1fr)}}
        @media(max-width:760px){.dest-grid{grid-template-columns:repeat(2,1fr)}}
        @media(max-width:480px){.dest-grid{grid-template-columns:1fr}}

        img{max-width:100%;height:auto}
        @media(max-width:1024px){
          .pagebanner{margin:0;padding-top:clamp(74px,12vw,96px);min-height:min(38vh,300px)}
          .dest-intro{padding:48px clamp(16px,3vw,46px) 8px}
          .dest-grid{padding:20px clamp(16px,3vw,46px) 32px;gap:20px}
        }
        @media(max-width:640px){
          .pagebanner{margin:0;padding-top:clamp(74px,12vw,96px);min-height:min(32vh,240px);border-radius:20px}
          .pb-inner{padding:0 22px}
          .pagebanner h1{font-size:clamp(26px,7vw,34px);margin-bottom:10px}
          .pb-crumb{font-size:11px;letter-spacing:1px}
          .dest-intro{padding:36px 16px 4px}
          .dest-intro h2{font-size:clamp(24px,6.5vw,32px)}
          .dest-h{padding:26px 16px 0;font-size:19px}
          .dest-grid{grid-template-columns:repeat(2,1fr);gap:16px;padding:18px 16px 28px}
          .dest-grid:last-of-type{padding-bottom:56px}
          .dest-card .body{padding:16px}
          .dest-card h3{font-size:18px}
          /* reveal captions on tap-free mobile */
          .dest-card p{max-height:80px;opacity:1;margin-top:4px}
        }
        @media(max-width:400px){
          .dest-grid{grid-template-columns:1fr;gap:16px}
          .dest-card{aspect-ratio:16/11}
        }

        /* ===== mobile polish (appended) ===== */
        img,iframe{max-width:100%;height:auto}
        html,body{max-width:100%;overflow-x:hidden}
        @media(max-width:640px){
          /* card grid -> horizontal snap-scroll carousel */
          .dest-grid{display:flex;grid-template-columns:none;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;gap:16px;padding:18px 16px 24px}
          .dest-grid:last-of-type{padding-bottom:48px}
          .dest-card{flex:0 0 82%;max-width:82%;scroll-snap-align:start;aspect-ratio:3/4}
          .dest-card .go{width:44px;height:44px}
        }
        @media(max-width:480px){
          .dest-card{flex:0 0 86%;max-width:86%;aspect-ratio:3/4}
        }
        @media(max-width:400px){
          .dest-grid{display:flex;grid-template-columns:none}
          .dest-card{aspect-ratio:3/4}
        }