/* ===== DESIGN TOKENS (CSS VARIABLES) ===== */
:root {
  --jungle:      #163832;
  --jungle-dark: #0F2622;
  --gold:        #D9A441;
  --gold-light:  #EFC978;
  --terracotta:  #C1502E;
  --cream:       #F6F1E7;
  --sand:        #ECE2CC;
  --ink:         #1F2A24;
  --ink-soft:    #4B5A52;
  --white:       #FFFFFF;

  --beach:      #1B8A9A;
  --beach-bg:   #DCF0F1;
  --culture:    #8A6416;
  --culture-bg: #F3E6C8;
  --adventure:      #3F7D3B;
  --adventure-bg:   #E1EAD8;
  --party:      #7B2CBF;
  --party-bg:   #ECDCF7;
  --honeymoon:      #C23B67;
  --honeymoon-bg:   #FBE1EA;

  --font-display: 'Fraunces', serif;
  --font-body:    'Work Sans', sans-serif;
  --font-utility: 'Space Grotesk', sans-serif;

  --radius: 6px;
  --max-width: 1240px;
  --transition: 0.25s ease;
}

/* ===== RESET ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ===== SHARED TEXT & BUTTON UTILITIES ===== */
.eyebrow {
  font-family: var(--font-utility);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 0.75rem;
}

.btn {
  display: inline-block;
  font-family: var(--font-utility);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius);
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.btn-primary {
  background: var(--gold);
  color: var(--jungle-dark);
}
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
.btn-outline {
  border: 1.5px solid var(--cream);
  color: var(--cream);
}
.btn-outline:hover { background: rgba(246,241,231,0.1); transform: translateY(-2px); }
.btn-outline-dark {
  border: 1.5px solid var(--jungle);
  color: var(--jungle);
}
.btn-outline-dark:hover { background: var(--jungle); color: var(--cream); }

/* ===== HEADER ===== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(6,20,18,0.55) 0%, rgba(6,20,18,0.15) 70%, rgba(6,20,18,0) 100%);
  transition: background var(--transition), box-shadow var(--transition);
}
.site-header.scrolled,
.site-header.solid {
  background: var(--jungle);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  border-bottom: 1px solid rgba(217,164,65,0.25);
}
.site-header.scrolled .logo,
.site-header.scrolled .main-nav a,
.site-header.solid .logo,
.site-header.solid .main-nav a {
  color: var(--cream);
}
.site-header.scrolled .main-nav a,
.site-header.solid .main-nav a {
  opacity: 0.75;
}
.site-header.scrolled .main-nav a:hover,
.site-header.scrolled .main-nav a.active,
.site-header.solid .main-nav a:hover,
.site-header.solid .main-nav a.active {
  opacity: 1;
  color: var(--gold-light);
}
.site-header.scrolled .nav-toggle span,
.site-header.solid .nav-toggle span {
  background: var(--cream);
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 2rem;   
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--cream);
}
.logo img {
  height: 100px;
  width: auto;
  margin: -1.5rem 0; 
  filter:
    drop-shadow(0 0 6px rgba(255, 214, 130, 0.55))
    drop-shadow(0 2px 6px rgba(0,0,0,0.35))
    contrast(1.15)
    saturate(1.3)
    brightness(1.05);
}

.logo-mark { color: var(--gold); font-size: 1.4rem; }
.logo-text em { font-style: italic; color: var(--gold-light); }

.main-nav {
  display: flex;
  max-height: 30px;
  gap: 2.2rem;
  font-family: var(--font-utility);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.main-nav a { color: var(--cream); opacity: 0.85; transition: opacity var(--transition); position: relative; }
.main-nav a:hover, .main-nav a.active { opacity: 1; }
.main-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
}

.header-actions { display: flex; align-items: center; gap: 1rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 26px;
}
.nav-toggle span {
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* ===== HERO (plain image/color hero, used on inner pages) ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--cream);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,38,34,0.55) 0%, rgba(15,38,34,0.75) 60%, rgba(15,38,34,0.95) 100%);
}
.hero-content {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
}
.hero .eyebrow { color: var(--gold-light); }
.hero-title {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  max-width: 15ch;
  margin-bottom: 1.3rem;
}
.hero-title em { font-style: italic; color: var(--gold-light); font-weight: 500; }
.hero-sub {
  max-width: 48ch;
  font-size: 1.1rem;
  color: rgba(246,241,231,0.85);
  margin-bottom: 2.2rem;
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ===== TRAIL STRIP (signature element) ===== */
.trail-strip {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 3rem auto 0;
  padding: 0 2rem 2.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.9rem 0.5rem;
}
.trail-line { position: absolute; top: 10px; left: 0; width: 100%; height: 30px; z-index: -1; }
.trail-stop {
  font-family: var(--font-utility);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cream);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--jungle);
  padding: 0.3rem 0.4rem 0.3rem 0;
  transition: color var(--transition);
}
.trail-stop:hover { color: var(--gold-light); }
.trail-stop .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--jungle);
  box-shadow: 0 0 0 2px var(--gold);
  background: var(--gold);
}
.dot-beach     { box-shadow: 0 0 0 2px var(--beach); background: var(--beach); }
.dot-culture   { box-shadow: 0 0 0 2px var(--gold); background: var(--gold); }
.dot-adventure { box-shadow: 0 0 0 2px var(--adventure); background: var(--adventure); }
.dot-party     { box-shadow: 0 0 0 2px var(--party); background: var(--party); }
.dot-honeymoon { box-shadow: 0 0 0 2px var(--honeymoon); background: var(--honeymoon); }

