/* ===================== Lanka Green Travel — Stylesheet ===================== */

:root {
  --color-primary: #1B4332;
  --color-primary-light: #2D6A4F;
  --color-primary-dark: #10281F;
  --color-accent: #C9A227;
  --color-accent-light: #E4C766;
  --color-bg: #FDFBF7;
  --color-bg-alt: #F0F4EC;
  --color-text: #1C1E1C;
  --color-text-light: #5A5F5A;
  --color-white: #FFFFFF;
  --color-border: #E3E7E0;

  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max-width: 1240px;
  --radius: 14px;
  --shadow-soft: 0 10px 30px rgba(27, 67, 50, 0.08);
  --shadow-strong: 0 20px 50px rgba(27, 67, 50, 0.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }
[id] { scroll-margin-top: 100px; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; }

ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary-dark);
  line-height: 1.2;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 90px 0; }
.section--alt { background: var(--color-bg-alt); }
.section--dark {
  background: var(--color-primary-dark);
  color: var(--color-white);
}
.section--dark h2, .section--dark h3 { color: var(--color-white); }

.section-head {
  max-width: 640px;
  margin-bottom: 50px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 12px;
}

h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
h3 { font-size: 1.3rem; }

.lede {
  font-size: 1.1rem;
  color: var(--color-text-light);
  font-weight: 300;
  margin-top: 14px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--color-primary); color: var(--color-white); }
.btn--primary:hover { background: var(--color-primary-light); transform: translateY(-2px); }
.btn--accent { background: var(--color-accent); color: var(--color-primary-dark); }
.btn--accent:hover { background: var(--color-accent-light); transform: translateY(-2px); }
.btn--outline { border-color: var(--color-white); color: var(--color-white); }
.btn--outline:hover { background: var(--color-white); color: var(--color-primary-dark); }
.btn--outline-dark { border-color: var(--color-primary); color: var(--color-primary); }
.btn--outline-dark:hover { background: var(--color-primary); color: var(--color-white); }
.btn--block { width: 100%; justify-content: center; }

/* ===================== Header ===================== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(253, 251, 247, 0.32);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.header.is-scrolled {
  background: rgba(253, 251, 247, 0.65);
  box-shadow: var(--shadow-soft);
  border-color: var(--color-border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.logo span { color: var(--color-accent); }
.logo__icon { height: 44px; width: auto; display: block; }

.nav {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  position: relative;
  padding: 6px 0;
}
.nav a.active, .nav a:hover { color: var(--color-primary); }
.nav a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--color-accent);
}

.header__actions { display: flex; align-items: center; gap: 14px; }
.header__phone {
  display: flex; flex-direction: column; font-size: 0.85rem;
}
.header__phone span { color: var(--color-text-light); font-size: 0.75rem; }
.header__phone strong { color: var(--color-primary-dark); }

.header__icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-alt);
  color: var(--color-primary-dark);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
.header__icon-btn:hover { background: var(--color-primary); color: var(--color-white); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 26px; height: 2px; background: var(--color-primary-dark);
  transition: all 0.25s ease;
}

@media (max-width: 900px) {
  .nav { display: none; }
  .header__phone { display: none; }
  .nav-toggle { display: flex; }

  .nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 84px; left: 0; right: 0;
    background: var(--color-white);
    padding: 20px 24px 30px;
    box-shadow: var(--shadow-soft);
    gap: 4px;
  }
  .nav.is-open a { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
}

@media (max-width: 480px) {
  .header__icon-btn { display: none; }
  .header__actions .btn--primary { display: none; }
}
@media (max-width: 380px) {
  .logo { font-size: 1.15rem; gap: 8px; }
  .logo__icon { height: 34px; }
}

/* ===================== Hero ===================== */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: 84px;
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  overflow: hidden;
}

/* Sliding photo background — 6 images, each holds for ~2.4s then slides out
   left over ~0.6s (3s per slide); a 7th slide clones the 1st so the loop
   restart at 0% is visually seamless. */
.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-slider__track {
  display: flex;
  width: 100%;
  height: 100%;
  animation: heroSlide 30s infinite;
}
.hero-slider__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.hero-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slider__track { animation: none; }
}
@keyframes heroSlide {
  0%, 13.33%     { transform: translateX(0); }
  16.67%, 30%    { transform: translateX(-100%); }
  33.33%, 46.67% { transform: translateX(-200%); }
  50%, 63.33%    { transform: translateX(-300%); }
  66.67%, 80%    { transform: translateX(-400%); }
  83.33%, 96.67% { transform: translateX(-500%); }
  100%           { transform: translateX(-600%); }
}

/* Dark overlay so text stays legible over the photos — kept intentionally
   light so the photos themselves stay visible. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(16,40,31,0.4), rgba(16,40,31,0.5)),
              linear-gradient(90deg, rgba(16,40,31,0.55) 0%, rgba(16,40,31,0.15) 65%);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}
@media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__content { max-width: 640px; }

/* Staggered entrance on load — pure CSS, one forwards-filled keyframe per
   element with an increasing animation-delay. */
.hero .eyebrow {
  color: var(--color-accent-light);
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  position: relative;
  opacity: 0;
  animation: heroFadeUp 0.7s ease-out 0.2s forwards;
}
/* Gold underline that draws in under the eyebrow once it has faded in */
.hero .eyebrow::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  margin-top: 7px;
  background: var(--color-accent);
  animation: heroDraw 0.8s ease-out 0.8s forwards;
}
.hero h1 { color: var(--color-white); text-shadow: 0 2px 16px rgba(0,0,0,0.5); opacity: 0; animation: heroFadeUp 0.75s ease-out 0.35s forwards; }
.hero .lede { color: rgba(255,255,255,0.9); max-width: 560px; text-shadow: 0 1px 10px rgba(0,0,0,0.4); opacity: 0; animation: heroFadeUp 0.75s ease-out 0.5s forwards; }
.hero__ctas { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; opacity: 0; animation: heroFadeUp 0.75s ease-out 0.65s forwards; }

.hero__stats {
  display: flex;
  gap: 40px;
  margin-top: 70px;
  flex-wrap: wrap;
}
.hero__stat { opacity: 0; animation: heroFadeUp 0.6s ease-out forwards; }
.hero__stat:nth-child(1) { animation-delay: 0.8s; }
.hero__stat:nth-child(2) { animation-delay: 0.88s; }
.hero__stat:nth-child(3) { animation-delay: 0.96s; }
.hero__stat:nth-child(4) { animation-delay: 1.04s; }
.hero__stat strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: var(--color-accent-light);
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}
.hero__stat span { font-size: 0.85rem; color: rgba(255,255,255,0.85); text-shadow: 0 1px 8px rgba(0,0,0,0.4); }

