/* =========================================================
   ÀI NÍ BALI TOUR — Premium boutique travel site
   ========================================================= */

:root{
  --green:#415A45;
  --green-deep:#33472f;
  --gold:#C9A35A;
  --gold-soft:#dcc08a;
  --ivory:#F7F2EA;
  --ivory-warm:#efe7d8;
  --brown:#4A392F;
  --brown-soft:#6b5849;
  --white:#ffffff;

  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --serif-zh:'Noto Serif TC','PingFang TC','Heiti TC','Microsoft JhengHei',
             'Noto Sans CJK TC',serif;

  --shadow-sm:0 6px 20px rgba(74,57,47,.08);
  --shadow-md:0 18px 50px rgba(74,57,47,.14);
  --shadow-lg:0 30px 80px rgba(51,40,32,.22);

  --radius:22px;
  --radius-lg:32px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1240px;
  --pad:clamp(1.4rem,5vw,5rem);
}

*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x on <html> as well as <body>: the mobile menu drawer is
   position:fixed and parked off-screen at translateX(100%), and a fixed element
   is positioned against the viewport, so body's overflow never clipped it.
   On Android that let the whole page pan sideways — the site looked off-centre
   and a strip of background showed down the right edge. */
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{
  font-family:var(--sans);
  color:var(--brown);
  background:var(--ivory);
  line-height:1.7;
  font-weight:300;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- Keyboard focus ----------
   :focus-visible fires for keyboard/AT navigation but NOT for a mouse click,
   so this is invisible to the 95% who never press Tab and essential for the
   rest. Without it a keyboard user tabs completely blind (WCAG 2.4.7).
   Gold rather than the browser default blue: it stays legible on the ivory
   ground, the green nav and the dark footer alike. */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
/* Inputs already carry a border, so the offset would double it up. */
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:1px}
/* Dark surfaces: the gold is too close to the footer's brown to read. */
.footer :focus-visible,.nav:not(.scrolled):not(.nav--solid) :focus-visible{outline-color:var(--ivory)}
/* Never remove the outline for mouse users without putting one back. */
:focus:not(:focus-visible){outline:none}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;color:var(--green)}
h2{font-size:clamp(2.1rem,4.6vw,3.6rem);letter-spacing:.5px}
h2 em{font-style:italic;color:var(--gold)}

.section{padding:clamp(4.5rem,9vw,8rem) var(--pad);max-width:var(--maxw);margin:0 auto}

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
  margin-bottom:1.1rem;
  display:inline-flex;align-items:center;gap:.8rem;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);display:inline-block}
.eyebrow--light{color:var(--gold-soft)}
.eyebrow--light::before{background:var(--gold-soft)}