/* ===== SECTION HEAD ===== */
.section-head {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  padding: 0 2rem;
  text-align: center;
}
.section-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 0.8rem; }
.section-sub { color: var(--ink-soft); font-size: 1.05rem; }
.section-head.light .eyebrow { color: var(--gold); }
.section-head.light h2 { color: var(--cream); }

/* ===== FILTER BAR ===== */
.filter-bar {
  max-width: var(--max-width);
  margin: 0 auto 2.5rem;
  padding: 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}
.filter-btn {
  font-family: var(--font-utility);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  border: 1.5px solid var(--sand);
  color: var(--ink-soft);
  background: var(--white);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filter-btn:hover { border-color: var(--gold); color: var(--ink); }
.filter-btn.active {
  background: var(--jungle);
  border-color: var(--jungle);
  color: var(--cream);
}

/* ===== PACKAGES GRID (base / non-slider layout) ===== */
.packages { padding: 6rem 2rem; max-width: var(--max-width); margin: 0 auto; }
.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem;
}

/* ===== PACKAGE CARD (full-image teaser style) ===== */
.package-card {
  position: relative;
  min-height: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  color: var(--cream);
  transition: transform var(--transition), box-shadow var(--transition);
  scroll-margin-top: 6rem;
}
.package-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(22,56,50,0.28);
}
.package-card.is-hidden { display: none; }

.package-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,38,34,0) 40%, rgba(15,38,34,0.85) 100%);
}

.package-view-icon {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(246,241,231,0.9);
  color: var(--jungle-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
}
.package-card:hover .package-view-icon { opacity: 1; transform: translateY(0); }
.package-view-icon:hover { background: var(--gold); }

.package-chip {
  position: absolute;
  top: 1rem; left: 1rem;
  font-family: var(--font-utility);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(246,241,231,0.92);
  color: var(--jungle-dark);
  z-index: 2;
}

.package-content {
  position: relative;
  z-index: 2;
  padding: 1.4rem;
  width: 100%;
}
.package-content h3 {
  font-size: 1.25rem;
  color: var(--white);
  margin-bottom: 0.35rem;
}
.package-location {
  font-family: var(--font-utility);
  font-size: 0.8rem;
  color: var(--gold-light);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.package-price {
  font-family: var(--font-utility);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold-light);
}

.package-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--transition), opacity var(--transition), margin-top var(--transition);
}
.package-card:hover .package-actions {
  max-height: 60px;
  opacity: 1;
}
.pkg-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-utility);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--white);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  transition: transform var(--transition), background var(--transition);
}
.pkg-action:hover { transform: translateY(-2px); }
.pkg-call { color: #2C6B2F; }
.pkg-call:hover { background: #DDF0DE; }
.pkg-view { color: var(--terracotta); }
.pkg-view:hover { background: var(--sand); }
.pkg-whatsapp {
  padding: 0.45rem 0.6rem;
  color: #25D366;
  font-size: 0.9rem;
}
.pkg-whatsapp:hover { background: #DDF0DE; }

@media (max-width: 480px) {
  .package-actions { flex-wrap: wrap; }
}

/* ===== WHY US ===== */
.why-us {
  background: var(--jungle);
  color: var(--cream);
  padding: 6rem 2rem;
}
.feature-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  text-align: center;
}
.feature-icon { font-size: 1.8rem; display: block; margin-bottom: 1rem; }
.feature h3 { font-size: 1.15rem; margin-bottom: 0.6rem; color: var(--gold-light); }
.feature p { color: rgba(246,241,231,0.75); font-size: 0.95rem; }

/* ===== REVIEWS / BLOG ===== */
.reviews { padding: 6rem 2rem; max-width: var(--max-width); margin: 0 auto; }
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.6rem;
}
.review-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(22,56,50,0.06);
}
.review-photo {
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  cursor: zoom-in;
  transition: filter var(--transition);
}
.review-photo:hover { filter: brightness(0.9); }
.review-body { padding: 1.3rem; }
.review-body .stars { display: block; margin-bottom: 0.7rem; }
.review-quote { font-size: 0.92rem; color: var(--ink); margin-bottom: 0.9rem; line-height: 1.55; }
.review-author {
  font-family: var(--font-utility);
  font-size: 0.78rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.review-cta { text-align: center; margin-top: 2.5rem; }

/* ===== MOMENTS CAPTURED (equal-size photo trio) =====
   Wrapping div gets a fixed height; the img inside is set to
   object-fit: cover so every photo fills the same box and crops
   to match, regardless of its original aspect ratio. */
.moment-photo {
  height: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.moment-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== PHOTO LIGHTBOX ===== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15,38,34,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition);
  padding: 2rem;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(90vw, 640px);
  max-height: 85vh;
  border-radius: var(--radius);
}
.lightbox-close {
  position: absolute;
  top: 1.5rem; right: 1.8rem;
  color: var(--cream);
  font-size: 1.3rem;
  width: 42px; height: 42px;
  border: 1px solid rgba(246,241,231,0.4);
  border-radius: 50%;
}
.lightbox-close:hover { border-color: var(--gold); color: var(--gold-light); }