/* ===================== Quick Trip Planner (floating hero panel) ===================== */
.hero__planner {
  background: rgba(16, 40, 31, 0.32);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateX(24px);
  animation: heroFadeInRight 0.8s ease-out 0.55s forwards, heroFloat 5s ease-in-out 1.4s infinite;
}
.hero__planner .field label {
  text-transform: uppercase; font-size: 0.7rem; letter-spacing: 1px; color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.hero__planner .field select { background: rgba(255, 255, 255, 0.96); }
.hero__planner button { width: 100%; margin-top: 4px; height: 51px; }

/* ===================== Scroll cue ===================== */
.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  animation: heroFadeUp 0.6s ease-out 1.2s forwards;
}
.hero__scroll-cue span { font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.hero__scroll-cue svg { animation: heroBounce 1.8s ease-in-out infinite; }

@keyframes heroFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroFadeInRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes heroDraw { to { width: 64px; } }
@keyframes heroBounce { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(7px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero h1, .hero .lede, .hero__ctas, .hero__stat, .hero__planner, .hero__scroll-cue {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero .eyebrow::after { animation: none !important; width: 64px; }
  .hero__scroll-cue svg { animation: none !important; }
}

/* On phones, the hero's stacked content (heading + CTAs + stats + the full
   planner card) is tall enough on its own that it was pushing the hero well
   past the 92vh floor — which stretched the wide slider photos into an
   extreme, mostly-unrecognizable crop. Tightening the stacked spacing here
   keeps the section closer to that floor so the slider photos stay legible. */
@media (max-width: 640px) {
  .hero { min-height: 0; padding-bottom: 40px; }
  /* The stacked content below is still taller than one screen on a phone —
     that's fine on its own, but letting the background slider stretch to
     match (inset: 0) crushed each wide photo into a sliver only ~13% of its
     width. Cap it to a normal photo-banner height at the top instead; the
     rest of the section continues on the hero's solid dark background. */
  .hero-slider { top: 0; left: 0; right: 0; bottom: auto; height: 60vh; max-height: 460px; }
  .hero__grid { gap: 32px; }
  .hero__ctas { margin-top: 24px; }
  .hero__stats { margin-top: 32px; gap: 24px 32px; }
  .hero__planner { padding: 22px; gap: 12px; }
}

/* photo placeholder blocks (swap for real photography) */
.photo-placeholder {
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(255,255,255,0.9);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 20px;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
  min-height: 220px;
}
.photo-placeholder--gold { background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent)); color: var(--color-primary-dark); }
.photo-placeholder__icon { font-size: 2rem; display: block; margin-bottom: 10px; }

/* real photo swapped in for a .photo-placeholder — keeps the same box, fills it */
.photo-frame {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}
/* gallery photos: uniform landscape tiles so portrait shots don't stretch the row */
.card-grid > img.photo-frame { height: auto; aspect-ratio: 4 / 3; }
/* intro photo: fixed landscape shape at every screen width */
.split__media .photo-frame { height: auto; aspect-ratio: 4 / 3; }

/* ===================== Intro split ===================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
}
.split--reverse .split__media { order: 2; }

/* ===================== Why book / icon list ===================== */
.icon-list { display: flex; flex-direction: column; gap: 22px; }
.icon-item { display: flex; gap: 16px; align-items: flex-start; }
.icon-item__icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.icon-item p { font-weight: 500; color: var(--color-text); margin: 0; }

/* ===================== Why Travellers Choose Us (benefit cards) =====================
   6 cards: a swipeable/auto-advancing horizontal slider on mobile/tablet
   (.benefit-slider, wrapped in .card-slider — see the shared card-slider
   rules above), exactly 3-up on desktop. */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 1023px) {
  .benefit-grid {
    display: flex;
    touch-action: pan-y;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .benefit-card { flex: 0 0 76%; }
}
@media (min-width: 560px) and (max-width: 1023px) {
  .benefit-card { flex-basis: 42%; }
}
.benefit-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.benefit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-strong); }
.benefit-card__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  color: var(--color-primary);
}
.benefit-card__icon svg { width: 24px; height: 24px; }
.benefit-card__title { margin-bottom: 10px; font-size: 1.15rem; }
.benefit-card__desc { color: var(--color-text-light); font-size: 0.95rem; line-height: 1.6; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
}
.stat-box strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  color: var(--color-primary);
}
.stat-box span {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-light);
}

/* ===================== Itinerary (package detail pages) ===================== */
.itinerary { display: flex; flex-direction: column; }
.itinerary-day {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-border);
}
.itinerary-day:first-child { padding-top: 0; }
.itinerary-day:last-child { border-bottom: none; padding-bottom: 0; }
.itinerary-day__badge {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-accent);
}
.itinerary-day__badge span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-light);
  margin-top: 4px;
}
.itinerary-day__title { font-family: var(--font-heading); font-size: 1.15rem; color: var(--color-primary); margin-bottom: 8px; }
.itinerary-day__desc { color: var(--color-text-light); margin: 0; }
@media (max-width: 700px) {
  .itinerary-day { grid-template-columns: 1fr; gap: 8px; }
}

.included-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 50px; }
@media (max-width: 700px) { .included-grid { grid-template-columns: 1fr; } }
.icon-item--excluded .icon-item__icon { background: #FBEAEA; color: #B3261E; }
.icon-item--included .icon-item__icon { background: #E8F3EC; color: var(--color-primary); }

/* ===================== Tour Detail — Sidebar Layout ===================== */
.tour-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 60px;
  align-items: start;
}
.tour-layout__main { min-width: 0; }
.tour-block { margin-bottom: 70px; }
.tour-block:last-child { margin-bottom: 0; }
.tour-sidebar { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 960px) {
  .tour-layout { grid-template-columns: 1fr; }
  .tour-sidebar { position: static; }
}

.booking-card {
  background: linear-gradient(160deg, var(--color-primary-dark), var(--color-primary));
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--color-white);
  box-shadow: var(--shadow-strong);
}
.booking-card__head { background: var(--color-accent); padding: 18px 24px; }
.booking-card__head h3 { color: var(--color-primary-dark); margin: 0; font-size: 1.1rem; }
.booking-card__head p { color: rgba(16,40,31,0.7); margin: 2px 0 0; font-size: 0.82rem; }
.booking-card__body { padding: 22px 24px; }
.booking-detail {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: 0.84rem;
}
.booking-detail:last-of-type { border-bottom: none; margin-bottom: 18px; }
.booking-detail span:first-child { color: rgba(255,255,255,0.62); }
.booking-detail span:last-child { font-weight: 600; text-align: right; }
.booking-card .btn { width: 100%; justify-content: center; margin-top: 10px; }

