/* ==========================================================
   Vistra Tours — inner page components
   Builds on the tokens defined in style.css (:root / [data-theme])
   ========================================================== */

.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;}

body.page{ padding-top:0; }
main#main{ display:block; }

.lede{
  font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.7; color:var(--ink-dim);
  max-width:64ch;
}

/* ---------- nav dropdowns ---------- */
.nav__group{ position:relative; }
.nav__group-link{
  display:inline-flex; align-items:center; gap:7px;
  font-size:0.85rem; color:var(--ink-dim); transition:color .3s;
}
.nav__group-link:hover, .nav__links a:hover{ color:var(--ink); }
.nav__links a.is-current, .nav__group-link.is-current{ color:var(--gold-soft); }
.nav__caret{
  width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px); transition:transform .3s var(--ease); opacity:.7;
}
.nav__group:hover .nav__caret{ transform:rotate(225deg) translate(-2px,-2px); }
.nav__group{
  position:relative;
  perspective:1400px;
}
.nav__group::after{
  content:''; position:absolute; top:100%; left:-16px; right:-16px; height:24px;
}

/* Rolled Parchment Container */
.nav__dropdown{
  position:absolute; top:calc(100% + 12px); left:50%;
  transform-origin:top center;
  transform-style:preserve-3d;
  min-width:390px; padding:10px 10px 8px; border-radius:16px;
  background:#131612; /* Deep obsidian luxury dark */
  border:1px solid rgba(201,162,77,0.28);
  box-shadow:0 30px 70px -15px rgba(0,0,0,0.78), 0 0 0 1px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.08);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(-50%) rotateX(-75deg) scaleY(0.2) translateY(-14px);
  transition:opacity .28s ease, transform .28s cubic-bezier(0.4, 0, 0.2, 1), visibility .28s;
  z-index:950;
  overflow:hidden;
}

/* Rolled Scroll Spindle (curled top rod ornament) */
.nav__dropdown::before{
  content:''; position:absolute; top:0; left:16px; right:16px; height:3px;
  background:linear-gradient(90deg, rgba(201,162,77,0.1) 0%, rgba(201,162,77,0.85) 35%, rgba(255,245,215,0.95) 50%, rgba(201,162,77,0.85) 65%, rgba(201,162,77,0.1) 100%);
  border-radius:2px;
  box-shadow:0 1px 8px rgba(201,162,77,0.35);
  z-index:3;
}

/* Unrolling Parchment Sheen */
.nav__dropdown::after{
  content:''; position:absolute; inset:0; border-radius:16px;
  background:linear-gradient(180deg, rgba(201,162,77,0.08) 0%, rgba(201,162,77,0.02) 20%, transparent 40%);
  pointer-events:none; z-index:1;
}

/* Rolled Page Unfolding Animation on Hover */
.nav__group:hover .nav__dropdown,
.nav__group:focus-within .nav__dropdown,
.nav__dropdown.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  animation:rollParchmentUnfold 0.48s cubic-bezier(0.16, 1.18, 0.32, 1) forwards;
}

@keyframes rollParchmentUnfold{
  0%{
    opacity:0;
    transform:translateX(-50%) rotateX(-75deg) scaleY(0.2) translateY(-14px);
    box-shadow:0 0 0 rgba(0,0,0,0);
  }
  55%{
    opacity:0.95;
    transform:translateX(-50%) rotateX(12deg) scaleY(1.04) translateY(2px);
  }
  78%{
    transform:translateX(-50%) rotateX(-5deg) scaleY(0.985) translateY(-1px);
  }
  90%{
    transform:translateX(-50%) rotateX(2deg) scaleY(1.008);
  }
  100%{
    opacity:1;
    transform:translateX(-50%) rotateX(0deg) scaleY(1) translateY(0);
    box-shadow:0 30px 70px -15px rgba(0,0,0,0.78), 0 0 0 1px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.08);
  }
}

/* Light Theme Rolled Parchment Dropdown */
[data-theme="light"] .nav__dropdown{
  background:#fdfcf9 !important;
  border:1px solid rgba(179,132,38,0.26) !important;
  box-shadow:0 24px 60px -12px rgba(22,23,20,0.16), 0 4px 18px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
[data-theme="light"] .nav__dropdown::before{
  background:linear-gradient(90deg, rgba(179,132,38,0.1) 0%, rgba(179,132,38,0.8) 35%, rgba(255,230,160,0.95) 50%, rgba(179,132,38,0.8) 65%, rgba(179,132,38,0.1) 100%);
  box-shadow:0 1px 8px rgba(179,132,38,0.25);
}
[data-theme="light"] .nav__dropdown::after{
  background:linear-gradient(180deg, rgba(179,132,38,0.06) 0%, rgba(179,132,38,0.01) 20%, transparent 40%) !important;
}

/* Dropdown Header Banner */
.nav__drop-header{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 8px 8px; border-bottom:1px solid rgba(244,239,228,0.08);
  margin-bottom:6px;
}
[data-theme="light"] .nav__drop-header{
  border-bottom:1px solid rgba(22,23,20,0.08);
}
.nav__drop-header-tag{
  font-family:var(--sans); font-size:0.68rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold); display:inline-flex; align-items:center; gap:6px;
}
.nav__drop-header-tag::before{
  content:'✦'; font-size:0.65rem; color:var(--gold); opacity:0.85;
}
.nav__drop-header-badge{
  font-family:var(--sans); font-size:0.68rem; font-weight:600;
  padding:2px 8px; border-radius:100px;
  background:rgba(201,162,77,0.12); color:var(--gold);
  border:1px solid rgba(201,162,77,0.2);
}
[data-theme="light"] .nav__drop-header-badge{
  background:rgba(179,132,38,0.1); color:#b38426;
  border-color:rgba(179,132,38,0.2);
}

