/* ==========================================================================
   Trip Nepal - We Plan It Better
   Home page stylesheet
   ========================================================================== */

:root{
  --navy:#0d2c54;
  --navy-2:#123f78;
  --navy-3:#0a2547;
  --blue:#1a5296;
  --blue-soft:#e8f1fa;
  --red:#e11f26;
  --red-2:#c4161c;
  --green:#1f9e4a;
  --purple:#8b3fb5;
  --orange:#f08019;
  --text:#465768;
  --muted:#8a97a5;
  --line:#e3eaf2;
  --bg:#ffffff;
  --bg-soft:#f5f9fd;
  --shadow-sm:0 2px 10px rgba(13,44,84,.07);
  --shadow:0 8px 26px rgba(13,44,84,.10);
  --shadow-lg:0 18px 46px rgba(13,44,84,.16);
  --ff:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-script:"Dancing Script","Segoe Script",cursive;
  --ff-display:"Oswald","Poppins",sans-serif;
  /* page shell width - widened in tiers at the bottom of this file so big
     desktops use their space instead of showing 300px of white either side */
  --shell:1290px;
  --wa:#25d366;
  --wa-2:#128c7e;
}

/* ---------- reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:var(--ff);
  font-size:15px;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
h1,h2,h3,h4,h5{color:var(--navy);line-height:1.25;font-weight:700}

.container{width:100%;max-width:var(--shell);margin:0 auto;padding:0 25px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:14px;font-weight:600;letter-spacing:.2px;
  padding:13px 26px;border-radius:6px;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease;
  white-space:nowrap;
}
.btn i{font-size:12px;transition:transform .25s ease}
.btn:hover{transform:translateY(-3px)}
.btn:hover i{transform:translateX(4px)}

.btn-navy{background:var(--navy);color:#fff;box-shadow:0 6px 18px rgba(13,44,84,.28)}
.btn-navy:hover{background:var(--navy-2);box-shadow:0 12px 26px rgba(13,44,84,.34)}

.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(225,31,38,.26)}
.btn-red:hover{background:var(--red-2);box-shadow:0 12px 26px rgba(225,31,38,.34)}

.btn-outline{background:#fff;color:var(--navy);border:1px solid #cfdcea}
.btn-outline:hover{border-color:var(--navy);box-shadow:var(--shadow)}

.btn-ghost{
  background:#fff;color:var(--navy);border:1px solid var(--line);
  font-size:12.5px;font-weight:600;padding:9px 18px;border-radius:6px;
  display:inline-flex;align-items:center;gap:8px;
  transition:.25s ease;
}
.btn-ghost i{font-size:10px;transition:transform .25s ease}
.btn-ghost:hover{color:var(--red);border-color:var(--red);box-shadow:var(--shadow-sm)}
.btn-ghost:hover i{transform:translateX(3px)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{position:fixed;inset:0 0 auto 0;z-index:120;transition:background .35s ease,box-shadow .35s ease}
.site-header.scrolled{background:rgba(255,255,255,.97);box-shadow:0 4px 24px rgba(13,44,84,.12);backdrop-filter:blur(10px)}
.header-inner{display:flex;align-items:center;gap:26px;max-width:calc(var(--shell) + 150px);margin:0 auto;padding:8px 26px}

.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo-mark{width:92px;height:92px;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.07) contrast(1.04);transition:width .35s ease,height .35s ease}
.logo-text{line-height:1}
.logo-title{font-size:31px;font-weight:800;letter-spacing:-.4px;color:var(--navy);white-space:nowrap}
.logo-title span{color:var(--red)}
.logo-tag{font-family:var(--ff-script);font-size:19px;font-weight:600;color:var(--blue);margin-top:2px;display:block}
/* only shrink the logo where it starts big. Below 993px the logo is already
   52-58px, so this rule made the header GROW on scroll and shove the page
   down - which reads as the nav jumping about. */
@media (min-width:993px){
  .site-header.scrolled .logo-mark{width:62px;height:62px}
}

.header-right{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}

/* contact strip */
/* right aligned, not centred: the nav strip and the plan button below are
   flush to the right edge, so centring this row left a wide dead gap above
   the button. Hidden entirely below 993px. */