.side-contact {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.side-contact h4 { font-size: 1rem; margin-bottom: 14px; }
.side-contact .contact-row { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; margin-bottom: 12px; color: var(--color-text-light); }
.side-contact .contact-row a { color: var(--color-primary); font-weight: 600; }
.side-contact .contact-row:last-child { margin-bottom: 0; }

/* ===================== Tour Detail — Tabbed Day-by-Day ===================== */
.day-badge {
  display: inline-block;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.day-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.day-tabs button {
  font-family: var(--font-body);
  font-size: 0.82rem; font-weight: 600;
  padding: 9px 18px; border-radius: 100px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text-light);
  cursor: pointer;
  transition: all 0.2s ease;
}
.day-tabs button:hover { border-color: var(--color-accent); color: var(--color-primary); }
.day-tabs button.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.day-panel { display: none; }
.day-panel.is-active { display: block; }

/* ===================== Tour Detail — Best Time to Visit ===================== */
.season-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .season-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .season-grid { grid-template-columns: 1fr; } }
.season-card { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px; height: 100%; }
.season-card h5 { font-size: 1rem; margin-bottom: 8px; }
.season-card p { font-size: 0.85rem; color: var(--color-text-light); margin: 0; line-height: 1.6; }
.season-tag { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 3px 12px; border-radius: 100px; margin-bottom: 10px; }
.season-tag--best { background: #E8F3EC; color: var(--color-primary); }
.season-tag--good { background: rgba(201,162,39,0.16); color: #8A6A14; }
.season-tag--caution { background: #FBEAEA; color: #B3261E; }

/* ===================== Tour Package Cards (homepage + related tours) ===================== */
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 1000px) { .pkg-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 640px) { .pkg-grid { grid-template-columns: 1fr; } }
.pkg-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.pkg-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-strong); }
.pkg-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-alt); }
.pkg-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.pkg-card:hover .pkg-card__media img { transform: scale(1.06); }
.pkg-card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,40,31,0) 50%, rgba(16,40,31,0.72) 100%);
  pointer-events: none;
}
.pkg-card__duration {
  position: absolute; top: 16px; left: 16px; z-index: 1;
  padding: 7px 14px;
  border-radius: 100px;
  background: rgba(16, 40, 31, 0.78);
  backdrop-filter: blur(6px);
  color: var(--color-white);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}
.pkg-card__region {
  position: absolute; left: 20px; bottom: 16px; z-index: 1;
  color: var(--color-accent-light);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
}
.pkg-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 22px; }
.pkg-card__title { font-size: 1.35rem; margin-bottom: 10px; }
.pkg-card__desc { color: var(--color-text-light); font-size: 0.9rem; margin-bottom: 18px; flex: 1; }
.pkg-card__route {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem; font-weight: 500; color: var(--color-primary);
}
.pkg-card__footer {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.pkg-card__perk { font-size: 0.78rem; color: var(--color-text-light); }
.pkg-card__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 600; color: var(--color-primary); white-space: nowrap; }
.pkg-card__cta span { transition: transform 0.25s ease; }
.pkg-card:hover .pkg-card__cta span { transform: translateX(4px); }

/* ===================== Tour Package Page — Photo Hero + Facts Bar ===================== */
.pkg-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(80vh, 720px);
  padding: 150px 0 120px;
  overflow: hidden;
  background: var(--color-primary-dark);
  color: var(--color-white);
}
.pkg-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pkg-hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(16,40,31,0.72) 0%, rgba(16,40,31,0.25) 65%, rgba(16,40,31,0.1) 100%),
    linear-gradient(180deg, rgba(16,40,31,0.5) 0%, rgba(16,40,31,0.1) 35%, rgba(16,40,31,0.9) 100%);
}
.pkg-hero .container { position: relative; z-index: 1; width: 100%; }
.pkg-hero .eyebrow { color: var(--color-accent-light); }
.pkg-hero h1 { color: var(--color-white); max-width: 820px; }
.pkg-hero__lede { max-width: 640px; margin-top: 16px; font-size: 1.15rem; font-weight: 300; color: rgba(255,255,255,0.88); }
.pkg-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.pkg-hero .breadcrumb { color: rgba(255,255,255,0.72); margin-top: 26px; }
.pkg-hero .breadcrumb a { color: var(--color-white); }
@media (max-width: 600px) {
  .pkg-hero { padding: 130px 0 100px; min-height: 0; }
  .pkg-hero__actions .btn { flex: 1; justify-content: center; }
}

.pkg-facts { position: relative; z-index: 2; margin-top: -60px; }
.pkg-facts__bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--color-white);
  border-top: 3px solid var(--color-accent);
  border-radius: 18px;
  box-shadow: var(--shadow-strong);
}
.pkg-fact { padding: 22px 24px; border-right: 1px solid var(--color-border); }
.pkg-fact:last-child { border-right: none; }
.pkg-fact span { display: block; margin-bottom: 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-text-light); }
.pkg-fact strong { font-family: var(--font-heading); font-size: 1.08rem; font-weight: 600; color: var(--color-primary-dark); line-height: 1.3; }
@media (max-width: 900px) {
  .pkg-facts__bar { grid-template-columns: repeat(2, 1fr); }
  .pkg-fact { border-bottom: 1px solid var(--color-border); }
  .pkg-fact:nth-child(2n) { border-right: none; }
  .pkg-fact:last-child { grid-column: 1 / -1; border-bottom: none; }
}
@media (max-width: 600px) {
  .pkg-fact { padding: 16px 18px; }
  .pkg-fact strong { font-size: 0.98rem; }
}

/* ===================== Tour Package Page — Day Panels ===================== */
.pkg-day__photo { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); margin-bottom: 24px; }
.pkg-day__meta { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.pkg-day__meta span { padding: 6px 14px; border-radius: 100px; background: var(--color-white); border: 1px solid var(--color-border); font-size: 0.78rem; color: var(--color-text-light); }
.pkg-stops { display: grid; gap: 20px; margin-top: 28px; }
.pkg-stop { position: relative; padding-left: 32px; }
.pkg-stop::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(201,162,39,0.18);
}
.pkg-stop:not(:last-child)::after {
  content: "";
  position: absolute; left: 5px; top: 24px; bottom: -16px;
  width: 2px;
  background: var(--color-border);
}
.pkg-stop h4 { font-size: 1.02rem; margin-bottom: 4px; }
.pkg-stop p { font-size: 0.92rem; color: var(--color-text-light); }
.pkg-stop__time {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: #8A6A14;
}

/* ===================== Tour Package Page — Hero Badges ===================== */
.pkg-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding: 0; list-style: none; }
.pkg-hero__badges li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 100px;
  background: rgba(16, 40, 31, 0.45);
  backdrop-filter: blur(6px);
  font-size: 0.8rem; color: var(--color-white);
}

/* ===================== Tour Package Page — Numbered Places ===================== */
.pkg-sites { display: grid; gap: 24px; }
.pkg-site {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.pkg-site__photo { position: relative; min-height: 100%; background: var(--color-bg-alt); }
.pkg-site__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pkg-site__num {
  position: absolute; top: 14px; left: 14px;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
  box-shadow: 0 4px 12px rgba(16,40,31,0.3);
}
.pkg-site__body { padding: 24px 26px; }
.pkg-site__tag { display: block; margin-bottom: 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-primary-light); }
.pkg-site__body h3 { font-size: 1.25rem; margin-bottom: 8px; }
.pkg-site__body > p { font-size: 0.92rem; color: var(--color-text-light); margin-bottom: 14px; }
.pkg-site__list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.pkg-site__list li { position: relative; padding-left: 18px; font-size: 0.84rem; line-height: 1.45; }
.pkg-site__list li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--color-accent); font-size: 0.75rem; }
@media (max-width: 700px) {
  .pkg-site { grid-template-columns: 1fr; }
  .pkg-site__photo { aspect-ratio: 16 / 10; min-height: 0; }
  .pkg-site__body { padding: 20px; }
  .pkg-site__list { grid-template-columns: 1fr; }
}