.section__head{text-align:center;max-width:640px;margin:0 auto clamp(2.6rem,5vw,4rem)}
.section__head .eyebrow{justify-content:center}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:.8rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  padding:1.05rem 2.3rem;border-radius:100px;
  cursor:pointer;border:1px solid transparent;
  transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease);
  white-space:nowrap;
}
.btn--gold{background:var(--gold);color:var(--white);box-shadow:0 10px 30px rgba(201,163,90,.35)}
.btn--gold:hover{background:#bb9349;transform:translateY(-3px);box-shadow:0 16px 40px rgba(201,163,90,.45)}
.btn--ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.6);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:#fff;color:var(--green);transform:translateY(-3px)}
.btn--outline{background:transparent;color:var(--green);border-color:var(--green)}
.btn--outline:hover{background:var(--green);color:#fff;transform:translateY(-3px)}

/* ---------- Navbar ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:all .5s var(--ease);
  padding:1.1rem var(--pad);
}
.nav__inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
/* The blur lives on a pseudo-element, NOT on .nav itself. An element with
   backdrop-filter becomes the containing block for its position:fixed
   descendants — and the mobile menu drawer is a child of .nav. With the filter
   on .nav, the drawer stopped being sized against the viewport the moment the
   header gained .scrolled: it collapsed to the height of the header and the
   links spilled out over the page. Same frosted look, no containing block. */
.nav.scrolled{
  padding:.55rem var(--pad);
  box-shadow:0 6px 30px rgba(74,57,47,.08);
  border-bottom:1px solid rgba(201,163,90,.18);
}
.nav.scrolled::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(247,242,234,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
/* The logo may give up a little room on a narrow desktop, but never collapse:
   with plain flex-shrink it was crushed to 0 width whenever the links were
   tight, which is why the header looked logo-less between 640 and 960px. */
.nav__logo{flex:0 1 auto;min-width:132px}
/* JS injects the close button, the Book Now button and the contact row into
   .nav__links for the mobile drawer. They are drawer furniture — on desktop
   they sat in the inline nav row and pushed the header to 162px tall. */
.nav__close,.nav__menu-cta,.nav__menu-chans{display:none}
.nav__logo{display:flex;align-items:center}
.nav__logo img{height:56px;width:auto;transition:height .5s var(--ease)}
.nav.scrolled .nav__logo img{height:44px}

/* Two logo files, one shown at a time. The wordmark is dark green and gold —
   fine on ivory, nearly invisible on the hero photo, which is what the header
   sat on top of. The cream variant already existed for the footer; this just
   puts it to work. Stacked rather than swapped so there is no reflow and no
   second network request mid-scroll. */
.nav__logo{position:relative}
.nav__logo-light{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .35s var(--ease),height .5s var(--ease)}
.nav:not(.scrolled):not(.nav--solid) .nav__logo-light{opacity:1}
.nav:not(.scrolled):not(.nav--solid) .nav__logo img:not(.nav__logo-light){opacity:0}
.nav__logo img:not(.nav__logo-light){transition:opacity .35s var(--ease),height .5s var(--ease)}
.nav__logo-fallback{font-family:var(--serif);font-size:1.5rem;color:var(--green);flex-direction:column;line-height:1;letter-spacing:3px}
.nav__logo-fallback small{font-size:.5rem;letter-spacing:4px;color:var(--gold);font-family:var(--sans)}

.nav__links{display:flex;gap:1.55rem;flex-wrap:nowrap}
/* Eight links, a language switch and a CTA is a lot of row. Between 1060 and
   1200 the gap tightens so the row stays on one line right down to the point
   where the drawer takes over. */
@media (max-width:1200px){
  .nav__links{gap:1.15rem}
}
@media (max-width:1130px){
  .nav__links{gap:.9rem}
  .nav__links a{font-size:.79rem;letter-spacing:.05em}
}
.nav__links a{
  font-size:.82rem;letter-spacing:.08em;font-weight:400;color:var(--brown);
  position:relative;padding:.3rem 0;transition:color .3s;
  white-space:nowrap;flex:0 0 auto;      /* never break "About Ani" in half */
}
.nav.scrolled .nav__links a{color:var(--brown)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .4s var(--ease)}
.nav__links a:hover{color:var(--gold)}
.nav__links a:hover::after{width:100%}

/* transparent nav on hero: light text */
.nav:not(.scrolled):not(.nav--solid) .nav__links a,
.nav:not(.scrolled):not(.nav--solid) .lang-toggle{color:#fff}
.nav:not(.scrolled):not(.nav--solid) .nav__logo-fallback{color:#fff}

.nav__actions{display:flex;align-items:center;gap:1.1rem}
/* A globe reads as "language" in any language — which matters when half the
   audience cannot read the other half's label. The two codes stay next to it
   so nobody has to guess what they will get, and the active one is filled
   rather than merely brighter: opacity alone was too weak over a photo. */
.lang-toggle{
  display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;
  padding:.28rem .5rem .28rem .55rem;border-radius:100px;
  border:1px solid rgba(201,163,90,.42);background:rgba(255,255,255,.5);
  font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.04em;
  color:var(--brown);line-height:1;white-space:nowrap;flex:0 0 auto;
  transition:border-color .3s,background .3s;
}
.lang-toggle:hover{border-color:var(--gold);background:rgba(255,255,255,.8)}
.lang-toggle__ico{width:14px;height:14px;flex:0 0 14px;color:var(--gold);opacity:.9}
.lang-toggle__opt{
  padding:.24rem .42rem;border-radius:100px;opacity:.62;transition:.3s;
  white-space:nowrap;   /* 中文 was breaking into 中 / 文 */
}
.lang-toggle__opt.is-active{opacity:1;color:#fff;background:var(--green);font-weight:600}

/* Over the hero photo: glass, not a white pill. */
.nav:not(.scrolled):not(.nav--solid) .lang-toggle{
  border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.nav:not(.scrolled):not(.nav--solid) .lang-toggle:hover{background:rgba(255,255,255,.24)}
.nav:not(.scrolled):not(.nav--solid) .lang-toggle__ico{color:var(--gold-soft)}
.nav:not(.scrolled):not(.nav--solid) .lang-toggle__opt.is-active{
  color:var(--green-deep);background:rgba(255,255,255,.92)
}

/* On a phone the header is logo + switch + burger in 375px. Showing both
   language codes costs 111px for information the page itself already gives —
   you can see which language you are reading. So only the language you would
   GET is shown, which is what the button actually does, and the pill becomes
   a proper 44px target at the same time. */
@media (max-width:1060px){
  .lang-toggle{min-height:44px;padding:.28rem .72rem .28rem .62rem;gap:.38rem;font-size:.76rem}
  .lang-toggle__opt.is-active{display:none}
  .lang-toggle__opt{opacity:1;padding:0}
  .lang-toggle__ico{width:15px;height:15px;flex-basis:15px}
}

/* 44x44 is the Apple/Google minimum, and this is the ONLY way to reach the
   menu on a phone. The bars stay 24px wide — the padding does the work, so
   nothing looks bigger, it just stops being a miss. */
.nav__burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:0;width:44px;height:44px;flex:0 0 44px;margin-right:-.5rem}
.nav__burger span{width:24px;height:2px;background:currentColor;color:var(--brown);transition:.3s}
.nav:not(.scrolled):not(.nav--solid) .nav__burger span{background:#fff}
.nav__close{display:none}
.nav__menu-cta,.nav__menu-wa{display:none}
.nav-backdrop{position:fixed;inset:0;z-index:98;background:rgba(51,40,32,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.nav-backdrop.show{opacity:1;visibility:visible}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__img{width:100%;height:120%;object-fit:cover;will-change:transform}
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(51,40,32,.72) 0%,rgba(65,90,69,.45) 45%,rgba(74,57,47,.25) 100%);
}
.hero__content{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);width:100%;color:#fff}
.hero__eyebrow{
  font-size:.75rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-soft);
  font-weight:600;margin-bottom:1.6rem;
}
.hero__title{
  font-size:clamp(2.9rem,7.2vw,6rem);color:#fff;font-weight:500;
  letter-spacing:.5px;margin-bottom:1.6rem;text-shadow:0 4px 30px rgba(0,0,0,.25);
}
.hero__sub{
  max-width:540px;font-size:clamp(1rem,1.6vw,1.18rem);font-weight:300;
  line-height:1.8;color:rgba(255,255,255,.92);margin-bottom:2.6rem;
}
.hero__cta{display:flex;gap:1rem;flex-wrap:wrap}

.hero__scroll{position:absolute;bottom:2.4rem;left:50%;transform:translateX(-50%);width:26px;height:44px;border:1.5px solid rgba(255,255,255,.55);border-radius:20px;display:flex;justify-content:center}
.hero__scroll span{width:3px;height:8px;background:#fff;border-radius:3px;margin-top:8px;animation:scroll 1.8s infinite}
@keyframes scroll{0%{opacity:0;transform:translateY(0)}40%{opacity:1}80%{opacity:0;transform:translateY(14px)}}

/* ---------- About ---------- */
.about{position:relative}
.about__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.about__media{position:relative}
.about__media img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);aspect-ratio:4/5;object-fit:cover}
.about__badge{
  position:absolute;bottom:-28px;right:-18px;background:var(--green);color:#fff;
  border-radius:var(--radius);padding:1.4rem 1.7rem;box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:1rem;
}
.about__badge-num{font-family:var(--serif);font-size:2.9rem;line-height:1;color:var(--gold-soft)}
.about__badge-num sup{font-size:1.2rem}
.about__badge-label{font-size:.72rem;letter-spacing:.06em;line-height:1.4;color:rgba(255,255,255,.9)}
.about__text h2{margin-bottom:1.8rem}
.about__story p{margin-bottom:1.2rem;color:var(--brown-soft);font-size:1.02rem}
.about__signature-line{font-family:var(--serif);font-style:italic;font-size:1.5rem !important;color:var(--green) !important;line-height:1.4;margin-top:1.6rem !important}
.about__signature{font-family:var(--serif);font-size:1.8rem;color:var(--gold);margin-top:.8rem;font-style:italic}

/* ---------- Why ---------- */
.why{background:linear-gradient(180deg,var(--ivory) 0%,var(--ivory-warm) 100%);max-width:none;border-radius:0}
.why > *{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.why__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.why__card{
  background:var(--white);border-radius:var(--radius);padding:2.3rem 1.7rem;
  box-shadow:var(--shadow-sm);border:1px solid rgba(201,163,90,.12);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.why__card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.why__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:50%;
  background:var(--ivory);color:var(--gold);margin-bottom:1.3rem;
  border:1px solid rgba(201,163,90,.3);
  transition:background .5s var(--ease),color .5s var(--ease);
}
.why__icon svg{width:28px;height:28px}
.why__card:hover .why__icon{background:var(--gold);color:#fff}
.why__card h3{font-size:1.3rem;margin-bottom:.5rem;color:var(--green)}
.why__card p{font-size:.88rem;color:var(--brown-soft);line-height:1.6}


/* ---- richer listing card ---- */
.pcard .tcard__rate{margin:.1rem 0 .7rem}
/* duration + group size */
.pcard__facts{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-bottom:.85rem}
.pcard__fact{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;color:var(--brown-soft)}
.pcard__fact svg{width:14px;height:14px;color:var(--gold);flex-shrink:0}
.pcard__body p{-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;flex:none;margin-bottom:.9rem}

/* ---------- Experiences ---------- */
.exp__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.exp__card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);min-height:400px;display:flex;align-items:flex-end;
  isolation:isolate;transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.exp__card--wide{grid-column:span 2}
.exp__img{
  position:absolute;inset:0;z-index:-2;background-image:var(--img);
  background-size:cover;background-position:center;transition:transform 1s var(--ease);
}
.exp__card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(51,40,32,.82) 0%,rgba(51,40,32,.25) 55%,rgba(51,40,32,0) 100%)}
.exp__card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.exp__card:hover .exp__img{transform:scale(1.08)}
.exp__body{padding:2rem;color:#fff}
.exp__body h3{color:#fff;font-size:1.7rem;margin-bottom:.4rem}
.exp__body p{font-size:.92rem;color:rgba(255,255,255,.85);margin-bottom:.9rem;max-width:26rem}
.exp__link{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);font-weight:500;transition:letter-spacing .4s var(--ease)}
.exp__card:hover .exp__link{letter-spacing:.2em}

/* ---------- Destinations carousel ---------- */
.dest{max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,6vw,4.5rem) var(--pad)}
.dest__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2.2rem}
.dest__head h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.dest__arrows{display:flex;gap:.7rem;flex-shrink:0}
.dest__arrow{width:48px;height:48px;border-radius:50%;border:1px solid rgba(74,57,47,.18);background:var(--white);color:var(--green);cursor:pointer;font-size:1.05rem;display:flex;align-items:center;justify-content:center;transition:all .35s var(--ease)}
.dest__arrow:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.dest__track{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:.5rem;scrollbar-width:none;-ms-overflow-style:none}
.dest__track::-webkit-scrollbar{display:none}
.dest__card{position:relative;flex:0 0 clamp(230px,26%,300px);aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;scroll-snap-align:start;box-shadow:var(--shadow-sm);isolation:isolate;display:block}
.dest__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.dest__card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(51,40,32,.78),rgba(51,40,32,0) 58%)}
.dest__card:hover img{transform:scale(1.07)}
.dest__card h3{position:absolute;bottom:1.3rem;left:1.4rem;right:1rem;z-index:2;color:#fff;font-size:1.7rem}
.dest__more{text-align:center;margin-top:2.6rem}

/* ---------- Trip ideas ---------- */
.ideas{max-width:var(--maxw);margin:0 auto;padding:clamp(2rem,5vw,3.5rem) var(--pad)}
.ideas h2{margin-bottom:2.2rem;font-size:clamp(1.8rem,3.6vw,2.8rem)}
.ideas__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.idea{position:relative;min-height:320px;border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,4vw,3.2rem);color:#fff;isolation:isolate}
.idea img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.idea--green::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,rgba(65,90,69,.95) 30%,rgba(65,90,69,.5))}
.idea--brown::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,rgba(51,40,32,.95) 30%,rgba(74,57,47,.5))}
.idea h3{color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.9rem;max-width:14em}
.idea p{color:rgba(255,255,255,.9);max-width:24em;margin-bottom:1.8rem;font-size:.98rem}
.idea .btn{align-self:flex-start;background:#fff;color:var(--green);border:none}
.idea .btn:hover{background:var(--gold);color:#fff}

/* ---------- Popular tours grid ---------- */
.popular{max-width:var(--maxw);margin:0 auto;padding:clamp(2rem,5vw,3.5rem) var(--pad) clamp(4rem,8vw,6rem)}
.popular__head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:2.2rem;flex-wrap:wrap}
.popular__head h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.popular__head .exp__link{color:var(--gold);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.popular__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.popular__nav{display:flex;align-items:center;gap:1.4rem}
.popular__arrows{display:flex;gap:.7rem;flex-shrink:0}
/* Carousel variant (homepage Popular) */
.popular__grid--carousel{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:.6rem;scrollbar-width:none;-ms-overflow-style:none}
.popular__grid--carousel::-webkit-scrollbar{display:none}
.popular__grid--carousel > .tcard{flex:0 0 clamp(270px,30%,310px);scroll-snap-align:start}
.popular.similar{border-top:1px solid rgba(201,163,90,.2);padding-top:clamp(3rem,6vw,4.5rem)}
/* Short description on tour cards */
.tcard__desc{font-size:.82rem;color:var(--brown-soft);line-height:1.55;margin-bottom:.8rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .3s}
.tcard__desc:hover{color:var(--green)}
.tcard{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid rgba(201,163,90,.12);display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tcard:hover{transform:translateY(-7px);box-shadow:var(--shadow-md)}
.tcard__img{position:relative;aspect-ratio:4/3;background-size:cover;background-position:center}
/* Badge stack — sits top-right, stacks downward if a tour has more than one */
.tcard__badges,.pcard .tcard__badges{position:absolute;top:.9rem;right:.9rem;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:.35rem}
.tcard__badge{background:var(--gold);color:#fff;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .7rem;border-radius:100px;box-shadow:0 4px 12px rgba(74,57,47,.25);white-space:nowrap}
/* colour per badge type */
.tcard__badge--sale{background:#b5533f}
.tcard__badge--viral{background:#c2407a}
.tcard__badge--popular{background:var(--green)}
.tcard__badge--bestseller{background:#8a5a2b}
.tcard__badge--bestvalue{background:#2f6f6b}
.tcard__badge--new{background:#3f6ea8}
.tcard__badge--recommended{background:var(--gold)}
.tcard__dur-badge{position:absolute;top:.9rem;left:.9rem;z-index:2;font-size:.69rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--green);background:rgba(247,242,234,.95);padding:.32rem .75rem;border-radius:100px;box-shadow:0 2px 8px rgba(74,57,47,.12)}
.tcard__body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.tcard__loc{display:flex;align-items:center;gap:.35rem;font-size:.74rem;color:var(--brown-soft);margin-bottom:.55rem}
.tcard__loc svg{width:13px;height:13px;color:var(--gold);flex-shrink:0}
.tcard__title{font-family:var(--serif);font-size:1.28rem;color:var(--green);line-height:1.2;margin-bottom:.55rem;min-height:2.4em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tcard__rate{display:flex;align-items:center;gap:.45rem;font-size:.8rem;margin-bottom:.8rem}
.tcard__stars{color:var(--gold);letter-spacing:.08em}
.tcard__stars .off{color:rgba(74,57,47,.18)}
.tcard__rate span{color:var(--brown-soft)}
.tcard__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.tcard__tags span{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--green);background:var(--ivory);border:1px solid rgba(201,163,90,.25);padding:.28rem .6rem;border-radius:100px;font-weight:500}
.tcard__foot{margin-top:auto;padding-top:.9rem;border-top:1px solid rgba(74,57,47,.1);display:flex;justify-content:space-between;align-items:flex-end;gap:.6rem}
.tcard__price{font-size:.72rem;color:var(--brown-soft)}
.tcard__price del{color:var(--brown-soft);opacity:.55;margin-right:.3rem}
.tcard__price b{display:block;font-size:1.15rem;color:var(--green);font-family:var(--serif);font-weight:600;margin-top:.1rem}
.tcard__dur{display:flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--brown-soft);white-space:nowrap}
.tcard__dur svg{width:13px;height:13px;flex-shrink:0}

/* ---------- Story / Parallax ---------- */
.story{position:relative;min-height:80vh;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.story__bg{position:absolute;inset:-10% 0;background-size:cover;background-position:center;background-attachment:fixed}
.story__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(51,40,32,.7),rgba(65,90,69,.6))}
.story__content{position:relative;z-index:2;max-width:760px;padding:3rem var(--pad);color:#fff}
.story__lines{font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.5;font-weight:400;margin-bottom:2.4rem;color:#fff}

/* ---------- Stats ---------- */
.stats{background:var(--green);color:#fff;padding:clamp(3.5rem,7vw,5.5rem) var(--pad)}
.stats__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.stats__item{position:relative}
.stats__item:not(:last-child)::after{content:"";position:absolute;right:-1rem;top:15%;height:70%;width:1px;background:rgba(255,255,255,.18)}
.stats__num{display:block;font-family:var(--serif);font-size:clamp(3rem,6vw,4.6rem);color:var(--gold-soft);line-height:1;font-weight:500}
.stats__num--word{font-size:clamp(2rem,4vw,3.1rem)}
.stats__label{display:block;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;margin-top:.8rem;color:rgba(255,255,255,.82);font-weight:400}

/* ---------- Reviews ---------- */
.reviews__slider{overflow:hidden;max-width:820px;margin:0 auto}
.reviews__track{display:flex;transition:transform .7s var(--ease)}
.review{min-width:100%;text-align:center;padding:0 1rem}
.review__stars{color:var(--gold);letter-spacing:.3em;font-size:1.1rem;margin-bottom:1.5rem}
.review blockquote{
  font-family:var(--serif);font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.55;
  color:var(--green);font-weight:400;font-style:italic;margin-bottom:2rem;
}
.review figcaption{display:flex;align-items:center;justify-content:center;gap:1rem}
.review figcaption img{width:60px;height:60px;border-radius:50%;object-fit:cover;border:2px solid var(--gold-soft)}
.review figcaption div{text-align:left}
.review figcaption strong{display:block;font-weight:600;font-size:.95rem;color:var(--brown)}
.review figcaption span{font-size:.8rem;color:var(--brown-soft)}

.reviews__nav{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-top:2.8rem}
.reviews__btn{
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(201,163,90,.5);
  background:transparent;color:var(--gold);cursor:pointer;font-size:1.1rem;
  transition:all .35s var(--ease);
}
.reviews__btn:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.reviews__dots{display:flex;gap:.6rem}
.reviews__dots span{width:8px;height:8px;border-radius:50%;background:rgba(74,57,47,.2);cursor:pointer;transition:.3s}
.reviews__dots span.active{background:var(--gold);width:26px;border-radius:4px}

/* ---------- Gallery ---------- */
.gallery__handle{display:inline-block;margin-top:1rem;color:var(--gold);font-weight:500;letter-spacing:.05em;font-size:.95rem}
/* Uniform tiles — the old tall/wide spans left ragged gaps and an uneven
   bottom edge. Equal squares read as a deliberate grid instead. */
.gallery__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.gallery__item{aspect-ratio:1/1}
.gallery__item{
  border-radius:var(--radius);background-size:cover;background-position:center;
  position:relative;overflow:hidden;transition:transform .6s var(--ease);
}
.gallery__item::after{content:"";position:absolute;inset:0;background:rgba(65,90,69,0);transition:background .4s}
.gallery__item:hover{transform:scale(.985)}
.gallery__item:hover::after{background:rgba(65,90,69,.25)}
/* kept harmless in case old markup still carries these classes */
.gallery__item--tall{grid-row:auto}
.gallery__item--wide{grid-column:auto}

/* ---------- CTA ---------- */
.cta{text-align:center}
.cta__inner{max-width:640px;margin:0 auto;background:var(--white);border-radius:var(--radius-lg);padding:clamp(3rem,6vw,5rem);box-shadow:var(--shadow-md);border:1px solid rgba(201,163,90,.15)}
.cta__inner .eyebrow{justify-content:center}
.cta__text{color:var(--brown-soft);margin:1.4rem auto 2.2rem;max-width:460px}
.cta__buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ---------- Footer ---------- */
.footer{background:var(--brown);color:rgba(247,242,234,.82)}
.footer__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(3.5rem,6vw,5rem) var(--pad) 2.5rem;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem}
.footer__logo{height:64px;filter:brightness(0) invert(1);opacity:.92;margin-bottom:1rem}
.footer__logo-fallback{font-family:var(--serif);font-size:1.6rem;color:var(--ivory);letter-spacing:3px;margin-bottom:1rem}
.footer__tag{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--gold-soft);max-width:20rem}
.footer__col h4{color:var(--ivory);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.2rem;font-family:var(--sans);font-weight:600}
.footer__col a{display:block;font-size:.9rem;margin-bottom:.7rem;color:rgba(247,242,234,.72);transition:color .3s,padding-left .3s}
.footer__col a:hover{color:var(--gold-soft);padding-left:5px}
.footer__loc{font-size:.85rem;margin-top:.7rem;color:rgba(247,242,234,.55)}
.footer__base{border-top:1px solid rgba(247,242,234,.12);padding:1.6rem var(--pad);max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-size:.78rem;color:rgba(247,242,234,.55)}
.footer__zh{font-family:var(--serif-zh)}

/* ---------- Floating WhatsApp ---------- */
.fab{
  position:fixed;bottom:1.6rem;right:1.6rem;z-index:90;
  width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px rgba(37,211,102,.45);transition:transform .4s var(--ease);
  animation:fabPulse 2.6s infinite;
}
.fab:hover{transform:scale(1.08)}
@keyframes fabPulse{0%,100%{box-shadow:0 12px 30px rgba(37,211,102,.4)}50%{box-shadow:0 12px 30px rgba(37,211,102,.4),0 0 0 12px rgba(37,211,102,.08)}}

/* =========================================================
   INTERIOR PAGES (Services / Tours / Activities)
   ========================================================= */

/* ---------- Sub-page hero banner ---------- */
.subhero{position:relative;min-height:62vh;display:flex;align-items:center;overflow:hidden}
.subhero__media{position:absolute;inset:0;z-index:-1}
.subhero__media img{width:100%;height:100%;object-fit:cover}
.subhero__overlay{position:absolute;inset:0;background:linear-gradient(105deg,rgba(51,40,32,.72),rgba(65,90,69,.4))}
.subhero__content{max-width:var(--maxw);margin:0 auto;padding:6rem var(--pad) 2rem;width:100%;color:#fff}
.subhero__content h1{font-size:clamp(2.6rem,6vw,4.6rem);color:#fff;margin-bottom:1rem;text-shadow:0 4px 30px rgba(0,0,0,.25)}
.subhero__content p{max-width:560px;font-size:clamp(1rem,1.5vw,1.15rem);color:rgba(255,255,255,.9);font-weight:300}
.crumb{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft);font-weight:600;margin-bottom:1.2rem;display:block}
.crumb a{color:inherit;border-bottom:1px solid transparent;transition:border-color .3s,opacity .3s;display:inline-block;padding:.72rem 0}  /* 15px tall was not tappable */
.crumb a:hover{border-bottom-color:currentColor;opacity:.85}
.td-top .crumb a{color:var(--gold)}

/* ---------- Page intro ---------- */
.pageintro{max-width:760px;margin:0 auto;text-align:center;padding:clamp(4rem,8vw,6.5rem) var(--pad) 1rem}
.pageintro h2{margin-bottom:1.3rem}
.pageintro p{color:var(--brown-soft);font-size:1.08rem}

/* ---------- Service alternating rows ---------- */
.svc{max-width:var(--maxw);margin:0 auto;padding:clamp(2rem,5vw,3.5rem) var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.svc:nth-child(even) .svc__media{order:2}
.svc__media{position:relative}
.svc__media img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.svc__tag{position:absolute;top:1.2rem;left:1.2rem;background:var(--gold);color:#fff;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:.5rem 1rem;border-radius:100px}
.svc__body h3{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:1rem}
.svc__body > p{color:var(--brown-soft);margin-bottom:1.4rem}
.svc__list{list-style:none;margin-bottom:1.8rem}
.svc__list li{position:relative;padding-left:1.8rem;margin-bottom:.7rem;color:var(--brown);font-size:.98rem}
.svc__list li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(201,163,90,.2)}
.svc__price{font-family:var(--serif);font-size:1.25rem;color:var(--green);font-style:italic;margin-bottom:1.5rem}
.svc__price b{color:var(--gold);font-style:normal;font-weight:600}

/* ---------- Price / tour cards ---------- */
.price-grid{max-width:var(--maxw);margin:0 auto;padding:1rem var(--pad) clamp(4rem,8vw,6rem);display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.pcard{
  background:var(--white);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);border:1px solid rgba(201,163,90,.12);
  display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.pcard:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.pcard__img{position:relative;aspect-ratio:3/2;background-size:cover;background-position:center}
.pcard__img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(51,40,32,.35),transparent 55%)}
.pcard__rank{position:absolute;top:1rem;left:1rem;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(247,242,234,.92);color:var(--green);font-family:var(--serif);font-size:1.1rem;font-weight:600;display:flex;align-items:center;justify-content:center}
.pcard__price{position:absolute;bottom:1rem;right:1rem;z-index:2;background:var(--gold);color:#fff;font-size:.8rem;font-weight:600;letter-spacing:.02em;padding:.45rem .9rem;border-radius:100px;box-shadow:0 6px 18px rgba(201,163,90,.4)}
.pcard__price small{font-weight:400;opacity:.85;font-size:.68rem}
.pcard__body{padding:1.6rem 1.6rem 1.8rem;display:flex;flex-direction:column;flex:1}
.pcard__body h3{font-size:1.5rem;margin-bottom:.5rem;color:var(--green)}
.pcard__body p{font-size:.9rem;color:var(--brown-soft);line-height:1.6;margin-bottom:1rem;flex:1}
.pcard__meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.3rem}
.pcard__meta span{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--green);background:var(--ivory);border:1px solid rgba(201,163,90,.25);padding:.32rem .7rem;border-radius:100px;font-weight:500}
.pcard__btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold);border:1px solid rgba(201,163,90,.5);border-radius:100px;padding:.85rem 1rem;transition:all .35s var(--ease)}
.pcard__btn:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
/* "View tour" is the primary action on all 35 cards, and it rendered at
   11.8px. The tap area was always fine (49px tall, full width) — this is
   legibility. Wide letter-spacing costs more at small sizes, so ease that
   off as the type grows. */
@media (max-width:760px){
  .pcard__btn{font-size:.82rem;letter-spacing:.1em}
  .pcard__meta span{font-size:.76rem}
}

.price-note{max-width:var(--maxw);margin:-2rem auto 0;padding:0 var(--pad);text-align:center;font-size:.82rem;color:var(--brown-soft);opacity:.8;font-style:italic}

/* Half Day / Full Day filter tabs */
.tour-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem;max-width:var(--maxw);margin:0 auto 2.2rem;padding:0 var(--pad)}
.tour-tabs button{font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brown-soft);background:transparent;border:1px solid rgba(201,163,90,.4);border-radius:100px;padding:.65rem 1.5rem;cursor:pointer;transition:.3s var(--ease)}
.tour-tabs button:hover{border-color:var(--gold);color:var(--green)}
.tour-tabs button.active{background:var(--green);color:#fff;border-color:var(--green)}
.pcard__dur-badge{position:absolute;top:.9rem;left:.9rem;z-index:2;font-size:.69rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--green);background:rgba(247,242,234,.95);padding:.32rem .75rem;border-radius:100px;box-shadow:0 2px 8px rgba(74,57,47,.12)}
.price-grid.dur-full .pcard[data-duration="half"],
.price-grid.dur-half .pcard[data-duration="full"]{display:none}

/* ---------- Booking channels ---------- */
.booking{background:linear-gradient(180deg,var(--ivory) 0%,var(--ivory-warm) 100%);padding:clamp(4rem,8vw,6.5rem) var(--pad)}
.booking__inner{max-width:var(--maxw);margin:0 auto;text-align:center}
.booking__head{max-width:600px;margin:0 auto 3rem}
.booking__head .eyebrow{justify-content:center}
.booking__head p{color:var(--brown-soft);margin-top:1rem}
.booking__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;max-width:840px;margin:0 auto}
.chan{
  background:var(--white);border-radius:var(--radius);padding:2.4rem 1.6rem;
  box-shadow:var(--shadow-sm);border:1px solid rgba(201,163,90,.14);
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.chan:hover{transform:translateY(-7px);box-shadow:var(--shadow-md)}
.chan__icon{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;color:#fff}
.chan__icon svg{width:30px;height:30px}
.chan__icon--wa{background:#25D366}
.chan__icon--line{background:#06C755}
.chan__icon--wc{background:#2DC100}
.chan h3{font-size:1.4rem;color:var(--green);margin-bottom:.2rem}
.chan p{font-size:.85rem;color:var(--brown-soft);margin-bottom:1rem}
.chan__link{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold)}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(38px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Chinese font application ---------- */
body.zh h1,body.zh h2,body.zh h3,body.zh h4,body.zh .story__lines,body.zh .review blockquote,body.zh .about__signature-line{font-family:var(--serif-zh);font-weight:500}
body.zh .about__signature{font-family:var(--serif-zh)}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .why__grid{grid-template-columns:repeat(2,1fr)}
  .exp__grid{grid-template-columns:repeat(2,1fr)}
  .exp__card--wide{grid-column:span 2}
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:2.5rem 1rem}
  .stats__item:nth-child(2)::after{display:none}
  .footer__inner{grid-template-columns:1fr 1fr}
  .about__grid{grid-template-columns:1fr}
  .about__media{max-width:420px;margin:0 auto}
  .gallery__grid{grid-template-columns:repeat(2,1fr)}
}
/* Measured: logo 132 + eight links ~595 + switch ~86 + CTA ~120 + gaps ~66
   = just over 1000px, before the page padding. Below 1060 the row cannot fit
   honestly, so the drawer takes over rather than the labels wrapping. */
@media (max-width:1060px){
  .nav__links{
    position:fixed;inset:0 0 0 auto;width:84%;max-width:340px;background:var(--ivory);z-index:101;
    flex-direction:column;justify-content:flex-start;align-items:stretch;padding:5.4rem 2rem 2.5rem;gap:0;
    /* 8 links + Book Now + the channel row need ~830px. On a 812px screen the
       WeChat button was already cut off, and an iPhone SE loses far more — so
       the drawer scrolls rather than hiding its own bottom. */
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding-bottom:calc(2.5rem + env(safe-area-inset-bottom,0px));
      transform:translateX(100%);transition:transform .5s var(--ease),visibility .5s;
      box-shadow:var(--shadow-lg);visibility:hidden;
  }
    /* visibility, not transform alone — a fixed panel parked off-screen still
       gives some mobile browsers something to pan towards */
    .nav__links.open{transform:none;visibility:visible}
  .nav__links a{color:var(--brown) !important;font-size:1.15rem;padding:1.05rem .2rem;border-bottom:1px solid rgba(201,163,90,.18);transition:color .25s,padding-left .25s}
  .nav__links a::after{display:none}
  .nav__links a:hover,.nav__links a:active{color:var(--gold);padding-left:.7rem}
  .nav__close{
    display:flex;align-items:center;justify-content:center;position:absolute;top:1.3rem;right:1.4rem;
    width:42px;height:42px;border-radius:50%;border:1px solid rgba(74,57,47,.18);background:transparent;
    color:var(--brown);font-size:1.7rem;line-height:1;cursor:pointer;transition:.3s;
  }
  .nav__close:hover{background:var(--gold);border-color:var(--gold);color:#fff}
  .nav__burger{display:flex;color:var(--brown)}
  .nav__cta{display:none}

  /* Book + WhatsApp buttons inside the mobile menu */
  .nav__links a.nav__menu-cta{
    display:inline-flex;justify-content:center;align-items:center;width:100%;
    margin-top:1.8rem;padding:1rem 1.5rem;border-bottom:none;
    color:#fff !important;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  }
  .nav__links a.nav__menu-cta:hover{color:#fff !important;padding-left:1.5rem}
  .nav__links a.nav__menu-wa{
    display:inline-flex;align-items:center;justify-content:center;gap:.55rem;width:100%;
    margin-top:.7rem;padding:.9rem 1.2rem;border:1px solid rgba(74,57,47,.2);border-radius:100px;
    border-bottom:1px solid rgba(74,57,47,.2);
    color:var(--brown) !important;font-size:.85rem;font-weight:600;letter-spacing:.02em;
  }
  .nav__links a.nav__menu-wa:hover{padding-left:1.2rem;background:var(--ivory-warm)}
  .nav__links a.nav__menu-wa svg{width:19px;height:19px;color:#25D366;flex-shrink:0}
}
@media (max-width:640px){
  /* Compact 2-up cards so "Why Ani" isn't an endless scroll on mobile */
  .why__grid{grid-template-columns:1fr 1fr;gap:.8rem}
  .why__card{padding:1.3rem 1rem}
  .why__icon{width:46px;height:46px;margin-bottom:.85rem}
  .why__icon svg{width:22px;height:22px}
  .why__card h3{font-size:1rem;margin-bottom:.35rem;line-height:1.25}
  .why__card p{font-size:.78rem;line-height:1.5}
  .exp__grid{grid-template-columns:1fr}
  .exp__card--wide{grid-column:span 1}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stats__item::after{display:none !important}
  .footer__inner{grid-template-columns:1fr;gap:0}
  .footer__brand{margin-bottom:1.4rem}
  .footer__col h4{cursor:pointer;display:flex;justify-content:space-between;align-items:center;margin-bottom:0;padding:1.15rem 0;border-bottom:1px solid rgba(247,242,234,.14)}
  .footer__col h4::after{content:"+";font-size:1.5rem;line-height:1;color:var(--gold-soft);font-weight:300}
  .footer__col.open h4::after{content:"–"}
  .footer__col a,.footer__col .footer__loc{max-height:0;overflow:hidden;opacity:0;margin:0;transition:max-height .35s var(--ease),opacity .3s,margin .3s}
  .footer__col.open a,.footer__col.open .footer__loc{max-height:52px;opacity:1;margin-bottom:.9rem}
  .footer__col.open a:first-of-type{margin-top:1rem}
  .about__badge{right:0;padding:1.1rem 1.3rem}
  .story__bg{background-attachment:scroll}
  /* Tidy, uniform 2-up gallery on mobile — drop the tall/wide spans that made it uneven */
  .gallery__grid{grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:.6rem}
  .gallery__item{aspect-ratio:1/1}
  .gallery__item--tall{grid-row:auto}
  .gallery__item--wide{grid-column:auto}
}
@media (max-width:960px){
  .price-grid{grid-template-columns:repeat(2,1fr)}
  .svc{grid-template-columns:1fr;gap:1.8rem}
  .svc:nth-child(even) .svc__media{order:0}
  .svc__media{max-width:520px}
  .booking__grid{grid-template-columns:1fr;max-width:420px}
  .popular__grid{grid-template-columns:repeat(2,1fr)}
  .ideas__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .price-grid{grid-template-columns:1fr}
  .subhero{min-height:52vh}
  .popular__grid{grid-template-columns:1fr 1fr;gap:1rem}
  /* Carousel: one card + a peek of the next; arrows give way to swipe */
  .popular__grid--carousel{gap:1rem}
  .popular__grid--carousel > .tcard{flex:0 0 82%}
  .popular__arrows{display:none}
  .tcard__title{font-size:1.05rem}
  .tcard__body{padding:1rem}
  .dest__card{flex-basis:74%}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation:none !important;scroll-behavior:auto}
  .story__bg{background-attachment:scroll}
}

/* =========================================================
   WECHAT MODAL / LIGHTBOX / TOUR DETAIL / ENQUIRY FORM
   ========================================================= */

/* ---------- WeChat modal ---------- */
.wx-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:rgba(51,40,32,.55);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.wx-modal.open{opacity:1;visibility:visible}
.wx-modal__box{background:var(--ivory);border-radius:var(--radius-lg);padding:2.6rem 2.4rem;max-width:360px;width:100%;text-align:center;position:relative;box-shadow:var(--shadow-lg);transform:translateY(16px) scale(.98);transition:transform .4s var(--ease)}
.wx-modal.open .wx-modal__box{transform:none}
.wx-modal__close{position:absolute;top:.9rem;right:1.1rem;background:none;border:none;font-size:1.8rem;line-height:1;color:var(--brown-soft);cursor:pointer;transition:color .3s}
.wx-modal__close:hover{color:var(--gold)}
.wx-modal__box h3{font-size:1.9rem;color:var(--green);margin-bottom:.3rem}
.wx-modal__sub{font-size:.88rem;color:var(--brown-soft);margin-bottom:1.4rem}
.wx-modal__qr{width:200px;height:200px;margin:0 auto 1.3rem;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid rgba(201,163,90,.25)}
.wx-modal__qr img{width:100%;height:100%;object-fit:contain}
.wx-modal__ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center;font-size:.78rem;color:var(--brown-soft);line-height:1.5}
.wx-modal__id{font-size:.9rem;color:var(--brown)}
.wx-modal__id b{color:var(--gold)}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;gap:clamp(.6rem,2vw,1.6rem);padding:2rem;background:rgba(51,40,32,.9);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox__stage{display:flex;flex-direction:column;align-items:center;gap:.9rem;max-width:80vw;cursor:zoom-out}
.lightbox img{max-width:80vw;max-height:82vh;border-radius:var(--radius);box-shadow:var(--shadow-lg);cursor:default;animation:lbFade .4s var(--ease)}
@keyframes lbFade{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.lightbox__count{color:rgba(255,255,255,.75);font-size:.78rem;letter-spacing:.18em;font-weight:500}
.lightbox__nav{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s var(--ease)}
.lightbox__nav:hover{background:var(--gold);border-color:var(--gold);transform:scale(1.08)}
.lightbox__close{position:absolute;top:1.4rem;right:1.8rem;background:none;border:none;font-size:2.6rem;color:#fff;cursor:pointer;line-height:1;z-index:2;transition:color .3s}
.lightbox__close:hover{color:var(--gold)}
@media (max-width:640px){
  .lightbox{padding:1rem}
  .lightbox__stage{max-width:100vw}
  .lightbox img{max-width:92vw}
  .lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;font-size:1.5rem}
  .lightbox__prev{left:.5rem}
  .lightbox__next{right:.5rem}
  .lightbox__nav:hover{transform:translateY(-50%) scale(1.08)}
}

/* ---------- Solid nav (pages without a dark hero) ---------- */
.nav--solid{border-bottom:1px solid rgba(201,163,90,.18)}
/* same containing-block trap as .nav.scrolled — keep the blur off the element */
.nav--solid::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(247,242,234,.85);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);}
.nav--solid .nav__links a,.nav--solid .lang-toggle{color:var(--brown)}
.nav--solid .nav__logo-fallback{color:var(--green)}
.nav--solid .lang-toggle__opt.is-active{color:var(--gold)}
.nav--solid .nav__burger span{background:var(--brown)}

/* ---------- Tour detail ---------- */
.td{max-width:var(--maxw);margin:0 auto;padding:clamp(6rem,10vw,7.5rem) var(--pad) clamp(3rem,6vw,5rem)}
.td-top{margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.td-title{font-size:clamp(2.1rem,4.5vw,3.4rem);color:var(--green);margin:.5rem 0 1.1rem;line-height:1.05}
.td-top .crumb{display:block;color:var(--gold);margin-bottom:0}
.td-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(201,163,90,.22)}
.td-header__tags{display:flex;flex-wrap:wrap;gap:.5rem}
.td-header__tags span{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--green);background:var(--ivory);border:1px solid rgba(201,163,90,.3);padding:.38rem .85rem;border-radius:100px}
.td-header__meta{display:flex;align-items:center;gap:1.4rem;font-size:.86rem;color:var(--brown-soft);flex-wrap:wrap}
.td-header__stars{display:flex;align-items:center;gap:.45rem}
.td-header__stars .s{color:var(--gold);letter-spacing:.06em}
.td-header__stars b{color:var(--brown);font-weight:600}
.td-header__stars a{color:var(--brown-soft);text-decoration:underline;text-underline-offset:2px}
.td-header__stars a:hover{color:var(--gold)}
.td-header__loc{display:flex;align-items:center;gap:.35rem}
.td-header__loc svg{width:15px;height:15px;color:var(--gold);flex-shrink:0}
.td__grid{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.td__main > .eyebrow{margin-top:0}
.td__lead{font-size:1.1rem;color:var(--brown-soft);margin-bottom:2rem;line-height:1.8}
.td__facts{display:flex;flex-wrap:wrap;gap:1.4rem;margin-bottom:2.4rem;padding:1.4rem 1.6rem;background:var(--ivory);border-radius:var(--radius);border:1px solid rgba(201,163,90,.18)}
.td__fact{display:flex;flex-direction:column;gap:.15rem}
.td__fact small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600}
.td__fact strong{font-family:var(--serif);font-size:1.25rem;color:var(--green);font-weight:600}
.td h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin:2.4rem 0 1.3rem}
.td h2:first-child{margin-top:0}

/* itinerary timeline */
.timeline{list-style:none;position:relative;padding-left:2.2rem}
.timeline::before{content:"";position:absolute;left:9px;top:.5rem;bottom:.5rem;width:2px;background:linear-gradient(var(--gold),rgba(201,163,90,.2))}
.timeline li{position:relative;padding-bottom:1.8rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-2.2rem;top:.35rem;width:20px;height:20px;border-radius:50%;background:var(--ivory);border:2px solid var(--gold);box-shadow:0 0 0 4px var(--white)}
.timeline h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:.3rem}
.timeline strong{display:block;font-family:var(--serif);font-size:1.35rem;color:var(--green);margin-bottom:.3rem;font-weight:500}
.timeline p{color:var(--brown-soft);font-size:.96rem}

/* package cards + à-la-carte rate table */
.td-packages{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin:.4rem 0 1.5rem}
.pkg{background:var(--ivory);border:1px solid rgba(201,163,90,.25);border-radius:var(--radius);padding:1.4rem 1.3rem;display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.pkg:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.pkg__name{font-family:var(--serif);font-size:1.4rem;color:var(--green);margin-bottom:.1rem}
.pkg__price{font-family:var(--serif);font-size:1.7rem;color:var(--gold);font-weight:600;margin-bottom:1rem}
.pkg__price small{font-size:.72rem;color:var(--brown-soft);font-family:var(--sans);font-weight:400}
.pkg ul{list-style:none;margin:0 0 1.1rem;flex:1;padding:0}
.pkg li{position:relative;padding-left:1.5rem;margin-bottom:.55rem;font-size:.92rem;color:var(--brown);line-height:1.4}
.pkg li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:700}
.pkg .btn{width:100%;padding:.85rem 1rem}
.td-rates{width:100%;border-collapse:collapse;margin:.3rem 0 1.4rem;font-size:.95rem}
.td-rates th,.td-rates td{text-align:left;padding:.75rem .5rem;border-bottom:1px solid rgba(201,163,90,.2)}
.td-rates th{font-family:var(--sans);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brown-soft);font-weight:600}
.td-rates td:last-child,.td-rates th:last-child{text-align:right;white-space:nowrap}
.td-rates td:nth-child(2),.td-rates th:nth-child(2){color:var(--brown-soft);font-size:.85rem}
.td-rates .r-name{color:var(--green);font-weight:500}
.td-rates .r-price{font-family:var(--serif);color:var(--gold);font-weight:600;font-size:1.05rem}

/* includes / excludes */
.incl{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 2.4rem}
.incl ul{list-style:none}
.incl li{position:relative;padding-left:1.9rem;margin-bottom:.8rem;color:var(--brown);font-size:.96rem}
.incl__yes li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:700}
.incl__no li{color:var(--brown-soft)}
.incl__no li::before{content:"✕";position:absolute;left:0;top:0;color:#b08968;font-weight:700}
.incl h3{font-size:1.4rem;margin-bottom:1rem;color:var(--green)}

/* gallery — full-width (hero left + 2x2 strip right) */
.td-gallery{display:grid;grid-template-columns:1.5fr 1fr;gap:.8rem;position:relative;aspect-ratio:16/7;margin-bottom:clamp(2rem,4vw,3rem)}
.td-gallery__item{border-radius:var(--radius);background-size:cover;background-position:center;cursor:zoom-in;position:relative;overflow:hidden;transition:transform .5s var(--ease);min-height:0}
.td-gallery__item::after{content:"";position:absolute;inset:0;background:rgba(65,90,69,0);transition:background .4s}
.td-gallery__item:hover::after{background:rgba(65,90,69,.18)}
.td-gallery__strip{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:.8rem;min-height:0}
.td-gallery__strip .td-gallery__item:nth-child(5){display:none}
/* photos 7+ live here — invisible, but the lightbox still finds them */
.td-gallery__hidden{display:none}
/* "+N" overlay on the last visible thumbnail when there are extra photos.
   Desktop shows 4 strip tiles, mobile shows 5 — so the overlay is rendered on
   both and CSS reveals whichever tile is actually on screen. */
.td-gallery__more{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  background:rgba(51,40,32,.55);color:#fff;font-family:var(--serif);font-size:1.6rem;
  font-weight:600;letter-spacing:.02em;pointer-events:none;
}
.td-gallery__strip .td-gallery__item:nth-child(5) .td-gallery__more{display:none}
.td-gallery__btn{position:absolute;left:1rem;bottom:1rem;z-index:3;display:inline-flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.95);color:var(--brown);border:none;font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.02em;padding:.7rem 1.2rem;border-radius:100px;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),background .3s;backdrop-filter:blur(4px)}
.td-gallery__btn:hover{transform:translateY(-2px);background:#fff}
.td-gallery__btn svg{width:16px;height:16px;flex-shrink:0}

/* sticky booking card / enquiry */
.td__aside{position:sticky;top:86px}
.book-card{background:var(--white);border-radius:var(--radius-lg);padding:1.5rem 1.5rem;box-shadow:var(--shadow-md);border:1px solid rgba(201,163,90,.15)}
.book-card__price{font-family:var(--serif);font-size:2rem;color:var(--green);line-height:1;margin-bottom:.15rem}
.book-card__price del{font-size:1.1rem;color:var(--brown-soft);opacity:.6;margin-right:.5rem}
.book-card__price small{font-size:.82rem;font-family:var(--sans);color:var(--brown-soft)}
.book-card__note{font-size:.78rem;color:var(--brown-soft);margin-bottom:1rem}
.book-card h3{font-size:1.2rem;color:var(--green);margin-bottom:.8rem}

.form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.form-row{margin-bottom:.7rem}
.form-row label{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brown-soft);font-weight:600;margin-bottom:.3rem}
.form-row input,.form-row textarea{width:100%;min-height:44px;font-family:var(--sans);font-size:.9rem;color:var(--brown);background:var(--ivory);border:1px solid rgba(201,163,90,.28);border-radius:12px;padding:.72rem .85rem;transition:border-color .3s}
.form-row input:focus,.form-row textarea:focus{border-color:var(--gold)}
.form-row textarea{resize:vertical;min-height:64px}
.book-card .btn{width:100%;margin-top:.5rem;gap:.5rem;padding:.95rem 1.5rem}
.book-card__alt{display:flex;gap:.7rem;margin-top:.7rem}
.book-card__alt a{flex:1;text-align:center;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:.7rem;border-radius:100px;border:1px solid rgba(201,163,90,.4);color:var(--green);transition:all .3s var(--ease)}
.book-card__alt a:hover{background:var(--ivory);border-color:var(--gold)}