/* Dropdown Items List */
.nav__drop-list{
  position:relative; z-index:2;
  display:flex; flex-direction:column; gap:4px;
}

/* Rich Dropdown Item Card */
.nav .nav__dropdown .nav__drop-item,
.nav:not(.is-scrolled) .nav__dropdown .nav__drop-item{
  display:flex !important; align-items:center; gap:12px;
  padding:7px 8px !important; border-radius:10px;
  background:transparent !important;
  border:1px solid transparent;
  text-decoration:none;
  transition:background .22s ease, border-color .22s ease, transform .22s var(--ease);
  position:relative;
}
.nav .nav__dropdown .nav__drop-item::after,
.nav:not(.is-scrolled) .nav__dropdown .nav__drop-item::after{
  display:none !important;
}

/* Cascading Unroll Item Reveal */
.nav__group:hover .nav__drop-item{
  animation:rollItemReveal 0.38s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.nav__drop-item:nth-child(1){ animation-delay:0.04s; }
.nav__drop-item:nth-child(2){ animation-delay:0.08s; }
.nav__drop-item:nth-child(3){ animation-delay:0.12s; }
.nav__drop-item:nth-child(4){ animation-delay:0.16s; }
.nav__drop-item:nth-child(5){ animation-delay:0.20s; }

@keyframes rollItemReveal{
  0%{
    opacity:0;
    transform:translateY(-8px) rotateX(-16deg);
  }
  100%{
    opacity:1;
    transform:translateY(0) rotateX(0deg);
  }
}

/* Thumbnail Wrap */
.nav__drop-thumb-wrap{
  position:relative; flex-shrink:0;
  width:64px; height:46px; border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(201,162,77,0.25);
  box-shadow:0 3px 8px rgba(0,0,0,0.3);
  background:#0c0d0b;
}
[data-theme="light"] .nav__drop-thumb-wrap{
  border-color:rgba(179,132,38,0.22);
  box-shadow:0 2px 6px rgba(22,23,20,0.1);
  background:#f0ede5;
}
.nav__drop-thumb{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1);
  transition:transform .35s var(--ease), filter .35s var(--ease);
}
.nav__drop-thumb-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.4) 100%);
  pointer-events:none;
}
.nav__drop-item:hover .nav__drop-thumb{
  transform:scale(1.1);
}