/* ===================== Tour Package Page — Highlights ===================== */
.pkg-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1100px) { .pkg-highlights { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pkg-highlights { grid-template-columns: 1fr; } }
.pkg-hl {
  padding: 22px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
}
.pkg-hl__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 12px;
  border-radius: 12px;
  background: var(--color-bg-alt);
  font-size: 1.4rem;
}
.pkg-hl h3 { font-size: 1.05rem; margin-bottom: 6px; }
.pkg-hl p { font-size: 0.86rem; color: var(--color-text-light); margin: 0; line-height: 1.55; }

/* ===================== Tour Package Page — Feature Box ===================== */
.pkg-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  background: var(--color-primary-dark);
  color: rgba(255,255,255,0.85);
  border-radius: 18px;
  overflow: hidden;
}
.pkg-feature__photo { position: relative; min-height: 320px; }
.pkg-feature__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pkg-feature__body { padding: 36px 34px; }
.pkg-feature__body .eyebrow { color: var(--color-accent-light); }
.pkg-feature__body h2 { color: var(--color-white); font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 14px; }
.pkg-feature__body p { font-size: 0.93rem; margin-bottom: 12px; }
.pkg-feature__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.pkg-feature__facts li { padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); }
.pkg-feature__facts strong { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-accent-light); }
.pkg-feature__facts span { font-size: 0.86rem; color: var(--color-white); }
@media (max-width: 800px) {
  .pkg-feature { grid-template-columns: 1fr; }
  .pkg-feature__photo { min-height: 0; aspect-ratio: 16 / 9; }
  .pkg-feature__body { padding: 26px 22px; }
}
@media (max-width: 420px) { .pkg-feature__facts { grid-template-columns: 1fr; } }

/* ===================== Tour Package Page — Things to Do ===================== */
.pkg-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1100px) { .pkg-acts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pkg-acts { grid-template-columns: 1fr; } }
.pkg-act { padding: 20px; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); }
.pkg-act__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.pkg-act__top .season-tag { margin-bottom: 0; }
.pkg-act__icon { font-size: 1.6rem; line-height: 1; }
.pkg-act h3 { font-size: 1rem; margin-bottom: 6px; }
.pkg-act p { font-size: 0.85rem; color: var(--color-text-light); margin: 0; line-height: 1.55; }

.season-note {
  margin-top: 20px;
  padding: 14px 18px;
  border-left: 3px solid var(--color-accent);
  border-radius: 0 12px 12px 0;
  background: rgba(201,162,39,0.1);
  font-size: 0.9rem;
}

/* ===================== Homepage — 4-Photo Package Cards ===================== */
.pkg-card__media--mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3px; }
.pkg-card__media--mosaic img { height: 100%; min-height: 0; }
.pkg-card__media--mosaic::after { background: linear-gradient(180deg, rgba(16,40,31,0) 72%, rgba(16,40,31,0.75) 100%); }
/* 10 cards in a 3-column grid leave one card alone on the last row — centre it. */
@media (min-width: 1001px) {
  #tour-packages .pkg-grid > .pkg-card:last-child:nth-child(3n+1) { grid-column: 2; }
}

/* ===================== Tour Detail — Standalone Gallery Grid ===================== */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===================== Photo Cards (full-bleed photo + floating panel) ===================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 26px;
}

.photo-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.photo-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-strong); }
/* photo placed directly in the card: fixed landscape crop so tall shots don't stretch it */
.photo-card > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

.photo-card__photo {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 24px 20px;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(160deg, var(--color-primary-light), var(--color-primary-dark));
}
.photo-card--gold .photo-card__photo { background: linear-gradient(160deg, var(--color-accent-light), var(--color-accent)); }
.photo-card--compact .photo-card__photo { min-height: 140px; }
.photo-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-card__icon { font-size: 2.4rem; }
.photo-card__caption {
  font-size: 0.76rem;
  font-weight: 500;
  max-width: 220px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.photo-card__badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 3;
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: 100px;
}

.photo-card__panel {
  position: relative;
  z-index: 2;
  margin: 16px;
  margin-top: -36px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(16, 40, 31, 0.18);
}
.photo-card--compact .photo-card__panel { padding: 16px 20px; }
.photo-card__tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-accent); font-weight: 700; }
.photo-card__title { margin: 6px 0 0; font-size: 1.15rem; }
.photo-card--compact .photo-card__title { margin: 0; font-size: 1.05rem; }
.photo-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--color-text-light);
  padding-bottom: 14px;
  margin: 10px 0 14px;
  border-bottom: 1px solid var(--color-border);
}
.photo-card__stars { color: var(--color-accent); letter-spacing: 1px; }
.photo-card__desc { color: var(--color-text-light); font-size: 0.88rem; margin: 8px 0 16px; }
.photo-card__region { display: block; font-size: 0.72rem; color: var(--color-text-light); margin-top: 6px; }

/* ===================== Card slider (shared mechanics; mobile/tablet only) =====================
   Shared by the Tour Categories (.tour-cat-slider) and Top Destinations
   (.top-dest-grid) 8-card rows — both wrapped in the same
   .card-slider > .card-slider__viewport > <track> markup. This is a
   JS-driven, index-based carousel (see initCardCarousels() in main.js),
   NOT native scroll-snap: the track is positioned with
   transform: translate3d(), recalculated from the viewport width, the
   actual rendered card width, the gap and the current index every time it
   moves, so the active card's own centre always lands exactly on the
   viewport's centre — including the first and last cards, which plain
   scroll-snap can't center without fragile edge-padding hacks. Desktop
   (1024px+) is untouched: the wrapper/viewport/arrows collapse to normal,
   non-clipping, non-positioned elements and each section falls back to
   its original CSS grid.
   Scoped to .tour-cat-slider — an extra class added ONLY on the homepage's
   Tour Categories grid, alongside its existing .card-grid class — so this
   never touches the plain .card-grid/.photo-card used on the other 24
   pages that share that component. */
.card-slider { position: relative; }
.card-slider__arrow { display: none; }

@media (max-width: 1023px) {
  .card-slider__viewport { overflow: hidden; }

  .card-slider__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: var(--color-white);
    color: var(--color-primary-dark);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  }
  .card-slider__arrow svg { width: 20px; height: 20px; }
  .card-slider__arrow:hover { background: var(--color-accent); box-shadow: var(--shadow-strong); }
  .card-slider__arrow--prev { left: 4px; }
  .card-slider__arrow--next { right: 4px; }
  .card-slider__arrow:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

  .tour-cat-slider {
    display: flex;
    grid-template-columns: none;
    gap: 18px;
    touch-action: pan-y;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .tour-cat-slider .photo-card { flex: 0 0 76%; }
}
@media (min-width: 560px) and (max-width: 1023px) {
  .tour-cat-slider .photo-card { flex-basis: 42%; }
}

/* ===================== Tour Package Cards (photo-collage style) ===================== */
.tour-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tour-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-strong); }

.tour-card__collage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.tour-card__collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.tour-card:hover .tour-card__collage img { transform: scale(1.08); }