/* mobile sticky booking bar (Airbnb-style) */
.mobile-book-bar{display:none}
@media (max-width:900px){
  .mobile-book-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;
    align-items:center;justify-content:space-between;gap:1rem;
    padding:.8rem 1.2rem;background:rgba(247,242,234,.97);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid rgba(201,163,90,.28);box-shadow:0 -6px 24px rgba(74,57,47,.12);
  }
  .mobile-book-bar__price{font-size:.72rem;color:var(--brown-soft);line-height:1.25;display:flex;flex-direction:column;gap:.1rem}
  .mobile-book-bar__amt b{font-family:var(--serif);font-size:1.5rem;color:var(--green);font-weight:600}
  .mobile-book-bar__amt small{font-size:.75rem;color:var(--brown-soft)}
  .mobile-book-bar .btn{padding:.9rem 2rem;flex-shrink:0;margin:0}
  body:has(.mobile-book-bar){padding-bottom:5rem}
  body:has(.mobile-book-bar) .fab-stack{bottom:5.4rem}
}

@media (max-width:900px){
  .td__grid{grid-template-columns:1fr}
  .td__aside{position:static;margin-top:1rem}
  .incl{grid-template-columns:1fr}
  .td-gallery{display:block;aspect-ratio:auto}
  .td-gallery__item--hero{width:100%;height:240px}
  .td-gallery__strip{display:flex;gap:.5rem;overflow-x:auto;margin-top:.6rem;padding-bottom:.35rem;scrollbar-width:none;-ms-overflow-style:none}
  .td-gallery__strip::-webkit-scrollbar{display:none}
  .td-gallery__strip .td-gallery__item{flex:0 0 74px;height:74px;border-radius:14px;scroll-snap-align:start}
  .td-gallery__strip .td-gallery__item:nth-child(5){display:block}
  /* mobile shows 5 tiles, so the "+N" moves to the 5th */
  .td-gallery__strip .td-gallery__item:nth-child(4) .td-gallery__more{display:none}
  .td-gallery__strip .td-gallery__item:nth-child(5) .td-gallery__more{display:flex;font-size:.95rem}
}
@media (max-width:640px){
  .td__facts{gap:1rem 1.4rem}
  .td-gallery__item--hero{height:210px}
  .td-gallery__btn{font-size:.72rem;padding:.6rem 1rem}
}