.topbar{display:flex;align-items:center;justify-content:flex-end;gap:36px;flex-wrap:wrap}
.topbar-item{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;color:var(--navy);transition:color .25s ease}
.topbar-item:hover{color:var(--red)}
.topbar-item .ic{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:#dbeafb;color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:11px;
  transition:.25s ease;
}
.topbar-item:hover .ic{background:var(--red);color:#fff;transform:translateY(-2px)}
/* the top bar carries a short form of the address on one line - the full
   address is in the footer, on the contact page and in the link title */
.topbar-item .txt{max-width:none;white-space:nowrap}

/* nav */
.main-nav{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.nav-list{display:flex;align-items:center;gap:2px}
.nav-list>li{position:relative}
.nav-list>li>a{
  display:flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:500;color:var(--navy);
  padding:14px 15px;position:relative;transition:color .25s ease;
  white-space:nowrap;
}
.nav-list>li>a i{font-size:9px;transition:transform .3s ease}
.nav-list>li>a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:8px;height:2.5px;
  background:var(--red);border-radius:2px;
  transform:scaleX(0);transform-origin:center;transition:transform .3s ease;
}
.nav-list>li.active>a::after,.nav-list>li:hover>a::after{transform:scaleX(1)}
.nav-list>li:hover>a{color:var(--red)}
.nav-list>li:hover>a i{transform:rotate(180deg)}

.dropdown{
  position:absolute;top:100%;left:6px;min-width:212px;
  background:#fff;border-radius:10px;box-shadow:var(--shadow-lg);
  padding:8px;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s;
}
.nav-list>li:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{
  display:block;padding:9px 14px;font-size:13px;font-weight:500;color:var(--navy);
  border-radius:6px;transition:.2s ease;
}
.dropdown a:hover{background:var(--blue-soft);color:var(--red);padding-left:20px}

/* category rows carry their theme icon; the last row goes to the full listing */
.dropdown a .dd-ic{
  width:17px;margin-right:9px;text-align:center;
  font-size:12px;color:var(--blue);transition:color .2s ease;
}
.dropdown a:hover .dd-ic{color:var(--red)}
.dropdown a.dd-all{
  margin-top:5px;padding-top:11px;border-top:1px solid var(--line);
  border-radius:0 0 6px 6px;
  font-size:12px;font-weight:700;color:var(--blue);
}
.dropdown a.dd-all i{font-size:10px;margin-left:5px;transition:transform .25s ease}
.dropdown a.dd-all:hover{background:transparent;color:var(--red);padding-left:14px}
.dropdown a.dd-all:hover i{transform:translateX(4px)}

.btn-plan{
  background:var(--navy);color:#fff;font-size:13.5px;font-weight:600;
  padding:13px 22px;border-radius:6px;display:inline-flex;align-items:center;gap:10px;
  box-shadow:0 6px 18px rgba(13,44,84,.25);transition:.3s ease;white-space:nowrap;
}
.btn-plan i{font-size:13px;transition:transform .35s ease}
.btn-plan:hover{background:var(--red);box-shadow:0 10px 24px rgba(225,31,38,.32);transform:translateY(-2px)}
.btn-plan:hover i{transform:translateX(5px) rotate(-12deg)}

.nav-toggle{display:none;width:44px;height:44px;border-radius:8px;background:#fff;color:var(--navy);font-size:19px;box-shadow:var(--shadow-sm)}

/* ---------- inner pages : solid white bar with a navy nav strip ----------
   (rendered by js/header.js - the home page uses js/header-home.js)        */
.site-header.inner{background:#fff;box-shadow:0 3px 18px rgba(13,44,84,.10)}
.site-header.inner.scrolled{background:#fff;box-shadow:0 4px 24px rgba(13,44,84,.14)}

@media (min-width:993px){
  .site-header.inner .main-nav{
    /* align-self keeps the navy strip only as wide as the tabs it holds -
       stretched it filled the whole row and showed a block of empty blue
       to the left of Home */
    align-self:flex-end;
    background:var(--navy);border-radius:8px;gap:0;padding-left:10px;
    box-shadow:0 8px 22px rgba(13,44,84,.20);
  }
  .site-header.inner .nav-list>li>a{color:#fff;padding:14px 15px}
  .site-header.inner .nav-list>li>a::after{background:#ff4a50;bottom:7px}
  .site-header.inner .nav-list>li:hover>a,
  .site-header.inner .nav-list>li.active>a{color:#ff4a50}
  .site-header.inner .btn-plan{
    align-self:stretch;margin-left:12px;
    background:var(--red);border-radius:0 8px 8px 0;box-shadow:none;
  }
  .site-header.inner .btn-plan:hover{background:var(--red-2);transform:none;box-shadow:none}
  .site-header.inner .btn-plan:hover i{transform:translateX(5px) rotate(-12deg)}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:740px;
  padding:214px 0 128px;
  overflow:hidden;
  background:linear-gradient(180deg,#bcdcf4 0%,#dff0fb 55%,#f4fafd 100%);
}
.hero-bg{position:absolute;inset:0;z-index:1}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,.05) 30%,rgba(255,255,255,0) 60%);
}
.hero-stupa{position:absolute;right:-3%;bottom:0;top:40px;width:50%;z-index:2;pointer-events:none}
.hero-stupa img{
  width:100%;height:100%;object-fit:cover;object-position:50% 55%;
  -webkit-mask-image:linear-gradient(96deg,transparent 0%,rgba(0,0,0,.12) 18%,rgba(0,0,0,.55) 34%,#000 52%);
  mask-image:linear-gradient(96deg,transparent 0%,rgba(0,0,0,.12) 18%,rgba(0,0,0,.55) 34%,#000 52%);
}

/* white veil that keeps the left half readable, exactly like the layout */
.hero-veil{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(97deg,
    rgba(255,255,255,.99) 0%,
    rgba(255,255,255,.97) 20%,
    rgba(255,255,255,.88) 31%,
    rgba(255,255,255,.55) 40%,
    rgba(255,255,255,.16) 50%,
    rgba(255,255,255,0) 62%);
}

/* clouds */
.hero-clouds{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.hero-clouds img{position:absolute;will-change:transform}
.cloud-a{top:5%;left:-9%;width:300px;opacity:.85}
.cloud-b{top:23%;left:33%;width:210px;opacity:.55}
.cloud-c{top:3%;right:11%;width:270px;opacity:.5}
.cloud-d{top:47%;left:-5%;width:230px;opacity:.4}
.cloud-e{top:60%;right:-5%;width:260px;opacity:.35}

/* prayer flag garlands (drawn by JS) */
.flag-line{position:absolute;z-index:4;pointer-events:none}
.flag-line svg{overflow:visible;width:100%;height:100%}
.flag-1{top:104px;right:-8%;width:70%;height:300px;opacity:.95}
.flag-2{top:206px;right:20%;width:50%;height:250px;opacity:.8}

/* plane route */
.hero-route{position:absolute;left:26%;top:152px;width:38%;height:170px;z-index:7;pointer-events:none}
.hero-route svg{width:100%;height:100%;overflow:visible}
.route-path{fill:none;stroke:#0d2c54;stroke-width:2;stroke-linecap:round;stroke-dasharray:2 9;opacity:.42}
.route-plane{fill:#0d2c54}

.hero-inner{position:relative;z-index:8}
.hero-copy{max-width:560px}
.hero-script{
  font-family:var(--ff-script);font-size:42px;font-weight:600;color:var(--blue);
  line-height:1;margin-bottom:2px;display:block;
}
.hero-title{font-family:var(--ff-display);line-height:.94;margin-bottom:14px;text-transform:uppercase}
.hero-title .l1{display:block;font-size:86px;font-weight:700;letter-spacing:.5px;color:var(--navy)}
.hero-title .l2{display:block;font-size:116px;font-weight:700;letter-spacing:1px;color:var(--red)}
.hero-divider{display:flex;align-items:center;gap:10px;margin:4px 0 22px;max-width:250px}
.hero-divider .bar{height:3px;flex:1;background:var(--red);border-radius:3px}
.hero-divider i{color:var(--red);font-size:15px}
.hero-text{font-size:15px;color:#3d4e60;max-width:480px;margin-bottom:26px;line-height:1.75}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}

.hero-wave{position:absolute;left:0;right:0;bottom:-1px;z-index:7;line-height:0}
.hero-wave svg{width:100%;height:80px;display:block}

/* ==========================================================================
   SEARCH BAR
   ========================================================================== */
.search-wrap{position:relative;z-index:20;margin-top:-58px}
.search-bar{
  background:#fff;border-radius:14px;box-shadow:0 14px 40px rgba(13,44,84,.14);
  display:flex;align-items:stretch;padding:10px 10px 10px 6px;
}
.search-field{flex:1;display:flex;align-items:center;gap:12px;padding:10px 16px;position:relative;min-width:0}
.search-field+.search-field::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:var(--line)}
.search-field>i.lead{color:var(--red);font-size:17px;flex-shrink:0}
.search-field .fbody{flex:1;min-width:0}
.search-field label{display:block;font-size:11.5px;color:var(--muted);font-weight:500;line-height:1.3}
.search-field select{
  width:100%;border:none;outline:none;background:transparent;
  font-size:14px;font-weight:600;color:var(--navy);cursor:pointer;
  appearance:none;-webkit-appearance:none;padding-right:16px;
}
.search-field .caret{position:absolute;right:14px;top:52%;transform:translateY(-50%);color:#9fb0c2;font-size:11px;pointer-events:none}
.btn-search{
  background:var(--red);color:#fff;font-size:14.5px;font-weight:600;
  padding:0 30px;border-radius:9px;display:inline-flex;align-items:center;gap:11px;
  box-shadow:0 8px 20px rgba(225,31,38,.28);transition:.3s ease;flex-shrink:0;
}
.btn-search:hover{background:var(--red-2);transform:translateY(-2px);box-shadow:0 12px 28px rgba(225,31,38,.36)}
.btn-search i{transition:transform .3s ease}
.btn-search:hover i{transform:scale(1.15) rotate(-8deg)}

/* ==========================================================================
   TRUST BAR
   ========================================================================== */
.trust{padding:36px 0 10px}
.trust-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.trust-item{display:flex;align-items:center;gap:13px;padding:8px 10px;position:relative}
.trust-item+.trust-item::before{content:"";position:absolute;left:-5px;top:16%;bottom:16%;width:1px;background:var(--line)}
.trust-item>i{font-size:27px;color:var(--navy-2);flex-shrink:0;transition:transform .35s ease,color .35s ease}
.trust-item:hover>i{transform:translateY(-4px) scale(1.08);color:var(--red)}
.trust-item h4{font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.35}
.trust-item p{font-size:11.5px;color:var(--muted);line-height:1.4}

/* ==========================================================================
   SECTION HEADINGS
   ========================================================================== */
.section{padding:20px 0}
.section-head{position:relative;text-align:center;margin-bottom:22px}
.section-title{
  font-size:29px;font-weight:700;letter-spacing:.6px;color:var(--blue);
  text-transform:uppercase;
}
.title-deco{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:7px}
.title-deco .bar{width:44px;height:2px;background:var(--red);border-radius:2px}
.title-deco i{color:var(--red);font-size:13px}
.head-action{position:absolute;right:0;top:2px}

/* let card lift + reveal breathe without being clipped by the track */
.dest-slider .swiper,.pkg-slider .swiper{overflow:hidden;padding:14px 0 26px;margin:-14px 0 -22px}
@supports (overflow-clip-margin:44px){
  .dest-slider .swiper,.pkg-slider .swiper{overflow:clip;overflow-clip-margin:46px;padding:0;margin:0}
}

/* ==========================================================================
   DESTINATIONS
   ========================================================================== */
.dest-slider{position:relative;padding:0 4px}
.dest-card{
  position:relative;border-radius:10px;overflow:hidden;height:240px;
  box-shadow:var(--shadow-sm);display:block;
  transition:transform .4s ease,box-shadow .4s ease;
}
.dest-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.dest-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,20,38,0) 38%,rgba(6,20,38,.28) 58%,rgba(6,20,38,.88) 100%);
  transition:background .4s ease;
}
.dest-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.dest-card:hover img{transform:scale(1.12)}
.dest-info{position:absolute;left:13px;right:13px;bottom:12px;z-index:2}
.dest-info h3{
  display:flex;align-items:center;gap:6px;
  color:#fff;font-size:14.5px;font-weight:600;line-height:1.3;
}
.dest-info h3 i{font-size:12px}
.dest-info p{color:rgba(255,255,255,.82);font-size:11.5px;line-height:1.4;margin-top:1px}

/* slider arrows */
.nav-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:15;
  width:38px;height:38px;border-radius:50%;
  background:#fff;color:var(--navy);font-size:14px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(13,44,84,.18);
  transition:.28s ease;cursor:pointer;
}
.nav-arrow:hover{background:var(--red);color:#fff;box-shadow:0 8px 22px rgba(225,31,38,.35)}
.nav-arrow.prev{left:-30px}
.nav-arrow.next{right:-30px}
.nav-arrow.swiper-button-disabled{opacity:.35;cursor:default}
.nav-arrow.swiper-button-disabled:hover{background:#fff;color:var(--navy)}

/* ==========================================================================
   PACKAGES
   ========================================================================== */
.pkg-slider{position:relative;padding:6px 4px 4px}
.pkg-card{
  background:#fff;border-radius:10px;overflow:hidden;
  box-shadow:var(--shadow-sm);border:1px solid #eef3f8;
  transition:transform .4s ease,box-shadow .4s ease;
  height:100%;display:flex;flex-direction:column;
}
.pkg-card:hover{transform:translateY(-9px);box-shadow:var(--shadow-lg)}
.pkg-media{position:relative;height:185px;overflow:hidden}
.pkg-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.pkg-card:hover .pkg-media img{transform:scale(1.1)}
.pkg-badge{
  position:absolute;top:0;left:0;
  font-size:11.5px;font-weight:600;color:#fff;
  padding:5px 12px;border-radius:0 0 8px 0;
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.pkg-badge.seller{background:var(--red)}
.pkg-badge.popular{background:var(--green)}
.pkg-badge.spiritual{background:var(--purple)}
.pkg-badge.adventure{background:var(--orange)}
.pkg-body{padding:13px 15px 15px;display:flex;flex-direction:column;flex:1}
.pkg-body h3{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:6px}
.pkg-duration{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-bottom:10px}
.pkg-duration i{font-size:12px;color:var(--muted)}
.pkg-tags{display:flex;flex-wrap:wrap;gap:16px;padding-bottom:12px;margin-bottom:11px;border-bottom:1px solid var(--line)}
.pkg-tags span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#5b6b7c;font-weight:500}
.pkg-tags span i{color:var(--red);font-size:11px}
.pkg-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.pkg-price strong{display:block;font-size:19px;font-weight:700;color:var(--navy);line-height:1.2}
.pkg-price small{font-size:10.5px;color:var(--muted)}
.pkg-foot .btn-red{font-size:12px;padding:9px 15px;border-radius:5px}
.pkg-foot .btn-red i{font-size:10px}

/* ==========================================================================
   STATS
   ========================================================================== */
.stats{position:relative;overflow:hidden;background:linear-gradient(180deg,#154781 0%,#0d2c54 100%);padding:20px 0;margin-top:20px}
.stats-mountains{position:absolute;left:0;right:0;bottom:0;line-height:0;opacity:.07}
.stats-mountains svg{width:100%;height:66px;display:block}
.stats-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.stat{display:flex;align-items:center;justify-content:center;gap:14px;position:relative}
.stat>i{font-size:30px;color:rgba(255,255,255,.86);transition:transform .35s ease}
.stat:hover>i{transform:translateY(-4px) scale(1.1)}
.stat b{display:block;font-size:29px;font-weight:700;color:#fff;line-height:1.1}
/* only the caption span - never the counter that lives inside <b> */
.stat>div>span{display:block;font-size:12.5px;color:rgba(255,255,255,.78);font-weight:400}

/* ==========================================================================
   WHY / TESTIMONIAL / GALLERY
   ========================================================================== */
.trio{position:relative;background:var(--bg-soft);padding:30px 0 34px;overflow:hidden}
.trio-art{position:absolute;inset:0;opacity:.34;pointer-events:none}
.trio-art svg{position:absolute;bottom:0;width:100%;height:190px}
.trio-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.15fr 1.6fr;gap:32px}
/* min-width:0 stops Swiper's inline slide width from inflating a grid track */
.trio-col{min-width:0}
.trio-title{
  font-size:19px;font-weight:700;color:var(--blue);text-transform:uppercase;
  letter-spacing:.4px;margin-bottom:6px;
}
.trio-deco{display:flex;align-items:center;gap:7px;margin-bottom:18px}
.trio-deco .bar{width:30px;height:2px;background:var(--red);border-radius:2px}
.trio-deco i{color:var(--red);font-size:11px}
.trio-col.center{border-left:1px solid #e0e8f0;border-right:1px solid #e0e8f0;padding:0 30px}

/* why list */
.why-list li{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;color:#4a5b6d;margin-bottom:11px}
.why-list li i{color:var(--red);font-size:12px;margin-top:5px;flex-shrink:0}
.why-list li span{transition:transform .3s ease}
.why-list li:hover span{transform:translateX(4px)}
.trio-col .btn-red{margin-top:14px;font-size:12.5px;padding:11px 20px;border-radius:5px}

/* testimonial */
.quote-mark{font-size:36px;color:#c9d8e8;line-height:.8;margin-bottom:6px}
.testi-swiper{overflow:hidden;width:100%;min-width:0}
.testi-text{font-size:13px;color:#5b6b7c;line-height:1.85;margin-bottom:12px}
.testi-stars{display:flex;gap:3px;color:#f5a623;font-size:13px;margin-bottom:8px}
.testi-name{font-size:12.5px;font-weight:600;color:var(--navy)}
.testi-dots{display:flex;justify-content:center;gap:7px;margin-top:16px}
.testi-dots .swiper-pagination-bullet{
  width:7px;height:7px;border-radius:50%;background:#c6d3e0;opacity:1;
  transition:.3s ease;margin:0!important;
}
.testi-dots .swiper-pagination-bullet-active{background:var(--red);width:20px;border-radius:4px}

/* gallery */
.gal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.gal-item{
  position:relative;border-radius:7px;overflow:hidden;height:74px;display:block;
  box-shadow:var(--shadow-sm);
}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.gal-item::after{
  content:"";position:absolute;inset:0;background:rgba(13,44,84,0);
  transition:background .35s ease;
}
.gal-item:hover img{transform:scale(1.16)}
.gal-item:hover::after{background:rgba(13,44,84,.35)}
.gal-item .zoom{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:15px;opacity:0;transform:scale(.6);
  transition:opacity .35s ease,transform .35s ease;
}
.gal-item:hover .zoom{opacity:1;transform:scale(1)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{position:relative;overflow:hidden;background:linear-gradient(180deg,#0f3363 0%,#0a2244 100%);color:rgba(255,255,255,.72);padding:44px 0 0}
.footer-art{position:absolute;right:0;bottom:38px;width:340px;opacity:.14;pointer-events:none}
.footer-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.4fr;gap:30px;padding-bottom:34px}
.f-brand{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.f-brand img{width:66px;height:66px;object-fit:contain;border-radius:50%;background:#fff;padding:3px}
.f-brand .logo-title{color:#fff;font-size:24px}
.f-brand .logo-tag{color:#9dc4ea;font-size:16px}
.f-about{font-size:12.5px;line-height:1.8;max-width:290px;margin-bottom:16px}
.f-social{display:flex;gap:9px}
.f-social a{
  width:33px;height:33px;border-radius:50%;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;
  transition:.3s ease;
}
.f-social a:hover{background:var(--red);transform:translateY(-4px)}
.f-title{
  font-size:13.5px;font-weight:600;color:#fff;text-transform:uppercase;
  letter-spacing:.7px;margin-bottom:15px;position:relative;padding-bottom:9px;
}
.f-title::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--red);border-radius:2px}
.f-links li{margin-bottom:8px}
.f-links a{font-size:12.5px;transition:.25s ease;display:inline-block}
.f-links a:hover{color:#fff;transform:translateX(5px)}
.f-contact li{display:flex;align-items:flex-start;gap:11px;font-size:12.5px;line-height:1.7;margin-bottom:13px}
.f-contact li i{color:#7fb0e0;font-size:13px;margin-top:4px;flex-shrink:0}
.f-contact a:hover{color:#fff}
.footer-bottom{
  position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.1);
  padding:14px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12px;
}
.footer-bottom b{color:#fff;font-weight:600}

/* design credit, sits at the right end of the bottom strip */
.f-credit{color:rgba(255,255,255,.66)}
.f-credit a{color:#fff;font-weight:600;position:relative;transition:color .25s ease}
.f-credit a:hover{color:#ff8f93}
.f-credit a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.22,.85,.28,1);
}
.f-credit a:hover::after{transform:scaleX(1)}

/* legal links in the bottom bar */
.f-legal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.f-legal a{position:relative;color:rgba(255,255,255,.72);transition:color .25s ease}
.f-legal a:hover{color:#fff}
.f-legal a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.22,.85,.28,1);
}
.f-legal a:hover::after{transform:scaleX(1)}

/* back to top */
.to-top{
  position:fixed;right:22px;bottom:22px;z-index:110;
  width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(225,31,38,.4);
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:.35s ease;
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--navy);transform:translateY(-4px)}

/* ==========================================================================
   MOBILE-ONLY ELEMENTS - hidden on desktop, switched on in the media queries
   ========================================================================== */
.d-mob,.mob-only,.hdr-call,.hero-dots,.slider-dots,.action-bar{display:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1280px){
  .hero-title .l1{font-size:70px}
  .hero-title .l2{font-size:94px}
  .topbar{gap:22px}
  .topbar-item{font-size:11.5px}
  .nav-list>li>a{padding:13px 11px;font-size:13px}
}

@media (max-width:1100px){
  .header-inner{padding:8px 18px}
  .logo-mark{width:74px;height:74px}
  .logo-title{font-size:26px}
  .logo-tag{font-size:16px}
  .topbar-item .txt{max-width:210px;white-space:normal}
  .trio-grid{grid-template-columns:1fr 1fr;gap:28px}
  .trio-col.center{border-right:none;padding-right:0}
  .trio-col.gallery{grid-column:1 / -1;border-top:1px solid #e0e8f0;padding-top:26px}
  .gal-item{height:110px}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:26px}
}

/* ==========================================================================
   MOBILE LAYOUT  (<= 992px)  - follows the mobile design
   ========================================================================== */
@media (max-width:992px){

  .d-desk{display:none}
  .d-mob{display:inline}
  .mob-only{display:flex}
  body{padding-bottom:66px}

  /* ---------- header ---------- */
  .site-header{background:#fff;box-shadow:0 2px 14px rgba(13,44,84,.10)}
  .header-inner{align-items:center;gap:10px;padding:8px 14px}
  .logo-mark{width:58px;height:58px}
  .logo-title{font-size:21px}
  .logo-tag{font-size:14px;margin-top:1px}
  .header-right{flex:1;flex-direction:row;align-items:center;justify-content:flex-end;gap:10px}
  .topbar{display:none}

  .hdr-call{
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    width:40px;height:40px;border-radius:50%;
    background:var(--red);color:#fff;font-size:15px;
    box-shadow:0 5px 14px rgba(225,31,38,.32);
  }
  .nav-toggle{display:flex;align-items:center;justify-content:center;box-shadow:none;color:var(--navy)}

  /* drawer */
  .main-nav{
    position:fixed;top:0;right:0;bottom:0;width:300px;max-width:86vw;
    background:#fff;box-shadow:-8px 0 40px rgba(13,44,84,.18);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    padding:80px 22px 30px;gap:8px;z-index:130;
    transform:translateX(105%);transition:transform .4s cubic-bezier(.6,.05,.2,1);
    overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0)}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list>li>a{padding:12px 4px;font-size:14px;justify-content:space-between}
  .nav-list>li>a::after{display:none}
  .nav-list>li+li{border-top:1px solid var(--line)}
  .dropdown{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;padding:0 0 8px 12px;display:none;min-width:0;
  }
  .nav-list>li.open .dropdown{display:block}
  .btn-plan{margin-top:14px;justify-content:center}
  .nav-backdrop{
    /* must sit BELOW the header (z-index:120). The header is its own stacking
       context, so the drawer's z-index:130 only counts inside it - a backdrop
       at 125 painted over the whole header and swallowed every tap on the
       menu. 118 keeps it above the page, the action bar and the float buttons. */
    position:fixed;inset:0;background:rgba(10,34,68,.5);z-index:118;
    opacity:0;visibility:hidden;transition:.35s ease;
  }
  .nav-backdrop.show{opacity:1;visibility:visible}

  /* ---------- hero : dark photo, white type ---------- */
  .hero{min-height:0;padding:106px 0 58px;background:#0a2244}
  .hero-bg img{object-position:50% 40%}
  .hero-bg::after{display:none}
  .hero-stupa,.hero-route,.flag-2,.hero-wave{display:none}
  .hero-clouds{opacity:.4}
  .flag-1{top:58px;right:-10%;width:98%;height:250px;opacity:.9}

  /* the veil becomes the dark scrim from the mobile layout */
  .hero-veil{
    background:linear-gradient(180deg,
      rgba(6,20,40,.55) 0%,
      rgba(6,20,40,.30) 26%,
      rgba(6,20,40,.62) 60%,
      rgba(6,20,40,.92) 100%);
  }

  .hero-copy{max-width:none}
  .hero-script{font-size:29px;color:#fff}
  .hero-title .l1{font-size:44px;color:#fff}
  .hero-title .l2{font-size:52px;color:var(--red)}
  .hero-divider{max-width:170px;margin:6px 0 16px}
  .hero-text{font-size:13.5px;color:rgba(255,255,255,.9);max-width:none;margin-bottom:22px}
  .hero-text br{display:none}
  .hero-actions{flex-direction:column;align-items:stretch;gap:12px}
  .hero-actions .btn{justify-content:center;padding:14px 22px;font-size:14px}
  .hero-cta-1{background:var(--red);box-shadow:0 8px 20px rgba(225,31,38,.34)}
  .hero-cta-1:hover{background:var(--red-2)}
  .hero-cta-2{background:#fff;border-color:#fff;color:var(--navy)}

  .hero-dots{display:flex;justify-content:center;gap:7px;margin-top:22px}
  .hero-dots span{
    width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);
    cursor:pointer;transition:.3s ease;
  }
  .hero-dots span.on{background:var(--red);width:22px;border-radius:4px}

  /* ---------- search card ---------- */
  .search-wrap{margin-top:-40px}
  .search-bar{
    flex-wrap:wrap;border-radius:14px;padding:14px;gap:10px;
    box-shadow:0 12px 34px rgba(13,44,84,.16);
  }
  .search-field{
    flex:1 1 calc(50% - 5px);min-width:0;margin:0;padding:9px 10px;gap:9px;
    border:1px solid var(--line);border-radius:9px;
  }
  .search-field+.search-field::before{display:none}
  .search-field>i.lead{font-size:15px}
  .search-field label{font-size:10.5px}
  .search-field select{font-size:12.5px;padding-right:12px}
  .search-field .caret{right:9px;font-size:9px}

  .btn-search{
    flex:1 1 100%;background:var(--navy);border-radius:9px;
    padding:8px 8px 8px 24px;justify-content:space-between;font-size:15px;
    box-shadow:0 8px 20px rgba(13,44,84,.26);
  }
  .btn-search:hover{background:var(--navy-2)}
  .btn-search i{
    width:38px;height:38px;border-radius:50%;background:var(--red);
    display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;
  }

  /* ---------- trust : 3 x 2 icon tiles ---------- */
  .trust{padding:26px 0 6px}
  .trust-grid{grid-template-columns:repeat(3,1fr);gap:0}
  .trust-item{
    flex-direction:column;align-items:center;text-align:center;gap:8px;
    padding:16px 8px;
  }
  .trust-item+.trust-item::before{
    left:0;top:18%;bottom:18%;
    display:block;
  }
  .trust-grid>.trust-item:nth-child(3n+1)::before{display:none}
  .trust-grid>.trust-item:nth-child(n+4){border-top:1px solid var(--line)}
  .trust-item>i{font-size:26px;color:var(--navy-2)}
  .trust-item h4{font-size:12.5px;line-height:1.35}
  .trust-item p{font-size:10.5px;color:var(--muted)}

  /* ---------- section heads : left aligned + View All ---------- */
  .section{padding:22px 0}
  .section-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    text-align:left;margin-bottom:16px;
  }
  .section-title{font-size:19px;letter-spacing:.3px;flex:1;min-width:0}
  .title-deco{justify-content:flex-start;margin-top:5px;position:absolute;left:0;top:100%}
  .title-deco .bar{width:26px}
  .head-action{position:static;flex-shrink:0}
  .btn-ghost{font-size:11.5px;padding:8px 14px}
  .section-head{padding-bottom:12px}

  /* ---------- sliders ---------- */
  .dest-card{height:205px;border-radius:9px}
  .dest-info h3{font-size:13px}
  .dest-info p{font-size:10.5px}

  .nav-arrow{width:34px;height:34px;font-size:12px}
  .nav-arrow.prev{left:0}
  .nav-arrow.next{right:0}

  .slider-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
  .slider-dots .swiper-pagination-bullet{
    width:7px;height:7px;border-radius:50%;background:#c6d3e0;opacity:1;
    margin:0!important;transition:.3s ease;
  }
  .slider-dots .swiper-pagination-bullet-active{background:var(--red);width:20px;border-radius:4px}

  /* packages : tags stack, full-width CTA */
  .pkg-media{height:160px}
  .pkg-body{padding:12px 13px 14px}
  .pkg-body h3{font-size:14px}
  .pkg-tags{flex-direction:column;gap:7px}
  .pkg-foot{flex-direction:column;align-items:stretch;gap:10px}
  .pkg-price strong{font-size:17px}
  .pkg-foot .btn-red{justify-content:space-between;padding:10px 14px;font-size:12.5px}

  /* ---------- stats : 4 tiles, icon above ---------- */
  .stats{padding:22px 0;margin-top:16px}
  .stats-grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .stat{flex-direction:column;gap:7px;text-align:center}
  .stat.stat-years{display:none}
  .stat>i{font-size:25px}
  .stat b{font-size:21px}
  .stat>div>span{font-size:10.5px;line-height:1.35}

  /* ---------- trio : stacked ---------- */
  .trio{padding:26px 0 30px}
  .trio-grid{grid-template-columns:1fr;gap:30px}
  .trio-col.center,.trio-col.gallery{border:none;padding:0;grid-column:auto}
  .trio-title{font-size:17px}
  .trio-deco{margin-bottom:16px}
  .why-list li{font-size:13px;align-items:center;gap:10px}
  .why-list li i{
    width:19px;height:19px;border-radius:50%;background:var(--red);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:9px;margin-top:0;
  }

  /* testimonial sits in a white card */
  .testi-card{
    background:#fff;border-radius:12px;padding:20px 18px 16px;
    box-shadow:var(--shadow);text-align:center;
  }
  .testi-card .quote-mark{text-align:left;font-size:32px;margin-bottom:4px}
  .testi-text{font-size:13px}
  .testi-stars{justify-content:center;font-size:15px;gap:4px}
  .testi-name{font-size:12.5px}

  .gal-head{align-items:center;gap:10px}
  .gal-head .trio-deco{margin-bottom:0}
  .gal-head .trio-title{font-size:16px}
  .gal-head .btn-ghost{white-space:nowrap;flex-shrink:0;padding:8px 12px}
  .gal-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .gal-item{height:88px;border-radius:9px}
  .gal-item:nth-child(n+7){display:none}

  /* ---------- footer ---------- */
  .site-footer{padding:34px 0 0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px;padding-bottom:26px}
  .footer-grid>div:first-child{grid-column:1 / -1}
  .f-brand .logo-title{font-size:22px}
  .f-about{max-width:none}
  .footer-art{width:230px;bottom:60px}
  .footer-bottom{justify-content:center;text-align:center;gap:8px;font-size:11.5px}
  .f-legal{justify-content:center;gap:6px 14px;order:3}

  /* ---------- bottom action bar ---------- */
  .to-top{display:none}
  .action-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:115;
    display:grid;grid-template-columns:repeat(4,1fr);
    background:#fff;box-shadow:0 -3px 18px rgba(13,44,84,.14);
    padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  }
  .action-bar a{
    display:flex;flex-direction:column;align-items:center;gap:5px;
    font-size:11px;font-weight:500;color:var(--navy);
  }
  .ab-ic{
    width:36px;height:36px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:15px;transition:transform .25s ease;
  }
  .action-bar a:active .ab-ic{transform:scale(.9)}
  .ab-ic.call{background:#1668c4}
  .ab-ic.wa{background:#25d366}
  .ab-ic.mail{background:var(--red)}
  .ab-ic.top{background:#fff;color:var(--navy);border:1.5px solid #d5e0ec}
}

@media (max-width:768px){
  .section-title{font-size:17.5px}
  .hero-title .l1{font-size:40px}
  .hero-title .l2{font-size:48px}
  .hero-script{font-size:26px}
  .trust-item h4{font-size:11.5px}
  .stat b{font-size:19px}
  .gal-item{height:78px}
}

@media (max-width:560px){
  .logo-mark{width:52px;height:52px}
  .logo-title{font-size:19px}
  .logo-tag{font-size:13px}
  .hero{padding:96px 0 66px}
  .hero-title .l1{font-size:36px}
  .hero-title .l2{font-size:44px}
  .search-field{flex:1 1 calc(50% - 5px)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:20px}
  .gal-item{height:70px}
  .action-bar a{font-size:10px}
}

@media (max-width:340px){
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid>.trust-item:nth-child(3n+1)::before{display:block}
  .trust-grid>.trust-item:nth-child(2n+1)::before{display:none}
  .trust-grid>.trust-item:nth-child(n+3){border-top:1px solid var(--line)}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .search-field{flex:1 1 100%}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   ==========================================================================
   DESTINATIONS PAGE  (destinations.html)
   Kept in this shared stylesheet on purpose - the site uses ONE css file.
   ==========================================================================
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO - reuses .hero / .hero-bg / .hero-veil / .flag-line from the home
      page and only re-sizes the type and layout for the inner-page header.
   -------------------------------------------------------------------------- */
.dest-hero{min-height:600px;padding:56px 0 132px}
.dest-hero .hero-bg img{object-position:50% 46%}
.dest-hero .flag-1{top:60px;right:-10%;width:62%;height:270px}
.dest-hero .flag-2{top:150px;right:22%;width:44%;height:230px}

.dh-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:46px}
.dh-copy{flex:1 1 auto;min-width:0;max-width:560px}

.dh-eyebrow{display:flex;align-items:center;gap:14px;color:var(--navy);margin-bottom:4px}
.dh-eyebrow .hero-script{margin-bottom:0}
.dh-peaks{width:126px;height:40px;flex-shrink:0;opacity:.9}

.dh-title{margin-bottom:10px}
.dh-title .l1{font-size:54px;letter-spacing:.4px;color:var(--navy)}
.dh-title .l2{font-size:54px;letter-spacing:.6px;color:var(--red)}
.dest-hero .hero-divider{max-width:200px;margin:6px 0 18px}
.dest-hero .hero-text{font-size:14px;max-width:420px;margin-bottom:0}

/* torn snow edge */
.dh-snow{position:absolute;left:0;right:0;bottom:-1px;z-index:7;line-height:0;pointer-events:none}
.dh-snow svg{width:100%;height:92px;display:block}

/* --------------------------------------------------------------------------
   2. FIND YOUR PERFECT DESTINATION panel
   -------------------------------------------------------------------------- */
.dh-search{
  position:relative;z-index:9;flex:0 0 300px;width:300px;
  background:linear-gradient(162deg,rgba(11,34,66,.94) 0%,rgba(8,25,50,.92) 100%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:20px 20px 22px;
  box-shadow:0 26px 60px rgba(5,18,38,.42);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
}
.dhs-title{font-size:15.5px;font-weight:600;color:#fff;margin-bottom:16px;letter-spacing:.2px}
.dhs-field{margin-bottom:14px}
.dhs-field label{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,.8);margin-bottom:7px}

.dhs-input,.dhs-select{position:relative}
.dhs-input input,.dhs-select select{
  width:100%;height:42px;border-radius:7px;border:1px solid #e3eaf2;
  background:#fff;color:var(--navy);font-size:13px;font-weight:500;
  padding:0 40px 0 14px;outline:none;
  transition:border-color .28s ease,box-shadow .28s ease;
}
.dhs-input input::placeholder{color:#9fb0c2;font-weight:400}
.dhs-select select{appearance:none;-webkit-appearance:none;cursor:pointer}
.dhs-input input:focus,.dhs-select select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(225,31,38,.16)}
.dhs-input i,.dhs-select i{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:#8fa2b6;font-size:13px;pointer-events:none;transition:color .28s ease;
}
.dhs-input:focus-within i{color:var(--red)}

.dhs-btn{
  width:100%;height:46px;margin-top:6px;border-radius:7px;
  background:var(--red);color:#fff;font-size:14px;font-weight:600;
  display:flex;align-items:center;justify-content:center;position:relative;
  box-shadow:0 10px 24px rgba(225,31,38,.32);
  transition:background .28s ease,transform .28s ease,box-shadow .28s ease;
}
.dhs-btn span{flex:1;text-align:center}
.dhs-btn i{position:absolute;right:16px;font-size:13px;transition:transform .35s ease}
.dhs-btn:hover{background:var(--red-2);transform:translateY(-2px);box-shadow:0 14px 30px rgba(225,31,38,.4)}
.dhs-btn:hover i{transform:scale(1.16) rotate(-8deg)}
.dhs-btn:active{transform:translateY(0)}

/* --------------------------------------------------------------------------
   3. BROWSE BY THEME / BROWSE BY ACTIVITY bar
   -------------------------------------------------------------------------- */
.dfilter-wrap{position:relative;z-index:20;margin-top:-58px}
.dfilter{
  background:#fff;border-radius:14px;
  box-shadow:0 16px 44px rgba(13,44,84,.14);
  display:grid;grid-template-columns:auto 1px auto;gap:26px;justify-content:space-between;
  padding:15px 24px 10px;align-items:stretch;
}
.dfilter-label{
  display:block;font-size:11px;font-weight:600;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.dfilter-div{background:var(--line);width:1px;border-radius:1px}

.chip-row{display:flex;flex-wrap:wrap;gap:1px}
.fchip{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  min-width:60px;padding:9px 7px 12px;border-radius:9px;
  color:var(--navy);transition:background .3s ease,color .3s ease;
}
.fchip i{font-size:16px;color:var(--navy-2);transition:transform .45s cubic-bezier(.34,1.56,.64,1),color .3s ease}
.fchip span{font-size:10px;font-weight:500;white-space:nowrap;line-height:1.2}
.fchip::after{
  content:"";position:absolute;left:11px;right:11px;bottom:3px;height:2.5px;
  background:var(--red);border-radius:2px;
  transform:scaleX(0);transform-origin:center;transition:transform .35s ease;
}
.fchip:hover{background:var(--blue-soft)}
.fchip:hover i{transform:translateY(-5px) scale(1.14);color:var(--red)}
.fchip.on{color:var(--red)}
.fchip.on i{color:var(--red)}
.fchip.on::after{transform:scaleX(1)}
.fchip.is-extra{display:none}
.chip-row.show-extra .fchip.is-extra{display:flex}
.chip-row.show-extra .fchip-more i{transform:rotate(90deg)}

/* --------------------------------------------------------------------------
   4. DESTINATION CARD GRID
   -------------------------------------------------------------------------- */
.dest-page-sec{padding:26px 0 8px}
.dest-page-head{margin-bottom:26px}

.dcard-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}

.dcard{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .5s cubic-bezier(.22,.85,.28,1),box-shadow .5s ease,border-color .4s ease;
  will-change:transform;
}
/* slight card elevation */
.dcard:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:transparent}

/* accent line that draws across the top on hover */
.dcard::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:8;
  background:linear-gradient(90deg,var(--red) 0%,var(--orange) 48%,var(--blue) 100%);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.22,.85,.28,1);
}
.dcard:hover::before{transform:scaleX(1)}

.dcard-media{position:relative;height:170px;overflow:hidden}

/* smooth image zoom */
.dcard-media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.01);
  transition:transform 1.1s cubic-bezier(.22,.85,.28,1),filter .6s ease;
}
.dcard:hover .dcard-media img{transform:scale(1.17);filter:saturate(1.1)}

/* gradient transition : two stacked gradients cross-fading */
.dcard-grad{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,26,50,0) 34%,rgba(8,26,50,.34) 64%,rgba(8,26,50,.84) 100%);
  transition:opacity .55s ease;
}
.dcard-grad.alt{
  opacity:0;
  background:linear-gradient(180deg,rgba(26,82,150,.10) 0%,rgba(13,44,84,.52) 52%,rgba(180,24,32,.86) 100%);
}
.dcard:hover .dcard-grad.alt{opacity:1}

/* overlay reveal : colour wash that slides up from the bottom edge */
.dcard-veil{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,44,84,0) 0%,rgba(13,44,84,.34) 62%,rgba(13,44,84,.5) 100%);
  opacity:0;transform:translateY(100%);
  transition:transform .6s cubic-bezier(.22,.85,.28,1),opacity .45s ease;
}
.dcard:hover .dcard-veil{opacity:1;transform:translateY(0)}

/* light sweep across the photo */
.dcard-sheen{
  position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:4;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.34) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-16deg);
}
.dcard:hover .dcard-sheen{animation:dsheen .95s cubic-bezier(.3,.7,.4,1) .12s 1}
@keyframes dsheen{from{left:-60%}to{left:130%}}

/* packages badge */
.dcard-badge{
  position:absolute;top:11px;left:11px;z-index:6;
  background:rgba(255,255,255,.95);border-radius:8px;
  padding:5px 10px;text-align:center;line-height:1.15;
  box-shadow:0 6px 16px rgba(13,44,84,.18);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .45s ease;
}
.dcard-badge b{display:block;font-size:12.5px;font-weight:700;color:var(--navy);transition:color .45s ease}
.dcard-badge em{display:block;font-style:normal;font-size:10px;font-weight:500;color:var(--muted);transition:color .45s ease}
.dcard:hover .dcard-badge{transform:translateY(-3px) scale(1.06);background:var(--red)}
.dcard:hover .dcard-badge b{color:#fff}
.dcard:hover .dcard-badge em{color:rgba(255,255,255,.85)}

/* floating icon */
.dcard-float{
  position:absolute;top:12px;right:12px;z-index:7;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--red);color:#fff;font-size:13px;
  box-shadow:0 10px 22px rgba(225,31,38,.42);
  opacity:0;transform:translateY(-16px) scale(.5) rotate(-35deg);
  transition:opacity .35s ease,transform .55s cubic-bezier(.34,1.56,.64,1);
}
.dcard:hover .dcard-float{
  opacity:1;transform:translateY(0) scale(1) rotate(-45deg);
  animation:dfloat 2.6s ease-in-out .6s infinite;
}
@keyframes dfloat{
  0%,100%{transform:translateY(0) scale(1) rotate(-45deg)}
  50%{transform:translateY(-7px) scale(1.06) rotate(-45deg)}
}

/* destination name movement */
.dcard-name{
  position:absolute;left:13px;right:13px;bottom:11px;z-index:6;
  display:flex;align-items:center;gap:7px;
  font-size:14.5px;font-weight:600;color:#fff;
  text-shadow:0 2px 12px rgba(4,16,32,.5);
  transition:transform .5s cubic-bezier(.22,.85,.28,1),letter-spacing .5s ease;
}
.dcard-name i{font-size:12px;color:#fff;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.dcard:hover .dcard-name{transform:translateY(-7px) translateX(5px);letter-spacing:.3px}
.dcard:hover .dcard-name i{transform:translateY(-4px) scale(1.22)}

/* body */
.dcard-body{padding:13px 15px 16px;display:flex;flex-direction:column;flex:1}
.dcard-body p{font-size:11.8px;line-height:1.65;color:#5b6b7c;margin-bottom:11px}
.dcard-body p b{color:var(--navy);font-weight:600}

/* arrow animation */
.dcard-link{
  position:relative;margin-top:auto;width:-moz-fit-content;width:fit-content;
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;color:var(--red);
  transition:gap .4s ease;
}
.dcard-link::after{
  content:"";position:absolute;left:0;right:20px;bottom:-3px;height:1.6px;
  background:var(--red);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.22,.85,.28,1);
}
.dcard:hover .dcard-link{gap:11px}
.dcard:hover .dcard-link::after{transform:scaleX(1)}
.dcard-link i{font-size:10px;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.dcard:hover .dcard-link i{animation:darrow 1.1s ease-in-out .35s infinite}
@keyframes darrow{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(6px)}
}

/* filtered out by the theme / activity / search filters */
.dcard.is-hidden{display:none}

/* empty state */
.dest-empty{text-align:center;padding:44px 20px 30px}
.dest-empty i{font-size:38px;color:#c3d6e8;margin-bottom:14px;display:block}
.dest-empty h3{font-size:17px;margin-bottom:7px}
.dest-empty p{font-size:13px;color:var(--muted);margin-bottom:18px}

.dest-more{display:flex;justify-content:center;padding:30px 0 6px}

/* --------------------------------------------------------------------------
   5. WHY VISIT NEPAL
   -------------------------------------------------------------------------- */
.why-visit{position:relative;overflow:hidden;padding:22px 0 46px}
.wv-art{position:absolute;right:-30px;bottom:-40px;width:330px;opacity:.4;pointer-events:none}
.wv-art svg{width:100%;height:auto}

.wv-grid{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.75fr;gap:44px;align-items:center}

.wv-title{font-family:var(--ff-display);font-size:22px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--navy)}
.title-deco.left{justify-content:flex-start;margin-top:7px}
.title-deco.left .bar{width:34px}
.wv-copy p{font-size:13.5px;line-height:1.95;color:var(--text);margin:16px 0 22px}
.wv-copy .btn{font-size:13px;padding:12px 22px;border-radius:6px}

.wv-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.wv-tile{
  border-radius:14px;padding:26px 12px 24px;text-align:center;
  transition:transform .45s cubic-bezier(.22,.85,.28,1),box-shadow .45s ease;
}
.wv-tile i{display:block;font-size:30px;margin-bottom:12px;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.wv-tile b{display:block;font-family:var(--ff-display);font-size:36px;font-weight:600;line-height:1;color:var(--navy)}
.wv-tile span{display:block;font-size:12.5px;line-height:1.45;color:#5b6b7c;margin-top:8px}
.wv-tile:hover{transform:translateY(-9px);box-shadow:var(--shadow)}
.wv-tile:hover i{transform:translateY(-5px) scale(1.14)}

.wv-tile.t-blue{background:#e9f1fd}
.wv-tile.t-blue i{color:var(--blue)}
.wv-tile.t-red{background:#fdedee}
.wv-tile.t-red i{color:var(--red)}
.wv-tile.t-green{background:#e8f7ed}
.wv-tile.t-green i{color:var(--green)}
.wv-tile.t-orange{background:#fdf3e2}
.wv-tile.t-orange i{color:var(--orange)}

/* --------------------------------------------------------------------------
   6. DESTINATIONS PAGE - RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1280px){
  .dh-title .l1,.dh-title .l2{font-size:46px}
  .dcard-grid{gap:15px}
  .dcard-media{height:156px}
  .dfilter{gap:18px;padding:15px 18px 10px}
  .fchip{min-width:56px;padding:9px 5px 12px}
  .fchip span{font-size:10px}
}

@media (max-width:1100px){
  .dest-hero{min-height:0;padding:48px 0 120px}
  .dh-inner{gap:28px}
  .dh-title .l1,.dh-title .l2{font-size:40px}
  .dh-search{flex:0 0 268px;width:268px;padding:17px 17px 19px}
  .dfilter{grid-template-columns:1fr;gap:14px;padding:16px 18px 12px}
  .dfilter-div{display:none}
  .dfilter-col+.dfilter-col{border-top:1px solid var(--line);padding-top:13px}
  .dcard-grid{grid-template-columns:repeat(3,1fr)}
  .dcard-media{height:172px}
  .wv-grid{grid-template-columns:1fr;gap:26px}
  .wv-copy p br{display:none}
  .wv-copy p{max-width:640px}
}

@media (max-width:992px){
  /* the shared mobile hero darkens the photo, so the type turns white */
  .dest-hero{padding:26px 0 96px;background:#0a2244}
  .dest-hero .flag-1{top:40px;right:-10%;width:98%;height:230px}
  .dh-inner{flex-direction:column;align-items:stretch;gap:22px}
  .dh-copy{max-width:none}
  .dh-eyebrow{gap:10px}
  .dh-eyebrow .hero-script{color:#fff}
  .dh-peaks{width:96px;height:32px;color:#fff;opacity:.75}
  .dh-title .l1{font-size:34px;color:#fff}
  .dh-title .l2{font-size:38px;color:var(--red)}
  .dest-hero .hero-text{color:rgba(255,255,255,.9);font-size:13px;max-width:none}
  .dest-hero .hero-text br{display:none}
  .dh-snow{display:none}

  .dh-search{
    flex:none;width:100%;
    background:#fff;border:1px solid var(--line);
    box-shadow:0 14px 34px rgba(5,18,38,.28);
    padding:16px 15px 18px;
  }
  .dhs-title{color:var(--navy);font-size:14.5px;margin-bottom:13px}
  .dhs-field{margin-bottom:11px}
  .dhs-field label{color:var(--muted);font-size:11.5px}
  .dhs-input input,.dhs-select select{height:40px;font-size:12.5px}
  .dhs-btn{height:44px;font-size:13.5px}

  .dfilter-wrap{margin-top:-42px}
  .dfilter{border-radius:12px;padding:14px 14px 10px}
  .chip-row{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .chip-row::-webkit-scrollbar{height:3px}
  .chip-row::-webkit-scrollbar-thumb{background:#d6e2ee;border-radius:3px}
  .fchip{flex-shrink:0;min-width:64px}

  .dest-page-sec{padding:22px 0 6px}
  .dest-page-head{margin-bottom:18px}
  .dcard-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .dcard-media{height:140px}
  .dcard-name{font-size:13px}
  .dcard-body{padding:11px 12px 13px}
  .dcard-body p{font-size:11.2px}
  .dest-more{padding:22px 0 4px}
  .dest-more .btn{width:100%;justify-content:center}

  .why-visit{padding:16px 0 34px}
  .wv-art{width:210px;opacity:.28;right:-24px;bottom:-24px}
  .wv-title{font-size:19px}
  .wv-copy p{font-size:13px;margin:14px 0 18px}
  .wv-copy .btn{width:100%;justify-content:center}
  .wv-stats{grid-template-columns:repeat(2,1fr);gap:12px}
  .wv-tile{padding:20px 10px 18px;border-radius:12px}
  .wv-tile i{font-size:25px;margin-bottom:9px}
  .wv-tile b{font-size:29px}
  .wv-tile span{font-size:11.5px}
}

@media (max-width:768px){
  .dh-title .l1{font-size:30px}
  .dh-title .l2{font-size:34px}
  .dcard-media{height:126px}
  .dcard-float{width:33px;height:33px;font-size:11px}
  .dcard-badge b{font-size:11.5px}
  .dcard-badge em{font-size:10px}
}

@media (max-width:560px){
  .dest-hero{padding:22px 0 84px}
  .dh-eyebrow .hero-script{font-size:26px}
  .dh-peaks{width:80px;height:28px}
  .dh-title .l1{font-size:27px}
  .dh-title .l2{font-size:31px}
  .dcard-grid{gap:10px}
  .dcard-media{height:116px}
  .dcard-name{font-size:12px;left:10px;right:10px;bottom:9px}
  .dcard-body p{font-size:10.8px;margin-bottom:9px}
  .dcard-link{font-size:11px}
  .wv-tile b{font-size:25px}
}

@media (max-width:380px){
  .dcard-grid{grid-template-columns:1fr}
  .dcard-media{height:170px}
  .wv-stats{grid-template-columns:1fr}
}

/* ==========================================================================
   FLOATING WHATSAPP + CALL   (rendered by js/float-cta.js)
   --------------------------------------------------------------------------
   Sits above the back-to-top button on desktop. Hidden below 993px, where
   the fixed bottom action bar already carries the same two actions.
   ========================================================================== */
.float-cta{
  position:fixed;right:22px;bottom:78px;z-index:112;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  opacity:0;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s ease;
}
.float-cta.in{opacity:1;transform:translateY(0)}

/* collapsed it must be exactly 48x48 so the pill renders as a true circle -
   any horizontal padding here turns it into a rounded rectangle */
.fcta{
  position:relative;display:flex;align-items:center;
  width:48px;height:48px;border-radius:26px;
  padding:0;
  color:#fff;
  box-shadow:0 10px 26px rgba(13,44,84,.28);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,background .3s ease,width .38s cubic-bezier(.22,1,.36,1);
}
.fcta:hover,.fcta:focus-visible{width:auto}
.fcta-ic{
  width:48px;height:48px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:21px;
}
.fcta-call .fcta-ic{font-size:17px}
.fcta-label{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-size:13px;font-weight:600;letter-spacing:.2px;
  opacity:0;
  transition:max-width .38s cubic-bezier(.22,1,.36,1),opacity .28s ease,padding .38s ease;
}
.fcta:hover,.fcta:focus-visible{transform:translateY(-3px);box-shadow:0 16px 32px rgba(13,44,84,.32)}
.fcta:hover .fcta-label,.fcta:focus-visible .fcta-label{max-width:220px;opacity:1;padding:0 16px 0 4px}

.fcta-wa{background:#25d366}
.fcta-wa:hover{background:#1eb959}
.fcta-call{background:var(--navy)}
.fcta-call:hover{background:var(--red)}

/* the quiet pulse that draws the eye to WhatsApp without shouting */
.fcta-ring{
  position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;
  border:2px solid rgba(37,211,102,.55);
  animation:fctaPulse 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes fctaPulse{
  0%{transform:scale(1);opacity:.75}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}

@media (max-width:992px){
  .float-cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  .float-cta{transition:none}
  .fcta{transition:none}
  .fcta:hover{transform:none}
  .fcta-ring{animation:none;opacity:0}
}


/* ==========================================================================
   SHARED CTA BAND + TOAST
   --------------------------------------------------------------------------
   Used by packages, package detail, gallery, guides and guide detail. Lives
   here so no page has to load another page's stylesheet to get it.
   ========================================================================== */
.pk-cta{padding:44px 0 52px}
.pk-cta-inner{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 55%,#164a8c 100%);
  border-radius:20px;padding:34px 24px;color:#fff;text-align:center;
  box-shadow:var(--shadow-lg);
}
.pk-cta-inner::after{
  content:"";position:absolute;right:-70px;bottom:-90px;
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 68%);
}
.pk-cta-ic{
  width:58px;height:58px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  display:flex;align-items:center;justify-content:center;font-size:22px;
  margin:0 auto 16px;
}
.pk-cta-copy{position:relative;z-index:2}
.pk-cta h3{color:#fff;font-size:23px;margin-bottom:9px}
.pk-cta p{font-size:13.5px;line-height:1.8;color:rgba(255,255,255,.84);max-width:600px;margin:0 auto}
.pk-cta-actions{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:22px}
.pk-cta .btn-white{background:#fff;color:var(--navy);box-shadow:0 8px 22px rgba(0,0,0,.2)}
.pk-cta .btn-white:hover{color:var(--red)}
.pk-cta .btn-wa{background:var(--wa);color:#fff;box-shadow:0 8px 22px rgba(37,211,102,.32)}
.pk-cta .btn-wa:hover{background:var(--wa-2)}
.pk-cta .btn-wa i{font-size:16px}

@media (min-width:768px){
  .pk-cta-inner{padding:40px 44px;text-align:left;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
  .pk-cta-ic{margin:0}
  .pk-cta p{margin:0}
  .pk-cta-actions{margin-top:0;justify-content:flex-end}
}

.pk-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,26px);
  z-index:200;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--navy);color:#fff;
  border-radius:30px;padding:11px 20px;
  font-size:13px;font-weight:600;
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
.pk-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.pk-toast i{color:#ff8f93}



/* ==========================================================================
   SHARED FILTER CHIPS + SELECT SHELL
   --------------------------------------------------------------------------
   Used by the gallery, guides and reviews pages. Lives here so no page has to
   load another page's stylesheet just to get its filter row.
   ========================================================================== */
.gd-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;-ms-overflow-style:none}
.gd-chips::-webkit-scrollbar{display:none}

.gchip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:30px;background:#fff;
  padding:8px 14px;font-size:12.5px;font-weight:600;color:var(--navy);
  white-space:nowrap;transition:.25s ease;
}
.gchip i{font-size:11px;color:var(--blue);transition:color .25s ease}
.gchip b{
  min-width:19px;height:19px;border-radius:10px;padding:0 5px;
  background:var(--blue-soft);color:var(--blue);
  font-size:10.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  transition:.25s ease;
}
.gchip:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.gchip.on{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 6px 16px rgba(13,44,84,.22)}
.gchip.on i{color:#ff8f93}
.gchip.on b{background:rgba(255,255,255,.18);color:#fff}

.gd-sel{position:relative;display:block}
.gd-sel select{
  width:100%;height:44px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg-soft);padding:0 36px 0 13px;
  font-size:13px;font-weight:600;color:var(--navy);
  appearance:none;-webkit-appearance:none;cursor:pointer;transition:.25s ease;
}
.gd-sel select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,82,150,.12)}
.gd-sel > i{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--blue);pointer-events:none}

@media (min-width:768px){
  .gd-chips{flex-wrap:wrap;overflow:visible}
}

/* screen reader only text, used for grid headings on the listing pages */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}


/* ==========================================================================
   NAV BREATHING ROOM
   --------------------------------------------------------------------------
   Nine tabs plus the plan button is a lot for a 1440 screen, so the desktop
   nav tightens up between 993 and 1440 rather than wrapping onto two lines.
   ========================================================================== */
@media (min-width:993px) and (max-width:1440px){
  .header-inner{gap:16px;padding:8px 18px}
  .nav-list>li>a{padding:14px 10px;font-size:12.8px}
  .nav-list>li>a::after{left:10px;right:10px}
  .site-header.inner .nav-list>li>a{padding:14px 10px}
  .btn-plan{padding:13px 15px;font-size:12.6px}
  .logo-mark{width:74px;height:74px}
  .logo-title{font-size:26px}
  .logo-tag{font-size:16px}
  .topbar{gap:22px}
  .topbar-item .txt{max-width:none}
}
@media (min-width:1441px){
  .nav-list>li>a{padding:14px 13px}
  .nav-list>li>a::after{left:13px;right:13px}
}

/* Small laptops still show the full nav rather than the drawer, so the logo
   shrinks and the plan button steps aside to buy the tabs the room they need.
   Contact Us covers the same journey as the button. */
@media (min-width:993px) and (max-width:1200px){
  .header-inner{gap:12px;padding:8px 14px}
  .logo-mark{width:56px;height:56px}
  .logo-title{font-size:21px}
  .logo-tag{font-size:13px}
  .nav-list>li>a{padding:13px 7px;font-size:12px;gap:5px}
  .nav-list>li>a::after{left:7px;right:7px}
  .site-header.inner .nav-list>li>a{padding:13px 7px}
  .site-header.inner .main-nav{padding-left:6px}
  .btn-plan{display:none}
  .topbar{gap:16px}
  .topbar-item{font-size:11.5px}
  .topbar-item .txt{max-width:none}
}


/* ==========================================================================
   HOME BLOG RAIL   (slides rendered by js/home-blogs.js)
   --------------------------------------------------------------------------
   Its own compact card rather than reusing .bcard from css/blog.css, so the
   home page does not have to load a second stylesheet for one section.
   ========================================================================== */
.blog-slider{position:relative;padding:0 0 6px}
.blog-slider .swiper{overflow:hidden}
/* let every card in the rail take the height of the tallest one, so the
   "Read the article" line sits on the same baseline across the row */
.blogSwiper .swiper-slide{height:auto}

.hblog-card{
  display:flex;flex-direction:column;height:100%;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease,border-color .35s ease;
}
.hblog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:#cfe0f2}

.hblog-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.hblog-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1);
}
.hblog-card:hover .hblog-media img{transform:scale(1.08)}
.hblog-grad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,26,50,.34) 0%,rgba(8,26,50,0) 46%,rgba(8,26,50,.34) 100%);
}
.hblog-cat{
  position:absolute;top:11px;left:11px;
  display:inline-flex;align-items:center;gap:7px;
  background:var(--red);color:#fff;
  border-radius:20px;padding:5px 11px;
  font-size:10px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  box-shadow:0 6px 16px rgba(225,31,38,.3);
}
.hblog-cat i{font-size:10px}
.hblog-read{
  position:absolute;bottom:11px;right:11px;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(8,26,50,.6);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(4px);
  color:#fff;border-radius:20px;padding:4px 10px;
  font-size:10.5px;font-weight:600;
}
.hblog-read i{font-size:10px}

.hblog-body{padding:15px 16px 16px;display:flex;flex-direction:column;flex:1}
.hblog-date{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:600;color:var(--muted);margin-bottom:8px;
}
.hblog-date i{color:var(--blue);font-size:11px}
.hblog-card h3{
  font-size:15.5px;line-height:1.42;color:var(--navy);margin-bottom:7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .25s ease;
}
.hblog-card:hover h3{color:var(--red)}
.hblog-card p{
  font-size:12.5px;line-height:1.72;color:var(--text);margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.hblog-more{
  margin-top:auto;padding-top:11px;border-top:1px dashed var(--line);
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;color:var(--navy);
  transition:color .25s ease;
}
.hblog-more i{font-size:10px;transition:transform .3s ease}
.hblog-card:hover .hblog-more{color:var(--red)}
.hblog-card:hover .hblog-more i{transform:translateX(4px)}

.head-action b{color:inherit;font-weight:700}

@media (prefers-reduced-motion:reduce){
  .hblog-card,.hblog-media img,.hblog-more i{transition:none}
  .hblog-card:hover{transform:none}
  .hblog-card:hover .hblog-media img{transform:none}
}


/* ==========================================================================
   LARGE DESKTOPS
   --------------------------------------------------------------------------
   At 1920x1080 the old 1290px shell left roughly 315px of empty white on each
   side. The shell now steps up so the page fills the screen, the card grids
   gain a column, and running text is capped so lines stay readable instead of
   stretching to 180 characters.
   ========================================================================== */
@media (min-width:1500px){
  :root{--shell:1400px}
  .dcard-grid{gap:20px}
}
@media (min-width:1700px){
  :root{--shell:1560px}
}
@media (min-width:1800px){
  :root{--shell:1700px}
  .section{padding:26px 0}
}

/* running text stays inside a comfortable measure on wide screens */
@media (min-width:1500px){
  .pd-prose,
  .gp-prose,
  .bd-body > p,
  .bd-body > ul,
  .bd-body > ol,
  .lg-body > p,
  .lg-body > ul{max-width:82ch}
}

/* the home blog rail gets a fourth card, the package rail a fifth */
@media (min-width:1600px){
  .hblog-card h3{font-size:16px}
}


/* ==========================================================================
   "PLAN YOUR NEPAL TRIP" POPUP   (rendered by js/plan-modal.js)
   --------------------------------------------------------------------------
   Mobile first: a full width sheet rising from the bottom on a phone, a
   centred dialog from 640px up.
   ========================================================================== */
body.plan-locked{overflow:hidden}

.plan-modal{
  position:fixed;inset:0;z-index:400;
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,visibility .3s;
}
.plan-modal[hidden]{display:none}
.plan-modal.open{opacity:1;visibility:visible;pointer-events:auto}

.plan-backdrop{position:absolute;inset:0;background:rgba(6,20,38,.72);backdrop-filter:blur(3px)}

.plan-panel{
  position:relative;z-index:2;
  /* overflow stays as a safety net for tiny screens, but the form below is
     sized so it fits without ever showing a scrollbar */
  width:100%;max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#fff;border-radius:20px 20px 0 0;
  padding:18px 16px 20px;
  box-shadow:0 -20px 60px rgba(0,0,0,.35);
  transform:translateY(30px);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.plan-modal.open .plan-panel{transform:translateY(0)}

.plan-x{
  position:absolute;top:12px;right:12px;z-index:3;
  width:36px;height:36px;border-radius:50%;
  background:var(--bg-soft);color:var(--navy);font-size:14px;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.plan-x:hover{background:var(--red);color:#fff;transform:rotate(90deg)}

/* ---------- head ---------- */
.plan-head{margin-bottom:13px;padding-right:34px}
.plan-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--blue-soft);color:var(--blue);
  border-radius:20px;padding:4px 11px;margin-bottom:7px;
  font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
}
.plan-head h2{font-size:20px;line-height:1.24;margin-bottom:5px}
.plan-head p{font-size:12.5px;line-height:1.6;color:var(--text)}

/* ---------- form ---------- */
.plan-form{display:grid;grid-template-columns:1fr;gap:10px}
.plan-fld{display:block}
.plan-fld > span{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px;
}
.plan-fld > span b{color:var(--red)}
.plan-fld input,.plan-fld textarea,.plan-fld select{
  width:100%;border:1px solid var(--line);border-radius:9px;
  background:var(--bg-soft);padding:0 13px;height:42px;
  font-family:var(--ff);font-size:13.5px;font-weight:500;color:var(--navy);
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
.plan-fld textarea{height:auto;min-height:58px;padding:10px 13px;line-height:1.55;resize:vertical}
.plan-fld input::placeholder,.plan-fld textarea::placeholder{color:#a9b6c4;font-weight:400}
.plan-fld input:focus,.plan-fld textarea:focus,.plan-fld select:focus{
  outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(26,82,150,.10);
}
.plan-fld input.bad{border-color:var(--red);background:#fff6f6}
.plan-sel{position:relative;display:block}
.plan-sel select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px}
.plan-sel > i{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--blue);pointer-events:none}

.plan-error{
  grid-column:1 / -1;
  background:#fdecec;border-left:3px solid var(--red);border-radius:8px;
  padding:8px 11px;font-size:12px;color:#8d1f24;
}
.plan-error[hidden]{display:none}

.plan-submit{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--red);color:#fff;border-radius:9px;padding:12px;
  font-size:13.5px;font-weight:600;
  box-shadow:0 8px 22px rgba(225,31,38,.3);
  transition:background .25s ease,transform .25s ease;
}
.plan-submit i{font-size:14px}
.plan-submit:hover{background:var(--red-2);transform:translateY(-2px)}
.plan-note{
  grid-column:1 / -1;display:flex;align-items:center;gap:8px;
  font-size:11px;color:var(--muted);
}
.plan-note i{color:var(--green)}

/* ---------- the sent step ---------- */
.plan-step-done{text-align:center}
.plan-tick{
  width:58px;height:58px;border-radius:50%;
  background:var(--green);color:#fff;font-size:24px;
  display:flex;align-items:center;justify-content:center;
  margin:4px auto 14px;
  box-shadow:0 10px 26px rgba(31,158,74,.32);
}
.plan-step-done h2{font-size:21px;margin-bottom:6px}
.plan-ref{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.plan-ref b{color:var(--navy);font-family:var(--ff-display);letter-spacing:.6px;font-size:14px}
.plan-done-lead{font-size:13px;line-height:1.75;color:var(--text);margin-bottom:16px}

/* shown only when the enquiry could not be saved - WhatsApp is then the only route */
.plan-warn{
  display:flex;align-items:flex-start;gap:8px;text-align:left;
  background:#fff7e6;border-left:3px solid #d99100;border-radius:8px;
  padding:9px 12px;margin-bottom:14px;
  font-size:12px;line-height:1.65;color:#7a5200;
}
.plan-warn[hidden]{display:none}
.plan-warn i{margin-top:2px}

.plan-submit:disabled{opacity:.75;cursor:progress;transform:none}

.plan-summary{
  text-align:left;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:12px;padding:6px 14px;margin-bottom:16px;
}
.plan-sum-row{
  display:grid;grid-template-columns:20px 96px 1fr;align-items:start;gap:9px;
  padding:9px 0;font-size:12.5px;
  border-bottom:1px dashed rgba(0,0,0,.06);
}
.plan-sum-row:last-child{border-bottom:none}
.plan-sum-row i{color:var(--blue);font-size:11px;margin-top:3px}
.plan-sum-row span{color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.4px;text-transform:uppercase;margin-top:1px}
.plan-sum-row b{color:var(--navy);font-weight:600;line-height:1.5;word-break:break-word}

.plan-actions{display:flex;flex-direction:column;gap:9px;text-align:left}
.plan-send{
  display:flex;align-items:center;gap:13px;
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.plan-send:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#cfe0f2}
.plan-send > i{
  width:40px;height:40px;flex-shrink:0;border-radius:11px;
  display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;
}
.plan-send.wa > i{background:var(--wa)}
.plan-send.mail > i{background:var(--red)}
.plan-send.call > i{background:var(--navy)}
.plan-send b{display:block;font-size:13.5px;color:var(--navy)}
.plan-send em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px}
.plan-send.wa{border-color:#bdedcd;background:#f5fdf8}

.plan-done-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.plan-again,.plan-close-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;color:var(--navy);
  padding:9px 14px;border-radius:8px;border:1px solid var(--line);background:#fff;
  transition:.25s ease;
}
.plan-again i{font-size:11px;color:var(--blue)}
.plan-again:hover,.plan-close-btn:hover{border-color:var(--red);color:var(--red)}

@media (min-width:640px){
  .plan-modal{align-items:center;padding:24px}
  .plan-panel{
    max-width:620px;border-radius:18px;padding:22px 24px 24px;
    box-shadow:0 30px 80px rgba(0,0,0,.4);
    transform:translateY(18px) scale(.98);
  }
  .plan-modal.open .plan-panel{transform:translateY(0) scale(1)}
  .plan-form{grid-template-columns:1fr 1fr}
  .plan-fld-wide{grid-column:1 / -1}
  .plan-head h2{font-size:22px}
  .plan-actions{flex-direction:row}
  .plan-send{flex:1}
  .plan-send em{display:none}
}
@media (min-width:900px){
  .plan-panel{max-width:700px}
}

@media (prefers-reduced-motion:reduce){
  .plan-modal,.plan-panel,.plan-send,.plan-submit,.plan-x{transition:none}
  .plan-send:hover,.plan-submit:hover{transform:none}
}


/* ==========================================================================
   WELCOME POPUP   (rendered by js/welcome-popup.js)
   --------------------------------------------------------------------------
   The short enquiry form that opens by itself a few seconds after a page
   loads. Deliberately built on the same shapes as the plan popup above - the
   same bottom sheet on a phone, the same field styling - so the two never look
   like they came from different sites. It is shorter (four fields), it can
   carry a picture down one side, and it has the "don't show this again" tick
   the plan popup has no use for.
   ========================================================================== */
body.wpop-locked{overflow:hidden}

.wpop{
  position:fixed;inset:0;z-index:390;   /* under the plan popup's 400 */
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,visibility .3s;
}
.wpop[hidden]{display:none}
.wpop.open{opacity:1;visibility:visible;pointer-events:auto}

.wpop-backdrop{position:absolute;inset:0;background:rgba(6,20,38,.72);backdrop-filter:blur(3px)}

.wpop-panel{
  position:relative;z-index:2;
  width:100%;max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#fff;border-radius:20px 20px 0 0;
  box-shadow:0 -20px 60px rgba(0,0,0,.35);
  transform:translateY(30px);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.wpop.open .wpop-panel{transform:translateY(0)}

.wpop-x{
  position:absolute;top:12px;right:12px;z-index:3;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--navy);font-size:14px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.wpop-x:hover{background:var(--red);color:#fff;transform:rotate(90deg)}

/* the optional picture - a band across the top on a phone, a column from 860px */
.wpop-art{display:none}
.wpop-body{padding:18px 16px 18px}

/* ---------- head ---------- */
.wpop-head{margin-bottom:12px;padding-right:34px}
.wpop-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--blue-soft);color:var(--blue);
  border-radius:20px;padding:4px 11px;margin-bottom:7px;
  font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
}
.wpop-head h2{font-size:20px;line-height:1.24;margin-bottom:5px}
.wpop-head p{font-size:12.5px;line-height:1.6;color:var(--text)}

/* ---------- reassurance chips ---------- */
.wpop-perks{
  display:flex;flex-wrap:wrap;gap:6px 14px;
  margin-bottom:13px;
}
.wpop-perks li{
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;color:var(--navy);
}
.wpop-perks i{color:var(--green);font-size:11px}

/* ---------- form ---------- */
.wpop-form{display:grid;grid-template-columns:1fr;gap:10px}
.wpop-fld{display:block}
.wpop-fld > span{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px;
}
.wpop-fld > span b{color:var(--red)}
.wpop-fld input,.wpop-fld select{
  width:100%;border:1px solid var(--line);border-radius:9px;
  background:var(--bg-soft);padding:0 13px;height:42px;
  font-family:var(--ff);font-size:13.5px;font-weight:500;color:var(--navy);
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
.wpop-fld input::placeholder{color:#a9b6c4;font-weight:400}
.wpop-fld input:focus,.wpop-fld select:focus{
  outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(26,82,150,.10);
}
.wpop-fld input.bad{border-color:var(--red);background:#fff6f6}
.wpop-sel{position:relative;display:block}
.wpop-sel select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px}
.wpop-sel > i{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--blue);pointer-events:none}

.wpop-error{
  grid-column:1 / -1;
  background:#fdecec;border-left:3px solid var(--red);border-radius:8px;
  padding:8px 11px;font-size:12px;color:#8d1f24;
}
.wpop-error[hidden]{display:none}

.wpop-submit{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--red);color:#fff;border-radius:9px;padding:12px;
  font-size:13.5px;font-weight:600;
  box-shadow:0 8px 22px rgba(225,31,38,.3);
  transition:background .25s ease,transform .25s ease;
}
.wpop-submit i{font-size:14px}
.wpop-submit:hover{background:var(--red-2);transform:translateY(-2px)}
.wpop-submit:disabled{opacity:.75;cursor:progress;transform:none}

/* ---------- foot: the "don't show me again" tick ---------- */
.wpop-foot{
  margin-top:13px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px;
}
.wpop-check{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  font-size:12px;font-weight:500;color:var(--text);
}
.wpop-check input{
  width:17px;height:17px;flex-shrink:0;margin:0;cursor:pointer;
  accent-color:var(--blue);
}
.wpop-check:hover span{color:var(--navy)}
.wpop-note{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.wpop-note i{color:var(--green)}

/* ---------- the sent step ---------- */
.wpop-done{text-align:center}
.wpop-tick{
  width:56px;height:56px;border-radius:50%;
  background:var(--green);color:#fff;font-size:23px;
  display:flex;align-items:center;justify-content:center;
  margin:4px auto 14px;
  box-shadow:0 10px 26px rgba(31,158,74,.32);
}
.wpop-done h2{font-size:21px;margin-bottom:6px}
.wpop-ref{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.wpop-ref b{color:var(--navy);font-family:var(--ff-display);letter-spacing:.6px;font-size:14px}
.wpop-done-lead{font-size:13px;line-height:1.75;color:var(--text);margin-bottom:16px}

/* shown only when the enquiry could not be saved - WhatsApp is then the only route */
.wpop-warn{
  display:flex;align-items:flex-start;gap:8px;text-align:left;
  background:#fff7e6;border-left:3px solid #d99100;border-radius:8px;
  padding:9px 12px;margin-bottom:14px;
  font-size:12px;line-height:1.65;color:#7a5200;
}
.wpop-warn[hidden]{display:none}
.wpop-warn i{margin-top:2px}

.wpop-actions{display:flex;flex-direction:column;gap:9px}
.wpop-send{
  display:flex;align-items:center;justify-content:center;gap:10px;
  border-radius:10px;padding:12px 14px;
  font-size:13.5px;font-weight:600;
  transition:transform .25s ease,box-shadow .25s ease;
}
.wpop-send.wa{background:var(--wa);color:#fff;box-shadow:0 8px 22px rgba(37,211,102,.28)}
.wpop-send.wa i{font-size:18px}
.wpop-send:hover{transform:translateY(-2px)}
.wpop-close-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:600;color:var(--navy);
  padding:10px 14px;border-radius:9px;border:1px solid var(--line);background:#fff;
  transition:.25s ease;
}
.wpop-close-btn:hover{border-color:var(--red);color:var(--red)}

/* ---------- centred dialog from 640px ---------- */
@media (min-width:640px){
  .wpop{align-items:center;padding:24px}
  .wpop-panel{
    max-width:520px;border-radius:18px;overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.4);
    transform:translateY(18px) scale(.98);
  }
  .wpop.open .wpop-panel{transform:translateY(0) scale(1)}
  .wpop-body{padding:24px 26px}
  .wpop-head h2{font-size:23px}
  /* the tick and the privacy line stay stacked even here - side by side they
     are narrow enough that "...for 24 hours" wraps onto a second line, which
     makes the one control in the popup that is not the form look like an
     afterthought */
  .wpop-foot{gap:7px}
  .wpop-actions{flex-direction:row;justify-content:center}
  .wpop-send{flex:1}
}

/* ---------- the picture earns its column only when there is room ---------- */
@media (min-width:860px){
  .wpop.has-art .wpop-panel{
    max-width:840px;
    display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  }
  .wpop.has-art .wpop-art{
    display:block;position:relative;background:var(--navy);
  }
  .wpop.has-art .wpop-art img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  }
  /* keeps the picture reading as part of the card rather than a pasted-on block */
  .wpop.has-art .wpop-art::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(120deg,rgba(13,44,84,.30),rgba(13,44,84,0) 60%);
  }
  .wpop.has-art .wpop-body{padding:26px 28px}
}

/* a laptop in a short window still gets the whole form without scrolling */
@media (max-height:720px){
  .wpop{padding:12px}
  .wpop-eyebrow{display:none}
  .wpop-head p{display:none}
  .wpop-head{margin-bottom:10px}
  .wpop-perks{display:none}
  .wpop-fld input,.wpop-fld select{height:40px}
  .wpop-body{padding:16px 18px}
  .wpop-form{gap:9px}
  .wpop-panel{max-height:96vh}
}

@media (prefers-reduced-motion:reduce){
  .wpop,.wpop-panel,.wpop-submit,.wpop-send,.wpop-x{transition:none}
  .wpop-submit:hover,.wpop-send:hover{transform:none}
}


/* ==========================================================================
   HOME SEARCH BAR - ENHANCED DROPDOWNS   (js/home-search.js)
   --------------------------------------------------------------------------
   The native <select> is kept for accessibility and for the mobile picker,
   but once the script runs it is stretched invisibly over the whole field and
   we draw the value ourselves. That gives a consistent closed state across
   browsers, and a tap anywhere on the field - icon, label or value - opens
   the list. Without JavaScript the plain select shows and still works.
   ========================================================================== */
.search-field{border-radius:10px;transition:background .25s ease,box-shadow .25s ease}
.search-field:hover{background:var(--bg-soft)}
.search-field.focus,
.search-field:focus-within{background:#fff;box-shadow:0 0 0 2px rgba(26,82,150,.35) inset}

/* the divider would sit oddly on a highlighted field */
.search-field:hover+.search-field::before,
.search-field:hover::before{opacity:0}
.search-field+.search-field::before{transition:opacity .25s ease}

.search-field.enhanced{cursor:pointer}
.search-field.enhanced > i.lead,
.search-field.enhanced label,
.search-field.enhanced .fval{pointer-events:none}

/* the real control: invisible, but exactly the size of the field */
.search-field.enhanced select{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;padding:0;margin:0;
}

.search-field .fval{
  display:block;font-size:14px;font-weight:600;color:#9fb0c2;
  line-height:1.35;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding-right:6px;
}
.search-field.chosen .fval{color:var(--navy)}
.search-field.enhanced .caret{transition:transform .25s ease,color .25s ease}
.search-field.enhanced:hover .caret{color:var(--red)}
.search-field.focus .caret{transform:translateY(-50%) rotate(180deg);color:var(--red)}

/* the options list is drawn by the operating system, but these two do carry */
.search-field select option{color:#0d2c54;background:#fff}

/* --------------------------------------------------------------------------
   Small laptops: four fields plus the button in one row gets cramped between
   993 and 1200, so the fields go two up and the button takes its own line -
   the same shape the phone layout uses.
   -------------------------------------------------------------------------- */
@media (min-width:993px) and (max-width:1200px){
  .search-bar{flex-wrap:wrap;padding:12px;gap:10px}
  .search-field{
    flex:1 1 calc(50% - 5px);padding:9px 12px;
    border:1px solid var(--line);border-radius:9px;
  }
  .search-field+.search-field::before{display:none}
  .btn-search{flex:1 1 100%;justify-content:center;padding:12px 24px}
}

@media (prefers-reduced-motion:reduce){
  .search-field,.search-field .caret,.search-field+.search-field::before{transition:none}
}


/* ==========================================================================
   SHARED SOCIAL SHARE ROW   (rendered by js/share.js)
   --------------------------------------------------------------------------
   Used on the package, destination and guide detail pages. The blog detail
   page has its own .bd-share row that predates this and looks the same.
   ========================================================================== */
.tn-share{
  display:flex;align-items:center;flex-wrap:wrap;gap:9px;
  padding:16px 18px;margin-top:22px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:13px;
}
.tn-share-lbl{
  font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--muted);margin-right:4px;
}
.tn-share a,.tn-share button{
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);
  color:var(--navy);font-size:15px;cursor:pointer;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .25s ease,color .25s ease,border-color .25s ease;
}
.tn-share a:hover,.tn-share button:hover{transform:translateY(-4px) rotate(-6deg);border-color:transparent;color:#fff}
.tn-share .s-wa:hover{background:var(--wa)}
.tn-share .s-fb:hover{background:#1877f2}
.tn-share .s-x:hover{background:#111}
.tn-share .s-mail:hover{background:var(--red)}
.tn-share .s-copy:hover{background:var(--navy)}

@media (min-width:600px){
  .tn-share{gap:10px;padding:16px 20px}
}
@media (prefers-reduced-motion:reduce){
  .tn-share a,.tn-share button{transition:none}
  .tn-share a:hover,.tn-share button:hover{transform:none}
}


/* ==========================================================================
   HOME SEARCH - CUSTOM DROPDOWN PANEL   (js/home-search.js)
   --------------------------------------------------------------------------
   The native select popup is drawn by the operating system, so its list
   items, padding and spacing cannot be styled. On a mouse-driven screen the
   script hides the select and puts this panel in its place. Touch screens
   keep the native picker and never see these rules.
   ========================================================================== */
.search-field.custom{position:relative}

/* the invisible button that owns the click and the keyboard */
.search-field .ftrigger{
  position:absolute;inset:0;width:100%;height:100%;
  background:none;border:0;padding:0;margin:0;
  cursor:pointer;z-index:2;
}
.search-field.custom select{display:none}
.search-field.open{background:#fff;box-shadow:0 0 0 2px rgba(26,82,150,.35) inset;z-index:5}

/* ---------- the panel ---------- */
.fmenu{
  position:absolute;left:6px;right:6px;top:calc(100% + 8px);z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 44px rgba(13,44,84,.18);
  padding:6px;
  max-height:290px;overflow-y:auto;overscroll-behavior:contain;
  animation:fmenuIn .18s ease-out;
}
.fmenu[hidden]{display:none}
@keyframes fmenuIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- the list items : the bit the OS would not let us style ------ */
.fmenu-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;
  padding:10px 12px;margin:0;border:0;border-radius:8px;background:none;
  font-family:var(--ff);font-size:13.5px;font-weight:500;color:var(--navy);
  line-height:1.4;cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.fmenu-item + .fmenu-item{margin-top:2px}
.fmenu-item i{font-size:11px;color:var(--red);opacity:0;transition:opacity .18s ease}
.fmenu-item:hover,.fmenu-item:focus{background:var(--bg-soft);color:var(--blue);outline:none}
.fmenu-item:focus-visible{box-shadow:0 0 0 2px rgba(26,82,150,.35) inset}
.fmenu-item.on{background:var(--blue-soft);color:var(--navy);font-weight:600}
.fmenu-item.on i{opacity:1}

/* the first option is the "no choice" one, so it reads quieter */
.fmenu-item:first-child{color:var(--muted)}
.fmenu-item:first-child.on{color:var(--navy)}

/* a tidy scrollbar for the longer lists */
.fmenu::-webkit-scrollbar{width:8px}
.fmenu::-webkit-scrollbar-thumb{background:#d6e0ea;border-radius:8px;border:2px solid #fff}
.fmenu::-webkit-scrollbar-thumb:hover{background:#c2d2e2}

@media (max-width:992px){
  /* full width of the field, and items tall enough to tap comfortably */
  .fmenu{left:0;right:0;max-height:270px;padding:7px;border-radius:13px}
  .fmenu-item{padding:12px 13px;font-size:14px}
  .fmenu-item + .fmenu-item{margin-top:4px}
  .fmenu-item i{font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  .fmenu{animation:none}
  .fmenu-item,.fmenu-item i{transition:none}
}


/* the home rails: taller art on large desktops, where the cards are wider */
@media (min-width:1600px){
  .dest-card{height:262px}
  .pkg-media{height:205px}
}


/* on a phone the seven fields stack, so the two short ones pair up and the
   intro line goes - a bottom sheet that fits beats one that scrolls */
@media (max-width:639px){
  .plan-eyebrow{display:none}
  .plan-form{grid-template-columns:1fr 1fr}
  .plan-form > *{grid-column:1 / -1}
  .plan-form > .plan-fld-half{grid-column:auto}
}

/* a laptop in a small window still gets the whole form without scrolling */
@media (max-height:760px){
  .plan-modal{padding:12px}
  .plan-eyebrow{display:none}
  .plan-head p{display:none}
  .plan-head{margin-bottom:10px}
  .plan-fld input,.plan-fld select{height:40px}
  .plan-fld textarea{min-height:48px}
  .plan-panel{padding:16px 18px 18px;max-height:96vh}
  .plan-form{gap:9px}
}


/* ==========================================================================
   NO SIDEWAYS DRIFT ON PHONES
   --------------------------------------------------------------------------
   AOS starts a fade-left element 100px to the right of where it lands, so
   until the animation runs the document is ~75px wider than a phone screen
   and the page can be panned sideways on first load. On small screens those
   two animations come in vertically instead, which looks the same and costs
   nothing. overflow-x on <html> as well as <body> is the iOS belt and braces.
   ========================================================================== */
@media (max-width:992px){
  [data-aos="fade-left"]{transform:translate3d(0,26px,0)}
  [data-aos="fade-right"]{transform:translate3d(0,26px,0)}
  [data-aos="fade-left"].aos-animate,
  [data-aos="fade-right"].aos-animate{transform:translate3d(0,0,0)}
}


/* ==========================================================================
   DRAWER MUST NOT BE TRAPPED BY THE HEADER
   --------------------------------------------------------------------------
   backdrop-filter makes an element a containing block for its position:fixed
   descendants. The mobile drawer lives inside <header>, so as soon as the
   scrolled header gained blur(10px) the drawer stopped being sized against
   the viewport and was clipped to the 68px header - the menu appeared to cut
   off after a small scroll. Desktop has no drawer, so it keeps the frosting.
   ========================================================================== */
@media (max-width:992px){
  .site-header,
  .site-header.scrolled,
  .site-header.inner.scrolled{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

/* ==========================================================================
   MOBILE DRAWER ICONS
   --------------------------------------------------------------------------
   Each top level tab carries an icon. It is hidden on desktop, where the nav
   is a tight horizontal strip and icons would only add noise, and shown in
   the drawer where they make the list far quicker to scan.
   ========================================================================== */
.nav-ic{display:none}

@media (max-width:992px){
  .nav-ic{
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;flex-shrink:0;border-radius:10px;
    background:var(--blue-soft);color:var(--blue);
    font-size:14px;
    transition:background .25s ease,color .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1);
  }

  /* icon, label, then the chevron pinned to the right */
  .nav-list>li>a{justify-content:flex-start;gap:12px;padding:11px 4px}
  .nav-list>li>a .fa-chevron-down{margin-left:auto;font-size:11px;color:var(--muted)}

  .nav-list>li.active>.nav-ic,
  .nav-list>li.active>a .nav-ic{background:var(--red);color:#fff}
  .nav-list>li>a:hover .nav-ic,
  .nav-list>li>a:active .nav-ic{background:var(--red);color:#fff;transform:rotate(-6deg)}
  .nav-list>li.open>a .fa-chevron-down{transform:rotate(180deg);color:var(--red)}

  /* the sub links line up under the icon column */
  .dropdown{padding:2px 0 10px 46px}
  .dropdown a{
    position:relative;padding:9px 10px 9px 14px;font-size:13px;color:#5b6b7c;
    border-radius:8px;
  }
  .dropdown a::before{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:5px;height:5px;border-radius:50%;background:#c2d2e2;
    transition:background .25s ease;
  }
  .dropdown a:hover{background:var(--bg-soft);color:var(--red);padding-left:16px}
  .dropdown a:hover::before{background:var(--red)}
}

@media (prefers-reduced-motion:reduce){
  .nav-ic{transition:none}
  .nav-list>li>a:hover .nav-ic{transform:none}
}

/* branch offices line in the footer contact list */
.f-branch-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;opacity:.7;margin-bottom:2px}

/* ==========================================================================
   Server-rendered listing fallback. Every listing grid is built by JavaScript,
   so this ships the same links as plain HTML for crawlers and no-JS visitors.
   The grid script replaces it on hydration.
   ========================================================================== */
.seo-index{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.seo-index li{margin:0}
.seo-index a{display:block;color:inherit}
.seo-index img{width:100%;height:auto;border-radius:12px;object-fit:cover;aspect-ratio:16/10}
.seo-index b{display:block;margin-top:10px;font-size:15.5px;line-height:1.35;color:#12233f}
.seo-index span{display:block;margin-top:4px;font-size:13px;line-height:1.6;color:#5b6678}
.seo-index a:hover b{color:#d62839}