/* ============================================================
   Evergreen Travels — motion layer + inner-page components.
   Loaded after styles.css. Home page geometry is never touched
   by this file; only additive behaviour and new page types.
   ============================================================ */

/* ============ 1. LOADER ============ */
/* No scroll-lock: if JS never runs, the page must still work. */

.loader{
  animation:loaderBail .01s linear 6s forwards;
  position:fixed; inset:0; z-index:999;
  display:grid; place-items:center;
  background:#FFFDFB;
  transition:opacity .5s ease, visibility .5s ease;
}
.loader.is-done{ opacity:0; visibility:hidden }
.loader__mark{ position:relative; width:96px; height:96px; display:grid; place-items:center }
.loader__mark img{ width:62px; height:auto; animation:loaderPulse 1.5s ease-in-out infinite }
.loader__ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid rgba(110,138,80,.18);
  border-top-color:var(--green);
  animation:loaderSpin 1s linear infinite;
}
.loader__word{
  margin-top:22px;
  font-family:"Geist",sans-serif; font-size:11px; letter-spacing:.34em;
  text-transform:uppercase; color:#8A8F82;
  animation:loaderFade 1.5s ease-in-out infinite;
}
.loader__inner{ display:flex; flex-direction:column; align-items:center }
@keyframes loaderSpin{ to{ transform:rotate(360deg) } }
@keyframes loaderPulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(.9) } }
@keyframes loaderFade{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }

/* Nothing may scroll the page sideways. Two things try to: the hero's sunrise
   glow is 150% wide by design (left/right:-25%), and every [data-reveal="right"]
   sits 26px right of place until it scrolls into view. Both are decorative
   transforms that still widen the document — on a phone that reads as the whole
   page sliding. `clip`, not `hidden`: it creates no scroll container, so
   .rail's position:sticky still resolves against the viewport. */
html{ overflow-x:clip }

/* ============ 2. SCROLL REVEAL ============ */
[data-reveal]{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity .7s cubic-bezier(.22,.68,.24,1), transform .7s cubic-bezier(.22,.68,.24,1);
  will-change:opacity, transform;
}
[data-reveal="left"]{ transform:translate3d(-26px,0,0) }
[data-reveal="right"]{ transform:translate3d(26px,0,0) }
[data-reveal="scale"]{ transform:scale(.965) }
[data-reveal="fade"]{ transform:none }
[data-reveal].is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none }
  .cutout{ transform:none !important }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important }
}

/* ============ 3. MICRO-INTERACTIONS ============ */
.cutout{ transition:transform .12s linear }

/* Nav is transparent and full-width at the top; once you leave the top it
   pulls in and floats as a rounded glass bar. The nav is fixed, so animating
   its size costs no reflow. max-width animates from a large value rather than
   `none` because `none` is not an interpolable length. */
/* The top gap snaps in quickly — animating it over the same duration as the
   width made the pill look flush to the top for most of the transition. */
.nav{ transition:padding .16s ease }
/* backdrop-filter is deliberately NOT transitioned. It interpolates towards
   `none` rather than switching, and for the whole interpolation the element
   still counts as a backdrop-filter — which makes it the containing block for
   position:fixed children. Animating it trapped the open mobile drawer inside
   the pill until the transition finished. Everything else may animate. */
.nav__inner{
  transition:max-width .42s cubic-bezier(.4,0,.2,1), height .3s ease,
             padding .3s ease, background .3s ease, border-radius .42s ease,
             box-shadow .3s ease;
}
.nav.is-stuck{ padding:12px 20px 0 }
.nav.is-stuck .nav__inner{
  max-width:1180px; height:66px; padding:0 12px 0 24px;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-radius:999px;
  box-shadow:0 16px 36px -22px rgba(20,45,28,.5), 0 0 0 1px rgba(20,45,28,.07);
}
.nav.is-stuck .nav__cta{ height:44px; padding:0 22px }

/* Over a banner photograph the bar is invisible, so its contents flip to the
   light palette until the floating state takes over. */
body.has-banner .nav:not(.is-stuck) .nav__links a{ color:#FBFAEE }
body.has-banner .nav:not(.is-stuck) .nav__logo img{ filter:brightness(0) invert(1) }
body.has-banner .nav:not(.is-stuck) .nav__cta{
  background:rgba(251,250,238,.14); color:#FBFAEE;
  box-shadow:inset 0 0 0 1px rgba(251,250,238,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
body.has-banner .nav:not(.is-stuck) .nav__cta:hover{ background:rgba(251,250,238,.24) }
body.has-banner .nav:not(.is-stuck) .nav__burger span{ background:#FBFAEE }


/* underline that grows from the centre */
.nav__links a{ position:relative; border-bottom:0 !important }
.nav__links a::after{
  content:""; position:absolute; left:50%; right:50%; bottom:0; height:1.5px;
  background:var(--green); transition:left .26s ease, right .26s ease;
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ left:0; right:0 }

/* destination card: arrow badge nudges, caption lifts */
.dcard__go{ transition:transform .3s cubic-bezier(.2,.7,.2,1), background .3s ease }
.dcard:hover .dcard__go{ transform:translate(2px,-2px); background:rgba(110,138,80,.92) }
.dcard__body{ transition:transform .45s cubic-bezier(.2,.7,.2,1) }
.dcard:hover .dcard__body{ transform:translateY(-4px) }
.dcard::after{ transition:opacity .4s ease }
.dcard:hover::after{ opacity:.88 }

/* package card lift */
.pkg{ transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease }
.pkg:hover{ transform:translateY(-5px); box-shadow:0 26px 44px -30px rgba(30,40,20,.45); border-color:#DCD9BE }
.pkg__media img{ transition:transform .6s cubic-bezier(.2,.7,.2,1) }
.pkg:hover .pkg__media img{ transform:scale(1.05) }
.pkg.is-hidden{ display:none }

/* whatsapp button: icon slides */
.pkg__wa svg{ transition:transform .28s ease }
.pkg__wa:hover svg{ transform:translateX(3px) }

/* hero CTA arrow */
.btn-cta .arrow{ transition:transform .28s cubic-bezier(.2,.7,.2,1); display:inline-block }
.btn-cta:hover .arrow{ transform:translateX(4px) }

/* filter pill: the white knob eases */
.filters__pill{ position:relative }
.filters__pill.is-active{ box-shadow:0 2px 8px -4px rgba(0,0,0,.28) }

/* review stars stagger in */
.review__stars span{ display:inline-block; opacity:0; transform:translateY(4px) scale(.8) }
[data-reveal].is-in .review__stars span,
.review.is-in .review__stars span{ animation:starPop .42s cubic-bezier(.3,1.4,.5,1) forwards }
.review__stars span:nth-child(1){ animation-delay:.05s }
.review__stars span:nth-child(2){ animation-delay:.11s }
.review__stars span:nth-child(3){ animation-delay:.17s }
.review__stars span:nth-child(4){ animation-delay:.23s }
.review__stars span:nth-child(5){ animation-delay:.29s }
@keyframes starPop{ to{ opacity:1; transform:none } }

/* footer social */
.footer__social a{ transition:background .22s ease, transform .22s ease }
.footer__social a:hover{ transform:translateY(-2px) }
.footer__col a{ position:relative; width:fit-content }
.footer__col a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:currentColor; opacity:.5; transition:right .25s ease;
}
.footer__col a:hover::after{ right:0 }

/* ============ 4. IMAGE SKELETONS ============ */
.skel{ position:relative; overflow:hidden; background:#EFEDE3 }
.skel::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.72) 50%,transparent 80%);
  transform:translateX(-100%);
  animation:shimmer 1.35s infinite;
}
.skel.skeleton-done::before{ display:none }
@keyframes shimmer{ to{ transform:translateX(100%) } }
img[data-skeleton]{ opacity:0; transition:opacity .45s ease }
img[data-skeleton].is-loaded{ opacity:1 }

/* ============ 5. MOBILE NAV ============ */
.nav__burger{
  display:none; width:42px; height:42px; border:0; background:transparent;
  cursor:pointer; padding:0; place-items:center;
  /* rows must hug the bars, else they stretch to fill the button and the
     bar pitch stops matching the translateY the X animation uses */
  align-content:center;
}
.nav__burger span{
  display:block; width:20px; height:1.6px; background:#1A1A1A; border-radius:2px;
  transition:transform .3s ease, opacity .2s ease;
}
.nav__burger span + span{ margin-top:5px }
body.nav-open .nav__burger span:nth-child(1){ transform:translateY(6.6px) rotate(45deg) }
body.nav-open .nav__burger span:nth-child(2){ opacity:0 }
body.nav-open .nav__burger span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg) }