/* three scannable reassurance points under a page intro */
.intro-points{
  list-style:none;margin:1.4rem auto 0;padding:0;max-width:var(--maxw);
  display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem 2rem;
}
.intro-points li{
  position:relative;padding-left:1.5rem;font-size:.86rem;color:var(--brown);line-height:1.5;
}
.intro-points li::before{
  content:"";position:absolute;left:0;top:.34em;width:13px;height:13px;border-radius:50%;
  background:var(--green);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/10px no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
@media (max-width:760px){
  .intro-points{flex-direction:column;align-items:flex-start;gap:.5rem;text-align:left;max-width:22rem}
}

/* ---------- Listing filters — one contained toolbar ----------
   Everything lives inside a single card so the controls read as one
   component instead of loose rows floating under the intro text. */
.filters{
  max-width:var(--maxw);margin:0 auto clamp(2rem,4vw,2.8rem);
  background:var(--white);border:1px solid rgba(201,163,90,.22);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;
}
/* Wrapper so the card can sit inside the page padding.
   It also PINS the toolbar under the navbar while you scroll the results,
   so the filters stay one click away through a long list. The wrapper
   carries the page background — without it the cards would show through
   the padding either side of the card while scrolling underneath. */
.filters-wrap{
  padding:0 var(--pad);
  position:sticky;top:72px;z-index:40;          /* nav is fixed at z-index 100 */
  background:var(--ivory);
  padding-top:.9rem;padding-bottom:.9rem;
  transition:box-shadow .3s var(--ease);
}
.filters-wrap.is-stuck{box-shadow:0 10px 24px -14px rgba(74,57,47,.4)}
.filters-wrap.is-stuck .filters{box-shadow:none}
.pageintro + .filters-wrap{margin-top:-1.4rem}

/* ---------- Mobile: bottom bar + slide-up sheet ----------
   Pinning the toolbar under the 76px nav would swallow a phone screen, so
   on mobile a compact bar sits at the BOTTOM (thumb reach) and opens the
   filters as a sheet. Matches the existing .mobile-book-bar convention. */
.filterbar{display:none}
.filters__done{display:none}
.filters-backdrop{
  position:fixed;inset:0;z-index:96;background:rgba(51,40,32,.5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.filters-backdrop.show{opacity:1;visibility:visible}

@media (max-width:760px){
  /* the bar */
  .filterbar{
    display:flex;align-items:center;justify-content:space-between;gap:.8rem;
    position:fixed;left:0;right:0;bottom:0;z-index:95;
    padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom,0px));
    background:rgba(247,242,234,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid rgba(201,163,90,.3);box-shadow:0 -6px 24px rgba(74,57,47,.12);
  }
  .filterbar__btn{
    display:inline-flex;align-items:center;gap:.5rem;
    font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.02em;
    color:#fff;background:var(--green);border:none;border-radius:100px;
    padding:.8rem 1.4rem;min-height:44px;cursor:pointer;
  }
  .filterbar__btn svg{width:16px;height:16px}
  .filterbar__badge{
    min-width:1.15rem;height:1.15rem;display:inline-flex;align-items:center;justify-content:center;
    background:var(--gold);color:#fff;border-radius:100px;font-size:.66rem;font-weight:700;padding:0 .3rem;
  }
  /* display:inline-flex would otherwise beat the [hidden] attribute */
  .filterbar__badge[hidden]{display:none}
  .filterbar__count{font-size:.82rem;color:var(--brown-soft);font-weight:500}

  /* the sheet — the existing toolbar card, slid up from the bottom */
  .filters-wrap{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:97;
    padding:0;background:transparent;box-shadow:none;
    transform:translateY(102%);transition:transform .38s var(--ease);
    max-height:86vh;display:flex;flex-direction:column;
  }
  .filters-wrap.is-open{transform:translateY(0)}
  .filters-wrap .filters{
    margin:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:none;
    max-height:86vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    box-shadow:0 -12px 40px rgba(74,57,47,.28);
    padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px));
  }
  /* little grab handle so it reads as a sheet */
  .filters-wrap .filters::before{
    content:"";display:block;width:38px;height:4px;border-radius:100px;
    background:rgba(74,57,47,.22);margin:.7rem auto .2rem;
  }
  .filters__done{
    display:block;width:calc(100% - 1.7rem);margin:.2rem .85rem .85rem;
    font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    color:#fff;background:var(--gold);border:none;border-radius:100px;padding:.95rem;cursor:pointer;
  }
  .filters__done:active{background:#b8924a}

  /* keep the bar clear of the page end and lift the WhatsApp button */
  body:has(.filterbar){padding-bottom:4.6rem}
  body:has(.filterbar) .fab-stack{bottom:5.2rem}
}
@media (prefers-reduced-motion:reduce){
  .filters-wrap,.filters-backdrop{transition:none}
}
@media (prefers-reduced-motion:reduce){
  .filters-wrap{transition:none}
}

/* top bar: search on the left, sort + count on the right */
.filters__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.9rem 1.1rem;background:var(--ivory);
  border-bottom:1px solid rgba(201,163,90,.2);
}
.filters__search{
  display:flex;align-items:center;gap:.55rem;flex:1 1 240px;max-width:340px;
  background:var(--white);border:1px solid rgba(201,163,90,.3);border-radius:100px;
  padding:.52rem .95rem;transition:border-color .3s,box-shadow .3s;
}
.filters__search:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,163,90,.13)}
.filters__search svg{width:15px;height:15px;color:var(--gold);flex-shrink:0}
.filters__search input{border:none;background:none;font-family:var(--sans);font-size:.85rem;color:var(--brown);width:100%;padding:0}
.filters__search input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.filters__search input::placeholder{color:#a99e8e}

.filters__bar-end{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.filters__sort{display:flex;align-items:center;gap:.5rem;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brown-soft);font-weight:600;white-space:nowrap}
.filters__sort select{
  font-family:var(--sans);font-size:.82rem;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--brown);background-color:var(--white);border:1px solid rgba(201,163,90,.3);
  border-radius:100px;padding:.5rem 1.9rem .5rem .9rem;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A35A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;background-size:11px;
}
.filters__sort select:focus{border-color:var(--gold)}
.filters__count{font-size:.78rem;color:var(--brown-soft);white-space:nowrap;font-weight:500}
.filters__clear{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--brown-soft);background:none;border:none;cursor:pointer;padding:.35rem .1rem;
  border-bottom:1px solid rgba(107,88,73,.35);transition:color .25s,border-color .25s;
}
.filters__clear:hover{color:var(--gold);border-color:var(--gold)}