.tour-card__badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 82px; height: 82px;
  border-radius: 50%;
  background: var(--color-primary-dark);
  border: 3px solid var(--color-accent);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  box-shadow: 0 6px 18px rgba(16, 40, 31, 0.35);
}
.tour-card__badge span:first-child { font-size: 1.1rem; }
.tour-card__badge span:last-child { font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

.tour-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.tour-card__title { font-size: 1.2rem; margin: 0 0 10px; }
.tour-card__desc { color: var(--color-text-light); font-size: 0.88rem; margin: 0 0 18px; flex: 1; }
.tour-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.tour-card__meta { font-size: 0.82rem; font-weight: 700; color: var(--color-primary-dark); }
.tour-card__arrow {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-size: 1.1rem;
  transition: transform 0.2s ease, background 0.2s ease;
}
.tour-card:hover .tour-card__arrow { background: var(--color-primary); color: var(--color-white); transform: translateX(3px); }

/* ===================== Destination Cards (image + name + tagline) ===================== */
.dest-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  align-items: start;
  gap: 30px;
}
.dest-card {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dest-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-strong); }

.dest-card__hero { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.dest-card__hero img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.dest-card:hover .dest-card__hero img { transform: scale(1.06); }
.dest-card__hero-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px;
  background: linear-gradient(0deg, rgba(16,40,31,0.88) 0%, rgba(16,40,31,0.25) 55%, rgba(16,40,31,0) 100%);
}
.dest-card__title { color: var(--color-white); font-size: 1.6rem; margin: 0; }
.dest-card__tagline { color: rgba(255,255,255,0.92); font-size: 0.88rem; font-weight: 500; margin-top: 4px; }

/* ===================== Top Sri Lanka Destinations (homepage feature grid) =====================
   21 cards in a continuous .dest-marquee (see below) at every screen size.
   Cards with two source photos (Dambulla, Galle) crossfade between them on
   hover via stacked --a/--b images; single-photo cards get a subtle zoom
   instead. */
.top-dest-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.top-dest-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-strong); }

.top-dest-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; display: block; }
.top-dest-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.top-dest-card__img--top { object-position: center 15%; }
.top-dest-card__img--b { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .top-dest-card:hover .top-dest-card__media:not(.has-alt) .top-dest-card__img {
    transform: scale(1.06);
  }
  .top-dest-card:hover .top-dest-card__img--a { opacity: 0; }
  .top-dest-card:hover .top-dest-card__img--b { opacity: 1; }
}

.top-dest-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 22px 22px 0;
  color: inherit;
  text-decoration: none;
}
.top-dest-card__title { font-size: 1.25rem; margin: 0 0 8px; }
.top-dest-card__desc {
  color: var(--color-text-light);
  font-size: 0.92rem;
  line-height: 1.5;
  flex-grow: 1;
  margin-bottom: 18px;
}
.top-dest-card__cta { align-self: flex-start; margin: 0 22px 24px; }

@media (prefers-reduced-motion: reduce) {
  .top-dest-card,
  .top-dest-card__img {
    transition: none;
  }
  .top-dest-card:hover { transform: none; }
  .top-dest-card:hover .top-dest-card__media:not(.has-alt) .top-dest-card__img { transform: none; }
}

/* ===================== Destination marquee (all screen sizes) =====================
   Continuous right-to-left showcase of all 21 destinations. Pure CSS: the
   track holds the 21 real cards followed by an identical, ARIA-hidden
   clone set, then loops seamlessly from translateX(0) to translateX(-50%)
   — exactly one real set's width — so no JS width math or rAF loop is
   needed. Card width is fixed per breakpoint (~1 card + a peek of the next
   on phones, ~2 on tablets, ~4 on desktop) since the -50% loop math needs
   a fixed-width track, not percentage-of-viewport cards.
   Paused on hover/focus (desktop) and on touch (phones/tablets, via the
   small touch listener in js/main.js) so a visitor can stop it to read or
   tap a card. Disabled entirely under prefers-reduced-motion, where the
   clone set is hidden and the track becomes a plain manually-scrollable
   row of the 21 real cards instead. */
.dest-marquee { overflow: hidden; }
.dest-marquee__track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: destMarquee 90s linear infinite;
  will-change: transform;
  touch-action: pan-y;
}
.dest-marquee__track .top-dest-card { flex: 0 0 84vw; }
@media (min-width: 560px) {
  .dest-marquee__track .top-dest-card { flex: 0 0 320px; }
}
@media (min-width: 1024px) {
  .dest-marquee__track .top-dest-card { flex: 0 0 280px; }
}
.dest-marquee:hover .dest-marquee__track,
.dest-marquee:focus-within .dest-marquee__track,
.dest-marquee.is-touching .dest-marquee__track {
  animation-play-state: paused;
}
@keyframes destMarquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dest-marquee { overflow-x: auto; }
  .dest-marquee__track { animation: none; width: auto; }
  .dest-marquee__clone { display: none; }
}

/* ===================== Tour Cards (destination hero + 7-photo attraction grid) ===================== */
.trip-card {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.trip-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); }

.trip-card__hero { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.trip-card__hero img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.trip-card__hero:hover img { transform: scale(1.05); }
.trip-card__hero-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px 24px;
  background: linear-gradient(0deg, rgba(16,40,31,0.86) 0%, rgba(16,40,31,0.18) 60%, rgba(16,40,31,0) 100%);
}
.trip-card__title { color: var(--color-white); font-size: 1.7rem; margin: 0; }
.trip-card__tagline { color: rgba(255,255,255,0.92); font-size: 0.92rem; font-weight: 500; margin-top: 4px; }

.trip-card__desc {
  color: var(--color-text-light);
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 18px 24px 0;
}

.trip-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 14px 24px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}
.trip-card__meta-item { display: inline-flex; align-items: center; gap: 6px; }

.trip-card__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 24px 20px;
}
.trip-card__photo {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 40, 31, 0.1);
  transition: box-shadow 0.25s ease;
}
.trip-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.trip-card__photo:hover img { transform: scale(1.08); }
.trip-card__photo:hover { box-shadow: 0 8px 20px rgba(16, 40, 31, 0.28); }
.trip-card__photo:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.trip-card__photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 10px 7px;
  background: linear-gradient(0deg, rgba(16,40,31,0.9) 0%, rgba(16,40,31,0) 100%);
  color: var(--color-white);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
}
.trip-card__photo--wide { grid-column: 1 / -1; aspect-ratio: 21 / 6; }

.trip-card__actions {
  display: flex;
  gap: 12px;
  padding: 0 24px 24px;
}
.trip-card__actions .btn { flex: 1; text-align: center; }