/* ===== CTA BAND ===== */
.cta-band {
  text-align: center;
  padding: 6rem 2rem;
  max-width: 640px;
  margin: 0 auto;
}
.cta-band h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin-bottom: 0.8rem; }
.cta-band p { color: var(--ink-soft); margin-bottom: 2rem; }

/* ===== FOOTER ===== */
.site-footer {
  background: var(--jungle);
  color: var(--cream);
  padding: 5rem 2rem 0;
}
.footer-top {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer-brand p { color: rgba(246,241,231,0.7); font-size: 0.92rem; margin: 1rem 0 1.3rem; max-width: 32ch; }
.logo-footer { margin-bottom: 0.3rem; }
.logo-footer img { height: 100px; }
.social-row { display: flex; gap: 0.8rem; }
.social-row a {
  width: 34px; height: 34px;
  border: 1px solid rgba(246,241,231,0.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-utility);
  font-size: 0.7rem;
  transition: border-color var(--transition), color var(--transition);
}
.social-row a:hover { border-color: var(--gold); color: var(--gold-light); }

.footer-col h4 {
  font-family: var(--font-utility);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.footer-col a, .footer-col p {
  display: block;
  color: rgba(246,241,231,0.75);
  font-size: 0.92rem;
  margin-bottom: 0.7rem;
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--gold-light); }
.footer-address { color: rgba(246,241,231,0.55); }

.footer-trail { width: 100%; height: 16px; display: block; }

.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 0;
  font-size: 0.82rem;
  color: rgba(246,241,231,0.55);
}
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a:hover { color: var(--gold-light); }

/* ===== LEAD FORM MODAL ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,38,34,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition);
  padding: 1.5rem;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-box {
  background: var(--cream);
  border-radius: var(--radius);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2.2rem;
  position: relative;
  transform: translateY(12px);
  transition: transform var(--transition);
}
.modal-overlay.open .modal-box { transform: translateY(0); }
.modal-close {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--sand);
  color: var(--ink-soft);
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--transition), color var(--transition);
}
.modal-close:hover { border-color: var(--gold); color: var(--ink); }
.modal-box h3 { font-size: 1.5rem; margin-bottom: 0.4rem; padding-right: 2rem; }
.modal-sub { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 1.6rem; }

.lead-form { display: flex; flex-direction: column; gap: 1.1rem; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row .form-field { flex: 1 1 200px; }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field label {
  font-family: var(--font-utility);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--sand);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  transition: border-color var(--transition);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.form-field textarea { resize: vertical; min-height: 100px; }
.char-count { font-size: 0.75rem; color: var(--ink-soft); text-align: right; }
.char-count.limit { color: var(--terracotta); }

.form-submit {
  margin-top: 0.6rem;
  align-self: stretch;
  width: 100%;
  padding: 1.15rem 1.8rem;
  font-size: 0.95rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  box-shadow: 0 8px 20px rgba(217,164,65,0.35);
}
.form-submit::after {
  content: '→';
  font-size: 1.1rem;
  transition: transform var(--transition);
}
.form-submit:hover::after {
  transform: translateX(4px);
}
.form-submit:hover {
  box-shadow: 0 10px 26px rgba(217,164,65,0.45);
}
.form-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}
.form-success {
  display: none;
  text-align: center;
  padding: 1.5rem 0;
}
.form-success.show { display: block; }
.form-success .success-icon { font-size: 2.2rem; margin-bottom: 0.8rem; display: block; }
.form-success h4 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.form-success p { color: var(--ink-soft); }

/* ===== FORM ERROR ALERT BANNER (new) =====
   Shown at the top of the lead form / contact form when validation
   fails, so the error is impossible to miss (unlike the old subtle
   .modal-sub text-color swap). */
.form-alert {
  display: none;
  align-items: flex-start;
  gap: 0.7rem;
  background: #FDECEA;
  border: 1.5px solid #E8998D;
  color: #B71C1C;
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  font-size: 0.88rem;
  line-height: 1.5;
  font-weight: 500;
}
.form-alert.show { display: flex; animation: alertPop 0.25s ease; }
.form-alert-icon { flex-shrink: 0; font-size: 1.1rem; line-height: 1.2; }
.form-alert-text { flex: 1; }