/* Honeypot. Off-screen rather than display:none — a bot that renders CSS
   skips hidden fields, and this needs to look fillable to it. Real users
   never reach it: it is out of the tab order and hidden from screen readers. */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- database unavailable ----------
   Replaces a whole tour/activity grid. It sits inside a CSS grid, so it has to
   span every column or it would sit in the first cell at one-third width. */
.is-dbdown{display:block!important}
.dbdown{
  grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.85rem;padding:clamp(2.4rem,6vw,4rem) 1.4rem;
  background:var(--white);border:1px solid rgba(201,163,90,.28);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.dbdown__ico{width:44px;height:44px;color:var(--gold);opacity:.75}
.dbdown h3{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2rem);color:var(--green);font-weight:500;margin:0}
.dbdown p{margin:0;max-width:34rem;color:var(--brown-soft);font-size:.95rem;line-height:1.7}
.dbdown__btns{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:.3rem}
.dbdown__btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.8rem 1.6rem;
  border-radius:100px;color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;transition:opacity .25s;
}
.dbdown__btn:hover{opacity:.88}
.dbdown__btn--line{background:#06C755}
.dbdown__btn--wa{background:#25D366}
.dbdown__retry{
  background:none;border:none;cursor:pointer;color:var(--gold);font-family:var(--sans);
  font-size:.8rem;font-weight:600;padding:.6rem .4rem;min-height:44px;
}
.dbdown__retry:hover{text-decoration:underline}
/* [hidden] loses to the display rules on these two, so state it again. */
.filters-wrap[hidden],.filterbar[hidden]{display:none!important}
/* the mobile bar is gone, so its reserved space goes too */
body.is-dbdown-page{padding-bottom:0!important}

/* chip rows */
.filters__chips{padding:.95rem 1.1rem}
.filters__row{display:flex;align-items:baseline;gap:.85rem}
.filters__row + .filters__row{margin-top:.6rem;padding-top:.6rem;border-top:1px dashed rgba(201,163,90,.22)}
.filters__label{
  flex:0 0 3.6rem;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:#a99e8e;font-weight:700;padding-top:.5rem;
}
/* compact chips so 8 areas sit on one tidy row instead of wrapping raggedly */
.filters .tour-tabs{margin:0;padding:0;justify-content:flex-start;flex:1;gap:.4rem}
.filters .tour-tabs button{
  font-size:.68rem;letter-spacing:.05em;padding:.48rem 1rem;
  border-color:rgba(201,163,90,.32);color:var(--brown-soft);text-transform:none;font-weight:500;
}
.filters .tour-tabs button:hover{border-color:var(--gold);color:var(--green);background:var(--ivory)}
.filters .tour-tabs button.active{background:var(--green);color:#fff;border-color:var(--green);font-weight:600}

.filters__empty{
  border-top:1px solid rgba(201,163,90,.2);background:var(--ivory);
  padding:1.6rem 1.1rem;text-align:center;color:var(--brown-soft);font-size:.9rem;
}
.filters__empty p{margin:0}

@media (max-width:760px){
  .filters__bar{padding:.8rem .85rem;gap:.7rem}
  .filters__search{max-width:none;flex:1 1 100%}
  .filters__bar-end{width:100%;justify-content:space-between;gap:.7rem}
  .filters__sort select{padding:.45rem 1.7rem .45rem .8rem;min-height:44px}
  .filters__search{padding:.35rem .95rem}
  .filters__search input{min-height:36px}
  .filters__chips{padding:.8rem .85rem}
  .filters__row{flex-direction:column;align-items:stretch;gap:.4rem}
  .filters__label{flex:none;padding-top:0}
  .filters .tour-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:.15rem;margin:0 -.85rem;padding-left:.85rem;padding-right:.85rem}
  .filters .tour-tabs::-webkit-scrollbar{display:none}
  /* Chips measured 30px tall with 10.9px text — under the 44px tap guideline
     and at the edge of comfortable reading. Mobile only; the desktop row
     fits 8 areas on one line and should stay compact. */
  .filters .tour-tabs button{white-space:nowrap;flex-shrink:0;font-size:.75rem;padding:.8rem 1.05rem;min-height:44px}
}

/* tour count on the destination cards */
.dest__count{
  position:absolute;bottom:1.35rem;right:1.4rem;z-index:2;
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:#fff;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);
  padding:.25rem .6rem;border-radius:100px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}

/* =========================================================
   FAQ accordion (Nusa Penida page — also good for SEO)
   ========================================================= */
.faq{border-top:1px solid rgba(201,163,90,.25)}
.faq__item{border-bottom:1px solid rgba(201,163,90,.25)}
.faq__item summary{
  list-style:none;cursor:pointer;padding:1.25rem 2.4rem 1.25rem 0;position:relative;
  font-family:var(--serif);font-size:clamp(1.1rem,2vw,1.35rem);color:var(--green);
  line-height:1.35;transition:color .3s;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--gold)}
.faq__item summary::after{
  content:"";position:absolute;right:.35rem;top:50%;width:11px;height:11px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease);
}
.faq__item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq__item p{padding:0 1.5rem 1.4rem 0;color:var(--brown-soft);line-height:1.8;margin:0}

