/* ============================================================
   Mekong Currents — editorial design system
   Used by: index.html, packages.html, how-it-works.html,
            destinations.html, contact.html, login.html,
            register.html, my-bookings.html
   ============================================================ */

:root{
  --bg: #FFFFFF;
  --white: #FFFFFF;
  --cream: #F5F2EB;
  --ink: #141414;
  --ink-70: #4E4B43;
  --ink-50: #6E6B63;
  --border: #E2DCC9;
  --ink-12: #E2DCC9;
  --yellow: #906743;
  --yellow-dark: #6E4E31;
  --amber: #C97300;
  --green: #2C4A3C;
  --green-dark: #203A2E;
  --dark-section: #141414;
  --dark-section-2: #0D0D0D;

  /* radius lock: sharp edges everywhere, no mixing pills with square cards */
  --r-pill: 0;
  --r-card: 0;
  --r-input: 0;

  --shadow-sm: 0 2px 14px rgba(17,17,17,.05);
  --shadow-md: 0 14px 40px rgba(17,17,17,.08);
  --shadow-lg: 0 24px 60px rgba(17,17,17,.14);

  --ease: cubic-bezier(.16,1,.3,1);
  --dur: .5s;

  --max: 1600px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* The public site's .nav is position:fixed, so its own pages need top
   padding to reserve that space. Admin pages share this stylesheet but have
   no .nav element at all (they use .admin-sidebar instead), so this rule
   simply doesn't match them — and pages with a full-bleed hero let the hero
   run under the fixed nav instead of being pushed down by it. */
body:has(.nav){ padding-top: 84px; }
body:has(.hero-full){ padding-top: 0; }
img,video{ max-width:100%; display:block; }
h1,h2,h3{ font-family:'Anton', sans-serif; margin:0; font-weight:400; letter-spacing:0; text-transform:uppercase; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
button{ font-family:inherit; }

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 clamp(32px, 5.5vw, 80px); }

/* Focus states - visible everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline: 2.5px solid var(--ink);
  outline-offset: 3px;
  border-radius: 0;
}

.eyebrow{
  display:inline-block;
  font-family:'Archivo',sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 14px;
}
.eyebrow.accent{ color: var(--amber); }

.script{
  font-family:'Anton', sans-serif;
  font-style: normal;
  font-weight: 400;
  color: var(--yellow);
}

.section-head{
  max-width: 640px;
  margin-bottom: 44px;
}
.section-head h2{
  font-size: clamp(1.8rem, 2.4vw + 1rem, 2.6rem);
  line-height: 1.15;
}
.section-head p{
  margin-top: 14px;
  color: var(--ink-70);
  font-size: 1rem;
  max-width: 52ch;
}

section{ padding: 88px 0; }
@media (max-width: 720px){ section{ padding: 56px 0; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family:'Archivo',sans-serif;
  font-weight: 600;
  font-size: .86rem;
  letter-spacing:.01em;
  cursor:pointer;
  text-decoration:none;
  white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
}
.btn:active{ transform: scale(.97); }
.btn-primary{
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover{ background:#000; box-shadow: var(--shadow-lg); transform: translateY(-3px) scale(1.015); }
.btn-ghost{
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.6);
}
.btn-ghost:hover{ background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-3px) scale(1.015); }
.btn-outline-dark{
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
.btn-outline-dark:hover{ border-color: var(--ink); background: var(--ink); color: #fff; transform: translateY(-3px) scale(1.015); }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }

.btn-yellow{
  background: var(--yellow);
  color: #fff;
}
.btn-yellow:hover{ background: var(--yellow-dark); box-shadow: var(--shadow-lg); transform: translateY(-3px) scale(1.015); }

#heroCta{ border-radius: 999px; }

/* Contact/CTA reads dark-on-transparent when nav floats over a dark hero image */
.nav:not(.is-solid) .nav-cta .btn-outline-dark{
  color:#fff; border-color: rgba(255,255,255,.55);
}
.nav:not(.is-solid) .nav-cta .btn-outline-dark:hover{
  background: rgba(255,255,255,.12); border-color:#fff;
}

/* ---------- Navbar ---------- */
.nav{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 60;
  height: 84px;
  display:flex;
  align-items:center;
  background: transparent;
  transition: transform .35s var(--ease);
  will-change: transform;
}
/* Slides up out of view on scroll-down; JS removes this on scroll-up / near top. */
.nav.nav-hidden{ transform: translateY(-100%); }
/* Floating pill capsules carry their own background, so the bar itself stays
   transparent in every state (over the hero and when scrolled). */
.nav .nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap: 16px;
}
.nav-capsule{
  display:flex;
  align-items:center;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(20,20,20,.06);
  border-radius: 999px;
  height: 56px;
  box-shadow: var(--shadow-sm);
}
.brand.nav-capsule{ padding: 0 28px; }
.nav-right{ padding: 6px 6px 6px 30px; gap: 26px; }

.nav-links{
  display:flex;
  align-items:center;
  gap: 26px;
}
.nav-links a{
  position:relative;
  text-decoration:none;
  color: var(--ink);
  font-weight:600;
  font-size: .82rem;
  letter-spacing:.01em;
  transition: color .25s var(--ease);
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:-6px;
  width:0; height:1.5px;
  background: currentColor;
  transition: width .3s var(--ease);
}
.nav-links a:hover::after,
.nav-links a.is-active::after{ width:100%; }
.nav-links a:hover{ color: var(--ink); }
.nav-links a.is-active{ color: var(--ink); }

.brand{
  font-family:'Anton', serif;
  font-size: 1.35rem;
  font-weight:700;
  text-decoration:none;
  color: var(--ink);
  display:flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
  text-transform:uppercase;
}
.brand .mark{
  width: 8px; height:8px;
  border-radius:50%;
  background: var(--yellow);
  display:inline-block;
  margin: 0 2px 9px;
  flex: none;
}

.nav-cta-btn{
  display:flex; align-items:center; gap:10px;
  background: var(--ink); color:#fff;
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
  font-family:'Archivo',sans-serif;
  font-weight:700; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.05em;
  text-decoration:none;
  white-space:nowrap;
  transition: background .3s var(--ease);
}
.nav-cta-btn:hover{ background: var(--yellow); color: #fff; }
.nav-cta-btn:hover .nav-cta-arrow{ background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.4); }
.nav-cta-arrow{
  width:28px; height:28px; flex:none;
  border-radius:50%;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.32);
  display:flex; align-items:center; justify-content:center;
  transition: transform .3s var(--ease);
}
.nav-cta-btn:hover .nav-cta-arrow{ transform: translateX(3px); }