@keyframes alertPop {
  0%   { transform: translateY(-6px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* ===== FIELD-LEVEL ERROR STATE (new) =====
   Applied to the .form-field wrapper so the exact invalid input
   (email, phone, etc.) gets a red border + inline message, instead
   of the person having to guess which field was wrong. */
.form-field.field-error input,
.form-field.field-error select,
.form-field.field-error textarea {
  border-color: #C0392B;
  background: #FFF6F5;
}
.form-field.field-error label { color: #C0392B; }

.field-error-msg {
  display: none;
  color: #C0392B;
  font-size: 0.78rem;
}
.form-field.field-error .field-error-msg { display: block; }

.form-field.shake { animation: shakeField 0.4s ease; }
@keyframes shakeField {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

/* ===== CONTACT PAGE ===== */
.contact-page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 9rem 2rem 6rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 2rem;
  align-items: start;
}

.contact-info-panel,
.contact-help-panel,
.contact-form-panel {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2.2rem;
  box-shadow: 0 8px 24px rgba(22,56,50,0.08);
}

.contact-left-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-info-panel h2,
.contact-form-panel h2 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.contact-panel-sub { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 1.6rem; }

.contact-form { display: flex; flex-direction: column; gap: 1.1rem; }

.info-details {
  background: var(--cream);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.info-row { display: flex; flex-direction: column; gap: 0.2rem; }
.info-label {
  font-family: var(--font-utility);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.info-value { font-size: 0.98rem; color: var(--ink); font-weight: 600; }
.info-value a { color: var(--ink); transition: color var(--transition); }
.info-value a:hover { color: var(--terracotta); }

.contact-help-panel {
  background: var(--sand);
  box-shadow: none;
}
.contact-help-panel h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.contact-help-panel p { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 1.4rem; line-height: 1.55; }

.btn-pill { border-radius: 999px; }

.form-submit-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.form-submit-note { color: var(--ink-soft); font-size: 0.85rem; }
.contact-status-success { color: #2C6B2F; margin-top: 0.9rem; font-size: 0.92rem; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .contact-info-panel,
  .contact-help-panel,
  .contact-form-panel { padding: 1.6rem; }
}

/* ===== PACKAGES DETAIL PAGE ===== */
.packages-hero {
  padding: 9rem 2rem 3rem;
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}
.packages-hero h1 { font-size: clamp(2.1rem, 4vw, 3rem); margin-bottom: 0.8rem; }
.packages-hero p { color: var(--ink-soft); max-width: 56ch; margin: 0 auto; }

.package-toc {
  max-width: var(--max-width);
  margin: 0 auto 2.5rem;
  padding: 0 2rem;
}
.package-toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.4rem;
}

.package-detail-list {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 2rem 6rem;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.package-detail {
  scroll-margin-top: 6rem;
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 2.4rem;
  align-items: start;
}

.pkg-detail-main {
  min-width: 0;
}

.pkg-hero-image {
  width: 100%;
  height: 360px;
  border-radius: var(--radius);
  background-size: cover;
  background-position: center;
  margin-bottom: 1.6rem;
}

.pkg-title-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.pkg-title-row h2 { font-size: 1.7rem; }

.pkg-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #DDF0DE;
  color: #2C6B2F;
  font-family: var(--font-utility);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.pkg-location-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 1.8rem;
}

.pkg-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
}
.pkg-highlight-chip {
  font-family: var(--font-utility);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--jungle);
  background: var(--sand);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
}

.itinerary-box {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: 0 8px 24px rgba(22,56,50,0.06);
}
.itinerary-box h3 { font-size: 1.15rem; margin-bottom: 1.4rem; }

.itinerary-step {
  display: flex;
  gap: 1rem;
  padding-bottom: 1.5rem;
  position: relative;
}
.itinerary-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 40px;
  bottom: 0;
  width: 1.5px;
  background: var(--sand);
}
.itinerary-step:last-child { padding-bottom: 0; }
.step-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-utility);
  font-weight: 600;
  font-size: 0.9rem;
  z-index: 1;
}
.step-body h4 { font-size: 1rem; margin-bottom: 0.3rem; }
.step-body p { color: var(--ink-soft); font-size: 0.9rem; }

/* Sidebar */
.pkg-sidebar {
  position: sticky;
  top: 6.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.pkg-book-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: 0 8px 24px rgba(22,56,50,0.08);
}
.pkg-book-card h3 {
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.pkg-book-card p { color: var(--ink-soft); font-size: 0.88rem; margin-bottom: 1.3rem; }
.pkg-book-card .btn { width: 100%; text-align: center; }
.pkg-includes {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--sand);
}
.pkg-include-item {
  font-family: var(--font-utility);
  font-size: 0.85rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pkg-assist-card {
  background: var(--jungle);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.pkg-assist-card h3 { font-size: 1rem; margin-bottom: 0.9rem; color: var(--gold-light); }
.pkg-assist-phone {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: rgba(246,241,231,0.08);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  font-family: var(--font-utility);
  font-size: 0.92rem;
}
.pkg-assist-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--terracotta);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .package-detail { grid-template-columns: 1fr; }
  .pkg-sidebar { position: static; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .main-nav {
    position: fixed;
    /* FIX: "height: 100vh" is unreliable on mobile Safari/Chrome because
       100vh is measured against the LARGEST possible viewport (address
       bar hidden), while the visible viewport is shorter whenever the
       address bar is showing. That mismatch is what let the beach photo
       show through below the last nav link and made the panel look
       "transparent" lower down. Pinning top+right+bottom (instead of a
       fixed height) makes a fixed element stretch to fill exactly
       whatever viewport is actually visible, on every browser. */
    top: 0; right: 0; bottom: 0;
    max-height: none; /* FIX: base .main-nav has max-height:30px for the
       desktop row layout; without overriding it here, the mobile slide-in
       panel was clipped to a 30px sliver at the top of the screen. */
    width: min(78vw, 320px);
    background: var(--cream);
    box-shadow: -10px 0 34px rgba(0,0,0,0.18);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    padding: 2rem;
    padding-top: calc(2rem + env(safe-area-inset-top));
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition);
    z-index: 200;
  }
  .main-nav.open { transform: translateX(0); }

  /* FIX: .site-header.scrolled/.solid force the nav links to cream
     text for the DESKTOP dark header bar. That rule is more specific
     (.site-header.scrolled .main-nav a) than a plain ".main-nav a"
     override, so it was winning here too and putting light-on-light
     text on our new bright mobile panel. #mainNav (an ID) outranks
     any of those class combinations, so this reliably wins regardless
     of whether the header has .scrolled/.solid applied. */
  #mainNav a {
    color: var(--ink);
    opacity: 0.85;
  }
  #mainNav a:hover,
  #mainNav a.active {
    opacity: 1;
    color: var(--terracotta);
  }
  #mainNav a.active::after {
    background: var(--terracotta);
  }

  .header-actions .btn-primary { display: none; }
  .nav-toggle { display: flex; z-index: 210; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .trail-strip { flex-direction: column; gap: 0.9rem; }
  .trail-line { display: none; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
  .modal-box { padding: 1.6rem; }

  .package-actions { max-height: 60px; opacity: 1; }
  .package-view-icon { opacity: 1; transform: translateY(0); }
}

/* A dark backdrop behind the open mobile nav, so it's obvious the
   menu is a modal layer and tapping outside it can close it. */
.nav-backdrop {
  display: none;
}
@media (max-width: 760px) {
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(6,20,18,0.5);
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
  }
  .nav-backdrop.open {
    opacity: 1;
    visibility: visible;
  }
}