/* Info Column */
.nav__drop-info{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:2px;
}
.nav__drop-title-row{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
}
.nav__drop-title{
  font-family:var(--sans); font-size:0.87rem; font-weight:600;
  letter-spacing:0.01em; line-height:1.25;
  color:#f4efe4 !important; /* Page font color in dark mode */
  transition:color .2s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav__drop-arrow{
  font-size:0.85rem; line-height:1; color:var(--gold);
  opacity:0; transform:translateX(-4px);
  transition:opacity .22s ease, transform .22s var(--ease);
}
.nav__drop-sub{
  font-family:var(--sans); font-size:0.73rem; font-weight:400;
  color:#a59f91; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .2s ease;
}

/* Hover States in Dark Mode */
.nav .nav__dropdown .nav__drop-item:hover,
.nav:not(.is-scrolled) .nav__dropdown .nav__drop-item:hover{
  background:rgba(201,162,77,0.11) !important;
  border-color:rgba(201,162,77,0.3) !important;
  transform:translateX(3px);
  padding-left:11px !important;
}
.nav__drop-item:hover .nav__drop-title{
  color:#ffffff !important;
}
.nav__drop-item:hover .nav__drop-arrow{
  opacity:1; transform:translateX(0);
}
.nav__drop-item:hover .nav__drop-sub{
  color:#d4cebe;
}

/* Current Item State in Dark Mode */
.nav .nav__dropdown .nav__drop-item.is-current,
.nav:not(.is-scrolled) .nav__dropdown .nav__drop-item.is-current{
  background:rgba(201,162,77,0.14) !important;
  border-color:rgba(201,162,77,0.45) !important;
}
.nav__drop-item.is-current .nav__drop-title{
  color:var(--gold) !important; font-weight:700;
}
.nav__drop-item.is-current .nav__drop-arrow{
  opacity:1; transform:translateX(0);
}

/* Light Theme Styling — MATCHING PAGE FONT COLOR (#161714) */
[data-theme="light"] .nav .nav__dropdown .nav__drop-title,
[data-theme="light"] .nav:not(.is-scrolled) .nav__dropdown .nav__drop-title{
  color:#161714 !important; /* Authentic Page Ink Color — NOT #0d2855! */
}
[data-theme="light"] .nav .nav__dropdown .nav__drop-sub,
[data-theme="light"] .nav:not(.is-scrolled) .nav__dropdown .nav__drop-sub{
  color:#6b675e !important;
}
[data-theme="light"] .nav .nav__dropdown .nav__drop-item:hover,
[data-theme="light"] .nav:not(.is-scrolled) .nav__dropdown .nav__drop-item:hover{
  background:rgba(179,132,38,0.08) !important;
  border-color:rgba(179,132,38,0.28) !important;
  transform:translateX(3px);
}
[data-theme="light"] .nav__drop-item:hover .nav__drop-title{
  color:#b38426 !important;
}
[data-theme="light"] .nav__drop-item:hover .nav__drop-arrow{
  opacity:1; transform:translateX(0); color:#b38426;
}
[data-theme="light"] .nav__drop-item:hover .nav__drop-sub{
  color:#312f29 !important;
}
[data-theme="light"] .nav .nav__dropdown .nav__drop-item.is-current,
[data-theme="light"] .nav:not(.is-scrolled) .nav__dropdown .nav__drop-item.is-current{
  background:rgba(179,132,38,0.1) !important;
  border-color:rgba(179,132,38,0.4) !important;
}
[data-theme="light"] .nav__drop-item.is-current .nav__drop-title{
  color:#b38426 !important; font-weight:700;
}

/* Dropdown Footer */
.nav__drop-footer{
  position:relative; z-index:2;
  margin-top:6px; padding:7px 8px 3px;
  border-top:1px solid rgba(244,239,228,0.08);
}
[data-theme="light"] .nav__drop-footer{
  border-top:1px solid rgba(22,23,20,0.08);
}
.nav__drop-all{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--sans); font-size:0.77rem; font-weight:600;
  color:var(--gold) !important; text-decoration:none;
  padding:4px 6px; border-radius:6px;
  transition:background .2s ease, color .2s ease, padding-left .2s ease;
}
.nav__drop-all:hover{
  background:rgba(201,162,77,0.12);
  color:#ffffff !important;
  padding-left:10px;
}
[data-theme="light"] .nav__drop-all:hover{
  background:rgba(179,132,38,0.1);
  color:#161714 !important;
}
.nav__drop-all-arrow{
  font-size:0.85rem; transition:transform .2s ease;
}
.nav__drop-all:hover .nav__drop-all-arrow{
  transform:translateX(3px);
}

/* Fallback for simple <a> tags inside .nav__dropdown */
.nav .nav__dropdown > a,
.nav:not(.is-scrolled) .nav__dropdown > a{
  display:block; padding:10px 14px; border-radius:8px;
  font-size:0.86rem; font-weight:500;
  color:#f4efe4 !important; text-decoration:none;
  transition:background .2s, color .2s, padding-left .2s var(--ease);
}
.nav .nav__dropdown > a:hover,
.nav:not(.is-scrolled) .nav__dropdown > a:hover{
  background:rgba(201,162,77,0.16) !important;
  color:#ffffff !important; padding-left:19px;
}
[data-theme="light"] .nav .nav__dropdown > a,
[data-theme="light"] .nav:not(.is-scrolled) .nav__dropdown > a{
  color:#161714 !important;
}
[data-theme="light"] .nav .nav__dropdown > a:hover,
[data-theme="light"] .nav:not(.is-scrolled) .nav__dropdown > a:hover{
  background:rgba(179,132,38,0.08) !important;
  color:#b38426 !important; padding-left:19px;
}
.mobile-menu__sub{ font-size:1.05rem !important; opacity:.72; padding-left:18px; }