/* ============ 6. INNER PAGE SHELL ============ */
.page{
  background:#FFFDFB url("/assets/topo.webp") repeat;
  background-size:800px 800px;
}
.page-hero{
  position:relative; overflow:hidden;
  padding:74px 0 66px;
  text-align:center;
}
.page-hero__inner{ max-width:900px; margin:0 auto; padding:0 24px; position:relative; z-index:2 }
.page-hero__eyebrow{
  display:inline-block; background:var(--pill-grey); border-radius:12px; padding:5px 14px;
  font-family:"Geist",sans-serif; font-size:11.5px; letter-spacing:-.01em; color:#3B3B3B;
}
.page-hero h1{
  margin-top:16px;
  font-family:"Andika",sans-serif; font-weight:400; font-size:62px; line-height:1.12;
  color:rgba(0,0,0,.79);
}
.page-hero h1 em{ font-style:normal; color:var(--green) }
.page-hero p{
  margin:20px auto 0; max-width:700px;
  font-family:"Andika",sans-serif; font-size:17px; line-height:1.55; color:#3E3E3E;
}

.crumbs{
  max-width:1230px; margin:0 auto; padding:20px 24px 0;
  font-family:"Geist",sans-serif; font-size:13.5px; color:#7B7F74;
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.crumbs a:hover{ color:var(--green) }
.crumbs span[aria-current]{ color:#2A2A2A }

.wrap{ max-width:1230px; margin:0 auto; padding:0 24px }
.section-lead{
  max-width:720px; margin:18px auto 0; text-align:center;
  font-family:"Geist",sans-serif; font-size:17px; line-height:1.6; color:#54584E;
}

/* ============ 7. DESTINATIONS PAGE ============ */
.dest-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  margin-top:52px;
}
.dest-grid .dcard{ height:420px }
.dest-grid .dcard--tall{ height:420px }

.dest-note{
  margin:64px auto 0; max-width:1230px;
  background:var(--cream); border:1px solid var(--cream-line); border-radius:20px;
  padding:38px 42px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
}
.dest-note h3{
  font-family:"Geist",sans-serif; font-size:19px; font-weight:500; color:#1E1E1E;
  margin-bottom:9px;
}
.dest-note p{ font-family:"Geist",sans-serif; font-size:15.5px; line-height:1.6; color:#54584E }

/* ============ 8. PACKAGE LISTING ============ */
.pkg-list{
  display:grid; grid-template-columns:repeat(3,1fr); gap:34.5px;
  margin-top:44px;
}
/* see .pkg-grid in styles.css — same equal-height / foot-aligned buttons.
   The 12px is carried as the previous element's margin-bottom so it survives
   as a floor on the tallest card in the row, where auto resolves to 0. */
.pkg-list > .pkg > .pkg__nights{ margin-bottom:12px }
.pkg-list > .pkg > .pkg__link{ margin-top:auto }
.pkg__nights{
  font-family:"Geist",sans-serif; font-size:13px; letter-spacing:.05em;
  color:#7C8172; margin-top:14px; text-transform:uppercase;
}
.pkg__link{
  display:flex; align-items:center; justify-content:center; gap:9px;
  height:48px; margin-top:12px;
  border-radius:24px; background:var(--green-deep); color:#fff;
  font-family:"Geist",sans-serif; font-size:14px; letter-spacing:.055em;
  transition:background .22s ease, transform .22s ease;
}
.pkg__link:hover{ background:#0C2417; transform:translateY(-1px) }
.pkg__link svg{ width:15px; height:15px; transition:transform .25s ease }
.pkg__link:hover svg{ transform:translateX(3px) }
/* .pkg__wa carries a 52px top margin so that on the home grid, where it is the
   only button, it sits at the foot of the card. Stacked under .pkg__link it
   just reads as a hole — match the 12px rhythm instead. */
.pkg__link + .pkg__wa{ margin-top:12px }

/* ============ 9. ITINERARY PAGE ============ */
.trip{
  display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:52px;
  margin-top:52px; align-items:start;
}
.trip__figure{ border-radius:20px; overflow:hidden; margin:0 0 34px }
.trip__figure img{ width:100%; height:420px; object-fit:cover }

.trip h2{
  font-family:"Andika",sans-serif; font-weight:700; font-size:31px; color:#3A3A3A;
  margin:44px 0 18px;
}
.trip h2:first-of-type{ margin-top:0 }
.trip > p{ font-family:"Geist",sans-serif; font-size:17px; line-height:1.68; color:#4A4A4A }
.trip > p + p{ margin-top:16px }

.facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--cream-line); border:1px solid var(--cream-line); border-radius:16px;
  overflow:hidden; margin-top:30px;
}
.facts div{ background:var(--cream); padding:18px 20px }
.facts dt{ font-family:"Geist",sans-serif; font-size:12px; letter-spacing:.08em; color:#7C8172; text-transform:uppercase }
.facts dd{ margin:8px 0 0; font-family:"Geist",sans-serif; font-size:17px; color:#1E1E1E }

/* day-by-day timeline */
.itin{ margin-top:26px; border-left:1.5px solid #E2E0CC; padding-left:0 }
.itin__day{ position:relative; padding:0 0 4px 34px }
.itin__day::before{
  content:""; position:absolute; left:-7px; top:22px;
  width:12px; height:12px; border-radius:50%;
  background:#fff; border:2px solid var(--green); transition:background .25s ease;
}
.itin__day.is-open::before{ background:var(--green) }
.itin__head{
  width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
  padding:16px 30px 16px 0; position:relative;
  display:block;
}
.itin__num{
  display:block; font-family:"Geist",sans-serif; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--green);
}
.itin__title{
  display:block; margin-top:5px;
  font-family:"Geist",sans-serif; font-size:19px; color:#1E1E1E; line-height:1.35;
}
.itin__head::after{
  content:""; position:absolute; right:4px; top:50%; width:9px; height:9px;
  border-right:1.6px solid #6E7468; border-bottom:1.6px solid #6E7468;
  transform:translateY(-70%) rotate(45deg);
  transition:transform .3s ease;
}
.itin__day.is-open .itin__head::after{ transform:translateY(-20%) rotate(-135deg) }
.itin__body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .38s cubic-bezier(.3,.7,.3,1);
}
.itin__day.is-open .itin__body{ grid-template-rows:1fr }
.itin__body > div{ overflow:hidden }
.itin__body ul{ margin:0 0 20px; padding:0 0 0 19px }
.itin__body li{
  font-family:"Geist",sans-serif; font-size:15.5px; line-height:1.62; color:#4A4A4A;
  margin-top:7px;
}
.itin__body li::marker{ color:var(--green) }

/* sticky booking rail */
.rail{ position:sticky; top:104px }
.rail__card{
  background:var(--cream); border:1px solid var(--cream-line); border-radius:20px;
  padding:26px;
}
.rail__card h3{
  font-family:"Geist",sans-serif; font-size:21px; font-weight:500; color:#1E1E1E;
}
.rail__card p{
  margin-top:10px; font-family:"Geist",sans-serif; font-size:15px; line-height:1.6; color:#54584E;
}
.rail__list{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:11px }
.rail__list li{
  display:flex; gap:10px; align-items:flex-start;
  font-family:"Geist",sans-serif; font-size:15px; color:#2A2E26;
}
.rail__list svg{ width:16px; height:16px; flex:0 0 16px; margin-top:3px; color:var(--green) }
.rail .pkg__wa{ margin-top:24px }
.rail__meta{
  margin-top:18px; padding-top:18px; border-top:1px solid #E4E2CE;
  font-family:"Geist",sans-serif; font-size:13.5px; line-height:1.6; color:#7C8172;
}

.incl{ display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:22px }
.incl h3{ font-family:"Geist",sans-serif; font-size:17px; font-weight:500; color:#1E1E1E; margin-bottom:12px }
.incl ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.incl li{
  display:flex; gap:9px; align-items:flex-start;
  font-family:"Geist",sans-serif; font-size:15.5px; line-height:1.55; color:#4A4A4A;
}
.incl svg{ width:15px; height:15px; flex:0 0 15px; margin-top:4px }
.incl--yes svg{ color:var(--green) }
.incl--no svg{ color:#B26A5B }

/* FAQ */
.faq{ margin-top:22px; border-top:1px solid #E4E2CE }
.faq details{ border-bottom:1px solid #E4E2CE }
.faq summary{
  list-style:none; cursor:pointer; padding:18px 30px 18px 0; position:relative;
  font-family:"Geist",sans-serif; font-size:17px; color:#1E1E1E;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"+"; position:absolute; right:4px; top:16px;
  font-size:20px; color:var(--green); transition:transform .28s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq p{
  margin:0 0 20px; font-family:"Geist",sans-serif; font-size:15.5px; line-height:1.65; color:#4A4A4A;
}

/* ============ 10. GUIDES / ABOUT / CONTACT ============ */
.guide-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:48px }
.guide{
  background:var(--cream); border:1px solid var(--cream-line); border-radius:20px;
  padding:26px; transition:transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease;
}
.guide:hover{ transform:translateY(-4px); box-shadow:0 24px 40px -30px rgba(30,40,20,.45) }
.guide__tag{
  font-family:"Geist",sans-serif; font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--green);
}
.guide h3{ margin-top:12px; font-family:"Geist",sans-serif; font-size:23px; font-weight:400; color:#1E1E1E }
.guide p{ margin-top:12px; font-family:"Geist",sans-serif; font-size:15.5px; line-height:1.62; color:#54584E }
.guide ul{ margin:16px 0 0; padding-left:18px }
.guide li{ font-family:"Geist",sans-serif; font-size:15px; line-height:1.6; color:#4A4A4A; margin-top:7px }
.guide li::marker{ color:var(--green) }

.about-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-top:52px }
.about-split img{ width:100%; height:auto; border-radius:20px }
.about-split h2{ font-family:"Andika",sans-serif; font-weight:700; font-size:34px; color:#3A3A3A }
.about-split p{ margin-top:18px; font-family:"Geist",sans-serif; font-size:17px; line-height:1.68; color:#4A4A4A }

.values{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:56px }
.value{ padding:26px; background:var(--cream); border:1px solid var(--cream-line); border-radius:18px }
.value h3{ font-family:"Geist",sans-serif; font-size:18px; font-weight:500; color:#1E1E1E; margin-top:14px }
.value p{ margin-top:9px; font-family:"Geist",sans-serif; font-size:15px; line-height:1.6; color:#54584E }
.value svg{ width:26px; height:26px; color:var(--green) }

.contact-grid{ display:grid; grid-template-columns:1fr 460px; gap:56px; margin-top:52px; align-items:start }
.field{ display:block; margin-top:18px }
.field span{
  display:block; margin-bottom:7px;
  font-family:"Geist",sans-serif; font-size:13.5px; letter-spacing:.02em; color:#54584E;
}
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px;
  border:1px solid #DFDDC9; border-radius:12px; background:#fff;
  font-family:"Geist",sans-serif; font-size:15.5px; color:#1E1E1E;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field textarea{ min-height:130px; resize:vertical }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(110,138,80,.15);
}
.contact-card{
  background:var(--cream); border:1px solid var(--cream-line); border-radius:20px; padding:30px;
}
.contact-card h3{ font-family:"Geist",sans-serif; font-size:20px; font-weight:500; color:#1E1E1E }
.contact-card dl{ margin:20px 0 0 }
.contact-card dt{
  font-family:"Geist",sans-serif; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:#7C8172; margin-top:18px;
}
.contact-card dd{ margin:6px 0 0; font-family:"Geist",sans-serif; font-size:16.5px; color:#1E1E1E }

.cta-band{
  margin-top:96px; padding:64px 24px 74px; text-align:center;
  background:var(--cream); border-top:1px solid var(--cream-line);
}
.cta-band h2{ font-family:"Andika",sans-serif; font-weight:700; font-size:40px; color:#3A3A3A }
.cta-band h2 em{ font-style:normal; color:var(--green) }
.cta-band p{ margin:16px auto 0; max-width:560px; font-family:"Geist",sans-serif; font-size:17px; line-height:1.6; color:#54584E }
.cta-band .btn-cta{ margin-top:26px }

/* ============ 11. RESPONSIVE ============ */
@media (max-width:1180px){
  .trip{ grid-template-columns:1fr; gap:44px }
  .rail{ position:static }
  .dest-grid, .guide-grid, .pkg-list{ grid-template-columns:1fr 1fr }
  .dest-note{ grid-template-columns:1fr; gap:22px }
  .values{ grid-template-columns:1fr 1fr }
  .contact-grid{ grid-template-columns:1fr; gap:38px }
  .facts{ grid-template-columns:1fr 1fr }
  .page-hero h1{ font-size:46px }
}
@media (max-width:760px){
  /* mobile nav lives in section 14 */

  .page-hero{ padding:44px 0 40px }
  .page-hero h1{ font-size:33px }
  .page-hero p{ font-size:15.5px }
  .dest-grid, .guide-grid, .pkg-list{ grid-template-columns:1fr; gap:22px }
  .dest-grid .dcard{ height:320px }
  .facts{ grid-template-columns:1fr 1fr }
  .incl{ grid-template-columns:1fr; gap:26px }
  .about-split{ grid-template-columns:1fr; gap:30px }
  .values{ grid-template-columns:1fr }
  .trip__figure img{ height:240px }
  .trip h2{ font-size:25px }
  .cta-band{ margin-top:64px; padding:48px 24px 56px }
  .cta-band h2{ font-size:29px }
  .itin__title{ font-size:17px }
  .rail__card, .contact-card, .dest-note{ padding:22px }
}

/* loader backstop: if app.js never loads, CSS still clears it */
@keyframes loaderBail{ to{ opacity:0; visibility:hidden; pointer-events:none } }

/* anchors used as cards */
a.dcard{ display:block; color:inherit }
a.dcard:focus-visible, .pkg__wa:focus-visible, .pkg__link:focus-visible,
.nav__links a:focus-visible, .filters__pill:focus-visible, .itin__head:focus-visible{
  outline:2px solid var(--green); outline-offset:3px; border-radius:6px;
}
.stat span b{ font-weight:inherit }
.story__stats dt{ font-variant-numeric:tabular-nums }
.score__num{ font-variant-numeric:tabular-nums }
/* ============================================================
   12. FLUID OVERRIDES
   The home page is built to a fixed 1440 canvas so it can match
   the board exactly. Below that canvas those fixed widths have to
   become fluid, or the page overflows on phones.
   ============================================================ */
@media (max-width:1320px){
  .bento{ width:auto; max-width:1142px; margin-left:20px; margin-right:20px }
  .pkg-grid{ width:auto; max-width:1230px; left:0; margin-left:20px; margin-right:20px }
  .breakdown{ width:auto; max-width:1084px; margin-left:20px; margin-right:20px }
  .filters{ left:0 }
  .story__inner{ padding-left:40px; padding-right:40px; gap:40px;
                 grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  .story{ height:auto }
  .story__inner{ padding-top:56px; padding-bottom:56px }
  .story__shot{ margin-top:0 }
  .story__shot img{ width:100%; height:auto; max-height:632px; object-fit:cover }
  .hero-shot__stats{ padding-left:40px; padding-right:40px }
}

@media (max-width:1180px){
  .bento{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:22px; max-width:720px;
  }
  .bento__col{ gap:22px }
  .bento__pair{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; height:320px }
  .bento .dcard--lg{ height:360px !important }
  .cutout{ opacity:.55 }
}

@media (max-width:760px){
  .bento{ grid-template-columns:minmax(0,1fr); margin-left:20px; margin-right:20px }
  .bento__pair{ grid-template-columns:minmax(0,1fr); height:auto; gap:18px }
  .bento .dcard{ height:290px !important }
  .bento .dcard--lg{ height:290px !important }
  .dcard--lg .dcard__body h3{ font-size:30px }
  .dcard--lg .dcard__body p{ font-size:14.5px }
  .dcard--sm .dcard__body h3{ font-size:21px }

  .pkg-grid{ grid-template-columns:minmax(0,1fr); gap:20px }
  .pkg h3{ font-size:26px }
  .pkg > p{ font-size:15.5px }
  .pkg__stops li{ font-size:15px }
  .pkg__wa{ margin-top:26px }

  .filters{ width:auto; margin-left:20px; margin-right:20px; height:46px }
  .filters__pill{ height:36px; padding:0 9px; font-size:12px; letter-spacing:.02em }

  .breakdown{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin-top:26px }
  .breakdown > div{ border-left:0; border-top:1px solid #E4E2D6 }
  .breakdown > div:nth-child(1), .breakdown > div:nth-child(2){ border-top:0 }
  .breakdown span{ font-size:14px; white-space:normal }
  .breakdown b{ font-size:22px }

  .review-track{ gap:18px; --rev-gap:9px }
  .review-track > .review{ flex:0 0 82vw }
  .review-rail{ margin-top:56px }
  .score{ gap:14px; margin-top:52px }
  .score__laurel{ height:78px }
  .score__num{ font-size:56px; top:-10px }

  .story__inner{ grid-template-columns:minmax(0,1fr); padding:44px 20px; gap:28px }
  .story__text p{ font-size:17px; line-height:1.55 }
  .story__stats{ gap:34px }

  .explore{ padding-top:64px }
  .packages{ padding-top:80px }
  .reviews{ padding-top:76px }
  .story-head{ padding:80px 0 70px }
  .topo--gap{ height:52px }

  .hero-shot__stats{ padding:34px 18px 20px; gap:16px }
  .stat svg{ width:21px; height:21px }
  .stat span{ font-size:11px; letter-spacing:.04em; text-align:center }

  .footer__glass{ backdrop-filter:none; -webkit-backdrop-filter:none }
  .footer__brand p{ max-width:none }
  .footer__col{ padding-top:22px }
  .footer__col h4{ margin-bottom:16px }
}

/* very small phones */
@media (max-width:400px){
  .hero__title{ font-size:33px }
  .section-title{ font-size:26px }
  .score__num{ font-size:48px }
  .stat span{ font-size:10px }
}

/* ============================================================
   13. FLOATING CUTOUTS
   The parallax in app.js writes `transform`, so the float uses the
   separate `translate` property — the two compose instead of fighting.
   ============================================================ */
@keyframes floatY{
  0%,100%{ translate:0 -5px }
  50%    { translate:0 6px }
}
.cutout{ animation:floatY 7s ease-in-out infinite }
.cutout--dancer-l{ animation-duration:8.4s; animation-delay:-3.1s }
.cutout--buddha  { animation-duration:9.6s; animation-delay:-0.6s }
.cutout--dragon  { animation-duration:7.9s; animation-delay:-4.4s }

@media (prefers-reduced-motion: reduce){
  .cutout{ animation:none; translate:none }
}

/* ============================================================
   14. MOBILE NAV — full-screen glass drawer
   ============================================================ */
@media (max-width:860px){
  .nav{ z-index:90 }
  .nav__inner{ height:66px; padding:0 20px }
  body{ padding-top:66px }
  body.has-banner{ padding-top:0 }

  .nav.is-stuck{ padding:12px 12px 0 }
  .nav.is-stuck .nav__inner{ height:58px; padding:0 8px 0 16px }
  .nav.is-stuck .nav__cta{ height:40px; padding:0 18px }

  /* A backdrop-filter makes the element the containing block for fixed
     children, which would pin the drawer inside the bar. Drop it while open so
     .nav__links / .nav__cta resolve against the viewport. !important because
     the floating (.is-stuck) pill sets these at higher specificity — without
     it the drawer only escaped the bar while the nav was still at the top. */
  body.nav-open .nav, body.nav-open .nav .nav__inner{
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    background:transparent !important; border-bottom-color:transparent;
    box-shadow:none !important; padding-top:0;
  }
  body.nav-open .nav{ padding:0 !important }
  /* Snap, don't animate: the drawer should look identical whether it was
     opened from the top or from the floating pill. Left to transition, the
     bar's padding and height eased back over .3s and dragged the burger with
     them while the drawer was fading in. */
  body.nav-open .nav .nav__inner{
    transition:none !important;
    max-width:none !important; height:66px !important;
    padding:0 20px !important; border-radius:0 !important;
  }
  /* the drawer is light, so the burger goes dark again while it is open even
     over a banner */
  body.nav-open .nav .nav__burger span{ background:#1A1A1A !important }
  /* The drawer is a light sheet, so its links stay dark even on a banner page
     where the transparent bar had flipped them to the light palette. */
  body.nav-open .nav .nav__links a{ color:#2A2A2A !important }
  body.nav-open .nav .nav__links a:active{ color:var(--green) !important }

  /* the drawer's own CTA is a solid dark pill, whatever the bar behind it was
     doing (translucent over a banner, condensed while stuck) */
  body.nav-open .nav .nav__cta{
    background:#1A1A1A !important; color:#FBFAEE !important;
    box-shadow:none !important; height:56px !important; padding:0 40px !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }

  .nav__logo img{ width:56px }

  .nav__burger{
    display:grid; position:relative; z-index:120;
    width:46px; height:46px; margin-right:-8px;
  }
  .nav__burger span{
    width:24px; height:2px; background:#1A1A1A; border-radius:2px;
    transition:transform .34s cubic-bezier(.5,0,.2,1), opacity .18s ease, background .2s ease;
  }
  .nav__burger span + span{ margin-top:6px }
  /* bar pitch is 2 + 6 = 8px, so the outer bars travel exactly 8px to meet */
  body.nav-open .nav__burger span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
  body.nav-open .nav__burger span:nth-child(2){ opacity:0; transform:scaleX(.4) }
  body.nav-open .nav__burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

  /* the drawer itself: whole screen, frosted */
  .nav__links{
    position:fixed; inset:0; z-index:100;
    display:flex !important; flex-direction:column;
    align-items:center; justify-content:center;
    gap:0 !important;
    padding:96px 28px 140px;
    background:rgba(253,252,246,.90);
    backdrop-filter:blur(28px) saturate(160%);
    -webkit-backdrop-filter:blur(28px) saturate(160%);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .34s ease, visibility .34s ease;
    border:0; box-shadow:none;
  }
  body.nav-open .nav__links{ opacity:1; visibility:visible; pointer-events:auto }

  .nav__links a{
    display:block; width:100%; max-width:420px; text-align:center;
    font-family:"Andika",sans-serif !important;
    font-size:30px !important; font-weight:400; letter-spacing:-.01em;
    color:#2A2A2A; padding:20px 0 !important;
    border-bottom:1px solid rgba(30,30,30,.10) !important;
    opacity:0; transform:translateY(14px);
    transition:opacity .4s ease, transform .4s cubic-bezier(.22,.68,.24,1), color .2s ease;
  }
  .nav__links a:last-of-type{ border-bottom:0 !important }
  .nav__links a::after{ display:none }
  .nav__links a:active{ color:var(--green) }
  body.nav-open .nav__links a{ opacity:1; transform:none }
  body.nav-open .nav__links a:nth-child(1){ transition-delay:.10s }
  body.nav-open .nav__links a:nth-child(2){ transition-delay:.16s }
  body.nav-open .nav__links a:nth-child(3){ transition-delay:.22s }
  body.nav-open .nav__links a:nth-child(4){ transition-delay:.28s }
  body.nav-open .nav__links a:nth-child(5){ transition-delay:.34s }

  /* the CTA lives outside the list in the DOM — float it into the drawer */
  .nav__cta{ display:none }
  body.nav-open .nav__cta{
    display:inline-flex; position:fixed; z-index:110;
    left:50%; bottom:84px; translate:-50% 0;
    width:max-content; white-space:nowrap;
    height:56px; padding:0 40px; font-size:16px; border-radius:28px;
    opacity:0; animation:ctaRise .42s ease .40s forwards;
  }
  @keyframes ctaRise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

  body.nav-open{ overflow:hidden }
}

/* ============================================================
   15. MOBILE HERO — first screen is the hero, nothing else
   ============================================================ */
@media (max-width:860px){
  .hero{ padding:30px 20px 0 }
  .hero__pill{ font-size:11px }
  .hero__title{ margin-top:10px; font-size:38px; line-height:1.1 }
  .hero__flag{ height:26px; margin-left:7px; vertical-align:-2px }
  .hero__sub{ margin-top:14px; font-size:14.5px; line-height:1.5 }
  .btn-cta{ margin-top:18px; padding:16px 22px; font-size:16px; border-radius:16px }

  .hero-shot{ margin-top:22px }
  /* the painting is cropped on phones, so the crest sits higher in the frame */
  /* Fill whatever is left of the first screen. The subtracted value is the
     nav + hero copy above it; min/max keep it sane on very short or very
     tall phones. */
  .hero-shot img{
    height:calc(100dvh - 442px);
    min-height:210px; max-height:56dvh;
    object-fit:cover; object-position:center 58%;
  }
  .hero-shot__stats{
    padding:26px 16px 16px;
    grid-template-columns:1fr 1fr; gap:12px;
  }
  .stat{ flex-direction:row; gap:7px; justify-content:center }
  .stat svg{ width:17px; height:17px; flex:0 0 17px }
  .stat span{ font-size:10.5px; letter-spacing:.03em }
}
@media (max-width:400px){
  .hero__title{ font-size:33px }
  .hero-shot img{ height:calc(100dvh - 420px) }
  .nav__links a{ font-size:26px !important; padding:16px 0 !important }
}

/* ============================================================
   16. MOBILE STAT BAR — equal cells, aligned icons
   ============================================================ */
@media (max-width:860px){
  .hero-shot__stats{ gap:14px 10px; justify-items:center; align-items:center }
  .stat{
    width:100%; max-width:160px;
    justify-content:flex-start; align-items:center;
  }
  .stat span{ flex:1; text-align:left; line-height:1.3 }
}

/* ============================================================
   17. MOBILE CUTOUTS — keep the art, shrink it to the margins
   Sections clip so the oversized art never widens the page.
   ============================================================ */
@media (max-width:860px){
  .explore, .packages, .reviews, .story-head{ overflow:clip }
  .section-title{ position:relative; z-index:3 }

  .cutout{ display:block; width:auto; opacity:.42; z-index:1 }
  .cutout--dancer-l{ top:-10px; left:-64px;  right:auto; height:180px }
  .cutout--buddha  { top:6px;   right:-50px; left:auto; height:180px }
  .cutout--dragon  { top:14px;  left:-70px;  right:auto; height:150px }
}
@media (max-width:400px){
  .cutout{ opacity:.35 }
  .cutout--dancer-l{ height:150px }
  .cutout--buddha{ height:150px }   .cutout--dragon{ height:125px }
}

/* ============================================================
   16. Additions — banners, trust strip, gallery, film, forms
   ============================================================ */

/* --- 16.1 page-hero with a photograph behind it --- */
/* The photograph runs from the very top of the document, under the
   transparent nav, so the top padding has to clear the 84px bar as well. */
.page-hero--shot{
  padding:204px 0 104px; margin-bottom:8px;
  background:#143725;
}
.page-hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.5;
}
.page-hero--shot::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,55,37,.72) 0%,rgba(20,55,37,.46) 45%,rgba(251,250,238,.96) 100%);
}
.page-hero--shot .page-hero__inner{ z-index:2 }
.page-hero--shot h1, .page-hero--shot h1 em{ color:#FBFAEE }
.page-hero--shot h1 em{ color:#D9E7B8 }
.page-hero--shot p{ color:rgba(251,250,238,.9) }
.page-hero--shot .page-hero__eyebrow{ background:rgba(251,250,238,.16); color:#FBFAEE }

/* breadcrumb sits on the photograph, just under the nav, instead of in its
   own strip above it */
.page-hero__crumbs{
  position:absolute; top:100px; left:0; right:0; z-index:3;
  display:flex; justify-content:center;
}
.page-hero__crumbs .crumbs{
  width:100%; padding:0 24px; justify-content:center;
  color:rgba(251,250,238,.72);
}
.page-hero__crumbs .crumbs a{ color:rgba(251,250,238,.72) }
.page-hero__crumbs .crumbs a:hover{ color:#D9E7B8 }
.page-hero__crumbs .crumbs span[aria-current]{ color:#FBFAEE }

/* --- 16.2 trust strip --- */
.trust{ padding:34px 24px 6px }
/* the strip grew past its width, so it is a rail: same cards, scroll-snapped,
   with the shared slider in app.js driving arrows and dots */
.trust__rail{ position:relative; max-width:1230px; margin:0 auto }
.trust__inner{
  display:flex; flex-wrap:nowrap; gap:12px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:4px; margin:-4px;
  scrollbar-width:none;
}
.trust__inner::-webkit-scrollbar{ display:none }
.trust__item{ flex:0 0 calc((100% - 36px) / 4); scroll-snap-align:start }
@media (max-width:1080px){ .trust__item{ flex-basis:calc((100% - 24px) / 3) } }
@media (max-width:820px){ .trust__item{ flex-basis:calc((100% - 12px) / 2) } }
@media (max-width:560px){ .trust__item{ flex-basis:82% } }
.trust__item{
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.72); border:1px solid rgba(110,138,80,.24);
  border-radius:14px; padding:14px 16px;
  backdrop-filter:blur(6px);
}
a.trust__item{ transition:border-color .2s, transform .2s }
a.trust__item:hover{ border-color:var(--green); transform:translateY(-2px) }
.trust__item svg{ width:26px; height:26px; flex:0 0 26px; color:var(--green) }
.trust__item span{
  display:flex; flex-direction:column; gap:2px;
  font-family:"Geist",sans-serif; font-size:12px; line-height:1.35; color:#6A6E63;
}
.trust__item b{ font-size:13.5px; font-weight:600; color:#2A2A2A }
.trust__item--msme b{ color:var(--green-deep) }

/* --- 16.3 gallery --- */
.gallery{ max-width:1230px; margin:96px auto 0; padding:0 24px }
.gallery__sub{
  max-width:720px; margin:14px auto 0; text-align:center;
  font-family:"Andika",sans-serif; font-size:16.5px; line-height:1.6; color:#4A4E45;
}
/* Static mosaic — inner pages (about, destinations), where the marquee's
   motion would fight the reading flow. Three columns, two 2x2 hero tiles on
   opposite sides so the eye zig-zags down instead of scanning a contact sheet.
   The arithmetic: 12 photos = 2 heroes (4 cells each) + 10 singles = 18 cells
   = exactly 6 rows of 3, so no row is ever left half-empty. Only tiles 1 and
   7 are placed by hand; the rest auto-flow into the gaps around them.
   Heroes take aspect-ratio:auto — spanning 2 cols + 2 rows + the gap between
   reproduces 4/3 on its own, at every width. */
.gallery__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px;
}
.gallery__grid .shot{ flex:none; width:auto; aspect-ratio:4/3 }
.gallery__grid .shot:nth-child(1){ grid-area:1 / 1 / 3 / 3 }
.gallery__grid .shot:nth-child(7){ grid-area:4 / 2 / 6 / 4 }
.gallery__grid .shot:nth-child(1),
.gallery__grid .shot:nth-child(7){ aspect-ratio:auto; border-radius:18px }
/* heroes carry a bigger caption — they have the room for it */
.gallery__grid .shot:nth-child(1) .shot__cap,
.gallery__grid .shot:nth-child(7) .shot__cap{ font-size:13.5px; padding:34px 20px 16px }

/* tilted three-row marquee: outer rows drift one way, middle row the other */
.gallery__ticker{
  margin:40px calc(50% - 50vw) 0; width:100vw;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.ticker{
  display:flex; flex-direction:column; gap:var(--tick-gap);
  transform:rotate(-6deg) scale(1.12);
  transform-origin:center;
  --tick-card:236px; --tick-gap:16px; --tick-speed:52s;
}
.ticker__row{ overflow:hidden }
.ticker__track{
  display:flex; gap:var(--tick-gap); width:max-content;
  animation:tick-slide var(--tick-speed) linear infinite;
  will-change:transform;
}
.ticker__row--rev .ticker__track{ animation-direction:reverse }
.ticker__row--fwd:nth-of-type(3) .ticker__track{ animation-duration:calc(var(--tick-speed) * 1.18) }
.gallery__ticker:hover .ticker__track{ animation-play-state:paused }
@keyframes tick-slide{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }
.shot{
  position:relative; display:block; padding:0; border:0; cursor:zoom-in;
  border-radius:14px; overflow:hidden; background:#E8E6DA;
  flex:0 0 var(--tick-card); width:var(--tick-card); aspect-ratio:1/1;
  box-shadow:0 10px 26px rgba(20,55,37,.14);
  transition:box-shadow .3s ease;
}
.shot:hover, .shot:focus-visible{ box-shadow:0 16px 38px rgba(20,55,37,.26) }
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.shot:hover img, .shot:focus-visible img{ transform:scale(1.05) }
.shot__cap{
  position:absolute; left:0; right:0; bottom:0; padding:26px 14px 12px; text-align:left;
  font-family:"Geist",sans-serif; font-size:12px; line-height:1.35; color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.62) 100%);
  opacity:0; transform:translateY(6px); transition:opacity .28s, transform .28s;
}
.shot:hover .shot__cap, .shot:focus-visible .shot__cap{ opacity:1; transform:none }
/* touch devices never hover — hold the caption open on the static grid */
@media (hover:none){ .gallery__grid .shot__cap{ opacity:1; transform:none } }
.gallery__credit{
  margin-top:22px; text-align:right;
  font-family:"Geist",sans-serif; font-size:12px; color:#8A8E82;
}
.gallery__credit a{ color:var(--green); text-decoration:underline }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:32px;
  background:rgba(14,22,16,.94);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .26s ease;
}
.lightbox.is-open{ display:flex; opacity:1 }
.lightbox img{
  max-width:100%; max-height:80vh; border-radius:12px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  animation:lb-in .3s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes lb-in{ from{ opacity:0; transform:scale(.965) } to{ opacity:1; transform:none } }
.lightbox__cap{
  position:absolute; left:0; right:0; bottom:26px; text-align:center; padding:0 40px;
  font-family:"Geist",sans-serif; font-size:13px; color:rgba(255,255,255,.82);
}
.lightbox__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.35); color:#fff; font-size:20px; line-height:1; cursor:pointer;
}
.lightbox__btn:hover{ background:rgba(0,0,0,.6) }
.lightbox__prev{ left:18px } .lightbox__next{ right:18px }
.lightbox__close{ top:18px; right:18px; transform:none }

/* --- 16.4 festival film --- */
.film{ max-width:1230px; margin:96px auto 0; padding:0 24px }
.film__inner{
  display:grid; grid-template-columns:1fr 404px; gap:56px; align-items:center;
  background:#143725; border-radius:26px; padding:48px 52px;
  background-image:linear-gradient(rgba(20,55,37,.94),rgba(20,55,37,.94)),url("/assets/topo.webp");
  background-size:auto, 800px;
}
.film__eyebrow{
  display:inline-block; background:rgba(251,250,238,.14); border-radius:12px; padding:5px 14px;
  font-family:"Geist",sans-serif; font-size:11.5px; color:#E7EFD8;
}
.film__text h2{
  margin-top:16px;
  font-family:"Andika",sans-serif; font-weight:400; font-size:46px; line-height:1.12; color:#FBFAEE;
}
.film__text h2 em{ font-style:normal; color:#C9DFA0 }
.film__text p{
  margin-top:16px; max-width:52ch;
  font-family:"Andika",sans-serif; font-size:16.5px; line-height:1.65; color:rgba(251,250,238,.86);
}
.film__text .btn-cta{ margin-top:26px }
.film__frame{ margin:0 }
.film__video{ position:relative; border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.4) }
.film__frame video{
  width:100%; height:auto; display:block; border-radius:18px; background:#000;
}
.film__sound{
  position:absolute; top:14px; right:14px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px 9px 11px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.34); background:rgba(12,20,14,.5);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:#fff; font-family:"Geist",sans-serif; font-size:12px; font-weight:500; letter-spacing:.01em;
  transition:background .24s ease, border-color .24s ease;
}
.film__sound:hover{ background:rgba(12,20,14,.76); border-color:rgba(255,255,255,.6) }
.film__sound svg{ width:17px; height:17px; flex:0 0 17px }
.film__sound-on{ display:none }
.film__sound[aria-pressed="true"] .film__sound-off{ display:none }
.film__sound[aria-pressed="true"] .film__sound-on{ display:block }
.film__sound[aria-pressed="true"] .film__sound-txt{ display:none }
.film__sound[aria-pressed="true"]{ padding:9px 11px }
.film__frame figcaption{
  margin-top:12px; font-family:"Geist",sans-serif; font-size:12px; line-height:1.45;
  color:rgba(251,250,238,.6);
}

/* --- 16.5 review avatars (initials, not stock faces) --- */
.review header .review__av{
  width:58px; height:58px; flex:0 0 58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,#6E8A50,#143725); color:#FBFAEE;
  font-family:"Geist",sans-serif; font-size:16px; font-weight:600; letter-spacing:.02em;
}

/* --- 16.6 enquiry form on the home page --- */
.home-form{ max-width:1230px; margin:96px auto 0; padding:0 24px }
.home-form__inner{
  display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start;
  background:rgba(255,255,255,.74); border:1px solid rgba(110,138,80,.22);
  border-radius:26px; padding:46px 48px; backdrop-filter:blur(6px);
}
.home-form__eyebrow{
  display:inline-block; background:var(--pill-grey,#EFEFEA); border-radius:12px; padding:5px 14px;
  font-family:"Geist",sans-serif; font-size:11.5px; color:#3B3B3B;
}
.home-form__text h2{
  margin-top:16px;
  font-family:"Andika",sans-serif; font-weight:400; font-size:42px; line-height:1.14; color:rgba(0,0,0,.79);
}
.home-form__text h2 em{ font-style:normal; color:var(--green) }
.home-form__text p{
  margin-top:16px; font-family:"Andika",sans-serif; font-size:16.5px; line-height:1.6; color:#4A4E45;
}
.home-form__text .pkg__wa{ margin-top:24px }

/* --- 16.7 photo credits list --- */
.credits{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:14px }
.credits li{
  border-bottom:1px solid rgba(0,0,0,.08); padding-bottom:14px;
  display:flex; flex-direction:column; gap:4px;
}
.credits b{ font-family:"Geist",sans-serif; font-size:14.5px; font-weight:600; color:#2A2A2A }
.credits span{ font-family:"Geist",sans-serif; font-size:13px; color:#6A6E63 }
.credits a{ color:var(--green); text-decoration:underline }

/* --- 16.8 floating WhatsApp button --- */
.wa-float{
  position:fixed; right:28px; bottom:28px; z-index:120;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:transform .22s ease, box-shadow .22s ease;
}
.wa-float:hover{ transform:scale(1.07); box-shadow:0 14px 32px rgba(0,0,0,.34) }
/* the wave: a ring that grows out of the button's edge and fades, twice over.
   Two rings out of one pseudo-element — the second is a box-shadow on the
   same ring, offset through the keyframes so the pulse reads as continuous. */
.wa-float::before{
  content:''; position:absolute; top:0; right:0; bottom:0; left:0;
  border-radius:50%; border:2px solid #25D366;
  pointer-events:none; opacity:0;
  animation:wa-wave 2.4s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes wa-wave{
  0%   { transform:scale(1);    opacity:.8; box-shadow:0 0 0 0 rgba(37,211,102,.45) }
  70%  { transform:scale(1.6);  opacity:0;  box-shadow:0 0 0 14px rgba(37,211,102,0) }
  100% { transform:scale(1.6);  opacity:0;  box-shadow:0 0 0 14px rgba(37,211,102,0) }
}
.wa-float svg{ width:30px; height:30px }
.wa-float::after{
  content:attr(data-label); position:absolute; right:68px; white-space:nowrap;
  background:#143725; color:#FBFAEE; border-radius:9px; padding:7px 12px;
  font-family:"Geist",sans-serif; font-size:12.5px;
  opacity:0; transform:translateX(6px); pointer-events:none; transition:opacity .2s, transform .2s;
}
.wa-float:hover::after{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .wa-float, .shot img{ transition:none }
  .wa-float::before{ animation:none }
  .ticker__track{ animation:none }
  .ticker__row{ overflow-x:auto; -webkit-overflow-scrolling:touch }
  .lightbox img{ animation:none }
}

/* --- 16.9 responsive --- */
@media (max-width:1080px){
  .ticker{ --tick-card:200px; --tick-gap:14px }
  .gallery__grid{ gap:14px }
  .film__inner{ grid-template-columns:1fr; gap:34px; padding:40px }
  .film__frame{ max-width:404px; margin:0 auto }
  .home-form__inner{ grid-template-columns:1fr; gap:34px; padding:38px }
}
@media (max-width:760px){
  .page-hero--shot{ padding:132px 0 62px }
  .page-hero__crumbs{ top:78px }
  .page-hero__crumbs .crumbs{ font-size:12.5px; padding:0 20px }
  .trust{ padding:26px 20px 0 }
  .gallery, .film, .home-form{ margin-top:64px }
  .ticker{ --tick-card:150px; --tick-gap:10px; --tick-speed:38s; transform:rotate(-5deg) scale(1.14) }
  .gallery__grid{ grid-template-columns:repeat(2,1fr); gap:10px }
  .gallery__grid .shot:nth-child(1),
  .gallery__grid .shot:nth-child(7){ grid-area:auto; aspect-ratio:4/3; border-radius:14px }
  .shot__cap{ display:none }
  .film__text h2{ font-size:31px }
  .home-form__text h2{ font-size:29px }
  .home-form__inner{ padding:26px 22px }
  .wa-float{ right:14px; bottom:14px }
  .wa-float::after{ display:none }
  .lightbox{ padding:16px }
  .lightbox__btn{ width:40px; height:40px }
}


/* ============ HERO SKY ============
   The hero copy and the Punakha painting (a PNG cutout with a transparent
   sky) share one wrapper so a single watercolour sky sits behind both, with a
   warm sunrise glow burning through just behind the ridge line. */
.hero-wrap{
  position:relative; isolation:isolate; overflow:hidden;
  background:#EAF3FB;
}
/* The sky lives on its own layer so it can drift. Same painting, same cover
   framing — it is scaled up ~14% purely so the slow horizontal pan has
   overscan to travel into and never exposes an edge. */
.hero-wrap::after{
  content:""; position:absolute; z-index:-3;
  left:0; right:0; top:0; bottom:0;
  background:url("/assets/sky.webp") no-repeat top center;
  background-size:cover;
  transform:scale(1.22) translate3d(-5.5%,0,0);
  animation:hero-sky-drift 38s ease-in-out infinite alternate;
  will-change:transform;
  pointer-events:none;
}
@keyframes hero-sky-drift{
  from{ transform:scale(1.22) translate3d(-5.5%,0,0) }
  to  { transform:scale(1.22) translate3d(5.5%,-2.2%,0) }
}
@media (prefers-reduced-motion:reduce){
  .hero-wrap::after{ animation:none; transform:scale(1.22) }
}
/* the sky tile ends before the page does — fade it into white underneath */
.hero-wrap::before{
  content:""; position:absolute; z-index:-2;
  left:0; right:0; top:0; bottom:0;
  background:linear-gradient(180deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.55) 68%,#fff 92%);
  pointer-events:none;
}
/* golden sunrise glow burning through the sky just behind the ridge crest.
   Anchored to the painting, not the wrapper, so it tracks the ridge line at
   every viewport width. Pure CSS — no image. */
.hero-shot::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  /* A band rotated to the ridge angle, so the glow runs ALONG the mountain
     instead of sitting over it as a blob. The angle comes from hero.webp's
     own alpha silhouette: crest at 60% width / 2.3% down, falling to 36.3%
     at the left edge => 16.7deg. The painting keeps its aspect ratio at every
     width, so the angle stays true. */
  left:-25%; right:-25%;
  top:-18%; height:30%;
  transform:rotate(-16.7deg);
  /* cream on the ridge line, tapering off into the watercolour sky */
  background:linear-gradient(to top,
    rgba(253,245,194,.95) 0,
    rgba(253,245,194,.82) 20%,
    rgba(254,247,205,.52) 42%,
    rgba(254,249,215,.24) 64%,
    rgba(255,251,228,.07) 84%,
    rgba(255,251,228,0) 100%);
  /* stop at the crest (60% of the painting = 57% along this 150%-wide band);
     past it the ridge drops away and the band would float in open sky */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 40%,rgba(0,0,0,.45) 51%,transparent 58%);
          mask-image:linear-gradient(90deg,#000 0,#000 40%,rgba(0,0,0,.45) 51%,transparent 58%);
  /* blurs away every edge the gradient stops would otherwise leave behind */
  filter:blur(26px);
}
@media (max-width:760px){
  .hero-shot::before{ top:-10%; height:20% }
}
.hero{ position:relative; background:transparent }
.hero > *{ position:relative; z-index:2 }
.hero-shot{ z-index:1 }

/* ============================================================
   21. HOME — nav rides transparently over the hero
   The hero gradient runs to the top of the page instead of the
   white band the fixed nav's body padding used to leave behind.
   ============================================================ */
body.home{ padding-top:0 }
body.home .hero{ padding-top:157px }   /* 84px nav + 73px hero padding */
@media (max-width:860px){
  body.home{ padding-top:0 }
  body.home .hero{ padding-top:139px }  /* 66px nav + 73px hero padding */
}
@media (max-width:760px){
  body.home .hero{ padding-top:114px }  /* 66px nav + 48px hero padding */
}


/* --- 16.9 destination pages --- */
.dest-lead{
  display:grid; grid-template-columns:1fr 320px; gap:56px; align-items:start;
  margin-top:64px;
}
.dest-lead__text p{
  font-family:"Geist",sans-serif; font-size:17.5px; line-height:1.72; color:#43473F;
}
.dest-lead__text p + p{ margin-top:18px }
.dest-facts{
  background:var(--cream); border:1px solid var(--cream-line); border-radius:20px;
  padding:8px 24px 20px;
}
.dest-facts > div{ padding:16px 0; border-bottom:1px solid var(--cream-line) }
.dest-facts > div:last-child{ border-bottom:0 }
.dest-facts dt{
  font-family:"Geist",sans-serif; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:#7C8175;
}
.dest-facts dd{ margin:5px 0 0; font-family:"Geist",sans-serif; font-size:16.5px; color:#1F2A1C }
.dest-h2{
  margin-top:88px;
  font-family:"Andika",sans-serif; font-weight:400; font-size:34px; color:var(--ink-strong);
}
.dest-things{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:28px }
.dest-things article{
  background:#fff; border:1px solid var(--cream-line); border-radius:20px; padding:26px 28px;
  transition:transform .45s cubic-bezier(.22,.8,.3,1), box-shadow .45s ease;
}
.dest-things article:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -30px rgba(30,40,20,.55) }
.dest-things h3{ font-family:"Geist",sans-serif; font-weight:500; font-size:18px; color:#1A1A1A }
.dest-things p{
  margin-top:10px; font-family:"Geist",sans-serif; font-size:15.5px; line-height:1.6; color:#4A4E45;
}
.dest-more{
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin:28px 0 20px;
}
.dest-more__card{ position:relative; display:block; border-radius:16px; overflow:hidden; height:150px }
.dest-more__card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.8,.3,1);
}
.dest-more__card:hover img{ transform:scale(1.07) }
.dest-more__card span{
  position:absolute; inset:auto 0 0 0; padding:26px 14px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.68),transparent);
  font-family:"Geist",sans-serif; font-size:14.5px; color:#fff;
}
.dest-note h3 a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.18) }
.dest-note h3 a:hover{ border-bottom-color:currentColor }

@media (max-width:900px){
  .dest-lead{ grid-template-columns:1fr; gap:32px }
  .dest-things{ grid-template-columns:1fr }
  .dest-more{ grid-template-columns:1fr 1fr }
  .dest-h2{ font-size:27px; margin-top:60px }
}


/* --- 16.10 long-form legal pages --- */
.legal-wrap p{ font-family:"Geist",sans-serif; font-size:16.5px; line-height:1.75; color:#4A4E45 }
.legal-wrap a{ color:var(--green-deep); text-decoration:underline; text-underline-offset:3px }
.legal__intro{
  padding-bottom:28px; border-bottom:1px solid var(--cream-line);
  font-size:17.5px !important; color:#3E4239 !important;
}
ol.legal{ list-style:none; counter-reset:legal; margin:0; padding:0 }
ol.legal > li{
  counter-increment:legal;
  padding:34px 0 32px; border-bottom:1px solid var(--cream-line);
}
ol.legal > li:last-child{ border-bottom:0 }
ol.legal > li > h2{
  display:flex; align-items:baseline; gap:14px;
  font-family:"Geist",sans-serif; font-weight:500; font-size:19px; color:#1A1A1A;
}
ol.legal > li > h2::before{
  content:counter(legal,decimal-leading-zero);
  font-size:13px; letter-spacing:.06em; color:var(--green); opacity:.9;
}
ol.legal > li > p{ margin-top:12px }
ol.legal__sub{
  margin:16px 0 4px; padding:18px 24px; list-style:decimal inside;
  background:var(--cream); border:1px solid var(--cream-line); border-radius:14px;
}
ol.legal__sub li{
  font-family:"Geist",sans-serif; font-size:16.5px; line-height:1.9; color:#3E4239;
}
.legal__foot{
  margin-top:38px; padding-top:26px; border-top:1px solid var(--cream-line);
  font-size:15.5px !important; color:#6A6E63 !important;
}
@media (max-width:700px){
  ol.legal > li > h2{ font-size:17.5px; gap:10px }
  .legal-wrap p{ font-size:16px }
}


/* --- 16.11 destination photo strip --- */
.dest-shots{
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px;
  margin-top:64px;
}
.dest-shots__f{ position:relative; margin:0; border-radius:18px; overflow:hidden; height:300px }
.dest-shots__f img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.22,.8,.3,1);
}
.dest-shots__f:hover img{ transform:scale(1.05) }
.dest-shots__f figcaption{
  position:absolute; inset:auto 0 0 0; padding:34px 16px 14px;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent);
  font-family:"Geist",sans-serif; font-size:13px; line-height:1.45; color:#fff;
  opacity:0; transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
}
.dest-shots__f:hover figcaption{ opacity:1; transform:none }
@media (max-width:900px){
  .dest-shots{ grid-template-columns:1fr 1fr; gap:12px }
  .dest-shots__f{ height:210px }
  .dest-shots__f--wide{ grid-column:1 / -1; height:260px }
  .dest-shots__f figcaption{ opacity:1; transform:none }
}


/* --- 16.12 build credit --- */
.footer__by{ opacity:.72 }
.footer__by a{ color:inherit; text-decoration:underline; text-underline-offset:3px }
.footer__by a:hover{ opacity:1; text-decoration-thickness:2px }


/* --- cookie consent ---
   Google Analytics sets cookies, so it stays unloaded until the visitor says
   yes. Built from the existing tokens so it reads as part of the site. */
.cc{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:120;
  display:none; gap:18px; align-items:center; flex-wrap:wrap;
  max-width:760px; margin:0 auto; padding:16px 20px;
  background:var(--cream); border:1px solid var(--cream-line); border-radius:14px;
  box-shadow:0 10px 40px -18px rgba(0,0,0,.45);
  font-family:Geist,sans-serif; font-size:14.5px; line-height:1.55; color:var(--ink-soft);
}
.cc.is-on{ display:flex }
.cc p{ margin:0; flex:1 1 320px }
.cc a{ color:var(--green-deep); text-underline-offset:3px }
.cc__btns{ display:flex; gap:10px; flex:0 0 auto }
.cc__btn{
  font:inherit; font-size:13.5px; letter-spacing:.02em; cursor:pointer;
  padding:9px 18px; border-radius:999px; border:1px solid var(--green-deep);
  background:transparent; color:var(--green-deep); transition:.18s ease;
}
.cc__btn:hover{ background:var(--sage-bar) }
.cc__btn--yes{ background:var(--green-deep); color:#fff }
.cc__btn--yes:hover{ background:var(--ink-strong); border-color:var(--ink-strong) }
.cc__btn:focus-visible{ outline:2px solid var(--green); outline-offset:2px }
@media (max-width:640px){
  .cc{ padding:14px 16px }
  .cc__btns{ flex:1 1 100%; }
  .cc__btn{ flex:1 }
}

/* --- 16.11 Phase 3: answer-first blocks, long-form prose, data tables --- */
/* Three additions only, all built from the existing type scale, cream surface
   and rule colour. No new visual language — an answer block is a lead
   paragraph with a rule, a table is the same Geist at the same sizes. */
.answer{
  max-width:1230px; margin:44px auto 0;
  padding:26px 30px;
  background:var(--cream); border:1px solid var(--cream-line);
  border-left:3px solid var(--green); border-radius:16px;
  font-family:"Geist",sans-serif; font-size:18px; line-height:1.65; color:#33372F;
}
.prose{ max-width:840px }
.prose h2{
  font-family:"Andika",sans-serif; font-weight:700; font-size:30px; color:#3A3A3A;
  margin-top:56px;
}
.prose h3{
  font-family:"Geist",sans-serif; font-weight:500; font-size:19px; color:#1E1E1E;
  margin-top:32px;
}
.prose p{ margin-top:14px; font-family:"Geist",sans-serif; font-size:16.5px; line-height:1.75; color:#4A4E45 }
.prose ul{ margin:16px 0 0; padding-left:19px }
.prose li{ font-family:"Geist",sans-serif; font-size:16px; line-height:1.7; color:#4A4E45; margin-top:9px }
.prose li::marker{ color:var(--green) }
.prose a{ color:var(--green-deep); text-decoration:underline; text-underline-offset:3px }

.tbl-wrap{ margin-top:24px; overflow-x:auto; -webkit-overflow-scrolling:touch }
.tbl{ width:100%; min-width:520px; border-collapse:collapse; font-family:"Geist",sans-serif }
.tbl caption{
  caption-side:top; text-align:left; padding-bottom:12px;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--green);
}
.tbl th, .tbl td{
  padding:13px 16px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--cream-line);
  font-size:15.5px; line-height:1.6; color:#4A4E45;
}
.tbl thead th{ font-weight:500; font-size:13.5px; color:#1E1E1E; background:var(--cream) }
.tbl tbody th{ font-weight:500; color:#1E1E1E; white-space:nowrap }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td{ border-bottom:0 }

@media (max-width:900px){
  .answer{ font-size:16.5px; padding:22px 24px; margin-top:34px }
  .prose h2{ font-size:26px; margin-top:44px }
}