/* ================================================================
   HOMEPAGE-ONLY EXTRAS (merged in from the video-hero build)
   These only ever appear on index.php, so they're kept separate
   from the shared page systems above.
   ================================================================ */

/* ---------- STAT STRIP ---------- */
.strip{
  display:flex; overflow-x:auto; gap:0;
  background:var(--jungle); color:var(--cream);
  border-bottom:1px solid rgba(198,154,74,0.3);
}
.strip-item{
  flex:1 0 auto; padding:16px 32px; font-size:0.82rem;
  letter-spacing:0.03em; border-right:1px solid rgba(246,240,226,0.12);
  white-space:nowrap; color:rgba(246,240,226,0.8);
}
.strip-item b{color:var(--gold); font-weight:600;}

/* ---------- COORDS (decorative hero corner label) ---------- */
.coords{
  position:absolute; right:5%; bottom:90px;
  text-align:right; color:rgba(246,240,226,0.55);
  font-size:0.78rem; letter-spacing:0.08em; line-height:1.8;
  display:none;
  background: rgba(6,20,18,0.35);
  backdrop-filter: blur(4px);
  padding: 8px 14px;
  border-radius: 6px;
}
@media(min-width:900px){ .coords{display:block;} }

/* ---------- GATHERED VOICES (testimonial quotes) ---------- */
.voices{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:40px;
}
.voice{border-left:2px solid var(--gold); padding-left:22px;}
.voice p{font-size:1.02rem; line-height:1.65; font-style:italic; color:var(--ink); margin:0 0 16px;
  font-family:'Fraunces', serif; font-weight:300;}
.voice .who{font-size:0.82rem; letter-spacing:0.05em; color:var(--ink-soft); text-transform:uppercase;}

/* ---------- INTRO / TRAVEL ANIMATION OVERLAY ---------- */
body.intro-active{overflow:hidden;}
.intro-overlay{
  position:fixed; inset:0; z-index:9999;
  background:var(--jungle);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  overflow:hidden;
  cursor:pointer;
  transition:opacity .9s ease, visibility .9s ease;
  /* Fix: without this, mobile Safari/Chrome apply a ~300ms tap delay
     (reserved for detecting double-tap-to-zoom) before firing "click",
     and on a full-screen overlay that delay + gesture recognition can
     swallow the tap entirely. This tells the browser to treat taps
     here as immediate, non-zooming actions. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.intro-overlay.hide{opacity:0; visibility:hidden; pointer-events:none;}

.intro-map{
  position:absolute; inset:0; width:100%; height:100%;
  /* Let taps pass straight through the SVG animation to the overlay
     div underneath instead of being captured by the <path>/<circle>. */
  pointer-events: none;
}
.intro-route{
  fill:none;
  stroke:rgba(198,154,74,0.45);
  stroke-width:2;
  stroke-dasharray:6 10;
  stroke-linecap:round;
  stroke-dashoffset:1600;
  animation:drawRoute 2.2s ease-out forwards;
}
.intro-dot{
  fill:var(--gold);
  opacity:0;
}
.intro-dot.start{animation:dotIn .3s ease-out .1s forwards;}
.intro-dot.end{animation:dotIn .3s ease-out 2.05s forwards;}

.intro-plane{
  offset-path: path('M 60 460 C 320 120, 780 620, 1180 160');
  offset-rotate:auto;
  offset-distance:0%;
  opacity:0;
  animation:flyAlong 2.3s cubic-bezier(.45,.05,.55,.95) forwards;
  transform-origin:center;
}

.intro-word{
  display:flex; gap:0.25em;
  font-family:'Fraunces', serif;
  font-size:clamp(2.2rem, 6vw, 4rem);
  color:var(--cream);
  z-index:2;
  margin-top:14px;
}
.intro-word span{
  display:inline-block;
  opacity:0;
  transform:translateY(18px);
  animation:letterUp .6s ease forwards;
}
.intro-word .amp{color:var(--gold); font-style:italic;}

.intro-tag{
  z-index:2;
  margin-top:14px;
  font-family:'Work Sans', sans-serif;
  font-size:0.78rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(246,240,226,0.55);
  opacity:0;
  animation:tagIn .8s ease forwards;
  animation-delay:2.7s;
  /* FIX: flex items don't wrap long letter-spaced text by default
     (their default min-width is the content's full intrinsic width),
     so on narrow phones this line was bleeding off both edges of the
     screen instead of wrapping. Capping it and allowing wrap fixes that. */
  max-width: 88vw;
  text-align: center;
  overflow-wrap: break-word;
}