.nav-toggle{
  display:none;
  width: 48px; height:48px;
  border-radius:50%;
  border: 1px solid rgba(20,20,20,.06);
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  cursor:pointer;
  position:relative;
  flex: none;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{
  content:"";
  position:absolute;
  left:15px; right:15px;
  height:1.5px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span{ top:23px; }
.nav-toggle::before{ top:17px; }
.nav-toggle::after{ top:29px; }
.nav-toggle[aria-expanded="true"] span{ background: transparent; }
.nav-toggle[aria-expanded="true"]::before{ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after{ transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px){
  .nav-links, .nav-cta-btn{ display:none; }
  .nav-toggle{ display:block; }
  .nav-right{ padding: 6px; gap: 0; }
  .mobile-panel{
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--bg);
    z-index: 55;
    padding: 32px 24px;
    transform: translateY(-12px);
    opacity:0;
    pointer-events:none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    overflow-y:auto;
  }
  .mobile-panel.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .mobile-panel a{
    display:block;
    padding: 16px 4px;
    border-bottom: 1px solid var(--border);
    text-decoration:none;
    color: var(--ink);
    font-weight:600;
    font-size: 1.05rem;
  }
  .mobile-panel a.is-active{ color: var(--amber); }
  .mobile-panel .btn{ margin-top: 24px; }
}
@media (max-width: 380px){
  .brand.nav-capsule{ padding: 0 16px; font-size: 1.1rem; }
}
@media (min-width: 901px){ .mobile-panel{ display:none; } }

/* ---------- Account dropdown (round icon button) ---------- */
.nav-account{ position:relative; }
.nav-account-trigger{
  width:40px; height:40px;
  border-radius:50%;
  background: transparent;
  color: var(--ink);
  border:1.5px solid var(--border);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-family:'Archivo',sans-serif;
  font-weight:700;
  font-size:.85rem;
  flex:none;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.nav-account-trigger.has-session{ background: var(--yellow); border-color: var(--yellow); color: #fff; }
.nav-account-trigger:hover,
.nav-account-trigger[aria-expanded="true"]{ border-color: var(--ink); }

.nav-account-icon-link{
  width:40px; height:40px;
  border-radius:50%;
  border:1.5px solid var(--border);
  background: transparent;
  cursor: pointer;
  display:flex; align-items:center; justify-content:center;
  color: var(--ink);
  transition: border-color .2s var(--ease);
  flex:none;
}
.nav-account-icon-link:hover{ border-color: var(--ink); }

.nav-account{ position:relative; display:flex; }
.nav-account-panel{
  position:absolute;
  left:50%; right:auto; top:calc(100% + 12px);
  background: var(--white);
  border:1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  min-width:210px;
  padding:8px;
  opacity:0;
  visibility:hidden;
  transform: translate(-50%, -8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index:70;
}
.nav-account-panel.is-open{ opacity:1; visibility:visible; transform: translateX(-50%); }
.nav-account-panel-name{
  padding:8px 12px 10px;
  margin-bottom:6px;
  border-bottom:1px solid var(--border);
  font-size:.78rem;
  color: var(--ink-50);
}
.nav-account-panel-name strong{ display:block; color: var(--ink); font-size:.9rem; font-weight:700; font-family:'Archivo',sans-serif; }
.nav-account-panel a,
.nav-account-panel .nav-account-panel-item{
  display:block;
  width:100%;
  text-align:left;
  padding:10px 12px;
  border-radius:0;
  font-size:.86rem;
  font-weight:600;
  color: var(--ink);
  text-decoration:none;
  background:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
}
.nav-account-panel a:hover,
.nav-account-panel .nav-account-panel-item:hover{ background: #F7F7F7; }
.nav-account-panel .nav-account-panel-item.danger{ color:#B4232C; }

/* ============================================================
   HERO — oversized headline over full-bleed image
   ============================================================ */
.hero-full{ position:relative; height:92vh; min-height:600px; overflow:hidden; }
.hero-full .hero-media{ position:absolute; inset:0; }
.hero-full .hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-full::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,20,20,.40) 0%, rgba(20,20,20,0) 30%, rgba(20,20,20,0) 50%, rgba(20,20,20,.55) 100%);
  z-index:1; pointer-events:none;
}
.nav-sentinel{ position:absolute; bottom:0; left:0; width:1px; height:1px; pointer-events:none; }
.hero-full-content{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:space-between;
  padding: 116px 24px 56px; /* clears the 76px fixed nav plus breathing room */
}
.hero-full-content .wrap{ width:100%; height:100%; display:flex; flex-direction:column; justify-content:space-between; }
.hero-h1{
  color: var(--white);
  font-size: clamp(2.4rem, 6vw, 6rem);
  line-height:.94;
  max-width:15ch;
}
.hero-bottom-row{ display:flex; align-items:flex-end; justify-content:flex-end; gap:24px; flex-wrap:wrap; }
.hero-sub{
  font-family:'Anton', sans-serif;
  color: var(--yellow);
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  line-height:1.05;
  text-align:left;
  max-width:20ch;
  margin-top:22px;
}
@media (max-width: 720px){
  .hero-full{ height:82vh; }
  .hero-bottom-row{ justify-content:flex-start; }
}

/* ============================================================
   BOOKING BAND (tabs + search bar, full-width band under the hero)
   ============================================================ */
.booking-band{
  position:relative;
  background: var(--yellow);
  padding: 48px 0;
}
.booking-tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:36px;
  margin-bottom:28px;
}
.booking-tab{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  color: rgba(255,255,255,.7);
  font-family:'Archivo',sans-serif;
  font-size:.78rem;
  font-weight:600;
  transition: color .2s var(--ease);
}
.booking-tab svg{ width:22px; height:22px; transition: transform .3s var(--ease); }
.booking-tab:hover{ color: #fff; }
.booking-tab:hover svg{ transform: translateY(-3px); }
.booking-tab span{ padding-bottom:4px; border-bottom:2px solid transparent; transition: border-color .25s var(--ease); }
.booking-tab:hover span{ border-bottom-color: rgba(255,255,255,.5); }
.booking-tab.is-active{ color: #fff; }
.booking-tab.is-active span{ border-bottom-color: #fff; }

/* ============================================================
   SEARCH BAR
   ============================================================ */
.search-bar{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  padding: 8px 8px 8px 12px;
  display:flex;
  align-items:stretch;
  gap:4px;
}
.search-fields{
  flex:1; min-width:0;
  display:flex; align-items:stretch;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.search-fields.is-swapping{ opacity:0; transform: translateY(8px); }
.search-field{
  flex:1;
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 20px;
  border-right:1px solid var(--border);
  min-width:0;
}
.search-field .fl{
  display:block;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--ink-50);
  margin-bottom:2px;
}
.search-field:last-of-type{ border-right:none; }
.search-field .icon{ color: var(--ink-50); flex:none; }
.search-field .field-text{ min-width:0; flex:1; }
.search-field label{
  display:block;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--ink-50);
  margin-bottom:2px;
}
.search-field input{
  border:none;
  outline:none;
  background:none;
  font-family:'Archivo',sans-serif;
  font-size:.9rem;
  color: var(--ink);
  width:100%;
  padding:0;
  cursor:pointer;
}
.search-field input::placeholder{ color: var(--ink-50); }

/* Custom dropdown (replaces native <select> so the open list can be styled too) */
.select-field{ position:relative; }
.select-trigger{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%;
  border:none; outline:none; background:none; padding:0;
  font-family:'Archivo',sans-serif; font-size:.9rem; color: var(--ink);
  cursor:pointer; text-align:left;
}
.select-trigger svg{ flex:none; color: var(--ink-50); transition: transform .2s var(--ease); }
.select-trigger[aria-expanded="true"] svg{ transform: rotate(180deg); }
.select-panel{
  position:absolute; top: calc(100% + 8px); left:-20px;
  min-width: calc(100% + 40px);
  background:#fff;
  border:1px solid var(--border);
  box-shadow: var(--shadow-md);
  z-index:20;
  opacity:0; visibility:hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.select-panel.is-open{ opacity:1; visibility:visible; transform:none; }
.select-panel li{
  padding: 11px 18px;
  font-size:.86rem;
  color: var(--ink-70);
  cursor:pointer;
  border-left: 2px solid transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease), border-color .2s var(--ease);
}
.select-panel li:hover{ background: var(--bg); color: var(--ink); padding-left:22px; border-left-color: var(--amber); }
.select-panel li[aria-selected="true"]{ color: var(--ink); font-weight:700; }

/* Block variant: used inside form fields (bordered box, not the compact search-bar style) */
.select-trigger-block{
  font-size:.92rem;
  padding: 13px 16px;
  border-radius: var(--r-input);
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--ink);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.select-trigger-block[aria-expanded="true"]{ border-color: var(--amber); box-shadow: 0 0 0 4px rgba(232,162,0,.14); }
.select-trigger-block span{ color: var(--ink-50); }
.select-trigger-block.has-value span{ color: var(--ink); }
.select-field-block .select-panel{ top: calc(100% + 6px); left:0; min-width:100%; }
.form-field.has-error .select-trigger-block{ border-color: #B4232C; }
.search-submit{
  flex:none; align-self:center;
  height:48px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--ink);
  color:#fff;
  border:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Archivo',sans-serif;
  font-weight:700;
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:nowrap;
  transition: background-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.search-submit svg{ width:16px; height:16px; }
.search-submit svg{ transition: transform .25s var(--ease); }
.search-submit:hover{ background:#000; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17,17,17,.22); }
.search-submit:hover svg{ transform: scale(1.12) rotate(-6deg); }
.search-submit:active{ transform: translateY(0); }

/* Custom date-range picker (index.html search bar) */
.date-field{ position:relative; }
.date-trigger{
  display:block; width:100%;
  border:none; background:none; padding:0; text-align:left; cursor:pointer;
  font-family:'Archivo',sans-serif; font-size:.9rem; color: var(--ink);
}
.date-trigger .is-placeholder{ color: var(--ink-50); }
.date-popup{
  position:absolute; top: calc(100% + 16px); left:-20px;
  width: 300px; max-width: 88vw;
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow: var(--shadow-md); padding:16px; z-index:30;
  opacity:0; visibility:hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.date-popup.is-open{ opacity:1; visibility:visible; transform:none; }
.date-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.date-cal-title{ font-weight:700; font-size:.92rem; }
.date-nav{
  width:32px; height:32px; flex:none;
  border:1px solid var(--border); background:#fff; border-radius:50%;
  cursor:pointer; font-size:1.1rem; line-height:1; color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.date-nav:hover{ background: var(--ink); color:#fff; border-color: var(--ink); }
.date-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:2px; }
.date-dow{ text-align:center; font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--ink-50); padding:4px 0; }
.date-day{
  aspect-ratio:1; border:none; background:none; cursor:pointer;
  font-family:'Archivo',sans-serif; font-size:.82rem; color: var(--ink);
  border-radius:9px; transition: background-color .15s var(--ease), color .15s var(--ease);
}
.date-day:hover:not(:disabled){ background: var(--bg); }
.date-day.is-inrange{ background:#FBE7C2; border-radius:0; }
.date-day.is-selected{ background: var(--ink); color:#fff; }
.date-day.is-disabled, .date-day:disabled{ color: var(--ink-12); cursor:default; }
.date-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.date-clear{ background:none; border:none; color: var(--ink-50); font-family:'Archivo',sans-serif; font-weight:600; font-size:.8rem; cursor:pointer; }
.date-clear:hover{ color: var(--ink); }
.date-done{
  background: var(--ink); color:#fff; border:none; border-radius:999px;
  padding:8px 22px; font-family:'Archivo',sans-serif; font-weight:700; font-size:.76rem;
  text-transform:uppercase; letter-spacing:.05em; cursor:pointer; transition: background-color .2s var(--ease);
}
.date-done:hover{ background:#000; }

@media (max-width: 760px){
  .booking-tabs{ gap:22px; }
  .search-bar{ flex-direction:column; border-radius: 28px; gap:2px; }
  .search-fields{ flex-direction:column; }
  .search-field{ border-right:none; border-bottom:1px solid var(--border); }
  .search-field:last-of-type{ border-bottom:none; }
  .search-submit{ width:100%; border-radius: 999px; margin-top:6px; }
  .date-popup{ left:0; }
}

/* ============================================================
   DESTINATIONS CAROUSEL (homepage)
   ============================================================ */
.dest-carousel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:36px;
  flex-wrap:wrap;
}
.dest-carousel-head h2{
  font-size: clamp(1.8rem, 2.4vw + 1rem, 2.6rem);
  line-height: 1.15;
}
.dest-carousel-track{
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-behavior: auto; /* per-frame auto-scroll needs instant, not smooth/snapped */
  /* overflow-x:auto also clips vertically, so pad top/bottom to give the
     hover lift + drop-shadow room, then pull it back with negative margin
     so the cards stay flush with the section edges. */
  padding: 18px 10px 34px;
  margin: 0 -10px;
  scrollbar-width:none;
}
.dest-carousel-track::-webkit-scrollbar{ display:none; }
.dest-card-wrap{
  flex: 0 0 300px;
  transition: filter .35s var(--ease), transform .35s var(--ease);
}
.dest-card-wrap:hover{ transform: translateY(-7px); filter: drop-shadow(0 14px 22px rgba(17,17,17,.10)); }
/* Concept A — full-bleed photo with title + CTA overlaid at the bottom. */
.dest-card{
  position:relative; display:block;
  height: 380px;
  border-radius: 18px;
  overflow:hidden;
  text-decoration:none;
  background:#123c47;
}
.dest-card-media{ position:absolute; inset:0; }
.dest-card-media::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--img);
  background-size:cover;
  background-position:center;
  transition: transform .6s var(--ease);
}
.dest-card-wrap:hover .dest-card-media::before{ transform: scale(1.06); }
.dest-card-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(17,17,17,0) 36%, rgba(17,17,17,.82));
  pointer-events:none;
}
.dest-card-rating{
  position:absolute; top:14px; left:14px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  background: rgba(255,255,255,.92); color: var(--ink);
  font-size:.76rem; font-weight:700;
  padding:5px 11px; border-radius:999px;
}
.dest-card-rating svg{ color: var(--yellow); flex:none; }
.dest-card-overlay{
  position:absolute; left:20px; right:20px; bottom:18px; z-index:2;
  color:#fff;
}
.dest-card-loc{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#FFC768; margin-bottom:8px;
}
.dest-card-loc svg{ flex:none; }
.dest-card-overlay h3{ color:#fff; font-size:1.7rem; line-height:1.02; margin-bottom:12px; }
.dest-card-cta{
  display:inline-flex; align-items:center; gap:8px;
  color:#fff; font-weight:700; font-size:.76rem;
  text-transform:uppercase; letter-spacing:.05em;
  border-bottom:2px solid rgba(255,255,255,.5); padding-bottom:3px;
}
.dest-card-cta svg{ transition: transform .3s var(--ease); }
.dest-card:hover .dest-card-cta svg{ transform: translateX(4px); }

.carousel-arrows{ display:flex; gap:10px; flex:none; }
.carousel-arrow{
  width:42px; height:42px;
  border-radius:0;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color: var(--ink);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.carousel-arrow:hover{ background: var(--ink); border-color: var(--ink); color:#fff; transform: scale(1.08); }
.carousel-arrow:disabled{ opacity:.35; cursor:not-allowed; }
.carousel-arrow:disabled:hover{ background:#fff; color:var(--ink); border-color:var(--border); transform:none; }

/* ============================================================
   ELEVATE YOUR ADVENTURES
   ============================================================ */
.elevate-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:64px;
  align-items:center;
}
.elevate-copy h2{ font-size: clamp(1.9rem, 2.6vw + 1rem, 2.7rem); line-height:1.15; margin-bottom:18px; }
.elevate-copy > p{ color: var(--ink-70); font-size:.98rem; max-width:48ch; margin-bottom:36px; }
.elevate-features{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 24px;
}
.elevate-feature{ display:flex; gap:14px; align-items:flex-start; }
.elevate-feature .icon{
  width:40px; height:40px;
  border-radius:0;
  background: #FFF7E4;
  color: var(--amber);
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.elevate-feature h4{ font-family:'Archivo',sans-serif; font-size:.92rem; font-weight:700; margin-bottom:4px; }
.elevate-feature p{ font-size:.82rem; color: var(--ink-70); line-height:1.5; }

.elevate-media{ position:relative; }
.elevate-photo{
  width:100%;
  height:520px;
  border-radius: 0;
  background-size:cover;
  background-position:center;
  box-shadow: var(--shadow-md);
}
.elevate-chip{
  position:absolute;
  background:#fff;
  border-radius: var(--r-pill);
  padding:10px 16px;
  box-shadow: var(--shadow-md);
  font-size:.78rem;
  font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.elevate-chip .dot{ width:8px; height:8px; border-radius:0; background: var(--yellow); flex:none; }
.elevate-chip.chip-1{ top:24px; left:-20px; }
.elevate-chip.chip-2{ bottom:32px; right:-16px; }

@media (max-width: 980px){
  .elevate-grid{ grid-template-columns: 1fr; gap:40px; }
  .elevate-media{ order:-1; }
  .elevate-photo{ height:340px; }
  .elevate-chip.chip-1{ left:16px; }
  .elevate-chip.chip-2{ right:16px; }
}
@media (max-width: 560px){
  .elevate-features{ grid-template-columns: 1fr; }
}

/* ============================================================
   How it works, benefits, testimonial (restyled)
   ============================================================ */
.how{ background: var(--bg); }
.how-steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.how-step{
  background:#fff; border:1px solid var(--border); border-radius:18px;
  padding: 34px 30px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.how-step:hover{ transform: translateY(-6px); box-shadow: 0 16px 34px rgba(17,17,17,.08); }
.how-step-num{
  display:inline-block;
  font-family:'Anton',serif; font-size: 2.7rem; line-height:1;
  color: var(--yellow); margin-bottom: 14px;
}
.how-step h3{ font-size: 1.25rem; margin-bottom: 10px; }
.how-step .step-lead{ color: var(--ink); font-weight:600; font-size: .95rem; line-height:1.5; margin-bottom: 10px; }
.how-step .step-detail{ color: var(--ink-70); font-size: .86rem; line-height:1.55; }
@media (max-width: 780px){
  .how-steps{ grid-template-columns: 1fr; gap: 18px; }
}

/* How it works — standalone final CTA with a yellow glow shadow */
.how-final{ background: var(--bg); padding: 110px 0; }
.how-final-card{
  max-width: 680px; margin: 0 auto; text-align:center;
  background:#fff; border:1px solid var(--border); border-radius: 24px;
  padding: 60px 48px;
  box-shadow: 0 22px 55px rgba(144,103,67,.45);
}
.how-final-card .eyebrow{ display:inline-block; color: var(--amber); margin-bottom: 16px; }
.how-final-card h2{ font-size: clamp(1.9rem, 2.6vw + 1rem, 2.8rem); line-height:1.05; margin-bottom: 16px; }
.how-final-card p{ color: var(--ink-70); max-width: 46ch; margin: 0 auto 30px; font-size: 1rem; }
@media (max-width: 640px){
  .how-final{ padding: 64px 0; }
  .how-final-card{ padding: 40px 26px; }
}

.faq-section{
  position:relative;
  background-image: linear-gradient(rgba(20,20,20,.74), rgba(20,20,20,.82)), url('img/angkor-hero.jpg');
  background-size: cover;
  background-position: center;
}
.faq-section .eyebrow{ color: var(--yellow); }
.faq-section .section-head h2{ color:#fff; }
.faq-list{ max-width: 820px; display:flex; flex-direction:column; gap: 12px; }
.faq-item{
  background:#fff; border:1px solid var(--border); border-radius: 14px; overflow:hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq-item.is-open{ border-color: var(--yellow); box-shadow: 0 10px 26px rgba(17,17,17,.07); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap: 20px;
  padding: 20px 22px; background:none; border:none; text-align:left; cursor:pointer;
  font-family:'Anton',serif; font-size: 1.05rem; color: var(--ink);
}
.faq-q .icon{
  flex:none; width: 28px; height:28px; border-radius:50%;
  border: 1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
  position:relative;
}
.faq-q .icon::before, .faq-q .icon::after{
  content:""; position:absolute; background: var(--ink);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.faq-q .icon::before{ width:10px; height:1.5px; }
.faq-q .icon::after{ width:1.5px; height:10px; }
.faq-item.is-open .faq-q .icon{ background: var(--yellow); border-color: var(--yellow); transform: rotate(180deg); }
.faq-item.is-open .faq-q .icon::before{ background: #fff; }
.faq-item.is-open .faq-q .icon::after{ opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.faq-a p{ padding: 0 22px 22px; color: var(--ink-70); font-size: .9rem; max-width: 72ch; }

.benefits{ background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.benefits-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.benefit{ padding: 20px; border-radius: var(--r-input); transition: background-color .3s var(--ease), transform .3s var(--ease); }
.benefit:hover{ background: #FAFAFA; transform: translateY(-4px); }
.benefit-icon{
  width: 42px; height:42px; border-radius:0; background: var(--yellow); color: #fff;
  display:flex; align-items:center; justify-content:center; margin-bottom: 16px;
  transition: transform .3s var(--ease);
}
.benefit:hover .benefit-icon{ transform: scale(1.1) rotate(-4deg); }
.benefit h3{ font-size: .98rem; margin-bottom: 6px; font-family:'Archivo',sans-serif; font-weight:700; }
.benefit p{ font-size: .84rem; color: var(--ink-70); }
@media (max-width: 900px){ .benefits-grid{ grid-template-columns: repeat(2,1fr); gap: 20px; } }
@media (max-width: 520px){ .benefits-grid{ grid-template-columns: 1fr; } }

.testimonial{ background: var(--bg); text-align:center; }
.testimonial .wrap{ max-width: 780px; }
.testimonial-card{
  background: var(--white);
  padding: 64px 56px;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  margin: 0 auto;
}
.quote-mark{ font-family:'Anton',serif; font-size: 3.6rem; color: var(--amber); line-height:1; margin-bottom: 8px; }
.testimonial blockquote{
  font-family:'Archivo',sans-serif; font-size: clamp(1.1rem, 1.3vw + .9rem, 1.5rem);
  line-height:1.5; font-weight:500; font-style:italic; margin:0; color: var(--ink);
}
.testimonial cite{ display:block; margin-top: 26px; font-style:normal; font-size: .88rem; color: var(--ink-50); }
.testimonial cite strong{ color: var(--ink); font-weight:700; }
@media (max-width: 640px){ .testimonial-card{ padding: 44px 26px; } }

/* ============================================================
   TESTIMONIAL GRID (home)
   ============================================================ */
.testi-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testi-card{
  --notch-r: 9px;
  --notch-y: 68px; /* distance from the card's top edge down to the dashed divider */
  background: #FAFAFA; border: 1px solid var(--border);
  padding: 26px 24px; display:flex; flex-direction:column; gap:16px;
  transition: transform .35s var(--ease), filter .35s var(--ease), border-color .35s var(--ease);
  mask-image:
    radial-gradient(circle var(--notch-r) at left 0 top var(--notch-y), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at right 0 top var(--notch-y), transparent 98%, #000 100%);
  mask-repeat: no-repeat;
  mask-composite: intersect;
  -webkit-mask-image:
    radial-gradient(circle var(--notch-r) at left 0 top var(--notch-y), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at right 0 top var(--notch-y), transparent 98%, #000 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
}
.testi-card:hover{
  transform: translateY(-6px);
  filter: drop-shadow(0 12px 20px rgba(17,17,17,.10));
  border-color: var(--amber);
}
.testi-meta{
  display:flex; justify-content:space-between; gap:12px;
  margin: -26px -24px 0; padding: 18px 24px 3px;
  border-bottom: 1.5px dashed var(--ink-12);
}
.testi-meta .k{ display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-50); margin-bottom:3px; }
.testi-meta .v{ font-weight:700; font-size:.9rem; }
.testi-score{
  align-self:flex-start; background: var(--ink); color: var(--white);
  font-family:'Archivo',sans-serif; font-weight:700; font-size:.78rem; padding:6px 12px;
}
.testi-card p{ font-size:.88rem; color: var(--ink); line-height:1.6; }
@media (max-width: 900px){ .testi-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .testi-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   BENEFIT ROWS (numbered)
   ============================================================ */
.benefit-row{
  display:grid; grid-template-columns: 1fr 104px 1.18fr; align-items:stretch;
  gap: 0;
  margin-bottom: 30px;
  --notch-r: 8px;
  --notch-y-top: 1px;
  --notch-y-bottom: 1px;
}
.benefit-row:last-child{ margin-bottom:0; }

/* Left: photo — rounds only the outer (left) corners so the ticket reads as
   one connected piece. Notched on its right edge so the punch-hole carries
   through from the strip into the photo itself. */
.benefit-media{
  position:relative; overflow:hidden;
  border-radius: 20px 0 0 20px;
  background: var(--border);
  min-height: 320px;
  mask-image:
    radial-gradient(circle var(--notch-r) at right 0 top var(--notch-y-top), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at right 0 bottom var(--notch-y-bottom), transparent 98%, #000 100%);
  mask-repeat: no-repeat;
  mask-composite: intersect;
  -webkit-mask-image:
    radial-gradient(circle var(--notch-r) at right 0 top var(--notch-y-top), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at right 0 bottom var(--notch-y-bottom), transparent 98%, #000 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
}
.benefit-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Middle: orange strip with a sideways (horizontal) barcode. Notches sit
   exactly on the seams with the photo and the copy panel, so each punch
   bites into both neighbouring pieces at once — reads as one ticket that
   has been through a hole-punch, not three separate blocks. */
.benefit-num{
  position:relative; overflow:hidden;
  border-radius: 0;
  background: var(--yellow);
  mask-image:
    radial-gradient(circle var(--notch-r) at left 0 top var(--notch-y-top), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at right 0 top var(--notch-y-top), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at left 0 bottom var(--notch-y-bottom), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at right 0 bottom var(--notch-y-bottom), transparent 98%, #000 100%);
  mask-repeat: no-repeat;
  mask-composite: intersect;
  -webkit-mask-image:
    radial-gradient(circle var(--notch-r) at left 0 top var(--notch-y-top), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at right 0 top var(--notch-y-top), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at left 0 bottom var(--notch-y-bottom), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at right 0 bottom var(--notch-y-bottom), transparent 98%, #000 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
}
.benefit-num::before{
  content:"";
  position:absolute; inset: 20px 22px;
  background-image: repeating-linear-gradient(0deg,
    #fff 0 2px, transparent 2px 5px,
    #fff 5px 8px, transparent 8px 10px,
    #fff 10px 11px, transparent 11px 15px,
    #fff 15px 18px, transparent 18px 22px,
    #fff 22px 24px, transparent 24px 27px,
    #fff 27px 31px, transparent 31px 32px,
    #fff 32px 35px, transparent 35px 39px);
  background-repeat: repeat;
  background-size: 100% 39px;
}

/* Right: grey copy panel — rounds only the outer (right) corners. Notched
   on its left edge to complete the punch-hole started by the strip. */
.benefit-copy{
  border-radius: 0 20px 20px 0;
  background: #E9E7E2;
  padding: 30px 34px 26px;
  display:flex; flex-direction:column;
  mask-image:
    radial-gradient(circle var(--notch-r) at left 0 top var(--notch-y-top), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at left 0 bottom var(--notch-y-bottom), transparent 98%, #000 100%);
  mask-repeat: no-repeat;
  mask-composite: intersect;
  -webkit-mask-image:
    radial-gradient(circle var(--notch-r) at left 0 top var(--notch-y-top), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at left 0 bottom var(--notch-y-bottom), transparent 98%, #000 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
}
.benefit-copy-head{ display:flex; align-items:flex-start; gap:22px; margin-bottom:14px; }
.benefit-frac{
  font-family:'Anton', sans-serif; font-weight:400;
  font-size: clamp(2rem, 1.6vw + 1.3rem, 2.7rem); line-height:.9;
  color: var(--ink); flex:none; letter-spacing:0;
}
.benefit-copy h3{ font-size: clamp(1.15rem, 1.3vw + .7rem, 1.55rem); line-height:1.1; }
.benefit-copy p{ color: var(--ink-70); font-size:.92rem; max-width:52ch; margin-bottom:22px; }
.benefit-cta{
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background: var(--ink); color: var(--white);
  text-decoration:none;
  border-radius: 16px;
  padding: 13px 16px 13px 22px;
  font-family:'Archivo', sans-serif; font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.06em;
  transition: background .3s var(--ease);
}
.benefit-cta:hover{ background: var(--yellow); color: #fff; }
.benefit-cta:hover .benefit-cta-arrow{ border-color: rgba(255,255,255,.5); }
.benefit-cta-arrow{
  width:30px; height:30px; flex:none;
  border:1.5px solid rgba(255,255,255,.45); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition: transform .3s var(--ease);
}
.benefit-cta:hover .benefit-cta-arrow{ transform: translateX(3px); }
.benefit-copy .barcode{ display:none; }

@media (max-width: 820px){
  .benefit-row{ grid-template-columns: 1fr; grid-auto-rows:auto; gap:0; --notch-x: 30px; }
  /* Stacked layout: photo/strip/copy now share horizontal seams (top+bottom)
     instead of vertical ones, so the notches move to the top/bottom edges. */
  .benefit-media{
    min-height:0; aspect-ratio:16/9; border-radius: 20px 20px 0 0;
    mask-image:
      radial-gradient(circle var(--notch-r) at left var(--notch-x) bottom 0, transparent 98%, #000 100%),
      radial-gradient(circle var(--notch-r) at right var(--notch-x) bottom 0, transparent 98%, #000 100%);
    -webkit-mask-image:
      radial-gradient(circle var(--notch-r) at left var(--notch-x) bottom 0, transparent 98%, #000 100%),
      radial-gradient(circle var(--notch-r) at right var(--notch-x) bottom 0, transparent 98%, #000 100%);
  }
  .benefit-num{
    height:52px;
    mask-image:
      radial-gradient(circle var(--notch-r) at left var(--notch-x) top 0, transparent 98%, #000 100%),
      radial-gradient(circle var(--notch-r) at right var(--notch-x) top 0, transparent 98%, #000 100%),
      radial-gradient(circle var(--notch-r) at left var(--notch-x) bottom 0, transparent 98%, #000 100%),
      radial-gradient(circle var(--notch-r) at right var(--notch-x) bottom 0, transparent 98%, #000 100%);
    -webkit-mask-image:
      radial-gradient(circle var(--notch-r) at left var(--notch-x) top 0, transparent 98%, #000 100%),
      radial-gradient(circle var(--notch-r) at right var(--notch-x) top 0, transparent 98%, #000 100%),
      radial-gradient(circle var(--notch-r) at left var(--notch-x) bottom 0, transparent 98%, #000 100%),
      radial-gradient(circle var(--notch-r) at right var(--notch-x) bottom 0, transparent 98%, #000 100%);
  }
  /* Strip is now a short, wide bar — run the barcode vertically so it still fills it. */
  .benefit-num::before{
    inset: 12px 26px;
    background-image: repeating-linear-gradient(90deg,
      var(--ink) 0 2px, transparent 2px 5px,
      var(--ink) 5px 8px, transparent 8px 10px,
      var(--ink) 10px 11px, transparent 11px 15px,
      var(--ink) 15px 18px, transparent 18px 22px,
      var(--ink) 22px 24px, transparent 24px 27px,
      var(--ink) 27px 31px, transparent 31px 32px,
      var(--ink) 32px 35px, transparent 35px 39px);
    background-size: 39px 100%;
  }
  .benefit-copy{
    border-radius: 0 0 20px 20px; padding: 24px 22px 22px;
    mask-image:
      radial-gradient(circle var(--notch-r) at left var(--notch-x) top 0, transparent 98%, #000 100%),
      radial-gradient(circle var(--notch-r) at right var(--notch-x) top 0, transparent 98%, #000 100%);
    -webkit-mask-image:
      radial-gradient(circle var(--notch-r) at left var(--notch-x) top 0, transparent 98%, #000 100%),
      radial-gradient(circle var(--notch-r) at right var(--notch-x) top 0, transparent 98%, #000 100%);
  }
}

/* ============================================================
   PACKAGES (restyled)
   ============================================================ */
.packages{ background: var(--bg); }
.package-filter-note{ font-size:.9rem; color: var(--ink-70); margin-bottom:22px; }
.package-filter-note a{ color: var(--ink); text-decoration:underline; font-weight:600; }
.package-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.package-card-wrap{
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
.package-card-wrap:hover{ transform: translateY(-7px); filter: drop-shadow(0 14px 22px rgba(17,17,17,.10)); }
/* On packages.html each card also carries .r-item.is-visible for the scroll-reveal
   animation, and .reveal-stagger.is-visible .r-item{transform:none} outranks the
   rule above on specificity alone — this restores the hover lift in that context. */
.package-card-wrap.r-item.is-visible:hover{ transform: translateY(-7px); }
.package-card{
  --notch-r: 8px;
  --notch-y: 200px; /* photo height — the notch sits right at the photo/body seam */
  background: #fff;
  display:flex; flex-direction:column;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  height:100%;
  mask-image:
    radial-gradient(circle var(--notch-r) at left 0 top var(--notch-y), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at right 0 top var(--notch-y), transparent 98%, #000 100%);
  mask-repeat: no-repeat;
  mask-composite: intersect;
  -webkit-mask-image:
    radial-gradient(circle var(--notch-r) at left 0 top var(--notch-y), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at right 0 top var(--notch-y), transparent 98%, #000 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
}
.package-media{ height: 200px; position:relative; overflow:hidden; }
.package-media::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--img);
  background-size:cover;
  background-position:center;
  transition: transform .6s var(--ease);
}
.package-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(160deg, rgba(17,17,17,.15), rgba(17,17,17,.5));
  pointer-events:none;
}
.package-card-wrap:hover .package-media::before{ transform: scale(1.08); }
.package-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  background: rgba(255,255,255,.94); color: var(--ink);
  font-size: .72rem; font-weight:700; padding: 5px 12px; border-radius: 999px;
}
/* Price shown as a chip on the photo (Concept B). z-index keeps it above the
   photo's dark gradient overlay (.package-media::after), which otherwise
   paints over it and dulls the yellow. */
.package-price-chip{
  position:absolute; right:14px; bottom:14px; z-index:2;
  background: var(--yellow); color: #fff;
  border-radius: 12px; padding: 7px 13px; text-align:right; line-height:1;
  box-shadow: var(--shadow-sm);
}
.package-price-chip small{ display:block; font-size:.56rem; font-weight:700; letter-spacing:.07em; margin-bottom:3px; }
.package-price-chip strong{ font-family:'Anton',serif; font-weight:400; font-size:1.2rem; }
.package-body{ padding: 22px 22px 22px; display:flex; flex-direction:column; flex:1; }
.package-dest{
  font-size: .72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--amber); margin-bottom: 8px;
}
.package-card h3{ font-size: 1.35rem; margin-bottom: 10px; }
.package-card > .package-body > p.blurb{ color: var(--ink-70); font-size: .88rem; margin-bottom: 18px; }
.package-features{ margin-bottom: 20px; }
.package-features li{ display:flex; align-items:flex-start; gap:10px; padding: 6px 0; font-size: .86rem; color: var(--ink); }
.package-features li svg{ flex:none; margin-top:3px; color: var(--amber); }
/* Barcode strip sits just above the CTA; margin-top:auto pins CTA to the base
   so cards of differing heights line up. */
/* Full-bleed barcode strip — runs edge to edge like a real ticket band, no
   rounded corners (negative side margins cancel the body's 22px padding). */
.package-barcode{
  position:relative; display:block; height:58px;
  margin: auto -22px 0;
  background: var(--yellow);
  overflow:hidden;
}
.package-barcode::before{
  content:"";
  position:absolute; inset: 16px 22px;
  background-image: repeating-linear-gradient(90deg,
    #fff 0 2px, transparent 2px 5px,
    #fff 5px 8px, transparent 8px 10px,
    #fff 10px 11px, transparent 11px 15px,
    #fff 15px 18px, transparent 18px 22px,
    #fff 22px 24px, transparent 24px 27px,
    #fff 27px 31px, transparent 31px 32px,
    #fff 32px 35px, transparent 35px 39px);
  background-repeat: repeat-x;
  background-size: 39px 100%;
}
/* Compact CTA — sized to its text and left-aligned, so it no longer fills the
   whole row or dominates the card. */
/* Option 4 — plain text label with a standalone dark arrow circle, no button
   fill. Light and airy, doesn't dominate the card. */
.package-cta{
  margin-top: 18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%;
  background: transparent; color: var(--ink);
  border:none; padding:0;
  font-family:'Archivo',sans-serif; font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.04em;
  text-decoration:none; cursor:pointer;
}
.package-cta-arrow{
  width:36px; height:36px; flex:none;
  border-radius:50%; border:none;
  background: var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: transform .3s var(--ease);
}
.package-cta:hover .package-cta-arrow{ transform: translateX(3px); }

@media (max-width: 980px){ .package-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .package-grid{ grid-template-columns: 1fr; } }

/* ---------- Package detail page (package.html) ---------- */
/* Cancel the global section{padding:88px 0} so the hero sits right under the nav. */
#packageDetail{ padding: 0; }
/* Package photo behind the header, washed with the site's cream tone so a
   low-res or oddly-cropped source photo never fights the title for
   attention — text stays readable regardless of what's underneath. */
.pkg-hero{
  position:relative;
  padding: 48px 0 40px;
  background-image:
    linear-gradient(rgba(245,242,235,.85), rgba(245,242,235,.85)),
    var(--img);
  background-size: cover;
  background-position: center;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.pkg-back{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--ink-70); text-decoration:none;
  font-size:.82rem; font-weight:600; margin-bottom: 20px;
  transition: color .2s var(--ease);
}
.pkg-back:hover{ color: var(--ink); }
.pkg-hero-inner{ max-width: 620px; }
.pkg-hero .pkg-dest{
  font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color: var(--yellow); margin-bottom: 10px;
}
.pkg-hero h1{ color: var(--ink); font-size: clamp(2.2rem, 3.4vw + 1rem, 3.8rem); line-height:1; margin-bottom: 16px; }
.pkg-hero-blurb{ color: var(--ink-70); max-width: 56ch; font-size: 1.02rem; line-height:1.5; margin-bottom: 24px; }
.pkg-facts{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.pkg-fact{
  display:inline-flex; align-items:center; gap:6px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--ink); font-size:.82rem; font-weight:600;
  padding: 9px 15px; border-radius: 999px;
}
.pkg-fact-price{ background: var(--yellow); color: #fff; border-color: var(--yellow); font-weight:700; gap:5px; }
.pkg-fact-price strong{ font-family:'Anton',serif; font-weight:400; font-size:1.05rem; }
.pkg-fact-price small{ font-weight:600; font-size:.72rem; color: rgba(255,255,255,.8); }

.package-detail{ background: var(--bg); padding: 56px 0 84px; }
.pkg-grid{ display:grid; grid-template-columns: minmax(0,1fr) 366px; gap: 40px; align-items:start; }
.pkg-main-head{ margin-bottom: 22px; }
.pkg-main-head h2{ font-size: clamp(1.5rem, 1.4vw + 1rem, 2rem); margin-bottom: 8px; }
.pkg-hint{ color: var(--ink-70); font-size: .95rem; max-width: 60ch; }
.pkg-story{ color: var(--ink-70); font-size: 1.02rem; line-height: 1.75; max-width: 64ch; }
.pkg-card{
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding: 4px 26px; margin-bottom: 20px;
}
.pkg-card .modal-section{ margin-bottom: 0; padding: 20px 0; }
.pkg-card .modal-section h3{ margin-bottom: 8px; }

.pkg-summary{
  position: sticky; top: 100px;
  background:#FAFAFA; border:1px solid var(--border); border-radius: 18px;
  padding: 26px;
  box-shadow: var(--shadow-md);
}
.pkg-summary-title{ font-size: 1.3rem; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.pkg-summary .stepper-row{ margin-bottom: 18px; }
.pkg-summary .modal-total{ margin-bottom: 16px; }
.pkg-reassure{ margin-top: 14px; font-size:.78rem; color: var(--ink-50); text-align:center; line-height:1.4; }
.pkg-highlights{ list-style:none; margin: 0 0 22px; padding:0; }
.pkg-highlights li{
  position:relative;
  padding: 13px 0 13px 20px;
  border-bottom: 1px dashed var(--ink-12);
  font-size: .9rem;
  line-height:1.5;
  color: var(--ink);
}
.pkg-highlights li:last-child{ border-bottom:none; }
.pkg-highlights li::before{
  content:"";
  position:absolute; left:2px; top:20px;
  width:6px; height:6px;
  border-radius:50%;
  background: var(--amber);
}
@media (max-width: 900px){
  .pkg-grid{ grid-template-columns: 1fr; gap: 28px; }
  .pkg-summary{ position: static; }
}

/* ---------- Destination detail cards (destinations.html) ---------- */
.dest-detail-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.dest-detail-card{
  --notch-r: 12px;
  --notch-y: 250px; /* photo height — the notch is cut at the photo/info seam */
  background: #fff; border: 1px solid var(--border);
  border-radius: 18px; overflow:hidden;
  transition: transform .3s var(--ease), filter .3s var(--ease), background-color .3s var(--ease);
  display:flex; flex-direction:column;
  text-decoration:none; color: var(--ink);
  -webkit-mask-image:
    radial-gradient(circle var(--notch-r) at left 0 top var(--notch-y), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at right 0 top var(--notch-y), transparent 98%, #000 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle var(--notch-r) at left 0 top var(--notch-y), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at right 0 top var(--notch-y), transparent 98%, #000 100%);
  mask-repeat: no-repeat;
  mask-composite: intersect;
}
.dest-detail-card:hover{ transform: translateY(-7px); filter: drop-shadow(0 14px 24px rgba(17,17,17,.12)); }
.dest-detail-media{ height: 250px; background-size:cover; background-position:center; }
.dest-detail-body{ padding: 26px; display:flex; flex-direction:column; flex:1; border-top: 1.5px dashed var(--ink-12); }
.dest-detail-cta{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-family:'Archivo',sans-serif; font-weight:700; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.04em; color: var(--ink);
  transition: color .25s var(--ease);
}
.dest-detail-cta svg{ transition: transform .3s var(--ease); }
.dest-detail-card:hover .dest-detail-cta{ color: var(--ink); }
.dest-detail-card:hover .dest-detail-cta svg{ transform: translateX(4px); }

/* Destination filter chips (packages.html) */
.package-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.pkg-chip{
  border:1px solid var(--border); background:#fff; color: var(--ink);
  border-radius:999px; padding:8px 16px;
  font-family:'Archivo',sans-serif; font-size:.82rem; font-weight:600;
  cursor:pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.pkg-chip:hover{ border-color: var(--ink); }
.pkg-chip.is-active{ background: var(--ink); color:#fff; border-color: var(--ink); }
.dest-detail-body .region{ font-size: .74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--amber); margin-bottom: 8px; }
.dest-detail-body h2{ font-size: 1.5rem; margin-bottom: 12px; }
.dest-detail-body p.desc{ color: var(--ink-70); font-size: .9rem; margin-bottom: 18px; }
.dest-detail-meta{
  position:relative;
  display:flex; gap: 22px; flex-wrap: wrap;
  margin: 0 -26px 20px; padding: 14px 26px;
  border-top: 1.5px dashed var(--ink-12); border-bottom: 1.5px dashed var(--ink-12);
}
.dest-detail-meta div .k{ font-size:.68rem; color: var(--ink-50); text-transform:uppercase; letter-spacing:.06em; }
.dest-detail-meta div .v{ font-size:.88rem; font-weight:700; margin-top:2px; }
@media (max-width: 860px){ .dest-detail-grid{ grid-template-columns: 1fr; } }

/* ---------- Page header (sub-pages banner) ----------
   Nav is always solid in this design (no transparent-over-hero state),
   so the banner sits normally below it instead of tucking underneath. */
.page-header{
  position:relative; padding: 64px 0 80px;
  color: var(--white); background-size: cover; background-position: center; overflow:hidden;
}
.page-header::before{ content:""; position:absolute; inset:0; background: linear-gradient(160deg, rgba(13,32,39,.66), rgba(8,20,25,.8)); }
.page-header .wrap{ position:relative; z-index:1; }
.page-header .eyebrow{ color: var(--yellow); }
.page-header h1{ color: var(--white); font-size: clamp(2rem, 2.8vw + 1.2rem, 3.1rem); line-height: 1.12; max-width: 20ch; }
.page-header p{ margin-top: 16px; font-size: 1rem; color: rgba(255,255,255,.85); max-width: 56ch; }

/* ============================================================
   Auth pages, My bookings, contact form, footer, popups, modal, toast
   ============================================================ */
.auth-section{ padding: 84px 0 104px; }
.auth-card{
  max-width: 440px; margin: 0 auto; background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 40px 36px;
}
.auth-card h1{ font-size: 1.7rem; margin-bottom: 8px; }
.auth-card .sub{ color: var(--ink-70); font-size: .92rem; margin-bottom: 26px; }
.auth-card .form-field{ margin-bottom: 18px; }
.auth-switch{ margin-top: 22px; text-align:center; font-size: .88rem; color: var(--ink-70); }
.auth-switch a{ color: var(--amber); font-weight:700; text-decoration:none; }
.auth-switch a:hover{ text-decoration:underline; }

.form-banner{ display:none; align-items:flex-start; gap: 10px; padding: 13px 16px; border-radius: var(--r-input); font-size: .88rem; margin-bottom: 20px; }
.form-banner.is-visible{ display:flex; }
.form-banner.error{ background:#FDECEC; color:#B4232C; border:1px solid #F3C6C6; }
.form-banner.success{ background:#F3F9EE; color:#3D7A1E; border:1px solid #D6EAC4; }

.badge{
  display:inline-flex; align-items:center; gap:6px; padding: 5px 12px; border-radius: var(--r-pill);
  font-size: .74rem; font-weight:700; text-transform:capitalize; white-space:nowrap;
}
.badge::before{ content:""; width:6px; height:6px; border-radius:0; background:currentColor; }
.badge-pending{ background:#FFF3D6; color:#946200; }
.badge-confirmed{ background:#F3F9EE; color:#3D7A1E; }
.badge-cancelled{ background:#FDECEC; color:#B4232C; }
.badge-new{ background:#FFF3D6; color:#946200; }
.badge-replied{ background:#F3F9EE; color:#3D7A1E; }

.booking-list{ display:flex; flex-direction:column; gap:20px; }
.booking-card{ background: #fff; border: 1px solid var(--border); border-radius: var(--r-card); padding: 26px 28px; }
.booking-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 16px; flex-wrap:wrap; margin-bottom: 14px; }
.booking-card-head h3{ font-size: 1.2rem; margin-bottom:4px; }
.booking-card-head .meta{ font-size: .84rem; color: var(--ink-50); }
.booking-line-list{ margin: 14px 0; }
.booking-line-list .group-label{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-50); margin: 12px 0 6px; }
.booking-line-list li{ font-size:.88rem; color: var(--ink-70); padding: 3px 0; }
.booking-card-foot{ display:flex; align-items:center; justify-content:space-between; padding-top: 16px; margin-top: 6px; border-top: 1px dashed var(--border); }
.booking-card-foot .total{ font-family:'Anton',serif; font-size: 1.3rem; }
.empty-state{ text-align:center; padding: 60px 24px; border: 1.5px dashed var(--border); border-radius: var(--r-card); color: var(--ink-70); }
.empty-state p{ margin-bottom: 18px; }

.contact-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items:start; }
.contact-form-card{ background:#fff; border:1px solid var(--border); border-radius: 20px; padding: 36px; }
.contact-form-title{ font-size: 1.3rem; margin-bottom: 24px; }
.form-field{ display:flex; flex-direction:column; gap: 8px; margin-bottom: 22px; }
.form-field label{ font-size: .78rem; font-weight:700; letter-spacing:.02em; }
.form-field .hint{ font-size:.78rem; color: var(--ink-50); }
.form-field input, .form-field select, .form-field textarea{
  font-family: 'Archivo',sans-serif; font-size: .92rem; padding: 13px 16px; border-radius: var(--r-input);
  border: 1.5px solid var(--border); background: #fff; color: var(--ink);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form-field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  cursor:pointer;
  padding-right:40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6B63' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right 16px center;
  background-size:14px;
}
.form-field select:hover{ border-color: var(--ink-50); }
.form-field input::placeholder, .form-field textarea::placeholder{ color: var(--ink-50); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  border-color: var(--amber); outline: none; box-shadow: 0 0 0 4px rgba(232,162,0,.14);
}
.form-field textarea{ resize: vertical; min-height: 120px; }
.form-error{ font-size: .78rem; color: #B4232C; display:none; }
.form-field.has-error input, .form-field.has-error textarea{ border-color: #B4232C; }
.form-field.has-error .form-error{ display:block; }

/* Branded info panel */
.contact-info-card{ background: var(--yellow); color: #fff; border:none; border-radius: 20px; padding: 36px; }
.contact-info-card h3{ font-size: 1.3rem; color: #fff; margin-bottom: 10px; }
.contact-info-lead{ font-size:.92rem; color: rgba(255,255,255,.8); line-height:1.55; margin-bottom: 22px; }
.contact-info-row{ display:flex; gap: 14px; align-items:flex-start; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.2); }
.contact-info-row:first-of-type{ border-top:none; }
.contact-info-row .icon{ width: 40px; height:40px; border-radius:50%; background: rgba(255,255,255,.15); color: #fff; display:flex; align-items:center; justify-content:center; flex:none; }
.contact-info-row .k{ font-size:.72rem; color: rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.05em; }
.contact-info-row .v{ font-size:.92rem; font-weight:700; margin-top:2px; color: #fff; }
.contact-info-row a.v{ text-decoration:none; color: #fff; }
.contact-info-row a.v:hover{ color: #fff; text-decoration: underline; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }

footer{
  background-image:
    linear-gradient(rgba(144,103,67,.86), rgba(144,103,67,.86)),
    url('/img/wall-light-texture.jpg');
  background-size: cover;
  background-position: center;
  color: rgba(255,255,255,.85);
}
footer .brand{ color: #fff; }
.footer-top{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 28px; padding-bottom: 28px; gap:16px;
  font-size: .9rem; letter-spacing:.02em; color: rgba(255,255,255,.85);
}
.footer-main{
  display:grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 56px;
  padding-top: 40px; padding-bottom: 56px;
}
.newsletter h2{ color: #fff; font-size: clamp(2rem, 2.6vw + 1.1rem, 3.3rem); line-height:1.02; margin-bottom: 18px; }
.newsletter-sub{ font-size: .95rem; color: rgba(255,255,255,.75); margin-bottom: 42px; max-width: 46ch; }
.newsletter-form{ display:flex; align-items:flex-end; gap: 22px; flex-wrap:wrap; margin-bottom: 20px; }
.newsletter-field{ flex:1; min-width: 240px; }
.newsletter-field label{ display:block; font-size: .72rem; letter-spacing:.05em; color: rgba(255,255,255,.75); margin-bottom: 8px; }
.newsletter-form input[type=email]{
  width:100%; background:transparent; border:none; border-bottom: 1.5px solid #fff;
  border-radius:0; padding: 9px 2px; font-family:'Archivo',sans-serif; font-size: .95rem; color: #fff; outline:none;
  transition: border-color .2s var(--ease);
}
.newsletter-form input[type=email]::placeholder{ color: rgba(255,255,255,.55); }
.newsletter-form input[type=email]:focus{ border-bottom-width: 2px; }
.newsletter-form .btn, .newsletter-form button[type=submit]{
  background: var(--ink); color:#fff; border:none;
  border-radius: 999px; padding: 16px 42px;
  font-family:'Archivo',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.76rem;
  cursor:pointer; transition: background .3s var(--ease), transform .3s var(--ease);
}
.newsletter-form .btn:hover, .newsletter-form button[type=submit]:hover{ background:#000; transform: translateY(-2px); }
.newsletter-consent{ display:flex; align-items:center; gap:10px; font-size:.85rem; color: rgba(255,255,255,.85); }
.newsletter-consent input[type=checkbox]{ width:16px; height:16px; accent-color: #fff; flex:none; }
.newsletter-consent a{ color: #fff; text-decoration:underline; }
.newsletter .fine-print{ font-size: .74rem; color: rgba(255,255,255,.75); margin-top: 14px; }
.newsletter-note{ margin-top: 10px; font-size: .82rem; color: #fff; font-weight:700; display:none; }
.newsletter-note.is-visible{ display:block; }
.footer-links{ display:grid; grid-template-columns: repeat(3, auto); gap: 20px 44px; justify-content:end; align-content:start; }
.footer-col h4{ font-size: .7rem; text-transform:uppercase; letter-spacing:.1em; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.footer-col a{ display:block; text-decoration:none; color: #fff; font-size: .92rem; padding: 5px 0; transition: opacity .25s var(--ease), padding-left .3s var(--ease); }
.footer-col a:hover{ opacity:.6; padding-left: 6px; }
.footer-bottom{ padding-top: 22px; padding-bottom: 22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 12px; font-size: .8rem; color: rgba(255,255,255,.65); border-top: 1px solid rgba(255,255,255,.2); }
@media (max-width: 820px){ .footer-main{ grid-template-columns: 1fr; gap: 44px; } .footer-links{ grid-template-columns: 1fr 1fr; justify-content:start; } }
@media (max-width: 520px){ .footer-links{ grid-template-columns: 1fr; } .footer-top{ flex-direction:row; } }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger.is-visible .r-item{ opacity:1; transform:none; }
.reveal-stagger .r-item{ opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-stagger.is-visible .r-item:nth-child(1){ transition-delay: .02s; }
.reveal-stagger.is-visible .r-item:nth-child(2){ transition-delay: .1s; }
.reveal-stagger.is-visible .r-item:nth-child(3){ transition-delay: .18s; }
.reveal-stagger.is-visible .r-item:nth-child(4){ transition-delay: .26s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal, .r-item{ opacity:1 !important; transform:none !important; transition:none !important; }
  .btn, .package-card, .benefit, .nav, .dest-card, .dest-detail-card, .hero-slide{ transition:none !important; }
  .hero-slide{ opacity: .999 !important; }
}

/* ---------- Modal (customizer + compose) ---------- */
.modal-backdrop{ position: fixed; inset:0; background: rgba(17,17,17,.5); z-index: 100; display:none; align-items:center; justify-content:center; padding: 20px; }
.modal-backdrop.is-open{ display:flex; }
.modal{
  background: #fff; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  border-radius: 0; box-shadow: var(--shadow-lg); padding: 32px; position:relative;
  animation: modalIn .3s var(--ease);
  scrollbar-width: none; -ms-overflow-style: none;
}
.modal::-webkit-scrollbar{ display:none; }
@media (prefers-reduced-motion: reduce){ .modal{ animation:none; } }
@keyframes modalIn{ from{ opacity:0; transform: translateY(16px) scale(.98);} to{ opacity:1; transform:none; } }
.modal-close{
  position:absolute; top: 20px; right:20px; width: 38px; height:38px; border-radius:0;
  border:1px solid var(--border); background: #fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.modal-close:hover{ background: var(--yellow); color: #fff; transform: rotate(90deg); }
/* Login popup */
.login-modal{ max-width: 420px; width:100%; }
.login-modal h2{ margin-bottom: 8px; }
.login-modal-sub{ color: var(--ink-70); font-size:.92rem; margin-bottom: 24px; }
.login-modal .form-field{ margin-bottom: 18px; }
.login-modal-foot{ text-align:center; margin-top: 18px; font-size:.9rem; color: var(--ink-70); }
.login-modal-foot a{ color: var(--amber); font-weight:700; text-decoration:none; }
.login-modal-foot a:hover{ text-decoration:underline; }
.modal-dest{ font-size: .76rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--amber); margin-bottom:6px; }
.modal h2{ font-size: 1.6rem; margin-bottom: 4px; padding-right: 40px; }
.modal .modal-meta{ color: var(--ink-70); font-size: .88rem; margin-bottom: 26px; }
.modal-section{ margin-bottom: 26px; }
.modal-section h3{
  font-family:'Archivo',sans-serif; font-size: .76rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color: var(--ink-50); margin-bottom: 12px;
}
.toggle-row{ display:flex; align-items:center; justify-content:space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.toggle-row:last-child{ border-bottom:none; }
.toggle-label{ font-size: .9rem; }
.toggle-cost{ display:block; font-size: .78rem; color: var(--ink-50); margin-top:2px; }
.switch{ position:relative; width: 42px; height:24px; flex: none; }
.switch input{ position:absolute; inset:0; z-index:2; opacity:0; margin:0; cursor:pointer; }
.switch .track{ position:absolute; inset:0; background: var(--border); border-radius: var(--r-pill); transition: background-color .25s var(--ease); }
.switch .thumb{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:0; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .25s var(--ease); }
.switch input:checked + .track{ background: var(--yellow); }
.switch input:checked + .track + .thumb{ transform: translateX(18px); }
.switch input:focus-visible + .track{ outline: 2.5px solid var(--ink); outline-offset:3px; }
.savings-note{ display:inline-flex; align-items:center; gap:6px; margin-top: 12px; font-size: .82rem; font-weight:700; color: #3D7A1E; background: #F3F9EE; padding: 6px 12px; border-radius: var(--r-pill); }
.savings-note[hidden]{ display:none; }
.stepper-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.stepper{ display:flex; align-items:center; gap: 14px; border: 1px solid var(--border); border-radius: var(--r-input); padding: 6px 10px; }
.stepper button{
  width: 30px; height:30px; border-radius:0; border:1px solid var(--border); background: #fff; cursor:pointer;
  font-size: 1.05rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.stepper button:hover{ background: var(--yellow); }
.stepper button:active{ transform: scale(.92); }
.stepper button:disabled{ opacity:.35; cursor:not-allowed; background:#fff; }
.stepper .count{ min-width: 20px; text-align:center; font-weight:700; }
.modal-total{ background: #FAFAFA; border-radius: var(--r-card); padding: 20px 22px; display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 22px; }
.modal-total .label{ font-size:.82rem; color: var(--ink-70); }
.modal-total .value{ font-family:'Anton',serif; font-size: 1.9rem; }
.modal-total .value small{ font-family:'Archivo',sans-serif; font-size:.76rem; font-weight:500; color: var(--ink-50); }

/* ---------- Toast ---------- */
.toast{
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  background: var(--ink); color: #fff; padding: 16px 22px; border-radius: var(--r-input);
  box-shadow: var(--shadow-lg); display:flex; align-items:center; gap: 12px; font-size: .88rem;
  z-index: 200; opacity:0; pointer-events:none; transition: opacity .35s var(--ease), transform .35s var(--ease); max-width: 90vw;
}
.toast.is-visible{ opacity:1; transform: translate(-50%, 0); pointer-events:auto; }
.toast-icon{ width:24px; height:24px; border-radius:0; background: var(--yellow); color: #fff; display:flex; align-items:center; justify-content:center; flex:none; }

/* ---------- Bottom-right popups (cookie notice, sign-in nudge) ---------- */
.site-popup-stack{ position:fixed; right:20px; bottom:20px; z-index:150; display:flex; flex-direction:column-reverse; gap:14px; max-width:320px; }
.site-popup{ background: #fff; border:1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding:20px 20px 18px; position:relative; animation: sitePopupIn .35s var(--ease); }
@keyframes sitePopupIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.site-popup-close{
  position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:0;
  border:none; background: #FAFAFA; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color: var(--ink-50); transition: background-color .2s var(--ease), color .2s var(--ease);
}
.site-popup-close:hover{ background: #F0F0F0; color: var(--ink); }
.site-popup h4{ font-family:'Anton',serif; font-weight:600; font-size:1rem; margin:0 26px 8px 0; }
.site-popup p{ font-size:.84rem; color: var(--ink-70); margin-bottom:14px; line-height:1.5; }
.site-popup-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.site-popup-actions .btn{ padding:9px 18px; font-size:.82rem; }
.site-popup-actions .text-link{ font-size:.82rem; font-weight:700; color: var(--amber); text-decoration:none; }
.site-popup-actions .text-link:hover{ text-decoration:underline; }
@media (max-width:520px){ .site-popup-stack{ left:16px; right:16px; max-width:none; } }
@media (prefers-reduced-motion: reduce){ .site-popup{ animation:none; } }

/* ---------- "New here?" sign-in popup: centered modal styled like a torn ticket stub ---------- */
.signin-popup-backdrop .site-popup{
  max-width: 440px;
  width: 100%;
  animation: sitePopupPop .3s var(--ease);
}
@keyframes sitePopupPop{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .signin-popup-backdrop .site-popup{ animation:none; } }
.site-popup.ticket-popup{
  --notch-r: 7px;
  --notch-y: 138px; /* centered on the dashed tear divider for the default 1–2 line message */
  padding: 30px 32px 30px;
  overflow: hidden;
  mask-image:
    radial-gradient(circle var(--notch-r) at left 0 top var(--notch-y), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at right 0 top var(--notch-y), transparent 98%, #000 100%);
  mask-repeat: no-repeat;
  mask-composite: intersect;
  -webkit-mask-image:
    radial-gradient(circle var(--notch-r) at left 0 top var(--notch-y), transparent 98%, #000 100%),
    radial-gradient(circle var(--notch-r) at right 0 top var(--notch-y), transparent 98%, #000 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
}
.ticket-popup::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background: var(--yellow);
}
.ticket-popup h4{ font-size: 1.35rem; margin: 0 30px 10px 0; }
.ticket-popup p{ font-size: .96rem; }
.ticket-popup .site-popup-tear{
  height:0; margin: 10px -32px 12px; border-top: 1.5px dashed var(--ink-12);
}
.ticket-popup .site-popup-actions{ flex-direction:column; align-items:stretch; gap:12px; }
.ticket-popup .site-popup-actions .btn{ padding:14px 18px; font-size:.9rem; }
.ticket-popup .site-popup-create-link{
  display:block; text-align:center; margin-top:16px;
  font-size:.8rem; font-weight:700; color: var(--amber); text-decoration:none;
}
.ticket-popup .site-popup-create-link:hover{ text-decoration:underline; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Flight tracker (scroll-linked plane, left edge) ---------- */
.flight-tracker{
  position:fixed; left:22px; top:0; height:100vh; width:24px;
  z-index:40; pointer-events:none;
}
.flight-path{
  position:absolute; left:50%; top:100px; bottom:60px; width:1.5px;
  transform:translateX(-50%);
  background: repeating-linear-gradient(180deg, var(--ink-12) 0 6px, transparent 6px 13px);
}
.flight-plane{
  position:absolute; left:50%; top:100px;
  transform:translate(-50%,-50%) rotate(90deg);
  font-size:2.1rem; line-height:1; color: var(--yellow);
  filter: drop-shadow(0 2px 3px rgba(20,20,20,.18));
  transition: transform .35s var(--ease), color .3s var(--ease);
}
.flight-plane.is-up{ transform:translate(-50%,-50%) rotate(-90deg); }
/* Over the orange footer/booking band the yellow plane would disappear — go white. */
.flight-plane.on-yellow{ color:#fff; }
@media (max-width: 1100px){ .flight-tracker{ display:none; } }
@media (prefers-reduced-motion: reduce){ .flight-plane{ transition:none !important; } }