/* ---------- page hero ---------- */
.page-hero{
  position:relative; min-height:clamp(450px,48vh,560px);
  display:flex; align-items:flex-end; overflow:hidden;
  padding:180px 5% 78px; isolation:isolate;
}
.page-hero__bg{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center; background-color:var(--bg-soft);
  transform:scale(1.06); animation:heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift{ from{ transform:scale(1.06) translate3d(0,0,0);} to{ transform:scale(1.14) translate3d(-1.5%,-1.5%,0);} }
.page-hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,9,7,.82) 0%, rgba(8,9,7,.44) 42%, rgba(8,9,7,.92) 100%),
             linear-gradient(90deg, rgba(8,9,7,.72) 0%, transparent 62%);
}
[data-theme="light"] .page-hero::after{
  background:linear-gradient(180deg, rgba(10,12,9,.72) 0%, rgba(10,12,9,.35) 42%, rgba(10,12,9,.86) 100%),
             linear-gradient(90deg, rgba(10,12,9,.66) 0%, transparent 62%);
}
.page-hero__inner{ position:relative; z-index:2; max-width:940px; }
.page-hero__title{
  font-size:clamp(2.4rem,5.6vw,4.6rem); color:#f4efe4; margin:0 0 20px;
  text-shadow:0 14px 40px rgba(0,0,0,.5);
}
.page-hero__lead{
  max-width:62ch; font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.7;
  color:rgba(244,239,228,.86); text-shadow:0 2px 16px rgba(0,0,0,.55);
}
.page-hero .eyebrow{ color:var(--gold-soft); }
.page-hero__fade{
  position:absolute; left:0; right:0; bottom:0; height:45px; z-index:1;
  /* Was 120px, which washed a tall pale band up into the photograph. Kept
     short so the image holds its colour to the edge. The stop must stay
     var(--bg) -- a hardcoded cream turns into a light band in dark theme. */
  background:linear-gradient(180deg, transparent 0%, var(--bg) 100%);
}

/* ---------- breadcrumbs ---------- */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:26px;
  font-size:.78rem; letter-spacing:.06em; color:rgba(244,239,228,.6);
  /* Small type sitting on a photograph, like the title and lead above it.
     The gold current-page label is the weakest element against bright heroes,
     so it gets the same shadow treatment they already carry. */
  text-shadow:0 2px 14px rgba(0,0,0,.72);
}
.crumbs a{ color:rgba(244,239,228,.72); transition:color .25s; }
.crumbs a:hover{ color:var(--gold-soft); }
.crumbs [aria-current]{ color:var(--gold-soft); }

/* ---------- generic section rhythm ---------- */
.collections, .tours-list, .excursions, .excursions-intro, .explore,
.about-intro, .mv, .ceo, .contact, .map, .guide{
  padding:clamp(70px,9vw,130px) 5%;
  max-width:1440px; margin:0 auto;
}
.excursions-intro{ padding-bottom:0; }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(30px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .page-hero__bg{ animation:none; }
}

/* ---------- tour collection cards ---------- */
.collections__grid{ display:grid; gap:clamp(28px,3vw,52px); }
.collection{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,3vw,56px); align-items:center;
  padding-bottom:clamp(28px,3vw,52px); border-bottom:1px solid var(--line);
}
.collection:last-child{ border-bottom:0; padding-bottom:0; }
.collection:nth-child(even){ direction:rtl; }
.collection:nth-child(even) > *{ direction:ltr; }
.collection__media{
  position:relative; display:block; overflow:hidden; border-radius:18px;
  aspect-ratio:16/11; background:var(--bg-soft);
}
.collection__img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.collection__media:hover .collection__img{ transform:scale(1.06); }
.collection__count{
  position:absolute; left:18px; bottom:18px; z-index:2;
  padding:8px 16px; border-radius:100px; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:#191305; background:var(--gold); font-weight:600;
}
.collection__body h3{ font-size:clamp(1.5rem,2.4vw,2.15rem); margin-bottom:16px; }
.collection__body h3 a{ transition:color .3s; }
.collection__body h3 a:hover{ color:var(--gold-soft); }
.collection__body p{ color:var(--ink-dim); line-height:1.72; margin-bottom:24px; }

.link-arrow{
  display:inline-flex; align-items:center; gap:11px; width:max-content;
  font-size:.85rem; letter-spacing:.04em; color:var(--gold-soft);
  border-bottom:1px solid transparent; padding-bottom:3px; transition:border-color .3s, gap .3s var(--ease);
}
.link-arrow:hover{ border-color:var(--gold-soft); gap:17px; }

/* ---------- tour + day-by-day accordion ---------- */
.tours-list{ display:grid; gap:clamp(70px,8vw,120px); }
.tour{ scroll-margin-top:110px; }
.tour__head{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(26px,3.4vw,60px); align-items:center; margin-bottom:clamp(34px,4vw,60px);
}
.tour__media{ margin:0; border-radius:18px; overflow:hidden; aspect-ratio:4/3; background:var(--bg-soft); }
.tour__img{ width:100%; height:100%; object-fit:cover; }
/* Opt-in for a card whose photograph is a different shape to the 4:3 slot:
   the figure takes the image's own ratio so the whole frame shows, uncropped
   and without letterbox bands. */
/* A portrait photograph in this landscape slot: match its height to the text
   block beside it and let its column shrink to the resulting width, so the
   whole frame shows without towering over the words or leaving dead space.
   The image column is `auto`, so it sizes to the image; the row height comes
   from the text, which is what the image then fills. */
/* A portrait photograph in this landscape slot. The figure gets a definite
   height in the range the text block occupies (measured at 440-490px across
   desktop widths) and the image fills it; its width then follows from the
   image's own ratio, and the `auto` column sizes to that. A definite height is
   what keeps this stable -- tying it to the row instead makes the column width
   and the row height depend on each other, and the image wins, which is how it
   ended up towering over the text. */