.intro-skip{
  position:absolute; bottom:28px; right:5%;
  font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(246,240,226,0.4); z-index:2;
  padding: 10px;
}

@keyframes drawRoute{ to{ stroke-dashoffset:0; } }
@keyframes dotIn{ to{ opacity:1; } }
@keyframes flyAlong{
  0%{ offset-distance:0%; opacity:0; }
  4%{ opacity:1; }
  96%{ opacity:1; }
  100%{ offset-distance:100%; opacity:0; }
}
@keyframes letterUp{ to{ opacity:1; transform:translateY(0); } }
@keyframes tagIn{ to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .intro-overlay{transition:none;}
  .intro-route, .intro-dot, .intro-plane, .intro-word span, .intro-tag{
    animation:none !important; opacity:1 !important; transform:none !important;
    stroke-dashoffset:0 !important; offset-distance:100% !important;
  }
}

/* FIX: on phones the intro word/tag were pinned at their CSS "floor"
   size (2.2rem) since 6vw only overtakes that floor above ~586px wide
   screens — so every phone showed the same, relatively large, text.
   This scales both down further, and shrinks the skip link so it never
   crowds the screen edge. */
@media (max-width: 600px){
  .intro-word{
    font-size: clamp(1.6rem, 9vw, 2.3rem);
    gap: 0.18em;
    margin-top: 10px;
  }
  .intro-tag{
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    margin-top: 10px;
    padding: 0 0.5rem;
  }
  .intro-skip{
    right: 1rem;
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    font-size: 0.65rem;
  }
}

/* ---------- VIDEO HERO FRAME + DESTINATION CAROUSEL ---------- */
.frame{
  --frame-bg: #073B37;
  --frame-text: #F4ECDA;
  --frame-gold: #F0D48B;

  width: 100%;
  max-width: none;
  min-height: 90vh;
  position: relative;
  background: var(--frame-bg);
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:hidden;
}

.bg video{
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%, -50%);
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
}

.vignette{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(4,20,18,0.65) 0%, rgba(43, 51, 50, 0.15) 26%, rgba(4,20,18,0.25) 60%, rgba(4,20,18,0.85) 100%);
  pointer-events:none;
}

.frame .logo{
  display:flex; align-items:center; gap:10px;
  letter-spacing: 0.04em;
  font-family:'Fraunces', serif;
  font-size: 19px;
  font-weight:600;
  color: var(--frame-text);
}
.frame .logo svg{ width:26px; height:26px; }

.frame nav{
  height:auto;
  position:static;
  display:flex;
  gap:34px;
  font-size:13.5px;
  letter-spacing:0.03em;
  font-weight:500;
  padding:0;
  background:none;
  border-bottom:none;
}
.frame nav a{
  color: rgba(244,236,218,0.82);
  text-decoration:none;
  position:relative;
  padding-bottom:8px;
  transition: color .2s ease;
}
.frame nav a:hover{ color: var(--frame-gold); }
.frame nav a.active{ color: var(--frame-text); }
.frame nav a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background: var(--gold);
  border-radius:2px;
}

.header-icons{
  display:flex;
  gap:16px;
  align-items:center;
}
.icon-btn{
  width:34px; height:34px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(244,236,218,0.3);
  color: var(--frame-text);
  cursor:pointer;
}
.icon-btn svg{ width:15px; height:15px; }

.frame .hero-row{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 46px;
}

.frame .hero{
  position:static;
  z-index:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:0;
  background:none;
  flex:0 1 480px;
  min-height:0;
}

.frame .eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color: var(--frame-gold);
  margin-bottom:18px;
}
.frame .eyebrow::before{
  content:"";
  width:34px; height:2px;
  background: var(--gold);
  display:inline-block;
}