@media (max-width: 900px) {
  .trip-card { max-width: 100%; }
}
@media (max-width: 600px) {
  .trip-card__photo--wide { aspect-ratio: 16 / 9; }
  .trip-card__grid { gap: 6px; padding: 0 16px 16px; }
  .trip-card__hero-overlay, .trip-card__desc, .trip-card__meta { padding-left: 16px; padding-right: 16px; }
  .trip-card__actions { flex-direction: column; padding: 0 16px 16px; }
  .trip-card__title { font-size: 1.4rem; }
  .trip-card__photo figcaption { font-size: 0.64rem; padding: 6px 6px 5px; }
}
/* wide tile that only fills the columns left over in the last row */
.trip-card__photo--wide.trip-card__photo--span1 { grid-column: span 1; aspect-ratio: 1 / 1; }
.trip-card__photo--wide.trip-card__photo--span2 { grid-column: span 2; aspect-ratio: 2 / 1; }

/* ===================== Tour Card Lightbox ===================== */
.trip-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: rgba(16, 40, 31, 0.92);
}
.trip-lightbox__figure { max-width: min(90vw, 900px); max-height: 85vh; text-align: center; }
.trip-lightbox__figure img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: 10px;
  box-shadow: var(--shadow-strong);
  display: block;
  margin: 0 auto;
}
.trip-lightbox__caption { color: var(--color-white); font-weight: 600; margin-top: 14px; font-size: 0.95rem; }
.trip-lightbox__close {
  position: absolute;
  top: 20px; right: 24px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12);
  color: var(--color-white);
  border: none;
  border-radius: 50%;
  font-size: 1.3rem;
  cursor: pointer;
}
.trip-lightbox__close:hover { background: rgba(255,255,255,0.22); }

/* ===================== Attraction Experience Cards (destination detail pages) ===================== */
.experience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) {
  .experience-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .experience-grid { grid-template-columns: 1fr; }
}
.experience-card {
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.experience-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-strong); }
.experience-card__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.experience-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.experience-card:hover .experience-card__photo img { transform: scale(1.08); }
/* photo slot awaiting an image */
.experience-card__photo:empty { background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark)); }
.experience-card__body { padding: 20px 22px; }
.experience-card__title { font-size: 1.05rem; margin: 0 0 8px; }
.experience-card__desc { color: var(--color-text-light); font-size: 0.88rem; margin: 0; line-height: 1.55; }

/* ===================== Testimonials ===================== */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 26px;
}
.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-soft);
}
.testimonial-card__stars { color: var(--color-accent); margin-bottom: 14px; letter-spacing: 2px; }
.testimonial-card p.quote { font-style: italic; color: var(--color-text); margin-bottom: 18px; }
.testimonial-card__author { font-weight: 600; font-size: 0.9rem; }
.testimonial-card__author span { display: block; font-weight: 400; color: var(--color-text-light); font-size: 0.8rem; }
.google-reviews-summary { text-align: center; margin-bottom: 26px; font-size: 1.05rem; }
.google-reviews-summary .testimonial-card__stars { display: block; margin-bottom: 6px; font-size: 1.3rem; }
.sample-tag {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.7rem;
  color: var(--color-text-light);
  background: var(--color-bg-alt);
  padding: 3px 10px;
  border-radius: 100px;
}

/* ===================== CTA banner ===================== */
.cta-banner {
  background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary));
  color: var(--color-white);
  border-radius: 24px;
  padding: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}
.cta-banner h2 { color: var(--color-white); margin-bottom: 8px; }
.cta-banner p { color: rgba(255,255,255,0.8); }
@media (max-width: 600px) {
  .cta-banner { padding: 36px 24px; }
  .cta-banner .btn { width: 100%; justify-content: center; }
}

/* ===================== Transport Booking Cards ===================== */
.transport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: start;
  gap: 26px;
}
/* Scoped to .transport-slider — an extra class added ONLY on the
   homepage's Airport Transfers grid, alongside its existing .transport-grid
   class — so this never touches the plain .transport-grid/.transport-card
   used on private-driver.html, which shares the component. */
@media (max-width: 1023px) {
  .transport-slider {
    display: flex;
    grid-template-columns: none;
    /* flex-start, not the flex default (stretch): the third card's booking
       form expands its own height when opened, and stretch would force the
       other two cards to grow to match even though they have nothing to
       show there. */
    align-items: flex-start;
    touch-action: pan-y;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .transport-slider .transport-card { flex: 0 0 82%; }
}
@media (min-width: 560px) and (max-width: 1023px) {
  .transport-slider .transport-card { flex-basis: 62%; }
}
.transport-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.transport-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-strong); }
.transport-card__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.transport-card__icon svg { width: 22px; height: 22px; fill: var(--color-primary); }
.transport-card__title { margin-bottom: 6px; font-size: 1.1rem; }
.transport-card__desc { color: var(--color-text-light); font-size: 0.9rem; line-height: 1.45; margin-bottom: 16px; flex-grow: 1; }
.transport-card__fields { margin-bottom: 14px; }
.transport-card__fields.form-grid { gap: 12px; }
.transport-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.transport-card__actions .btn { flex: 1 1 130px; justify-content: center; }

/* Customize Pick & Drop card — form is collapsed behind a toggle so this
   card's collapsed height matches the other two transport cards instead of
   stretching them via flex-grow on .transport-card__desc. */
.transport-card__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding: 13px 18px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-primary-dark);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.transport-card__toggle:hover { background: var(--color-border); }
.transport-card__toggle-chevron { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.25s ease; }
.transport-card--customize.is-open .transport-card__toggle-chevron { transform: rotate(180deg); }
.transport-card--customize.is-open .transport-card__toggle {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.transport-card__dropdown {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.transport-card__dropdown-inner { overflow: hidden; min-height: 0; }
.transport-card--customize.is-open .transport-card__dropdown { grid-template-rows: 1fr; }
.transport-card__dropdown-inner .transport-card__fields { margin-top: 18px; }

/* ===================== Transport Card Green Activation =====================
   Desktop: pure-CSS :hover, gated to real hover-capable pointers so a tap on
   touch devices can't trigger it. Mobile/tablet: js/main.js's
   initTransportCardActivation() toggles the same .is-active class based on
   which card is most centered in the viewport while scrolling. */
.transport-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease,
    background-color 0.4s ease, border-color 0.4s ease;
}
.transport-card__title,
.transport-card__desc,
.transport-card .field label {
  transition: color 0.35s ease;
}
.transport-card__toggle {
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.transport-card.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-6px) scale(1.015);
  box-shadow: var(--shadow-strong);
}
.transport-card.is-active .transport-card__title,
.transport-card.is-active .transport-card__desc,
.transport-card.is-active .field label {
  color: var(--color-white);
}
.transport-card.is-active .btn--outline-dark {
  border-color: var(--color-white);
  color: var(--color-white);
}
.transport-card.is-active .btn--outline-dark:hover {
  background: var(--color-white);
  color: var(--color-primary);
}
.transport-card.is-active .transport-card__toggle {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary);
}

/* Real mouse/trackpad only — touch devices rely solely on the scroll-driven
   .is-active class above, so a tap can't leave a card stuck green. */
@media (hover: hover) and (pointer: fine) {
  .transport-card:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-6px) scale(1.015);
    box-shadow: var(--shadow-strong);
  }
  .transport-card:hover .transport-card__title,
  .transport-card:hover .transport-card__desc,
  .transport-card:hover .field label {
    color: var(--color-white);
  }
  .transport-card:hover .btn--outline-dark {
    border-color: var(--color-white);
    color: var(--color-white);
  }
  .transport-card:hover .btn--outline-dark:hover {
    background: var(--color-white);
    color: var(--color-primary);
  }
  .transport-card:hover .transport-card__toggle {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-primary);
  }
}