/* =========================================================
   BOOKING FORM — one consistent block used on every page
   ========================================================= */
.bookform{
  max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4rem);align-items:center;text-align:left;
  background:var(--white);border-radius:var(--radius-lg);
  padding:clamp(2rem,4vw,3.4rem);box-shadow:var(--shadow-md);
  border:1px solid rgba(201,163,90,.15);
}
.bookform__intro h2{margin-bottom:1rem}
.bookform__intro > p{color:var(--brown-soft);margin-bottom:1.6rem}
.bookform__points{list-style:none;margin:0 0 1.8rem;padding:0}
.bookform__points li{position:relative;padding-left:1.9rem;margin-bottom:.7rem;font-size:.92rem;color:var(--brown)}
.bookform__points li::before{
  content:"";position:absolute;left:0;top:.28em;width:16px;height:16px;border-radius:50%;
  background:var(--green);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/12px no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.bookform__alt{display:flex;gap:.7rem;flex-wrap:wrap}
.bookform__alt .btn{font-size:.76rem;padding:.7rem 1.3rem}
.bookform__form{background:var(--ivory);border-radius:var(--radius);padding:clamp(1.4rem,2.5vw,1.9rem)}
.bookform__form h3{font-size:1.25rem;color:var(--green);margin-bottom:1rem}
.bookform__form .btn{width:100%;justify-content:center;margin-top:.6rem;gap:.5rem;padding:.95rem 1.5rem}
.bookform__form .form-row input,.bookform__form .form-row textarea{background:var(--white)}
.bookform__note{font-size:.72rem;color:var(--brown-soft);text-align:center;margin-top:.8rem;line-height:1.5}
@media (max-width:900px){
  .bookform{grid-template-columns:1fr;text-align:center}
  .bookform__points{display:inline-block;text-align:left}
  .bookform__alt{justify-content:center}
  .bookform__form{text-align:left}
}


/* ---------- Trust strip beside the booking form ----------
   Built by js/trust.js from SITE.trust in js/config.js. */
.trust{
  list-style:none;margin:1.1rem 0 0;padding:1rem 0 0;
  border-top:1px solid rgba(201,163,90,.28);
}
.trust__item{
  display:flex;align-items:flex-start;gap:.6rem;
  font-size:.78rem;line-height:1.5;color:var(--brown-soft);margin-bottom:.55rem;
}
.trust__item:last-child{margin-bottom:0}
.trust__item svg{width:15px;height:15px;flex-shrink:0;color:var(--green);margin-top:.12em}
/* inside the tour-page sidebar card it sits on ivory, so soften the rule */
.book-card .trust{border-top-color:rgba(74,57,47,.12)}

/* =========================================================
   BLOG — listing, cards, and single post
   ========================================================= */
.blog-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;justify-content:flex-start;padding-left:var(--pad);padding-right:var(--pad);max-width:var(--maxw);margin-left:auto;margin-right:auto}
.blog-tabs::-webkit-scrollbar{display:none}
.blog-tabs button{white-space:nowrap}