.tour__head--fit{ grid-template-columns:auto minmax(0,1fr); align-items:center; }
.tour__head--fit .tour__media{ aspect-ratio:auto; display:flex; height:clamp(400px,28vw,450px); }
.tour__head--fit .tour__img{ height:100%; width:auto; max-width:100%; object-fit:contain; display:block; }
/* The narrow image column frees a lot of width; without a cap the paragraphs
   stretch past a comfortable measure and the block gets short and wide, which
   is also what pulled it out of step with the image's height. */
.tour__head--fit .tour__intro{ max-width:64ch; }
.tour__badge{
  display:inline-block; margin-bottom:16px; padding:8px 18px; border-radius:100px;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--gold); border:1px solid var(--line-strong); background:rgba(201,162,77,.08);
}
.tour__name{ font-size:clamp(1.7rem,3vw,2.7rem); margin-bottom:20px; }
.tour__intro p{ color:var(--ink-dim); line-height:1.75; margin-bottom:14px; }
.tour__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }

.tour__days-title{
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  margin-bottom:20px; font-family:var(--sans); font-weight:600;
}
.day{ border-top:1px solid var(--line); }
.day:last-child{ border-bottom:1px solid var(--line); }
.day__head{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(14px,2vw,32px); padding:24px 4px; background:none; border:0; cursor:pointer;
  text-align:left; font-family:var(--sans); color:var(--ink); transition:color .3s;
}
.day__head:hover{ color:var(--gold-soft); }
.day__n{
  font-family:var(--serif); font-size:1rem; color:var(--gold); letter-spacing:.02em; white-space:nowrap;
}
.day__route{ font-size:clamp(1rem,1.5vw,1.28rem); font-family:var(--serif); }
.day__icon{
  position:relative; width:17px; height:17px; flex-shrink:0;
}
.day__icon::before, .day__icon::after{
  content:''; position:absolute; background:currentColor; transition:transform .4s var(--ease), opacity .3s;
}
.day__icon::before{ top:8px; left:0; width:100%; height:1.5px; }
.day__icon::after{ left:8px; top:0; width:1.5px; height:100%; }
.day.is-open .day__icon::after{ transform:scaleY(0); opacity:0; }
.day__panel{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease);
}
.day.is-open .day__panel{ grid-template-rows:1fr; }
.day__panel-inner{
  overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.52fr);
  gap:clamp(20px,3vw,44px); align-items:start;
}
.day.is-open .day__panel-inner{ padding-bottom:34px; }
.day__copy p{ color:var(--ink-dim); line-height:1.78; margin-bottom:14px; font-size:.99rem; }
.day__copy p:last-child{ margin-bottom:0; }
.day__media{ margin:0; border-radius:14px; overflow:hidden; aspect-ratio:3/2; background:var(--bg-soft); }
.day__img{ width:100%; height:100%; object-fit:cover; }

/* ---------- excursions ---------- */
.excursions{ display:grid; gap:clamp(56px,6vw,100px); }
.excursion{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,3.4vw,64px); align-items:center;
}
.excursion--flip .excursion__media{ order:2; }
.excursion__media{ margin:0; border-radius:18px; overflow:hidden; aspect-ratio:5/4; background:var(--bg-soft); }
.excursion__img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.excursion:hover .excursion__img{ transform:scale(1.05); }
.excursion__tag{
  display:inline-block; margin-bottom:14px; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-soft); font-weight:600;
}
.excursion__body h3{ font-size:clamp(1.5rem,2.6vw,2.3rem); margin-bottom:18px; }
.excursion__body p{ color:var(--ink-dim); line-height:1.75; margin-bottom:14px; }
.excursion__body .link-arrow{ margin-top:12px; }

/* ---------- explore / destination grid ---------- */
.explore{ display:grid; gap:clamp(60px,7vw,110px); }
.explore-group__head{
  display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between;
  gap:24px; margin-bottom:clamp(28px,3vw,48px);
  padding-bottom:22px; border-bottom:1px solid var(--line);
}
.explore-group__head h2{ font-size:clamp(1.5rem,2.7vw,2.35rem); margin-bottom:12px; }
.explore-group__head p{ color:var(--ink-dim); max-width:58ch; line-height:1.65; }
.dest-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:clamp(18px,2vw,30px);
}
.dest-card{
  position:relative; border-radius:16px; overflow:hidden;
  background:var(--bg-card); border:1px solid var(--line);
  box-shadow:var(--card-shadow); transition:transform .55s var(--ease), border-color .4s;
}
.dest-card:hover{ transform:translateY(-7px); border-color:var(--line-strong); }
.dest-card__media{ aspect-ratio:4/3; overflow:hidden; background:var(--bg-soft); }
.dest-card__img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.dest-card:hover .dest-card__img{ transform:scale(1.07); }
.dest-card__body{ padding:24px 24px 28px; }
.dest-card__body h3{ font-size:1.25rem; margin-bottom:11px; }
.dest-card__body p{ color:var(--muted); font-size:.93rem; line-height:1.62; }