@media (prefers-reduced-motion: reduce) {
  .transport-card,
  .transport-card__title,
  .transport-card__desc,
  .transport-card__toggle,
  .transport-card .field label {
    transition: none;
  }
  .transport-card.is-active,
  .transport-card:hover {
    transform: none;
  }
}

.btn--whatsapp { background: #25D366; color: var(--color-white); }
.btn--whatsapp:hover { background: #1EBE5D; transform: translateY(-2px); }
.btn--google { background: #4285F4; color: var(--color-white); }
.btn--google:hover { background: #3367D6; transform: translateY(-2px); }
.google-review-cta { text-align: center; margin-bottom: 32px; }
.icon-whatsapp { width: 17px; height: 17px; display: block; }
.icon-whatsapp--lg { width: 26px; height: 26px; }

.field--invalid input,
.field--invalid select { border-color: #B3261E; }
.transport-form__error {
  display: none;
  color: #B3261E;
  background: #FBEAEA;
  border: 1px solid #F3C9C9;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 14px;
}
.transport-form__error.is-visible { display: block; }

/* ===================== Forms ===================== */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.field input, .field select, .field textarea {
  width: 100%;
  min-width: 0;
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--color-white);
  color: var(--color-text);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.form-note { font-size: 0.85rem; color: var(--color-text-light); margin-top: 14px; }
.form-success {
  display: none;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-primary-light);
  color: var(--color-primary-dark);
  padding: 16px 20px;
  border-radius: 10px;
  margin-top: 18px;
  font-weight: 500;
}
.form-success.is-visible { display: block; }

/* ===================== Explore Sri Lanka (scroll-driven collage) =====================
   Licensed travel-collage graphic (transparent PNG/WebP, provided by the
   client) with a giant typographic statement, pinned for a scroll-driven
   entrance — the "graphic art moment" between the destinations grid and
   the tour categories.

   Base rules below are the COMPLETE section on their own: a normal-flow,
   fully visible, solid-dark-background block. initJourneySection() in
   main.js only ADDS the "is-pinned" modifier — and only once it has
   confirmed requestAnimationFrame/IntersectionObserver exist and the
   visitor hasn't asked for reduced motion — which is what turns this into
   the tall, sticky-pinned, scroll-scrubbed version. So: no JS, JS failure,
   or prefers-reduced-motion all fall back to this same plain section
   instead of a broken or permanently-hidden one. Solid --color-primary-dark
   (the same dark green the header/footer already use) is deliberate: a
   radial "glow" here read as a stray green box around the image, which is
   exactly what this rebuild was asked to remove. */
.journey-section {
  position: relative;
  background: #000000;
  padding: 90px 24px 70px;
}
.journey-sticky {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.journey-text {
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.1;
  color: var(--color-white);
  opacity: 1;
  transform: none;
}
.journey-text span { display: block; }

.journey-image {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  opacity: 1;
  transform: none;
}
.journey-image img { width: 100%; height: auto; display: block; margin: 0 auto; }

/* ---- Enhanced (JS-driven) pinned/scroll-scrubbed version ---- */
.journey-section.is-pinned {
  height: 150vh;
  padding: 0 24px;
}
.journey-section.is-pinned .journey-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  justify-content: center;
}
.journey-section.is-pinned .journey-text {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 100%;
  padding: 0 24px;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(80px) scale(0.9);
  pointer-events: none;
  will-change: transform, opacity;
}
.journey-section.is-pinned .journey-image {
  z-index: 1;
  opacity: 0.25;
  transform: translateY(40px) scale(0.82);
  will-change: transform, opacity;
}

@media (max-width: 640px) {
  .journey-section { padding: 60px 20px 50px; }
  /* The collage is landscape (~1.5:1); forcing the sticky stage to a full
     100vh on a narrow, tall phone screen left a lot of empty black space
     above/below it. Sizing the stage to what the content actually needs
     instead of the full viewport height fixes that at the source — the
     JS below reads this height directly, so the scroll-progress math
     stays correct without any special-casing. */
  .journey-section.is-pinned { height: 95vh; padding: 0 20px; }
  .journey-section.is-pinned .journey-sticky { height: 56vh; }
  .journey-text { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .journey-section.is-pinned .journey-text { padding: 0 20px; }
}

/* ===================== Footer ===================== */
.footer {
  position: relative;
  overflow: hidden;
  background: var(--color-primary-dark);
  color: rgba(255,255,255,0.85);
  padding: 70px 0 26px;
}
.footer > .container { position: relative; z-index: 2; }
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap: 50px;
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr; gap: 34px; } }
.footer h4 {
  color: var(--color-white);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 18px;
}
.footer .logo { color: var(--color-white); margin-bottom: 14px; }
.footer p, .footer a { color: rgba(255,255,255,0.7); font-size: 0.92rem; }
.footer ul li { margin-bottom: 10px; }
.footer ul li a:hover { color: var(--color-accent-light); }
.footer__contact-item { margin-bottom: 16px; }
.footer__contact-item span { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-accent-light); margin-bottom: 4px; }

.footer__social { display: flex; gap: 14px; margin-top: 16px; }
.footer__social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.footer__social a:hover { background: var(--color-accent); color: var(--color-primary-dark); transform: translateY(-4px) scale(1.08); box-shadow: 0 10px 20px rgba(201,162,39,0.3); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  flex-wrap: wrap;
  gap: 10px;
}

/* ===================== Footer ambient background =====================
   Injected by initFooterAmbient() in main.js (skipped entirely when the
   visitor prefers reduced motion, or if JS fails to load — the footer is
   fully usable either way). Pure CSS gradients/SVG, no images. */
.footer__ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.footer__wave {
  position: absolute; top: 0; left: 0; right: 0; height: 40px;
  background: var(--color-bg);
  clip-path: polygon(0 0, 100% 0, 100% 34%, 75% 62%, 50% 30%, 25% 66%, 0 32%);
  animation: footerWaveBreathe 9s ease-in-out infinite;
}
@keyframes footerWaveBreathe {
  0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 34%, 75% 62%, 50% 30%, 25% 66%, 0 32%); }
  50%      { clip-path: polygon(0 0, 100% 0, 100% 40%, 75% 34%, 50% 64%, 25% 32%, 0 60%); }
}

.footer__blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.28; mix-blend-mode: screen; }
.footer__blob--a { width: 420px; height: 420px; left: -120px; top: -160px; background: radial-gradient(circle, var(--color-primary-light), transparent 70%); animation: footerDriftA 24s ease-in-out infinite; }
.footer__blob--b { width: 380px; height: 380px; right: -100px; bottom: -180px; background: radial-gradient(circle, var(--color-accent), transparent 70%); opacity: 0.16; animation: footerDriftB 30s ease-in-out infinite; }
@keyframes footerDriftA { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.15); } }
@keyframes footerDriftB { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px, -30px) scale(1.1); } }