.blog-listing{max-width:var(--maxw);margin:0 auto;padding:clamp(1.6rem,4vw,2.6rem) var(--pad) clamp(4rem,8vw,6rem)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.blog-empty{grid-column:1/-1;background:#fff;border:1px dashed rgba(201,163,90,.4);border-radius:var(--radius);padding:2.6rem;text-align:center;color:var(--brown-soft)}

.bcard{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid rgba(201,163,90,.12);display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.bcard:hover{transform:translateY(-7px);box-shadow:var(--shadow-md)}
.bcard__img{position:relative;aspect-ratio:16/10;background-size:cover;background-position:center;display:block}
.bcard__topic{position:absolute;top:.9rem;left:.9rem;font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(65,90,69,.9);padding:.32rem .75rem;border-radius:100px;backdrop-filter:blur(2px)}
.bcard__body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.bcard__date{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:.5rem}
.bcard__title{font-family:var(--serif);font-size:1.4rem;color:var(--green);line-height:1.2;margin-bottom:.55rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .3s}
.bcard__title:hover{color:var(--gold)}
.bcard__excerpt{font-size:.86rem;color:var(--brown-soft);line-height:1.6;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bcard__more{margin-top:auto;color:var(--gold);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}

/* single post */
.post{background:var(--white)}
.post__hero{position:relative;min-height:clamp(340px,52vh,520px);display:flex;align-items:flex-end;background-size:cover;background-position:center}
.post__hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(51,40,32,.82) 0%,rgba(51,40,32,.25) 60%,rgba(51,40,32,.15) 100%)}
.post__hero-inner{position:relative;z-index:2;max-width:820px;margin:0 auto;width:100%;padding:2.6rem var(--pad);color:#fff}
.post__topic{display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green);background:var(--gold-soft);padding:.4rem .9rem;border-radius:100px;margin-bottom:1.1rem}
.post__title{color:#fff;font-size:clamp(2rem,4.6vw,3.3rem);font-weight:500;line-height:1.12;margin-bottom:1.1rem;text-shadow:0 4px 30px rgba(0,0,0,.3)}
.post__meta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.9);letter-spacing:.02em}
.post__meta .post__author{font-weight:600}
.post__dot{opacity:.55}

.post__wrap{max-width:820px;margin:0 auto;padding:clamp(2.4rem,5vw,3.6rem) var(--pad) clamp(3rem,6vw,4.5rem)}
.post__body{color:var(--brown);font-size:1.08rem;line-height:1.9}
.post__body p{margin-bottom:1.3rem}
.post__body h2{font-family:var(--serif);color:var(--green);font-size:clamp(1.5rem,3vw,2rem);margin:2.2rem 0 1rem;line-height:1.25}
.post__body ul{list-style:none;margin:0 0 1.4rem;padding:0}
.post__body li{position:relative;padding-left:1.6rem;margin-bottom:.7rem;line-height:1.7}
.post__body li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.post__body blockquote{margin:1.8rem 0;padding:1.2rem 1.6rem;border-left:3px solid var(--gold);background:var(--ivory);border-radius:0 12px 12px 0;font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--green);line-height:1.5}
.post__body strong{color:var(--green);font-weight:600}

.post__cta{margin-top:2.8rem;background:var(--ivory);border:1px solid rgba(201,163,90,.22);border-radius:var(--radius-lg);padding:2rem 2.2rem;text-align:center}
.post__cta-img{width:74px;height:74px;border-radius:50%;object-fit:cover;border:3px solid var(--gold-soft);margin-bottom:1rem}
.post__cta h3{font-family:var(--serif);color:var(--green);font-size:1.6rem;margin-bottom:.6rem}
.post__cta p{color:var(--brown-soft);max-width:34rem;margin:0 auto 1.4rem;font-size:.95rem;line-height:1.7}

.blog-more{max-width:var(--maxw);margin:0 auto;padding:clamp(2.5rem,5vw,3.5rem) var(--pad) clamp(4rem,8vw,6rem);border-top:1px solid rgba(201,163,90,.2)}
.blog-more .section__head{margin-bottom:2rem}
.blog-more .blog-grid{grid-template-columns:repeat(3,1fr)}