/* ---------- destination card link wrapper ---------- */
.dest-card__link{ display:block; color:inherit; }
.dest-card__more{
  display:inline-flex; align-items:center; gap:9px; margin-top:16px;
  font-size:.82rem; letter-spacing:.04em; color:var(--gold-soft);
  transition:gap .3s var(--ease);
}
.dest-card:hover .dest-card__more{ gap:15px; }

/* ---------- home: "Crafted Exclusively Around You" cards ---------- */
.highlight-card{
  flex: 0 0 auto;
  min-width:min(380px,78vw);
  max-width:380px;
  display:block;
  color:inherit;
  text-decoration:none;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--card-shadow);
  transition:transform .4s var(--ease), border-color .3s, box-shadow .35s;
}
.highlight-card:hover{
  transform:translateY(-9px);
  border-color:var(--line-strong);
  box-shadow:0 24px 44px -12px rgba(0,0,0,0.42);
}
[data-theme="light"] .highlight-card{
  background:#ffffff;
  border-color:rgba(13,40,85,0.09);
  box-shadow:0 12px 32px rgba(13,40,85,0.06);
}
[data-theme="light"] .highlight-card:hover{
  border-color:rgba(13,40,85,0.22);
  box-shadow:0 24px 44px -10px rgba(13,40,85,0.12);
}
.highlight-card__media{ aspect-ratio:16/10; overflow:hidden; background:var(--bg-soft); position:relative; }
.highlight-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s var(--ease); pointer-events:none; }
.highlight-card:hover .highlight-card__media img{ transform:scale(1.07); }
.highlight-card__body{ padding:26px 26px 30px; }
.highlight-card__body h3{ font-size:1.22rem; margin-bottom:10px; color:var(--ink); }
.highlight-card__body p{ color:var(--muted); font-size:.93rem; line-height:1.6; }

/* home CTA actions */
.cta__lead{ color:rgba(244,239,228,.82); line-height:1.7; margin:0 auto 34px; max-width:52ch; }
.cta__actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------- destination article ---------- */
.article-body, .related{ padding:clamp(60px,7vw,110px) 5%; max-width:1440px; margin:0 auto; }
.related{ padding-top:0; }
.article__wrap{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:clamp(32px,4vw,72px); align-items:start;
}
.article__copy p{
  color:var(--ink-dim); line-height:1.85; margin-bottom:22px;
  font-size:clamp(1rem,1.2vw,1.1rem); max-width:70ch;
}
.article__copy p:first-of-type{
  font-size:clamp(1.1rem,1.45vw,1.28rem); color:var(--ink); line-height:1.7;
}
.article__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.article__aside{ position:sticky; top:110px; }
.aside__card{
  padding:30px; border-radius:18px; background:var(--bg-card);
  border:1px solid var(--line); box-shadow:var(--card-shadow);
}
.aside__card h2{ font-size:1.15rem; margin-bottom:22px; }
.aside__facts{ display:grid; gap:16px; margin-bottom:26px; }
.aside__facts > div{ display:grid; gap:4px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.aside__facts dt{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.aside__facts dd{ margin:0; font-size:.95rem; color:var(--ink-dim); }
.aside__facts dd a{ color:var(--ink-dim); border-bottom:1px solid var(--line-strong); transition:color .3s; }
.aside__facts dd a:hover{ color:var(--gold-soft); }
.related__head{
  display:flex; align-items:end; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-bottom:20px; margin-bottom:clamp(24px,3vw,40px); border-bottom:1px solid var(--line);
}
.related__head h2{ font-size:clamp(1.4rem,2.4vw,2rem); }

@media (max-width:1000px){
  .article__wrap{ grid-template-columns:1fr; }
  .article__aside{ position:static; }
}

/* ---------- about ---------- */
.about-grid, .ceo__inner{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,70px); align-items:center;
}
.about-grid__media, .ceo__media{ margin:0; border-radius:18px; overflow:hidden; aspect-ratio:4/3; background:var(--bg-soft); }
.about-grid__img, .ceo__img{ width:100%; height:100%; object-fit:cover; }
.about-grid__copy p{ color:var(--ink-dim); line-height:1.75; margin-bottom:18px; }
.mv{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.mv__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:clamp(28px,4vw,70px); }
.mv__card{ position:relative; padding-left:0; }
.mv__num{ font-family:var(--serif); color:var(--gold); font-size:1.1rem; display:block; margin-bottom:14px; }
.mv__card h2{ font-size:clamp(1.5rem,2.4vw,2.1rem); margin-bottom:16px; }
.mv__card p{ color:var(--ink-dim); line-height:1.75; }
.ceo__copy h2{ font-size:clamp(1.6rem,2.6vw,2.3rem); margin-bottom:22px; }
.ceo__copy p{ color:var(--ink-dim); line-height:1.78; margin-bottom:15px; }
.ceo__media{ aspect-ratio:3/4; }

/* ---------- contact ---------- */
.contact__grid{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(34px,4.5vw,80px); align-items:start;
}
.contact__details h2, .contact__form h2{ font-size:clamp(1.6rem,2.6vw,2.3rem); margin-bottom:26px; }
.contact__list{ list-style:none; display:grid; gap:26px; margin-bottom:44px; }
.contact__list li{ display:grid; gap:7px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.contact__label{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:600;
}
.contact__list a{ color:var(--ink); line-height:1.6; transition:color .3s; }
.contact__list a:hover{ color:var(--gold-soft); }
.contact__follow{ font-size:1.2rem; margin-bottom:16px; }
.contact__social{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; }

.contact__form{
  padding:clamp(26px,3vw,44px); border-radius:20px;
  background:var(--bg-card); border:1px solid var(--line); box-shadow:var(--card-shadow);
}
.contact__form-lead{ color:var(--muted); font-size:.94rem; line-height:1.6; margin-bottom:30px; }
.field{ display:grid; gap:8px; margin-bottom:20px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); font-weight:600; }
.field .opt{ text-transform:none; letter-spacing:0; color:var(--muted); font-weight:400; }
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border-radius:11px; font-family:var(--sans); font-size:.96rem;
  color:var(--ink); background:var(--bg-soft); border:1px solid var(--line);
  outline:none; transition:border-color .3s, box-shadow .3s, background .3s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,77,.16);
}
.field textarea{ resize:vertical; min-height:110px; }
.field__err{ font-size:.78rem; color:#e0674f; min-height:0; }
.field.has-err input, .field.has-err textarea{ border-color:#e0674f; }
.btn--full{ width:100%; justify-content:center; margin-top:8px; }
.contact__status{ margin-top:16px; font-size:.9rem; color:var(--gold-soft); min-height:1.2em; }

.map{ padding-top:0; }
.map__frame{
  border-radius:20px; overflow:hidden; border:1px solid var(--line);
  aspect-ratio:21/8; background:var(--bg-soft);
}
.map__frame iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.35); }
[data-theme="dark"] .map__frame iframe{ filter:grayscale(.6) invert(.9) hue-rotate(180deg) brightness(.94); }