.footer__leaf { position: absolute; bottom: -40px; width: 14px; height: 14px; color: var(--color-accent-light); opacity: 0; animation: footerLeafRise linear infinite; }
.footer__leaf svg { width: 100%; height: 100%; display: block; }
.footer__leaf:nth-child(1) { left: 6%;  width: 16px; height: 16px; animation-duration: 17s; animation-delay: 0s; }
.footer__leaf:nth-child(2) { left: 18%; width: 11px; height: 11px; animation-duration: 14s; animation-delay: 2.2s; color: rgba(255,255,255,0.5); }
.footer__leaf:nth-child(3) { left: 33%; width: 14px; height: 14px; animation-duration: 20s; animation-delay: 4.4s; }
.footer__leaf:nth-child(4) { left: 48%; width: 10px; height: 10px; animation-duration: 16s; animation-delay: 1.1s; color: rgba(255,255,255,0.4); }
.footer__leaf:nth-child(5) { left: 63%; width: 17px; height: 17px; animation-duration: 22s; animation-delay: 6s; }
.footer__leaf:nth-child(6) { left: 78%; width: 12px; height: 12px; animation-duration: 15s; animation-delay: 3.3s; color: rgba(255,255,255,0.45); }
.footer__leaf:nth-child(7) { left: 90%; width: 15px; height: 15px; animation-duration: 19s; animation-delay: 5.2s; }
@keyframes footerLeafRise {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-8deg); }
  8%   { opacity: 0.8; }
  50%  { transform: translate(22px, -220px) rotate(160deg); }
  92%  { opacity: 0.55; }
  100% { opacity: 0; transform: translate(-14px, -440px) rotate(300deg); }
}

/* Shimmering accent word inside the footer tagline */
.footer__shimmer {
  background: linear-gradient(90deg, var(--color-accent-light) 0%, #fff6d8 30%, var(--color-accent-light) 50%, var(--color-accent-light) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: footerShimmer 5s linear infinite;
}
@keyframes footerShimmer { to { background-position: -220% center; } }

/* Column reveal-on-scroll — class added only by JS once IntersectionObserver
   confirms motion is safe to use; without JS the columns are simply visible
   (no opacity:0 default, so nothing depends on the script running). */
.footer__grid.js-reveal > div { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.footer__grid.js-reveal > div.is-visible { opacity: 1; transform: translateY(0); }
.footer__grid.js-reveal > div:nth-child(2) { transition-delay: 0.1s; }
.footer__grid.js-reveal > div:nth-child(3) { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .footer__wave, .footer__blob, .footer__leaf, .footer__shimmer { animation: none !important; }
  .footer__grid.js-reveal > div { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===================== Floating buttons ===================== */
.floating-actions {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.floating-btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  box-shadow: var(--shadow-strong);
  transition: transform 0.2s ease;
}
.floating-btn:hover { transform: scale(1.08); }
.floating-btn--whatsapp { background: #25D366; color: white; }
.floating-btn--ai {
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-size: 1.1rem;
}

/* ===================== Page header (inner pages) ===================== */
.page-header {
  padding: 160px 0 70px;
  background: var(--color-bg-alt);
  text-align: center;
}
.page-header .eyebrow { display: block; }
.breadcrumb { font-size: 0.85rem; color: var(--color-text-light); margin-top: 14px; }
.breadcrumb a { color: var(--color-primary); }

/* ===================== Filter bar (tours page) ===================== */
.filter-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.filter-pill {
  padding: 10px 20px;
  border-radius: 100px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.filter-pill.is-active, .filter-pill:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* ===================== Chip list (destinations covered, tags) ===================== */
.chip-list { display: flex; gap: 12px; flex-wrap: wrap; }
.chip {
  padding: 9px 18px;
  border-radius: 100px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
}
a.chip { transition: all 0.2s ease; }
a.chip:hover { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }

/* ===================== Utility ===================== */
.text-center { text-align: center; }
.mt-40 { margin-top: 40px; }
.hidden { display: none !important; }

/* ===================== Reviews (Traveller Experiences) ===================== */
.form-error {
  display: none;
  color: #B3261E;
  background: #FBEAEA;
  border: 1px solid #F3C9C9;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-top: 14px;
}
.form-error.is-visible { display: block; }

.star-rating { display: flex; gap: 6px; color: var(--color-accent); }
.star-rating--input button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-border);
  padding: 4px;
  transition: color 0.15s ease, transform 0.15s ease;
}
.star-rating--input button.is-active,
.star-rating--input button.is-hover { color: var(--color-accent); transform: scale(1.08); }

.locked-field p {
  padding: 13px 16px;
  border-radius: 10px;
  background: var(--color-bg-alt);
  color: var(--color-text-light);
  font-weight: 500;
}

.char-counter { font-size: 0.78rem; color: var(--color-text-light); text-align: right; margin-top: 4px; }

.photo-upload-preview { margin-top: 14px; display: flex; align-items: center; gap: 16px; }
.photo-upload-preview img {
  width: 90px; height: 90px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--color-text);
  cursor: pointer;
}
.checkbox-label input { margin-top: 3px; }

.radio-pill-group { display: flex; gap: 12px; }
.radio-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  border-radius: 100px;
  border: 1px solid var(--color-border);
  cursor: pointer;
  font-size: 0.9rem;
}
.radio-pill:has(input:checked) { border-color: var(--color-primary); background: var(--color-bg-alt); }

.reviews-empty-state {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  padding: 40px 20px;
}
.reviews-empty-state h2 { margin-bottom: 12px; }
.reviews-empty-state p { color: var(--color-text-light); }

.testimonial-card__photo {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 14px;
}
.testimonial-card__badge {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-bg-alt);
  padding: 4px 12px;
  border-radius: 100px;
}
.testimonial-card__service {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--color-text-light);
}
.btn--sm { padding: 8px 16px; font-size: 0.82rem; }

/* ===================== Admin ===================== */
.admin-card-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  padding: 24px;
}
.admin-card {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  padding: 40px;
  max-width: 400px;
  width: 100%;
}
.admin-card h1 { margin-top: 20px; font-size: 1.6rem; }

.admin-list { display: flex; flex-direction: column; gap: 16px; }
.admin-list__row {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.admin-list__photo {
  width: 64px; height: 64px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.admin-list__body { flex: 1 1 300px; }
.admin-list__stars { color: var(--color-accent); margin-bottom: 6px; letter-spacing: 1px; }
.admin-list__actions { display: flex; flex-wrap: wrap; gap: 8px; align-self: center; }

.status-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  margin-left: 8px;
  text-transform: uppercase;
  vertical-align: middle;
}
.status-badge--pending { background: #FDF3D8; color: #92700F; }
.status-badge--approved { background: #E1F0E5; color: var(--color-primary); }
.status-badge--rejected { background: #FBEAEA; color: #B3261E; }
.status-badge--featured { background: var(--color-accent-light); color: var(--color-primary-dark); }

@media (max-width: 700px) {
  .admin-list__row { flex-direction: column; }
  .admin-list__actions { width: 100%; }
  .admin-list__actions .btn { flex: 1 1 auto; }
}