.headline{
  line-height:0.92;
  margin-bottom:20px;
}
.headline .hello{
  display:block;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:300;
  font-size:52px;
  color: var(--frame-text);
}
.headline .country{
  display:block;
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:74px;
  letter-spacing: 0.05em;
  background: linear-gradient(180deg, #106c69 0%, #044643 55%, #002820 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.35));
}

.frame .desc{
  max-width: 360px;
  font-size:14.5px;
  line-height:1.65;
  color: rgba(244,236,218,0.86);
  font-weight:300;
  margin-bottom:26px;
}

.cta-row{
  display:flex;
  align-items:center;
  gap:16px;
}
.badge{
  width:38px; height:38px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #F0D48B, #D8A94B 55%, #B9832E 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 14px rgba(216,169,75,0.4);
  flex-shrink:0;
}
.badge svg{ width:18px; height:18px; }

.discover-btn{
  border: 1px solid rgba(244,236,218,0.45);
  background: rgba(244,236,218,0.06);
  backdrop-filter: blur(6px);
  color: var(--frame-text);
  font-size:13px;
  letter-spacing:0.04em;
  padding: 13px 26px;
  border-radius:30px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  transition: background .2s ease, border-color .2s ease;
}
.discover-btn:hover{
  background: rgba(244,236,218,0.14);
  border-color: var(--gold);
}
.discover-btn svg{ width:12px; height:12px; }

.carousel-wrap{
  position:static;
  z-index:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  flex:0 0 auto;
}
.cards{
  display:flex;
  align-items:flex-end;
  height: 300px;
  gap: 14px;
  counter-reset: cardnum;
}
.card{
  width: 150px;
  height: 250px;
  border-radius: 18px;
  overflow:hidden;
  position:relative;
  box-shadow: 0 14px 32px -12px rgba(0,0,0,0.5);
  border: 1px solid rgba(244,236,218,0.16);
  transition: width .4s cubic-bezier(.22,1,.36,1), height .4s cubic-bezier(.22,1,.36,1),
              transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, filter .35s ease;
  flex-shrink:0;
  cursor:pointer;
  opacity:1;
  filter:saturate(0.9);
}
.card:hover{
  transform: translateY(-10px);
  box-shadow: 0 22px 44px -12px rgba(0,0,0,0.6);
  z-index:6;
}
.card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.card:hover img{ transform: scale(1.08); }
.card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 38%, rgba(6,20,18,0.8) 100%);
  pointer-events:none;
}
.card::before{
  counter-increment: cardnum;
  content: counter(cardnum, decimal-leading-zero);
  position:absolute; top:10px; right:10px; z-index:2;
  font-family:'Fraunces', serif;
  font-size:10px;
  letter-spacing:0.05em;
  color: rgba(244,236,218,0.9);
  background: rgba(6,20,18,0.45);
  padding: 3px 7px;
  border-radius: 20px;
  backdrop-filter: blur(3px);
  transition: color .3s ease, background .3s ease;
}
.card.active{
  width: 150px;
  height: 250px;
  box-shadow: 0 14px 32px -12px rgba(0,0,0,0.5);
  filter:saturate(0.9);
  z-index:3;
}
.card.active:hover{ transform: translateY(-5px); }
.card.active::before{ color: var(--frame-gold); background: rgba(6,20,18,0.55); }
.card-label{
  position:absolute;
  left:12px; bottom:12px; z-index:2;
  font-size:9.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: rgba(244,236,218,0.9);
  font-weight:500;
  transition: font-size .3s ease;
}
.card.active .card-label{ font-size:11px; font-weight:600; color: var(--frame-text); }