/* ---------- tour guide ---------- */
.guide__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:clamp(22px,2.6vw,42px); }
.guide__card{
  padding:clamp(26px,2.6vw,38px); border-radius:16px;
  background:var(--bg-card); border:1px solid var(--line); box-shadow:var(--card-shadow);
  transition:transform .5s var(--ease), border-color .4s;
}
.guide__card:hover{ transform:translateY(-6px); border-color:var(--line-strong); }
.guide__n{ font-family:var(--serif); color:var(--gold); font-size:1rem; display:block; margin-bottom:14px; }
.guide__card h2{ font-size:1.3rem; margin-bottom:14px; }
.guide__card p{ color:var(--ink-dim); line-height:1.7; font-size:.96rem; }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; padding:clamp(80px,10vw,150px) 5%; overflow:hidden;
  text-align:center; isolation:isolate;
}
.cta-band__bg{
  position:absolute; inset:0; z-index:-2;
  background-image:url('../assets/img/opt/pexels-tomas-malik-793526-1998438-scaled-e1757921842246.webp');
  background-size:cover; background-position:center; transform:scale(1.05);
}
/* Lighter scrim: the old 0.86-0.94 gradient buried the photograph. This keeps
   enough contrast for the text while letting the image read. */
.cta-band::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 62% 70% at 50% 46%, rgba(8,9,7,.70) 0%, rgba(8,9,7,.46) 40%, rgba(8,9,7,.14) 72%, rgba(8,9,7,0) 100%),
    linear-gradient(180deg, rgba(8,9,7,.20), rgba(8,9,7,.04) 45%, rgba(8,9,7,.26));
}
.cta-band__inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; }
.cta-band h2{
  font-size:clamp(1.9rem,4vw,3.2rem); color:#fffdf8; margin:18px 0 20px;
  text-shadow:0 2px 10px rgba(0,0,0,.55), 0 6px 34px rgba(0,0,0,.45);
}

/* This panel is always a dark photograph, so its text must not follow the
   theme tokens. The lead had no rule at all and inherited body colour, which
   rendered near-black on the photo in light mode. */
.cta-band .eyebrow,
.cta-band .eyebrow--light{
  color:#f7dfa8;
  text-shadow:0 0 3px rgba(0,0,0,.95), 0 1px 5px rgba(0,0,0,.9), 0 3px 16px rgba(0,0,0,.7);
}
.cta-band__lead{
  color:#fffdf8; line-height:1.7; margin:0 auto 38px; max-width:56ch;
  font-size:clamp(1rem,1.15vw,1.12rem);
  text-shadow:0 2px 8px rgba(0,0,0,.8), 0 5px 26px rgba(0,0,0,.55);
}
.cta-band__actions{ display:flex; justify-content:center; align-items:center; margin:0 auto; }
.cta-band__actions .btn{ margin:0 auto; }