@media (max-width:900px){
  .blog-grid,.blog-more .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  /* Stacked, each blog card filled a whole phone screen — three posts meant
     three screens of scrolling before the page moved on. Swipeable instead,
     matching the tour carousel and the guest wall; the peeking next card is
     what tells you there is more. */
  .blog-grid{grid-template-columns:1fr;gap:1.3rem}
  .blog-grid[data-live="journal"],.blog-more .blog-grid{
    display:flex;grid-template-columns:none;gap:.85rem;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;padding-bottom:.6rem;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .blog-grid[data-live="journal"]::-webkit-scrollbar,.blog-more .blog-grid::-webkit-scrollbar{display:none}
  /* explicit width, not flex-basis — .bcard's own width wins otherwise and
     every slide fills the track, killing the peek */
  .blog-grid[data-live="journal"] > .bcard,.blog-more .blog-grid > .bcard{
    flex:0 0 auto;width:80%;max-width:320px;scroll-snap-align:start;
  }
  .post__body{font-size:1rem;line-height:1.85}
  .post__cta{padding:1.6rem 1.3rem}
}

/* ---- Happy-guest photo wall (About page) --------------------------------
   Desktop: an even 4-across grid — every tile the same 3:4 portrait, so the
   wall reads as one tidy block instead of a ragged masonry edge.
   Mobile: a swipeable carousel, matching .dest__track elsewhere on the site,
   so twelve photos cost one swipe instead of a very long scroll. */
.guests{padding-top:0}
.guests__wall{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.guests__wall img{
  width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.guests__wall img{cursor:zoom-in}
.guests__wall img:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.guests__note{text-align:center;margin-top:1.6rem;font-size:.86rem;color:var(--brown-soft);opacity:.8}

@media (max-width:1024px){ .guests__wall{grid-template-columns:repeat(3,1fr)} }

@media (max-width:640px){
  /* carousel — the half-visible next photo is what tells you to swipe */
  .guests__wall{
    display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
    padding-bottom:.5rem;scrollbar-width:none;-ms-overflow-style:none;
  }
  .guests__wall::-webkit-scrollbar{display:none}
  /* explicit width, not flex-basis — the base rule's width:100% otherwise
     wins here and every slide fills the track, killing the peek */
  .guests__wall img{
    flex:0 0 auto;width:72%;height:auto;scroll-snap-align:start;border-radius:16px;
  }
  .guests__wall img:hover{transform:none}
}

/* ---- Floating contact launcher --------------------------------------------
   One green WhatsApp bubble was the only way to reach Ani from a page. Taiwan
   runs on LINE, mainland guests on WeChat, so the button now opens a choice of
   all three. LINE sits nearest the trigger because it is the one most of our
   guests actually use — the closest slot is the easiest thumb reach. */
.fab-stack{position:fixed;bottom:1.6rem;right:1.6rem;z-index:90;
  display:flex;flex-direction:column;align-items:flex-end;gap:.7rem}
.fab-opt{
  display:flex;align-items:center;gap:.6rem;text-decoration:none;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.9);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.fab-stack.open .fab-opt{opacity:1;visibility:visible;transform:none}
.fab-stack.open .fab-opt:nth-child(2){transition-delay:.04s}
.fab-stack.open .fab-opt:nth-child(3){transition-delay:.08s}
.fab-opt__label{
  background:var(--white,#fff);color:var(--brown,#4A392F);font-size:.78rem;font-weight:600;
  padding:.4rem .8rem;border-radius:100px;white-space:nowrap;
  box-shadow:0 6px 20px rgba(74,57,47,.18);letter-spacing:.01em;
}
.fab-opt__ico{
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.22);flex:0 0 auto;
}
.fab-opt__ico svg{width:24px;height:24px}
.fab-opt--line   .fab-opt__ico{background:#06C755}
.fab-opt--wa     .fab-opt__ico{background:#25D366}
.fab-opt--wechat .fab-opt__ico{background:#07C160}
.fab-opt:hover .fab-opt__ico{transform:scale(1.07)}
.fab-opt__ico{transition:transform .3s var(--ease)}

/* The trigger leads with LINE — Taiwan is the core market and a recognised
   messaging icon earns far more taps than a neutral one. It still opens all
   three channels. Falls back to brand gold if lineUrl is ever removed. */
.fab-stack .fab{position:static;background:var(--gold,#C9A35A);
  box-shadow:0 12px 30px rgba(201,163,90,.45);animation:none}
.fab-stack .fab.fab--line{background:#06C755;box-shadow:0 12px 30px rgba(6,199,85,.45)}
.fab-stack.open .fab{transform:rotate(45deg)}
.fab-stack .fab svg{transition:opacity .2s}
.fab-stack.open .fab .fab__chat{opacity:0;position:absolute}
.fab .fab__close{display:none}
.fab-stack.open .fab .fab__close{display:block}
.fab-stack.open .fab .fab__chat{display:none}

@media (prefers-reduced-motion:reduce){
  .fab-opt{transition:none}
  .fab-stack.open .fab{transform:none}
}
@media(max-width:767px){
  .fab-stack{bottom:1.1rem;right:1.1rem;gap:.6rem}
  .fab-opt__ico{width:44px;height:44px}
}

/* ---- Mobile menu: contact row, pinned to the bottom -----------------------
   Eight links left roughly 15% of the drawer as dead white space underneath.
   margin-top:auto pushes the actions down so the slack sits between the two
   groups instead of pooling at the end, and the space now carries the three
   ways to reach Ani rather than nothing. */
@media (max-width:1060px){ .nav__menu-chans{display:block;margin-top:auto;padding-top:1.2rem;border-top:1px solid rgba(201,163,90,.25)} }
.nav__menu-chans-t{display:block;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brown-soft);font-weight:600;margin-bottom:.7rem}
.nav__menu-chans-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.nav__chan{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:.7rem .3rem;border-radius:12px;background:#fff;
  border:1px solid rgba(74,57,47,.1);text-decoration:none;
  transition:transform .25s var(--ease),border-color .25s;
}
.nav__chan svg{width:24px;height:24px}
.nav__chan b{font-size:.66rem;font-weight:600;letter-spacing:.02em;color:var(--brown)}
.nav__chan--line svg{color:#06C755}
.nav__chan--wa svg{color:#25D366}
.nav__chan--wechat svg{color:#07C160}
.nav__chan:active{transform:scale(.96)}
.nav__chan:hover{border-color:var(--gold)}
/* the drawer's own CTA sits just above the contact row */
.nav__links .nav__menu-cta{margin-top:1.4rem}

/* ---- "Send to Ani with…" chooser ------------------------------------------
   Shown after the enquiry form is submitted. Only WhatsApp can carry the
   message straight into a chat; LINE and WeChat copy it to the clipboard
   first, and each option says which so nobody is surprised. */
.send-sheet{position:fixed;inset:0;z-index:210;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(51,40,32,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s var(--ease);padding:1rem}
.send-sheet.open{opacity:1}
.send-sheet__box{background:var(--ivory);border-radius:var(--radius-lg);padding:1.7rem 1.5rem 1.5rem;
  width:100%;max-width:420px;position:relative;box-shadow:var(--shadow-lg);
  transform:translateY(18px);transition:transform .35s var(--ease)}
.send-sheet.open .send-sheet__box{transform:none}
.send-sheet__box h3{font-family:var(--serif);font-size:1.45rem;color:var(--green);margin-bottom:.25rem}
.send-sheet__sub{font-size:.85rem;color:var(--brown-soft);margin-bottom:1.1rem;line-height:1.55}
.send-sheet__close{position:absolute;top:.9rem;right:1rem;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(74,57,47,.18);background:transparent;color:var(--brown);font-size:1.4rem;
  line-height:1;cursor:pointer;transition:.25s}
.send-sheet__close:hover{background:#fff}
.send-sheet__opts{display:flex;flex-direction:column;gap:.55rem}
.send-opt{display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;cursor:pointer;
  background:#fff;border:1px solid rgba(74,57,47,.12);border-radius:14px;padding:.8rem .95rem;
  font-family:var(--sans);transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.send-opt:hover{border-color:var(--gold);box-shadow:var(--shadow-sm)}
.send-opt:active{transform:scale(.985)}
.send-opt__ico{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:#fff;flex:0 0 auto}
.send-opt__ico svg{width:22px;height:22px}
.send-opt--line .send-opt__ico{background:#06C755}
.send-opt--wa .send-opt__ico{background:#25D366}
.send-opt--wechat .send-opt__ico{background:#07C160}
.send-opt__t{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.send-opt__t b{font-size:.95rem;font-weight:600;color:var(--brown)}
.send-opt__t small{font-size:.75rem;color:var(--brown-soft);line-height:1.4}
.send-sheet__note{margin-top:.9rem;font-size:.8rem;color:var(--green);font-weight:500;
  text-align:center;opacity:0;transition:opacity .3s}
.send-sheet__note.show{opacity:1}
@media (min-width:640px){ .send-sheet{align-items:center} }
@media (prefers-reduced-motion:reduce){
  .send-sheet,.send-sheet__box,.send-opt{transition:none}
}

/* ---- How booking works -----------------------------------------------------
   Three real steps, so the numbering carries meaning rather than decoration.
   Sits immediately above the form: the reader learns what happens next, then
   the field to start it is right there. */
.howto{padding-bottom:0}
.howto__steps{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;
  grid-template-columns:repeat(3,1fr);counter-reset:none}
.howto__step{background:var(--white,#fff);border:1px solid rgba(201,163,90,.22);
  border-radius:var(--radius);padding:1.6rem 1.4rem 1.5rem;position:relative}
.howto__n{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;
  font-family:var(--serif);font-size:1.15rem;font-weight:600;line-height:1;
  margin-bottom:1rem;
}
.howto__step h3{font-size:1.08rem;color:var(--green);margin-bottom:.5rem;line-height:1.3}
.howto__step p{font-size:.88rem;color:var(--brown-soft);line-height:1.65;margin:0}
/* a hairline between the steps, so they read as a sequence not three cards */
.howto__step:not(:last-child)::after{
  content:"";position:absolute;top:2.9rem;right:-.62rem;width:1.24rem;height:1px;
  background:rgba(201,163,90,.45);
}
@media (max-width:860px){
  .howto__steps{grid-template-columns:1fr;gap:.7rem}
  .howto__step{display:grid;grid-template-columns:38px 1fr;column-gap:1rem;
    padding:1.15rem 1.2rem;align-items:start}
  .howto__n{margin-bottom:0}
  .howto__step h3{grid-column:2;margin-bottom:.3rem;font-size:1rem}
  .howto__step p{grid-column:2}
  /* the connector only makes sense on a horizontal row */
  .howto__step:not(:last-child)::after{display:none}
}