.carousel-controls{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:20px;
}
.arrow{
  width:32px; height:32px;
  border-radius:50%;
  border:1px solid rgba(244,236,218,0.4);
  display:flex; align-items:center; justify-content:center;
  color: var(--frame-text);
  cursor:pointer;
  background: transparent;
  transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
.arrow:hover{
  background: rgba(244,236,218,0.12);
  border-color: var(--gold);
  transform: scale(1.08);
}
.arrow svg{ width:11px; height:11px; }
.dash{
  width: 90px;
  height:1px;
  background: rgba(244,236,218,0.35);
  position:relative;
}
.dash::after{
  content:"";
  position:absolute; left:0; top:-1px;
  width: var(--dash-fill, 34%);
  height:3px;
  background: var(--gold);
  border-radius:2px;
  transition: width .3s ease;
}

.page-number{
  position:fixed;
  right:46px;
  bottom:34px;
  z-index:90;
  font-family:'Fraunces', serif;
  font-size:30px;
  font-weight:600;
  color: var(--frame-text);
  letter-spacing: 0.05em;
  opacity:0.92;
  background: rgba(6,20,18,0.4);
  backdrop-filter: blur(4px);
  padding: 4px 16px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: border-color var(--transition);
}
.page-number.scrolled-past-hero{
  border-color: rgba(240,212,139,0.5);
}

@media (max-width: 880px){
  .frame{ min-height: 92vh; }
  .frame nav{ display:none; }
  .headline .country{ font-size:52px; }
  .headline .hello{ font-size:36px; }
  .frame .hero-row{
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:28px;
    padding: 0 24px;
    max-width:none;
  }
  .carousel-wrap{ align-items:flex-start; }
  .card{ width:88px; height:190px; }
  .page-number{ right:24px; }
}

/* ---------- TOUR INTRO (split layout, "about the journey") ---------- */
.tour-intro{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:60px;
  align-items:center;
  padding:110px 5%;
}

.tour-intro-media{
  position:relative;
  border-radius:4px;
  overflow:hidden;
}
.tour-intro-media img{
  width:100%;
  height:520px;
  object-fit:cover;
  filter:sepia(6%) saturate(105%);
}
.tour-intro-tag{
  position:absolute;
  left:20px; bottom:20px;
  background:rgba(22,56,50,0.85);
  color:var(--cream);
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:10px 16px;
  border-radius:2px;
  backdrop-filter:blur(4px);
}

.tour-intro-content h2{
  font-size:clamp(1.05rem,3vw,2rem);
  margin:12px 0 20px;
  font-weight:400;
}
.tour-intro-content > p{
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1.7;
  margin:0 0 40px;
  max-width:520px;
}

.tour-points{
  display:flex;
  flex-direction:column;
  gap:26px;
  margin-bottom:40px;
}
.tour-point{
  display:flex;
  gap:20px;
  align-items:flex-start;
}
.tour-point-num{
  font-family:'Fraunces', serif;
  font-style:italic;
  color:var(--gold);
  font-size:1.3rem;
  flex-shrink:0;
  width:36px;
}
.tour-point h4{
  margin:0 0 6px;
  font-size:1.05rem;
  font-weight:600;
}
.tour-point p{
  margin:0;
  font-size:0.9rem;
  color:var(--ink-soft);
  line-height:1.6;
  max-width:420px;
}

@media(max-width:900px){
  .tour-intro{
    grid-template-columns:1fr;
    gap:36px;
  }
  .tour-intro-media img{ height:360px; }
}

/* ---------- CTA BAND BUTTON FIX ----------
   .btn-ghost is designed for dark backgrounds (cream border/text).
   The homepage .cta-band has a light/cream background, so on its own
   .btn-ghost was nearly invisible. This scoped override gives it a
   visible pill button that matches the rest of the site instead. */
.cta-band .btn-ghost{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: transparent;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.cta-band .btn-ghost:hover{
  background: var(--deep-teal, var(--jungle));
  border-color: var(--deep-teal, var(--jungle));
  color: var(--paper, var(--cream));
  transform: translateY(-2px);
}

/* ================================================================
   PACKAGE SLIDER (horizontal-scroll variant of the packages grid)
   Placed last so it overrides the base .package-grid rules above
   when the markup uses <div class="package-slider"> around the grid.
   ================================================================ */

.package-slider {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto 4rem;
  padding: 0 60px;
}
.package-slider .package-grid {
  display: flex;
  gap: 1.8rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 0 20px;
  scrollbar-width: none;
}
.package-slider .package-grid::-webkit-scrollbar {
  display: none;
}
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: var(--white);
  border: 2px solid var(--sand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--ink);
  cursor: pointer;
  z-index: 10;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.slider-btn:hover {
  background: var(--gold);
  color: var(--jungle-dark);
  border-color: var(--gold);
}
.slider-btn.prev { left: 10px; }
.slider-btn.next { right: 10px; }

/* Cards inside the slider need a fixed width instead of the grid's
   auto-fit sizing, so they scroll as a row instead of wrapping. */
.package-slider .package-card {
  min-width: 220px;
  flex-shrink: 0;
}

/* ================================================================
   ABOUT PAGE HERO (was previously inline-styled directly in
   about.php with a hard grid-template-columns:1fr 1fr — that never
   responds on mobile, which is what squeezed the photo into a
   narrow half-width column and let the "4+ Years" badge spill out
   over the text next to it. Real classes + a breakpoint fix that.
   ================================================================ */
.about-hero {
  padding: 9rem 2rem 6rem;
  background: var(--cream);
}
.about-hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.about-hero-media { position: relative; }
.about-hero-media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 20px 40px rgba(22,56,50,0.15);
  display: block;
}
.about-badge {
  position: absolute;
  bottom: 2rem; left: 2rem;
  max-width: calc(100% - 3rem);
  background: var(--gold);
  color: var(--jungle-dark);
  padding: 1.2rem 2rem;
  border-radius: var(--radius);
  font-family: var(--font-utility);
  font-weight: 600;
  text-align: center;
}
.about-badge-num { font-size: 2.4rem; display: block; line-height: 1; }
.about-badge-label { font-size: 0.85rem; letter-spacing: 0.08em; }

.about-hero-title {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1.12;
  margin-bottom: 1.8rem;
  color: var(--jungle);
}
.about-hero-lead {
  font-size: 1.08rem;
  color: var(--ink-soft);
  line-height: 1.75;
  margin-bottom: 2.2rem;
}
.about-quote {
  background: var(--white);
  padding: 2.2rem;
  border-radius: var(--radius);
  border-left: 6px solid var(--gold);
  margin-bottom: 2.8rem;
}
.about-quote p {
  font-style: italic;
  color: var(--ink);
  font-size: 1.05rem;
}
.about-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
  font-size: 1rem;
}
.about-checklist ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--ink);
}

@media (max-width: 900px) {
  .about-hero-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .about-hero-media img {
    max-height: 420px;
    object-fit: cover;
  }
}
@media (max-width: 480px) {
  .about-hero { padding: 7rem 1.25rem 4rem; }
  .about-checklist { grid-template-columns: 1fr; gap: 0.9rem; }
  .about-badge { left: 1rem; bottom: 1rem; padding: 1rem 1.4rem; }
  .about-badge-num { font-size: 2rem; }
  .about-badge-label { font-size: 0.75rem; }
}

@media (max-width: 760px) {
  /* FIX: the arrow buttons sit in this side padding "gutter" outside
     the scrollable card row. 44px of gutter with a 40px button only
     8px from the edge left barely any clearance before the card
     started, so the gold arrow visually sat right on top of the
     card's own top-right icon. Widening the gutter and pulling the
     button further toward the outer edge opens a clear gap. */
  .package-slider { padding: 0 58px; }
  .slider-btn { width: 34px; height: 34px; font-size: 1.15rem; }
  .slider-btn.prev { left: 6px; }
  .slider-btn.next { right: 6px; }

  /* FIX: 220px was too narrow for the heading + all 3 action buttons
     on a phone (they have no hover state on touch, so they're always
     shown here — see .package-actions rule above). That's what made
     them compress and overlap. Widen the card, give the actions row
     room to wrap onto a second line, and shrink the buttons slightly
     so two of them comfortably share one row. */
  .package-slider .package-card {
    min-width: 250px;
    min-height: 340px;
  }
  .package-actions {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 0.4rem;
  }
  .pkg-action {
    font-size: 0.7rem;
    padding: 0.4rem 0.65rem;
  }
  .pkg-whatsapp {
    padding: 0.4rem 0.55rem;
  }
}