/* ---------- footer tweaks for inner pages ---------- */
.footer__contact a{ display:block; color:var(--ink-dim); font-size:.92rem; margin-bottom:14px; line-height:1.55; transition:color .3s; }
.footer__contact a:hover{ color:var(--gold-soft); }
.footer__contact .footer__form{ margin-top:22px; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1000px){
  .collection, .tour__head, .excursion, .about-grid, .ceo__inner, .contact__grid{
    grid-template-columns:1fr;
  }
  /* Stacked: no text column to match, so the image goes back to full width. */
  .tour__head--fit .tour__media{ display:block; height:auto; }
  .tour__head--fit .tour__img{ height:auto; width:100%; }
  .collection:nth-child(even){ direction:ltr; }
  .excursion--flip .excursion__media{ order:0; }
  .day__panel-inner{ grid-template-columns:1fr; }
  .day__media{ aspect-ratio:16/9; }
  .ceo__media{ aspect-ratio:16/10; }
  .map__frame{ aspect-ratio:4/3; }
}
@media (max-width:640px){
  .page-hero{ padding:150px 6% 60px; min-height:400px; }
  .field-row{ grid-template-columns:1fr; }
  .day__head{ grid-template-columns:auto 1fr auto; gap:12px; padding:20px 2px; }
  .day__n{ font-size:.85rem; }
  .contact__form{ padding:24px 20px; }
}

/* --------------------------------------------------------
   The CTA band is always a dark photographic panel, so its
   ghost button must stay light-on-dark in both themes.
   -------------------------------------------------------- */
.cta-band__actions .btn--ghost,
.cta__actions .btn--ghost {
  color: #f4efe4;
  border-color: rgba(244, 239, 228, 0.42);
}
.cta-band__actions .btn--ghost:hover,
.cta__actions .btn--ghost:hover {
  color: #e4c988;
  border-color: #c9a24d;
  background: rgba(201, 162, 77, 0.12);
}

/* --------------------------------------------------------
   Footer grid on narrow screens
   Grid items default to min-width:auto, so the contact column
   (which holds the newsletter input) refused to shrink and
   pushed the footer past the viewport on small phones.
   -------------------------------------------------------- */
.footer__top > *{ min-width: 0; }
.footer__form input{ min-width: 0; }

@media (max-width: 560px){
  .footer__top{ grid-template-columns: 1fr; row-gap: 38px; }
}

/* ==========================================================
   Floating WhatsApp enquiry button
   Sits below the custom cursor (z 9999) and the preloader
   (z 10000) but above the header (z 900).
   ========================================================== */
.wa-fab{
  position:fixed; right:clamp(16px,2.2vw,28px); bottom:clamp(16px,2.2vw,28px);
  z-index:950; display:inline-flex; align-items:center; gap:0;
  height:58px; padding:0; border-radius:999px;
  background:#25D366; color:#fff; text-decoration:none;
  box-shadow:0 10px 28px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.2);
  transition:box-shadow .35s var(--ease), transform .35s var(--ease), background .3s;
  overflow:hidden;
}
.wa-fab__icon{
  flex:0 0 58px; width:58px; height:58px;
  display:inline-flex; align-items:center; justify-content:center;
}
.wa-fab__label{
  max-width:0; opacity:0; white-space:nowrap;
  font-family:var(--sans); font-size:.9rem; font-weight:600; letter-spacing:.01em;
  transition:max-width .45s var(--ease), opacity .3s ease, padding .45s var(--ease);
  padding:0;
}
.wa-fab:hover, .wa-fab:focus-visible{
  background:#1eb457; transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(0,0,0,.34), 0 3px 8px rgba(0,0,0,.24);
}
.wa-fab:hover .wa-fab__label,
.wa-fab:focus-visible .wa-fab__label{ max-width:190px; opacity:1; padding:0 4px 0 20px; }
.wa-fab:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* A single, slow attention pulse ring — not a constant animation. */
.wa-fab::after{
  content:''; position:absolute; inset:0; border-radius:999px;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);
  animation:waPulse 3.2s ease-out 1.5s 3;
  pointer-events:none;
}
@keyframes waPulse{
  0%   { box-shadow:0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow:0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

@media (prefers-reduced-motion: reduce){
  .wa-fab, .wa-fab__label{ transition:none; }
  .wa-fab::after{ animation:none; }
  .wa-fab:hover{ transform:none; }
}

@media (max-width:640px){
  .wa-fab{ height:52px; }
  .wa-fab__icon{ flex-basis:52px; width:52px; height:52px; }
  /* No hover on touch — keep it a clean circular button. */
  .wa-fab:hover .wa-fab__label{ max-width:0; opacity:0; padding:0; }
}