/* ================================================================
   BRK TRAVEL AND TOURS — style.css
   Brand: Manrope ExtraBold (headings) · Inter Regular (body)
   ================================================================ */

/* ----------------------------------------------------------------
   0. DESIGN TOKENS  (CSS Custom Properties)
   ---------------------------------------------------------------- */
:root {
  /* — Primary Palette — */
  --clr-primary:       #0F31F2;   /* primary blue             */
  --clr-primary-mid:   #081A92;   /* dark blue                */
  --clr-cyan:          #46C4FF;   /* accent blue              */
  --clr-gold:          #FFC107;   /* accent yellow            */
  --clr-navy:          #0A0F19;   /* heading / footer dark    */

  /* — Secondary / Neutrals — */
  --clr-bg-cyan:       #E0F7FA;
  --clr-bg-blue:       #F1F6FF;
  --clr-bg-off-white:  #FDFDFD;
  --clr-gray-mid:      #64748B;
  --clr-gray-dark:     #334155;
  --clr-white:         #FFFFFF;

  /* — Gradients — */
  --grad-primary:  linear-gradient(135deg, #0F31F2 0%, #46C4FF 100%);
  --grad-hero:     linear-gradient(135deg, #081A92 0%, #0F31F2 50%, #46C4FF 100%);

  /* — Typography — */
  --font-heading: 'Manrope', sans-serif;
  --font-body:    'Inter',   sans-serif;

  /* — Spacing scale — */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* — Layout — */
  --container-max: 1200px;
  --container-pad: 1.5rem;
  --header-h:      76px;

  /* — Radii — */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-full: 9999px;

  /* — Shadows — */
  --shadow-sm: 0 1px 4px rgba(15, 49, 242, 0.07);
  --shadow-md: 0 4px 20px rgba(15, 49, 242, 0.13);
  --shadow-lg: 0 8px 40px rgba(15, 49, 242, 0.20);

  /* — Transitions — */
  --ease-fast: 0.15s ease;
  --ease-base: 0.3s ease;
  --ease-slow: 0.55s ease;
}


/* ----------------------------------------------------------------
   1. RESET + BASE
   ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Ensure HTML hidden attribute is always respected, even when CSS sets display */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--clr-gray-dark);
  background: var(--clr-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* padding-top removed: header is now transparent/overlaid on hero */
}

/* Page-load fade-in trigger — class added by inline script in each page once fonts are ready */
body.page-loaded {
  opacity: 1;
}

img, svg { display: block; max-width: 100%; }
a        { text-decoration: none; color: inherit; }
ul       { list-style: none; }
button   { cursor: pointer; border: none; background: none; font-family: inherit; }


/* ----------------------------------------------------------------
   2. UTILITY — CONTAINER
   ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}


/* ================================================================
   3. ANIMATION LIBRARY
   (Base classes + keyframes — JS adds .is-visible to trigger)
   ================================================================ */

/* -- Keyframes -------------------------------------------------- */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes popUp {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: scale(1);    }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0);     }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0);    }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 49, 242, 0.35); }
  50%       { box-shadow: 0 0 0 10px rgba(15, 49, 242, 0);  }
}

/* -- Scroll-triggered fade + rise ------------------------------- */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity  0.65s ease,
    transform 0.65s ease;
}
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -- Scroll-triggered pop / scale ------------------------------- */
.pop-up {
  opacity: 0;
  transform: scale(0.88);
  transition:
    opacity  0.5s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pop-up.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* -- Stagger helpers (add data-delay="1–6" to child elements) --- */
.fade-in-up[data-delay="1"],
.pop-up[data-delay="1"]     { transition-delay: 0.10s; }
.fade-in-up[data-delay="2"],
.pop-up[data-delay="2"]     { transition-delay: 0.20s; }
.fade-in-up[data-delay="3"],
.pop-up[data-delay="3"]     { transition-delay: 0.30s; }
.fade-in-up[data-delay="4"],
.pop-up[data-delay="4"]     { transition-delay: 0.40s; }
.fade-in-up[data-delay="5"],
.pop-up[data-delay="5"]     { transition-delay: 0.50s; }
.fade-in-up[data-delay="6"],
.pop-up[data-delay="6"]     { transition-delay: 0.60s; }

/* -- Always-on animation (no JS needed) ------------------------- */
.anim-fade-in-up  { animation: fadeInUp   0.65s ease both; }
.anim-pop-up      { animation: popUp      0.50s cubic-bezier(0.34,1.56,0.64,1) both; }
.anim-fade-in     { animation: fadeIn     0.50s ease both; }
.anim-slide-left  { animation: slideInLeft  0.55s ease both; }
.anim-slide-right { animation: slideInRight 0.55s ease both; }


/* ================================================================
   4. GLOBAL BUTTONS
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.65rem 1.4rem;
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.015em;
  transition: all var(--ease-base);
  white-space: nowrap;
  cursor: pointer;
}

/* Primary — solid blue */
.btn-primary {
  background: var(--clr-primary);
  color: var(--clr-white);
  border: 2px solid var(--clr-primary);
}
.btn-primary:hover {
  background: var(--clr-primary-mid);
  border-color: var(--clr-primary-mid);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 49, 242, 0.35);
}
.btn-primary:active {
  background: var(--clr-primary-mid);
  border-color: var(--clr-primary-mid);
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(15, 49, 242, 0.30);
}
.btn-primary:disabled,
.btn-primary[disabled] {
  background: rgba(15, 49, 242, 0.35);
  border-color: rgba(15, 49, 242, 0.35);
  color: rgba(255, 255, 255, 0.70);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Secondary — outlined, light-fill hover */
.btn-secondary {
  background: transparent;
  color: var(--clr-primary);
  border: 2px solid var(--clr-primary);
}
.btn-secondary:hover {
  background: rgba(15, 49, 242, 0.07);
  color: var(--clr-primary);
  border-color: var(--clr-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 49, 242, 0.18);
}
.btn-secondary:active {
  background: rgba(15, 49, 242, 0.13);
  transform: translateY(0);
  box-shadow: none;
}
.btn-secondary:disabled,
.btn-secondary[disabled] {
  color: rgba(15, 49, 242, 0.40);
  border-color: rgba(15, 49, 242, 0.30);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Accent / CTA — solid yellow */
.btn-accent {
  background: var(--clr-gold);
  color: var(--clr-navy);
  border: 2px solid var(--clr-gold);
  font-weight: 800;
}
.btn-accent:hover {
  background: #E0AB00;
  border-color: #E0AB00;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 193, 7, 0.45);
}
.btn-accent:active {
  background: #C49A00;
  border-color: #C49A00;
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.35);
}
.btn-accent:disabled,
.btn-accent[disabled] {
  background: rgba(255, 193, 7, 0.45);
  border-color: rgba(255, 193, 7, 0.45);
  color: rgba(10, 15, 25, 0.50);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Text button */
.btn-text {
  background: transparent;
  color: var(--clr-primary);
  border: 2px solid transparent;
  padding-inline: var(--sp-4);
}
.btn-text:hover {
  color: var(--clr-primary-mid);
  gap: var(--sp-3);
}


/* ================================================================
   5. SITE HEADER — single pill-shaped glass container
   ================================================================ */
/* Positioning shell only — stays invisible so the hero/page shows
   through the margins around the pill; all visible styling lives on
   .header-inner (the pill itself). */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 900;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding-inline: 1rem;
  background: transparent;
}

/* Inner flex row — the ONE pill containing logo, nav and phone */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  height: 64px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.75rem;
  border-radius: var(--r-full);
  background: var(--clr-white);
  border: 1px solid rgba(15, 49, 242, 0.08);
  box-shadow: 0 4px 24px rgba(8, 22, 60, 0.16);
}

/* ── Logo ─────────────────────────────────────────────────────── */
.logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.logo-img {
  height: 90px;
  width: auto;
  object-fit: contain;
}

/* Text fallback (shown via JS onerror) */
.logo-text-fallback {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo-brk {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--clr-primary);
  letter-spacing: -0.02em;
}

.logo-sub {
  font-family: var(--font-heading);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-gray-mid);
}

/* ── Navigation ───────────────────────────────────────────────── */
.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.nav-link {
  position: relative;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--clr-navy);
  border-radius: var(--r-sm);
  transition: color var(--ease-fast);
}

/* Animated gold underline — active/hover indicator */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: calc(100% - 1.8rem);
  height: 2.5px;
  background: var(--clr-gold);
  border-radius: var(--r-full);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform var(--ease-base);
}

.nav-link:hover,
.nav-link.active {
  color: var(--clr-primary);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: translateX(-50%) scaleX(1);
}

/* ── Desktop phone CTA ────────────────────────────────────────── */
.header-cta {
  flex-shrink: 0;
}

.btn-phone {
  font-size: 0.875rem;
  padding: 0.6rem 1.25rem;
  background: #25D366 !important;
  border: 1.5px solid transparent !important;
  color: var(--clr-white) !important;
  transition:
    background   var(--ease-base),
    border-color var(--ease-base),
    box-shadow   var(--ease-base),
    transform    var(--ease-base);
}
.btn-phone:hover {
  background: var(--clr-primary) !important;
  border-color: transparent !important;
  color: var(--clr-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 49, 242, 0.30);
}

/* ── Mobile-only CTA (hidden on desktop) ─────────────────────── */
.mobile-nav-cta {
  display: none;
}

/* ================================================================
   LANGUAGE SELECTOR
   Two instances per page: .lang-switch--desktop (inside the header
   pill, next to the phone button) and .lang-switch--mobile (inside
   the nav drawer). Only one is ever visible at a time, following the
   exact same breakpoint pattern already used for .header-cta /
   .mobile-nav-cta above — added, not redesigned.

   TEMPORARILY HIDDEN (site paused on English-only while other work
   is in progress) — this single rule hides both the desktop and
   mobile variants at every breakpoint via !important, overriding the
   @media block below that would otherwise show .lang-switch--mobile.
   Nothing else in this file, the HTML, or translations.js was
   touched — the whole 3-language system stays intact underneath.
   Delete this rule to bring the selector back. ──────────────────── */
.lang-switch {
  display: none !important;
}

.lang-switch {
  position: relative;
  flex-shrink: 0;
}

.lang-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-full);
  border: 1.5px solid rgba(15, 49, 242, 0.14);
  background: var(--clr-white);
  color: var(--clr-navy);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ease-fast), border-color var(--ease-fast);
}
.lang-switch-btn:hover {
  background: var(--clr-bg-blue);
  border-color: rgba(15, 49, 242, 0.28);
}

.lang-switch-caret {
  flex-shrink: 0;
  transition: transform var(--ease-fast);
}
.lang-switch.is-open .lang-switch-caret {
  transform: rotate(180deg);
}

.lang-switch-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 172px;
  background: var(--clr-white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(15, 49, 242, 0.08);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--ease-fast), transform var(--ease-fast);
  z-index: 950;
}
.lang-switch.is-open .lang-switch-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.lang-switch-option {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--clr-gray-dark);
  text-align: left;
  transition: background var(--ease-fast);
}
.lang-switch-option:hover {
  background: var(--clr-bg-blue);
}
.lang-switch-option.is-active {
  color: var(--clr-primary);
  font-weight: 700;
}

/* Mobile variant lives inside the nav drawer — full-width accordion
   row instead of a floating dropdown, matching the drawer's own
   stacked-block layout (same treatment as .mobile-nav-cta below it). */
.lang-switch--mobile { display: none; }

@media (max-width: 768px) {
  .lang-switch--desktop { display: none; }

  .lang-switch--mobile {
    display: block;
    width: 100%;
    margin-top: var(--sp-4);
  }
  .lang-switch--mobile .lang-switch-btn {
    width: 100%;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    font-size: 0.95rem;
  }
  .lang-switch--mobile .lang-switch-menu {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: none;
    box-shadow: none;
    border: 1px solid rgba(15, 49, 242, 0.10);
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0 6px;
    transition: max-height var(--ease-base), padding var(--ease-base), margin-top var(--ease-base);
  }
  .lang-switch--mobile.is-open .lang-switch-menu {
    pointer-events: all;
    max-height: 220px;
    padding: 6px;
    margin-top: 6px;
  }
}

/* ── Hamburger button ─────────────────────────────────────────── */
.hamburger {
  display: none;            /* hidden on desktop */
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  transition: background var(--ease-fast);
}

.hamburger:hover { background: var(--clr-bg-off-white); }

.bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: var(--r-full);
  background: var(--clr-navy);
  transition:
    transform    var(--ease-base),
    opacity      var(--ease-base),
    width        var(--ease-base);
  transform-origin: center;
}

/* Burger → X */
.hamburger.is-active .bar:nth-child(1) { transform: translateY(7px) rotate(45deg);  }
.hamburger.is-active .bar:nth-child(2) { opacity: 0; width: 0; }
.hamburger.is-active .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ================================================================
   6. CONTENT PLACEHOLDER (remove when adding real sections)
   ================================================================ */
.content-placeholder {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-bg-off-white);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--clr-gray-mid);
  font-size: 1.1rem;
}


/* ================================================================
   7. SITE FOOTER
   ================================================================ */
.site-footer {
  /* var(--clr-navy) (#0A0F19) read as near-black rather than blue, so
     this uses the site's own dedicated "dark blue" token instead
     (--clr-primary-mid, #081A92) — already used elsewhere in this file
     (e.g. the social-icon hover state below), not a new/guessed color. */
  background: var(--clr-primary-mid);
  color: var(--clr-white);
}

/* Gradient accent bar at the very top of the footer */
.footer-accent-bar {
  height: 4px;
  background: var(--grad-primary);
}

/* ── Footer grid ─────────────────────────────────────────────── */
.footer-grid {
  display: grid;
  grid-template-columns: 1.9fr 1fr 1.1fr 1.3fr;
  gap: var(--sp-10);
  padding-block: var(--sp-10) var(--sp-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Brand column ─────────────────────────────────────────────── */
/* The logo artwork is drawn in navy/blue for use on light backgrounds
   (see image/BRK logo website svg.svg), so on the dark footer it needs
   a light plate behind it to stay visible — a CSS background only,
   the logo file itself is untouched. */
.footer-logo-link {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--sp-4);
  background: var(--clr-white);
  border-radius: var(--r-md);
  padding: 0.5rem 0.85rem;
}

.footer-logo-img {
  height: 110px;
  width: auto;
  object-fit: contain;
}

/* White text fallback for footer logo (footer background is dark navy) */
.footer-logo-fallback .logo-brk { color: var(--clr-white); }
.footer-logo-fallback .logo-sub { color: rgba(255,255,255,0.55); }

/* Company license/registration number — sits outside the white logo
   container, below it and above the tagline. Static text, no relation
   to translations.js. */
.footer-license {
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--clr-white);
  margin: 0 0 var(--sp-2);
}

.footer-tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--clr-gold);
  margin-bottom: var(--sp-4);
}

.footer-desc {
  font-size: 0.86rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--sp-6);
}

/* ── Social icons — sits below the "Get In Touch" contact list ──── */
.social-links {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.1);
  color: var(--clr-white);
  transition:
    background var(--ease-base),
    color      var(--ease-base),
    transform  var(--ease-base);
}

.social-link:hover {
  /* The footer background is now --clr-primary-mid itself, so the hover
     state uses the brighter --clr-primary instead to stay visible. */
  background: var(--clr-primary);
  color: var(--clr-white);
  transform: translateY(-3px);
}

/* ── Footer column generic ────────────────────────────────────── */
.footer-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--clr-white);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-3);
  position: relative;
}

/* Gold underline accent */
.footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2.5px;
  background: var(--clr-gold);
  border-radius: var(--r-full);
}

/* ── Footer link lists ────────────────────────────────────────── */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer-links a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.85);
  transition:
    color        var(--ease-fast),
    padding-left var(--ease-fast);
  display: inline-block;
}

.footer-links a:hover {
  color: var(--clr-white);
  padding-left: 5px;
}

.footer-link-cta {
  color: var(--clr-gold) !important;
  font-weight: 600;
}

/* ── Footer contact list ──────────────────────────────────────── */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
}

.footer-contact svg { flex-shrink: 0; margin-top: 2px; }

.footer-contact a {
  color: rgba(255,255,255,0.85);
  transition: color var(--ease-fast);
}

.footer-contact a:hover { color: var(--clr-white); }

/* Wrapper for multiple phone numbers under the single footer phone
   icon — stacks them vertically, no icon duplication. Inherits color/
   hover from .footer-contact a above; adds no other styling. */
.footer-phone-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Footer bottom bar ────────────────────────────────────────── */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
}

.copyright {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
}

.footer-bottom-links {
  display: flex;
  gap: var(--sp-6);
}

.footer-bottom-links a {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  transition: color var(--ease-fast);
}

.footer-bottom-links a:hover { color: rgba(255,255,255,0.8); }


/* ================================================================
   8. RESPONSIVE BREAKPOINTS
   ================================================================ */

/* ── Tablet: ≤ 1024px ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }

  .footer-brand {
    grid-column: 1 / -1;   /* brand spans full width */
  }
}

/* ── Mobile: ≤ 768px ──────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --header-h:      68px;
    --container-pad: 1.25rem;
  }

  /* Compact pill on mobile — logo + hamburger only, nav moves to the drawer */
  .site-header  { padding-inline: 0.75rem; }
  .header-inner { height: 52px; padding-inline: 1.1rem; gap: var(--sp-4); }

  /* Show hamburger, hide desktop CTA */
  .hamburger    { display: flex; }
  .header-cta   { display: none; }

  /* Reset 21:9 aspect-ratio on all hero sections for mobile */
  .hero,
  .pkg-hero,
  .svc-hero,
  .ctc-hero {
    aspect-ratio: unset;
    min-height: 480px;
  }

  /* Home hero needs enough height for eyebrow + heading + para + 2 stacked buttons.
     !important is required here: a later, unconditional `.hero { min-height: 440px;
     aspect-ratio: 2560/815; }` base rule has equal selector specificity and sits
     further down the file, so without it that base rule silently wins the cascade
     on every screen size and this override never actually applies. */
  .hero {
    aspect-ratio: unset !important;
    min-height: 500px !important;
  }

  /* Trust card is a desktop social-proof widget — hide on mobile */
  .hero-trust-wrap { display: none; }

  /* Cancel hero entry animations on mobile — buttons/text must be
     immediately visible; the anim-fade-in-up 'both' fill mode holds
     opacity:0 during its delay, hiding the CTAs on page load */
  .hero-content .anim-slide-left,
  .hero-content .anim-fade-in,
  .hero-content .anim-fade-in-up {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Mobile nav drawer */
  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    /* Use explicit height instead of bottom:0 — backdrop-filter on the
       parent header creates a new containing block, making bottom:0
       resolve to the header's bottom edge (68px) rather than the viewport */
    height: calc(100vh - var(--header-h));
    z-index: 899;
    background: var(--clr-white);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: var(--sp-4) var(--container-pad) var(--sp-8);
    overflow-y: auto;

    /* Hidden state */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition:
      opacity   var(--ease-base),
      transform var(--ease-base);
  }

  .main-nav.is-open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--clr-bg-off-white);
  }

  .nav-link {
    display: block;
    padding: var(--sp-4) 0;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--clr-bg-off-white);
    border-radius: 0;
  }

  .nav-link::after { display: none; }

  /* Show mobile CTA inside drawer */
  .mobile-nav-cta {
    display: inline-flex;
    margin-top: var(--sp-8);
    width: 100%;
    justify-content: center;
    padding: 0.85rem;
    font-size: 1rem;
  }

  /* Footer single column */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
    padding-block: var(--sp-8) var(--sp-6);
  }

  .footer-brand { grid-column: auto; }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-3);
  }

  .footer-bottom-links { justify-content: center; }
}

/* ── Small mobile: ≤ 480px ────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --container-pad: 1rem;
  }

  .logo-img { height: 72px; }

  .footer-grid { gap: var(--sp-8); }
}


/* ================================================================
   9. SHARED SECTION UTILITIES (homepage inner sections)
   ================================================================ */
.section-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-primary);
  margin-bottom: var(--sp-2);
}

.section-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.55rem, 3.5vw, 2.15rem);
  color: var(--clr-navy);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.text-accent { color: var(--clr-primary); }

.heading-plane {
  color: var(--clr-primary);
  flex-shrink: 0;
}

.section-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-10);
  flex-wrap: wrap;
}

.btn-sm {
  font-size: 0.85rem;
  padding: 0.55rem 1.1rem;
}


/* ================================================================
   9a. HERO SECTION
   ================================================================ */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2560 / 815;
  max-height: 620px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Background — gradient fallback shown until image loads */
.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #081A92 0%, #0F31F2 50%, #46C4FF 100%);
  z-index: 0;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Dark-left gradient overlay for text legibility */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    rgba(8, 22, 60, 0.82) 0%,
    rgba(8, 22, 60, 0.58) 48%,
    rgba(0, 40, 90, 0.10) 100%
  );
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  padding-block: calc(var(--header-h) + 1rem) 2rem;
}

/* ── Hero text (left) ───────────────────────────────────────────── */
.hero-content { max-width: 560px; }

.hero-eyebrow {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--clr-gold);
  margin-bottom: 0.5rem;
}

.hero-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  line-height: 1.1;
  color: var(--clr-white);
  margin-bottom: 0.75rem;
}

.hero-accent { color: var(--clr-gold); }

.hero-desc {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.82);
  max-width: 440px;
  margin-bottom: 1.25rem;
}

.hero-ctas {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* ── Primary hero button — shimmer sweep (creative animation) ────── */
@keyframes shimmer {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  100% { transform: translateX(260%)  skewX(-18deg); }
}

.hero-btn-primary {
  font-size: 1rem;
  padding: 0.82rem 1.85rem;
  position: relative;
  overflow: hidden;
}

.hero-btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 38%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.32) 50%, transparent 100%);
  transform: translateX(-130%) skewX(-18deg);
  animation: shimmer 2.8s ease-in-out 1.8s infinite;
}

/* ── Ghost / outline hero button ─────────────────────────────────── */
.hero-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.82rem 1.85rem;
  border: 2px solid rgba(255,255,255,0.60);
  color: var(--clr-white);
  border-radius: var(--r-full);
  white-space: nowrap;
  transition: all var(--ease-base);
}

.hero-btn-ghost:hover {
  background: rgba(255,255,255,0.14);
  border-color: var(--clr-white);
  transform: translateY(-2px);
}

/* ── WhatsApp button wrap ─────────────────────────────────────────── */
.wa-btn-wrap {
  position: relative;
  display: inline-flex;
}

/* ── Floating WhatsApp button (services page) ─────────────────── */
.wa-float-wrap {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 990;
}

.wa-float-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45);
  transition: transform var(--ease-base), box-shadow var(--ease-base);
}
.wa-float-btn:hover {
  transform: scale(1.10);
  box-shadow: 0 10px 32px rgba(37, 211, 102, 0.55);
}

/* Larger orbit radius for the bigger floating button */
.wa-float-wrap .wa-orbit-plane {
  animation-name: orbitPlaneFloat;
  color: var(--clr-primary);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.30));
}

@keyframes orbitPlaneFloat {
  0%   { transform: rotate(0deg)   translateX(38px) rotate(0deg);    }
  100% { transform: rotate(360deg) translateX(38px) rotate(-360deg); }
}

@media (max-width: 480px) {
  .wa-float-wrap { bottom: 18px; right: 18px; }
  .wa-float-btn  { width: 50px; height: 50px; }
}

/* ── Trust card (right) ────────────────────────────────────────── */
.hero-trust-wrap { flex-shrink: 0; }

.trust-card {
  background: var(--clr-white);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-8);
  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
  text-align: center;
  min-width: 210px;
}

.trust-avatars {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-3);
}

.trust-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid var(--clr-white);
  display: block;
  flex-shrink: 0;
}
.trust-av + .trust-av { margin-left: -10px; }

.av1 { background: linear-gradient(135deg, #FF8C42, #FFB347); }
.av2 { background: linear-gradient(135deg, #6C63FF, #A78BFA); }
.av3 { background: linear-gradient(135deg, #10B981, #34D399); }

.trust-label {
  font-size: 0.74rem;
  color: var(--clr-gray-mid);
  font-weight: 500;
  margin-bottom: var(--sp-2);
}

.trust-score-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  margin-bottom: var(--sp-1);
}

.trust-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.1rem;
  color: var(--clr-navy);
  line-height: 1;
}

.trust-denom {
  font-size: 1rem;
  color: var(--clr-gray-mid);
  font-weight: 600;
}

.trust-score-row svg { margin-left: 4px; align-self: center; }

.trust-reviews {
  font-size: 0.76rem;
  color: var(--clr-gray-mid);
  font-weight: 500;
}

/* ── Hero wave divider ─────────────────────────────────────────── */
.hero-wave {
  position: relative;
  z-index: 2;
  line-height: 0;
  margin-top: auto;
}
.hero-wave svg { width: 100%; display: block; }


/* ================================================================
   9b. DESTINATIONS SECTION
   ================================================================ */
.destinations {
  position: relative;
  isolation: isolate;
  background: var(--clr-bg-off-white);
  padding-top: 1.5rem;
  padding-bottom: var(--sp-20);
}

/* 5-column card grid */
.dest-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-5);
}

.dest-card {
  background: var(--clr-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform   var(--ease-base),
    box-shadow  var(--ease-base);
}

.dest-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

/* Image wrapper — portrait aspect ratio */
.dest-img-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-cyan) 100%);
}

.dest-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.68s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dest-card:hover .dest-img { transform: scale(1.09); }

/* Gradient fallback when image fails */
.dest-img-wrap.img-fallback {
  background: linear-gradient(135deg, var(--clr-primary-mid) 0%, var(--clr-cyan) 100%);
}

/* Persistent bottom gradient for text contrast */
.dest-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,22,60,0.60) 0%, transparent 55%);
  opacity: 0.5;
  transition: opacity var(--ease-base);
  pointer-events: none;
}
.dest-card:hover .dest-overlay { opacity: 0.75; }

/* Card info strip */
.dest-info {
  padding: var(--sp-4) var(--sp-4);
}

.dest-meta { margin-bottom: var(--sp-3); }

.dest-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--clr-navy);
  line-height: 1.3;
  margin-bottom: 2px;
}

.dest-tours {
  font-size: 0.75rem;
  color: var(--clr-gray-mid);
  font-weight: 500;
}

.dest-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--clr-bg-off-white);
}

.dest-from {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-gray-mid);
  font-weight: 600;
  line-height: 1;
  margin-bottom: 2px;
}

.dest-price {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--clr-primary);
}

.dest-arrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--clr-bg-off-white);
  color: var(--clr-primary);
  flex-shrink: 0;
  transition:
    background  var(--ease-base),
    color       var(--ease-base),
    transform   var(--ease-base);
}

.dest-arrow-btn:hover,
.dest-card:hover .dest-arrow-btn {
  background: var(--clr-primary);
  color: var(--clr-white);
  transform: translateX(3px);
}


/* ================================================================
   9c. WHY TRAVEL WITH BRK SECTION
   ================================================================ */
.why-brk {
  background: var(--clr-white);
  padding-block: var(--sp-20);
}

.why-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

/* ── Text column ──────────────────────────────────────────────── */
.why-text .section-heading { margin-bottom: var(--sp-3); }

.why-sub {
  font-size: 0.975rem;
  color: var(--clr-gray-mid);
  line-height: 1.7;
  margin-bottom: var(--sp-8);
}

.why-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-10);
}

.why-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--clr-gray-dark);
}

.why-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--clr-primary);
  position: relative;
}

/* CSS checkmark */
.why-check::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: 2.5px solid var(--clr-white);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* Stats 2×2 grid */
.why-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.stat-box {
  background: var(--clr-bg-off-white);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  border-left: 4px solid var(--clr-primary);
  transition:
    box-shadow  var(--ease-base),
    transform   var(--ease-base);
}

.stat-box:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.stat-icon {
  display: flex;
  color: var(--clr-primary);
  margin-bottom: var(--sp-1);
}

/* Card title — was a large statistic figure, now a short value/service
   name, so it's sized to read as a compact heading instead of a big number */
.stat-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--clr-primary);
  line-height: 1.3;
}

.stat-lbl {
  font-size: 0.78rem;
  color: var(--clr-gray-mid);
  font-weight: 500;
  line-height: 1.5;
}

/* ── Visual column ─────────────────────────────────────────────── */
.why-visual { position: relative; }

.why-img-frame {
  position: relative;
  border-radius: var(--r-lg);
}

.why-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  display: block;
  box-shadow: var(--shadow-lg);
}

/* Placeholder shape when image is missing */
.why-img-frame.why-img-ph {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--clr-bg-blue) 0%, var(--clr-bg-cyan) 100%);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

/* Floating plane badge — subtle float animation */
@keyframes floatBadge {
  0%, 100% { transform: translateY(0)    rotate(-6deg); }
  50%       { transform: translateY(-14px) rotate(-6deg); }
}

.why-badge {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--clr-white);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  animation: floatBadge 3.6s ease-in-out infinite;
}

/* Dot grid decoration */
.why-dots {
  position: absolute;
  bottom: -22px;
  left: -22px;
  width: 110px;
  height: 110px;
  background-image: radial-gradient(circle, var(--clr-primary) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: 0.16;
  border-radius: var(--r-md);
  z-index: 0;
  pointer-events: none;
}


/* ================================================================
   10. RESPONSIVE — HOMEPAGE INNER SECTIONS
   ================================================================ */

/* ── Tablet landscape ≤ 1100px ─────────────────────────────────── */
@media (max-width: 1100px) {
  .dest-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .why-inner { gap: var(--sp-10); }
}

/* ── Tablet portrait ≤ 900px ───────────────────────────────────── */
@media (max-width: 900px) {
  .hero-inner {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-block: calc(var(--header-h) + 1.5rem) 3rem;
    gap: var(--sp-4);
  }

  /* Compact inline trust card on smaller hero */
  .trust-card {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    text-align: left;
    min-width: 0;
  }
  .trust-avatars { margin-bottom: 0; }
  .trust-label   { display: none; }
  .trust-score-row { margin-bottom: 0; }

  /* Why section stacks */
  .why-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }
  .why-visual { order: -1; }

  .why-img,
  .why-img-frame.why-img-ph {
    aspect-ratio: 16 / 9;
  }
}

/* ── Mobile ≤ 768px ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .destinations,
  .why-brk { padding-block: var(--sp-16); }

  /* Hero-to-section gap only — .why-brk's spacing is untouched */
  .destinations { padding-top: 1.5rem; }

  .section-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  .dest-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }

  /* 5th card spans full row */
  .dest-card:last-child { grid-column: 1 / -1; }

  .dest-img-wrap { aspect-ratio: 4 / 3; }

  /* The destination photos carry their country name baked into the top of
     the image. The fixed header sits above everything with no reserved
     clearance, so a scroll that comes to rest with a card near the top of
     the viewport leaves that title hidden behind the header — for whichever
     card the scroll happens to stop on, not just the first. scroll-snap
     (proximity, not mandatory, so it never fights a scroll that's clearly
     headed elsewhere) pulls a settling scroll to rest with each card's own
     scroll-margin-top clearing the header, for every card. */
  html { scroll-snap-type: y proximity; }
  .dest-card {
    scroll-snap-align: start;
    scroll-margin-top: calc(var(--header-h) + 16px);
  }
}

/* ── Small mobile ≤ 480px ───────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-desc { margin-bottom: var(--sp-5); }
  .hero-ctas { flex-direction: column; }

  .hero-btn-primary,
  .hero-btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .dest-grid { grid-template-columns: 1fr; }
  .dest-card:last-child { grid-column: auto; }

  .why-stats { grid-template-columns: 1fr; }
}


/* ================================================================
   PACKAGES PAGE
   Paste below all existing styles — do NOT modify anything above.
   ================================================================ */


/* ----------------------------------------------------------------
   PKG HERO
   ---------------------------------------------------------------- */
.pkg-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2560 / 815;
  max-height: 620px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(135deg, #081A92 0%, #0F31F2 55%, #46C4FF 100%);
}

.pkg-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pkg-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  background-size: cover;
  background-position: center;
}

.pkg-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    rgba(8, 22, 60, 0.80) 0%,
    rgba(8, 22, 60, 0.55) 50%,
    rgba(0, 40, 90, 0.08) 100%
  );
  z-index: 1;
}

.pkg-hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: calc(var(--header-h) + 1rem) 2rem;
  gap: var(--sp-8);
}

/* ── Eyebrow ────────────────────────────────────────────────────── */
.pkg-hero-eyebrow {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: 1rem;
  color: var(--clr-gold);
  margin-bottom: var(--sp-2);
}

/* ── Heading ────────────────────────────────────────────────────── */
.pkg-hero-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.08;
  color: var(--clr-white);
  margin-bottom: var(--sp-4);
}

.pkg-hero-accent {
  font-style: italic;
  color: var(--clr-cyan);
  display: block;
}

.pkg-hero-line {
  display: block;
  width: 56px;
  height: 4px;
  background: var(--clr-gold);
  border-radius: var(--r-full);
  margin-bottom: var(--sp-5);
}

.pkg-hero-desc {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.80);
  max-width: 460px;
}

/* ── Qualitative value row — no numbers, no unsupported claims ───── */
.pkg-hero-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-5);
}

.pkg-hero-values li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.90);
}

.pkg-hero-values li svg {
  flex-shrink: 0;
  color: var(--clr-gold);
}

/* ── Decorative plane ────────────────────────────────────────────── */
.pkg-hero-deco {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}

/* ── Wave divider ────────────────────────────────────────────────── */
.pkg-hero-wave {
  position: relative;
  z-index: 2;
  line-height: 0;
  margin-top: auto;
}
.pkg-hero-wave svg { width: 100%; display: block; }


/* ----------------------------------------------------------------
   PKG SECTION (filter bar + listing + cards grid)
   ---------------------------------------------------------------- */
.pkg-section {
  position: relative;
  isolation: isolate;
  background: var(--clr-bg-off-white);
  padding-top: var(--sp-12);
  padding-bottom: 2.5rem;
}

/* Subtle dark tint over the global background image — same treatment as
   the Home page's "Top 5 Destinations" section (.homepage-bg .destinations)
   and the other pages' second sections, so all four pages read as one
   consistent site. The scenic photo stays visible underneath; the page's
   background system itself is untouched. Sits behind all real content
   (z-index:-1 within this section's own isolated stacking context) and
   never intercepts clicks. */
.pkg-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* ── Category filter bar — one floating pill, real categories only ── */
.pkg-filter-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-8);
  position: relative;
}

.pkg-filter-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 6px;
  background: var(--clr-white);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-md);
  overflow-x: auto;
  scrollbar-width: none;
}
.pkg-filter-bar::-webkit-scrollbar { display: none; }

/* ── Mobile-only "more countries →" scroll hint ───────────────────
   Decorative overlay pinned to the filter bar's own right edge (not
   part of the scrollable content, so it never scrolls away or
   intercepts the swipe gesture). Hidden on desktop/tablet, and hidden
   once the bar has nothing left to scroll to — toggled by the
   .pkg-filter-wrap.is-scroll-end class set in packages.html's script. */
.pkg-filter-scroll-hint {
  display: none;
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: var(--container-pad);
  width: 40px;
  align-items: center;
  justify-content: flex-end;
  padding-right: 5px;
  border-radius: 0 var(--r-full) var(--r-full) 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--clr-white) 65%);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--ease-base);
}
.pkg-filter-wrap.is-scroll-end .pkg-filter-scroll-hint {
  opacity: 0;
}
.pkg-filter-scroll-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--clr-bg-off-white);
  color: var(--clr-primary);
  box-shadow: var(--shadow-sm);
}

.pkg-filter-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 0.65rem 1.15rem;
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--clr-navy);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ease-base), color var(--ease-base);
}

.pkg-filter-pill:hover:not(.is-active) { background: var(--clr-bg-blue); }

.pkg-filter-pill.is-active {
  background: var(--clr-primary);
  color: var(--clr-white);
  box-shadow: 0 6px 16px rgba(15, 49, 242, 0.30);
}

/* ── India sub-filter — visually subordinate to the main filter bar
   above it (smaller, no floating shadow, muted ghost pills) so it
   reads as a subdivision of "India" rather than a sibling country. ── */
.pkg-subfilter-wrap {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--sp-8) * -1 + 0.75rem);
  margin-bottom: var(--sp-8);
}
.pkg-subfilter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.pkg-subfilter-pill {
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-full);
  border: 1.5px solid rgba(10, 15, 25, 0.55);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--clr-navy);
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ease-base), color var(--ease-base), border-color var(--ease-base);
}
.pkg-subfilter-pill:hover:not(.is-active) { background: var(--clr-white); }
.pkg-subfilter-pill.is-active {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: var(--clr-white);
}

/* ── Circular flag badge — small national-identity accent, not the
   focal point. A rectangular flag SVG is centre-cropped by the circular
   wrapper, matching how most travel UIs render small flag icons. ──── */
.pkg-flag-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(15, 49, 242, 0.12);
  box-shadow: 0 1px 3px rgba(8, 22, 60, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pkg-flag-badge svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Stays & Custom isn't a country — neutral badge, same size/shape for
   visual consistency with the flag badges beside it. */
.pkg-flag-badge--neutral {
  background: var(--clr-bg-blue);
  color: var(--clr-primary);
  border-color: rgba(15, 49, 242, 0.10);
}
.pkg-flag-badge--neutral svg {
  width: 15px;
  height: 15px;
}

.pkg-filter-pill:hover .pkg-flag-badge {
  transform: scale(1.07);
  box-shadow: 0 2px 6px rgba(8, 22, 60, 0.22);
}

/* ── Per-country hover accent — a faint flag-coloured tint + inset
   border glow, subtle enough to stay premium and keep text readable.
   Skipped while a pill is .is-active (that state owns its own blue look). ── */
.pkg-filter-pill[data-country="india"]:hover:not(.is-active) {
  background: linear-gradient(180deg, rgba(255, 153, 51, 0.14), rgba(19, 136, 8, 0.10));
  box-shadow: inset 0 0 0 1px rgba(255, 153, 51, 0.40);
}
.pkg-filter-pill[data-country="sri-lanka"]:hover:not(.is-active) {
  background: linear-gradient(180deg, rgba(141, 21, 58, 0.10), rgba(255, 190, 41, 0.14));
  box-shadow: inset 0 0 0 1px rgba(141, 21, 58, 0.35);
}
.pkg-filter-pill[data-country="bhutan"]:hover:not(.is-active) {
  background: linear-gradient(180deg, rgba(255, 206, 0, 0.16), rgba(255, 78, 18, 0.10));
  box-shadow: inset 0 0 0 1px rgba(255, 140, 0, 0.40);
}
.pkg-filter-pill[data-country="malaysia"]:hover:not(.is-active) {
  background: linear-gradient(180deg, rgba(204, 0, 1, 0.10), rgba(1, 0, 102, 0.10));
  box-shadow: inset 0 0 0 1px rgba(204, 0, 1, 0.35);
}
.pkg-filter-pill[data-country="singapore"]:hover:not(.is-active) {
  background: linear-gradient(180deg, rgba(239, 59, 68, 0.12), rgba(239, 59, 68, 0.06));
  box-shadow: inset 0 0 0 1px rgba(239, 59, 68, 0.35);
}
.pkg-filter-pill[data-country="indonesia"]:hover:not(.is-active) {
  background: linear-gradient(180deg, rgba(206, 17, 38, 0.12), rgba(206, 17, 38, 0.06));
  box-shadow: inset 0 0 0 1px rgba(206, 17, 38, 0.35);
}

/* ── Empty-state prompts (deep-link to a category with no packages yet) ── */
.pkg-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-12) var(--sp-6);
  margin-bottom: var(--sp-10);
  background: var(--clr-bg-blue);
  border-radius: var(--r-lg);
}

/* Specificity guard: makes sure the [hidden] attribute actually wins over
   the display:flex above, since author styles otherwise beat the UA [hidden] rule */
.pkg-empty-state[hidden] { display: none; }

.pkg-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--clr-white);
  color: var(--clr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(15, 49, 242, 0.14);
}

.pkg-empty-state p {
  font-size: 0.95rem;
  color: var(--clr-gray-mid);
  max-width: 360px;
}


/* ----------------------------------------------------------------
   PKG GRID — 4 columns
   ---------------------------------------------------------------- */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}


/* ----------------------------------------------------------------
   PKG CARD 2 — compact, image badges, chips, full-width CTA
   ---------------------------------------------------------------- */
.pkg-card2 {
  display: flex;
  flex-direction: column;
  background: var(--clr-white);
  border: 1px solid rgba(15, 49, 242, 0.07);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(15, 49, 242, 0.08);
  transition:
    opacity    0.25s ease,
    transform  0.32s ease,
    box-shadow 0.32s ease,
    z-index    0s;
  position: relative;
  z-index: 0;
}

.pkg-card2:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(15, 49, 242, 0.18);
  z-index: 2;
}

/* ── Image area ──────────────────────────────────────────────────── */
.pkg-img-wrap {
  position: relative;
  overflow: hidden;
  height: clamp(160px, 13vw, 210px);
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-cyan) 100%);
  flex-shrink: 0;
}

/* Poster-style images (e.g. Sri Lanka Group Tour, Melaka Heritage Tour)
   must stay fully visible rather than being cropped — the full poster is
   letterboxed on a neutral backdrop instead of bleeding off the edges */
.pkg-img-wrap.pkg-img-contain {
  background: var(--clr-bg-off-white);
}
.pkg-img-wrap.pkg-img-contain .pkg-img {
  object-fit: contain;
  box-sizing: border-box;
  padding: var(--sp-2);
}

.pkg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: block;
}

.pkg-card2:hover .pkg-img { transform: scale(1.08); }

/* Gradient fallback when image missing */
.pkg-img-wrap.pkg-img-fallback {
  background: linear-gradient(135deg, var(--clr-primary-mid) 0%, var(--clr-cyan) 100%);
}

/* Country badge — solid navy, top-left overlay on the image */
.pkg-badge-country {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: var(--clr-navy);
  color: var(--clr-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Duration badge — solid gold, top-right overlay, mirrors the country badge */
.pkg-badge-duration {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: var(--clr-gold);
  color: var(--clr-navy);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
}

/* Urgency badge (e.g. "Last 3 Seats Available") — only rendered when the
   source material explicitly supplied that information; stacks below the
   country badge on the left since duration already occupies the right. */
.pkg-notice-badge {
  position: absolute;
  top: 42px;
  left: 10px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: rgba(10, 15, 25, 0.78);
  color: var(--clr-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ── Card body ───────────────────────────────────────────────────── */
.pkg-body {
  flex: 1;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pkg-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--clr-navy);
  line-height: 1.3;
}

.pkg-country {
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--clr-gray-mid);
}

/* Region/location line — sits directly under the title */
.pkg-region {
  font-size: 0.78rem;
  color: var(--clr-gray-mid);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Feature chips — up to 2 short highlights, plain icon + label pairs */
.pkg-card2-features {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--sp-3);
  margin-top: 2px;
}

.pkg-card2-features li {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--clr-gray-mid);
}

.pkg-card2-features li svg { flex-shrink: 0; color: var(--clr-primary); }

/* ── Price row + CTA — pushed to the bottom of the card ───────────── */
.pkg-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--sp-3);
}

.pkg-from {
  font-size: 0.72rem;
  color: var(--clr-gray-mid);
  font-weight: 600;
}

.pkg-price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--clr-primary);
  line-height: 1.2;
}

/* "View Package" — full-width solid BRK-blue button */
.pkg-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: var(--sp-3);
  padding: 0.65rem var(--sp-4);
  border-radius: var(--r-md);
  background: var(--clr-primary);
  color: var(--clr-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background var(--ease-base), transform var(--ease-base), box-shadow var(--ease-base);
}

.pkg-cta-btn:hover {
  background: var(--clr-primary-mid);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 49, 242, 0.32);
}

.pkg-cta-btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

.pkg-cta-icon { flex-shrink: 0; }


/* ----------------------------------------------------------------
   PROMOTIONAL FEATURE CARDS — Custom Journey / Stay Somewhere Special
   ---------------------------------------------------------------- */
.pkg-promo-section {
  position: relative;
  isolation: isolate;
  background: var(--clr-bg-off-white);
  padding-bottom: var(--sp-16);
}

/* Identical dark tint to .pkg-section's overlay directly above — same
   background image, same darkness, same z-index treatment — so the two
   sections read as one continuous background with no visible seam at
   their shared boundary. */
.pkg-promo-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.pkg-promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}

.pkg-promo-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 220px;
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: var(--sp-8);
}

.pkg-promo-custom { background: linear-gradient(120deg, #FFF7DE 0%, #FDEFC7 100%); }
.pkg-promo-stay   { background: linear-gradient(120deg, #E7ECFF 0%, #DCE4FF 100%); }

.pkg-promo-content {
  position: relative;
  z-index: 2;
  max-width: 56%;
}

.pkg-promo-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--clr-navy);
  margin-bottom: var(--sp-2);
}

.pkg-promo-stay-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--clr-primary);
}

.pkg-promo-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--clr-gray-dark);
  margin-bottom: var(--sp-5);
}

.pkg-promo-btn {
  font-size: 0.85rem;
  padding: 0.65rem 1.4rem;
}

.pkg-promo-img-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Text-contrast fade — both cards now overlay text on their image. */
.pkg-promo-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.55) 42%, rgba(255,255,255,0) 68%);
}

.pkg-promo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}

.pkg-promo-img-wrap.pkg-promo-img-fallback {
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-cyan) 100%);
}


/* ----------------------------------------------------------------
   PACKAGE ENQUIRY MODAL
   (reuses .ctc-form / .ctc-input / .ctc-success etc. from the
   Contact page form so styling stays fully consistent with brand)
   ---------------------------------------------------------------- */
.enq-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(10, 15, 25, 0.60);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.enq-modal-overlay.is-open { display: flex; }

@keyframes enqPopIn {
  0%   { opacity: 0; transform: translateY(24px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0)     scale(1); }
}

.enq-modal {
  position: relative;
  width: min(92vw, 640px);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--clr-white);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  padding: var(--sp-6);
  animation: enqPopIn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.enq-modal-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--clr-bg-blue);
  color: var(--clr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background var(--ease-base), transform var(--ease-base);
}

.enq-modal-close:hover {
  background: rgba(15, 49, 242, 0.16);
  transform: rotate(90deg);
}

/* ── Read-only selected-package summary ──────────────────────────── */
.enq-package-summary {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--clr-bg-blue);
  border: 1px solid rgba(15, 49, 242, 0.14);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.enq-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* [hidden] cascade guard — same reasoning as .enq-detail-block[hidden] below;
   the Travel Dates / Booking Deadline rows are only shown when supplied */
.enq-summary-row[hidden] { display: none; }

.enq-summary-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--clr-gray-mid);
}

.enq-summary-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--clr-navy);
  text-align: right;
}

/* ── Full package details — route / hotels / meals / inclusions /
   exclusions / highlights / itinerary. Each block is only shown by
   populatePackageDetails() when the selected package actually supplies
   that field, so this whole area shrinks or grows per package. ────── */
.enq-package-full {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.enq-detail-block { display: flex; flex-direction: column; gap: var(--sp-2); }

/* [hidden] cascade guard — author display:flex above would otherwise beat
   the browser's own [hidden]{display:none} rule (this exact bug has hit
   this project twice before: the enquiry modal and the empty-state prompt) */
.enq-detail-block[hidden] { display: none; }

.enq-detail-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-primary);
}

.enq-detail-text {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--clr-gray-dark);
}

.enq-detail-itinerary { white-space: pre-line; }

.enq-detail-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.enq-detail-list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--clr-gray-dark);
}

.enq-detail-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--clr-cyan);
}

.enq-detail-list-no li::before { background: #E53E3E; }

/* Inclusions / exclusions sit side-by-side on wider screens */
.enq-detail-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

/* Urgency / booking-deadline notice — gold accent, matches brand */
.enq-detail-notice {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-2);
  background: rgba(255, 193, 7, 0.14);
  border: 1px solid rgba(255, 193, 7, 0.35);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  color: #8A6300;
}
.enq-detail-notice svg { flex-shrink: 0; margin-top: 2px; }
.enq-detail-notice .enq-detail-text { color: #8A6300; font-weight: 700; }

/* ── Success panel swap (shown inside the same modal shell) ─────── */
.enq-modal .enq-success-panel { display: none; }
.enq-modal.show-success .enq-form-panel   { display: none; }
.enq-modal.show-success .enq-success-panel { display: flex; }

.enq-success-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: left;
  align-self: stretch;
}

@media (max-width: 480px) {
  .enq-modal { padding: var(--sp-5); }
}

/* Inclusions/exclusions collapse to one column so each list stays readable
   on narrow phones instead of squeezing two lists side by side */
@media (max-width: 600px) {
  .enq-detail-cols { grid-template-columns: 1fr; }
}


/* ----------------------------------------------------------------
   BOTTOM CTA — deliberately keeps its own solid gradient at all times
   (not part of the .subpage-bg transparent-section list) so it reads
   as a bold closing banner rather than blending into the page image.
   ---------------------------------------------------------------- */
.pkg-final-cta {
  background: linear-gradient(135deg, #081A92 0%, #0F31F2 55%, #1B5FE0 100%);
  padding-block: var(--sp-16);
}

.pkg-final-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.pkg-final-cta-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  color: var(--clr-white);
  margin-bottom: var(--sp-3);
}

.pkg-final-cta-sub {
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: var(--sp-6);
}

.pkg-final-cta-btn {
  font-size: 0.95rem;
  padding: 0.85rem 2rem;
}


/* ================================================================
   PACKAGES PAGE — RESPONSIVE
   ================================================================ */

/* ── Tablet landscape ≤ 1100px ─────────────────────────────────── */
@media (max-width: 1100px) {
  .pkg-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
  }
}

/* ── Tablet portrait ≤ 900px ───────────────────────────────────── */
@media (max-width: 900px) {
  .pkg-hero-inner {
    padding-block: calc(var(--header-h) + 3rem) 4rem;
  }

  .pkg-hero-deco { display: none; }

  .pkg-grid { grid-template-columns: repeat(2, 1fr); }

  .pkg-promo-grid { grid-template-columns: 1fr; }

  .pkg-promo-content { max-width: 62%; }
}

/* ── Mobile ≤ 768px ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pkg-hero { min-height: 480px; }

  .pkg-section { padding-top: var(--sp-8); padding-bottom: 1.75rem; }

  .pkg-filter-wrap {
    justify-content: flex-start;
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
    margin-bottom: var(--sp-6);
  }

  .pkg-filter-scroll-hint { display: flex; }

  /* One card per row — the card is allowed to grow taller so the image
     stays large instead of being squeezed into a two-up layout */
  .pkg-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .pkg-img-wrap { height: clamp(200px, 55vw, 280px); }

  .pkg-empty-state { padding: var(--sp-8) var(--sp-4); }

  .pkg-promo-card {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding: var(--sp-6);
  }
  .pkg-promo-content { max-width: 100%; }
  .pkg-promo-img-wrap {
    position: relative;
    inset: auto;
    width: 100%;
    height: 160px;
    order: -1;
    margin-bottom: var(--sp-4);
    border-radius: var(--r-md);
  }
  .pkg-promo-img-wrap::after { background: none; }
}

/* ── Small mobile ≤ 480px ──────────────────────────────────────── */
@media (max-width: 480px) {
  .pkg-hero-heading { font-size: clamp(2rem, 9vw, 2.6rem); }

  .pkg-grid { grid-template-columns: 1fr; }

  .pkg-filter-pill { padding: 0.55rem 0.9rem; font-size: 0.8rem; }

  .pkg-flag-badge { width: 22px; height: 22px; }
  .pkg-flag-badge--neutral svg { width: 13px; height: 13px; }
}


/* ================================================================
   SERVICES PAGE
   Paste-safe: all classes prefixed svc- to avoid collisions.
   ================================================================ */


/* ----------------------------------------------------------------
   SVC HERO
   ---------------------------------------------------------------- */
.svc-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2560 / 815;
  max-height: 620px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(135deg, #081A92 0%, #0F31F2 55%, #46C4FF 100%);
}

.svc-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.svc-hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  background-size: cover;
  background-position: center;
}

.svc-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8, 22, 60, 0.82) 0%,
    rgba(8, 22, 60, 0.68) 45%,
    rgba(0, 20, 60, 0.52) 100%
  );
  z-index: 1;
}

.svc-hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: calc(var(--header-h) + 1rem) 2rem;
  gap: 1.75rem;
}

/* ── Back button ──────────────────────────────────────────────── */
.svc-back-btn {
  position: absolute;
  top: calc(var(--header-h) + 0.75rem);
  left: var(--container-pad);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--clr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ease-base), border-color var(--ease-base);
}
.svc-back-btn:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: var(--clr-white);
}

/* ── Hero text ────────────────────────────────────────────────── */
.svc-hero-text {
  text-align: center;
  padding-top: 1rem;
}

.svc-eyebrow {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--clr-cyan);
  margin-bottom: 0.65rem;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(70, 196, 255, 0.40);
}

.svc-page-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.8rem, 7vw, 4.8rem);
  color: var(--clr-white);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 0.85rem;
}

.svc-desc {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
}

/* ── Panel wrap: glass + dot track ───────────────────────────── */
.svc-panel-wrap {
  width: 100%;
  max-width: 700px;
  display: flex;
  align-items: stretch;
  gap: 0.85rem;
}

/* ── Glassmorphism panel ──────────────────────────────────────── */
.svc-glass-panel {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.20);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.svc-panel-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.4rem 0.75rem;
  flex-shrink: 0;
}

.svc-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(15, 49, 242, 0.16);
}

.svc-panel-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--clr-primary);
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-transform: uppercase;
}

/* ── Cards scrollable list ────────────────────────────────────── */
.svc-cards-list {
  overflow-y: auto;
  max-height: 510px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.25rem 1.2rem 1.2rem;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.svc-cards-list::-webkit-scrollbar { display: none; }

/* ── Individual service card ──────────────────────────────────── */
.svc-card {
  display: flex;
  align-items: stretch;
  background: var(--clr-white);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(15, 49, 242, 0.07);
  min-height: 148px;
  flex-shrink: 0;
  /* initial hidden state for pop-up animation */
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition:
    opacity   0.46s ease,
    transform 0.46s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow var(--ease-base);
}

.svc-card--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.svc-card:hover {
  box-shadow: 0 8px 26px rgba(15, 49, 242, 0.15);
}

/* Card image */
.svc-card-img-wrap {
  flex-shrink: 0;
  width: 165px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-cyan) 100%);
}

.svc-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}
.svc-card:hover .svc-card-img { transform: scale(1.07); }

/* Service-specific image fallback gradients */
.svc-img-fallback--flight    { background: linear-gradient(135deg, #0F31F2 0%, #46C4FF 100%); }
.svc-img-fallback--hotel     { background: linear-gradient(135deg, #081A92 0%, #7986CB 100%); }
.svc-img-fallback--tour      { background: linear-gradient(135deg, #E65100 0%, #FFC107 100%); }
.svc-img-fallback--cruise    { background: linear-gradient(135deg, #006064 0%, #46C4FF 100%); }
.svc-img-fallback--visa      { background: linear-gradient(135deg, #1A237E 0%, #3949AB 100%); }
.svc-img-fallback--corporate { background: linear-gradient(135deg, #263238 0%, #546E7A 100%); }
.svc-img-fallback--transfer  { background: linear-gradient(135deg, #212121 0%, #607D8B 100%); }
.svc-img-fallback--honeymoon { background: linear-gradient(135deg, #AD1457 0%, #F06292 100%); }
.svc-img-fallback--family    { background: linear-gradient(135deg, #2E7D32 0%, #81C784 100%); }
.svc-img-fallback--wellness  { background: linear-gradient(135deg, #00695C 0%, #4DB6AC 100%); }
.svc-img-fallback--custom    { background: linear-gradient(135deg, #4527A0 0%, #9575CD 100%); }

/* Card content area */
.svc-card-content {
  flex: 1;
  min-width: 0;
  padding: 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
}

/* Icon box */
.svc-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--grad-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 0.15rem;
  box-shadow: 0 3px 10px rgba(15, 49, 242, 0.22);
}

.svc-card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--clr-navy);
  line-height: 1.3;
}

.svc-card-desc {
  font-size: 0.79rem;
  color: var(--clr-gray-mid);
  line-height: 1.55;
}

.svc-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.79rem;
  color: var(--clr-primary);
  margin-top: 0.2rem;
  transition: gap var(--ease-base);
}
.svc-learn-more:hover { gap: 0.55rem; }


/* ----------------------------------------------------------------
   DOT TRACK
   ---------------------------------------------------------------- */
.svc-dot-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 42px;
  flex-shrink: 0;
  padding-block: 0.4rem;
}

.svc-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.60);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--clr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--ease-base), border-color var(--ease-base);
}
.svc-arrow:hover {
  background: rgba(255, 255, 255, 0.32);
  border-color: var(--clr-white);
}

.svc-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  flex: 1;
  justify-content: center;
  position: relative;
}

/* Dashed connector between dots */
.svc-dots::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  border-left: 2px dashed rgba(255, 255, 255, 0.38);
  z-index: 0;
}

.svc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  border: 2px solid rgba(255, 255, 255, 0.55);
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background   var(--ease-base),
    border-color var(--ease-base),
    transform    var(--ease-base);
}
.svc-dot.active {
  background: var(--clr-white);
  border-color: var(--clr-white);
  transform: scale(1.45);
}
.svc-dot:hover { background: rgba(255, 255, 255, 0.75); }


/* ----------------------------------------------------------------
   BOTTOM FEATURES STRIP
   ---------------------------------------------------------------- */
.svc-features {
  background: linear-gradient(135deg, var(--clr-primary-mid) 0%, var(--clr-primary) 100%);
  padding-block: 2.5rem;
  color: var(--clr-white);
}

.svc-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.svc-feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
  padding: 0.85rem 0.65rem;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}
.svc-feature-item:last-child { border-right: none; }

.svc-feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-white);
  margin-bottom: 0.2rem;
  transition: background var(--ease-base), transform var(--ease-base);
}
.svc-feature-item:hover .svc-feature-icon {
  background: rgba(255, 255, 255, 0.14);
  transform: scale(1.06);
}

.svc-feature-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--clr-white);
  line-height: 1.3;
}

.svc-feature-desc {
  font-size: 0.77rem;
  color: rgba(255, 255, 255, 0.70);
  line-height: 1.5;
}

.svc-tagline-footer {
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.68);
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  letter-spacing: 0.02em;
}


/* ================================================================
   SERVICES PAGE — RESPONSIVE
   ================================================================ */

/* ── Tablet portrait ≤ 900px ───────────────────────────────────── */
@media (max-width: 900px) {
  .svc-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .svc-feature-item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .svc-feature-item:nth-child(2n) { border-right: none; }
  .svc-feature-item:nth-last-child(-n+2) { border-bottom: none; }
}

/* ── Mobile ≤ 768px ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .svc-hero-inner {
    padding-block: calc(var(--header-h) + 1rem) 3.5rem;
    gap: 1.5rem;
  }

  .svc-panel-wrap { max-width: 100%; }

  /* hide dot track — user scrolls page naturally */
  .svc-dot-track { display: none; }

  /* expand card list to show all cards (no internal scroll) */
  .svc-cards-list {
    max-height: none;
    overflow-y: visible;
  }
}

/* ── Small mobile ≤ 480px ───────────────────────────────────────── */
@media (max-width: 480px) {
  .svc-page-heading { font-size: 2.6rem; }

  .svc-card-img-wrap { width: 110px; }

  .svc-features-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .svc-feature-item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .svc-feature-item:last-child { border-bottom: none; }
}


/* ================================================================
   CONTACT PAGE
   Paste-safe: all classes prefixed ctc- to avoid collisions.
   ================================================================ */


/* ----------------------------------------------------------------
   CTC HERO
   ---------------------------------------------------------------- */
.ctc-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2560 / 815;
  max-height: 620px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(135deg, #081A92 0%, #0F31F2 55%, #46C4FF 100%);
}

.ctc-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ctc-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  background-size: cover;
  background-position: center;
}

.ctc-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(8, 22, 60, 0.82) 0%,
    rgba(8, 22, 60, 0.58) 48%,
    rgba(0, 40, 90, 0.22) 100%
  );
  z-index: 1;
}

.ctc-hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: calc(var(--header-h) + 1rem) 2rem;
  gap: var(--sp-5);
}

.ctc-hero-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 5.5rem);
  color: var(--clr-white);
  line-height: 1;
  letter-spacing: -0.025em;
}

.ctc-hero-sub {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.75;
  max-width: 520px;
}

/* Wave divider */
.ctc-hero-wave {
  position: relative;
  z-index: 2;
  line-height: 0;
  margin-top: auto;
}
.ctc-hero-wave svg { width: 100%; display: block; }


/* ----------------------------------------------------------------
   CTC MAIN SECTION (info + form)
   ---------------------------------------------------------------- */
.ctc-main {
  position: relative;
  isolation: isolate;
  background: var(--clr-bg-off-white);
  padding-top: 1.5rem;
  padding-bottom: var(--sp-20);
}

/* Subtle dark tint over the global background image — same treatment
   used for the second section on Home/Packages/Services, for visual
   consistency across the site. The info/hours/form cards are already
   fully opaque, so this is purely atmospheric behind them. */
.ctc-main::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* Two-column grid: narrow info left, wide form right */
.ctc-grid {
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: var(--sp-8);
  align-items: stretch;   /* both columns reach the same bottom edge */
}

/* ── Left column ─────────────────────────────────────────────────── */
.ctc-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Company info card — grows to absorb the vertical space difference */
.ctc-info-card {
  flex: 1;                /* fills leftover height so hours card pins to bottom */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: 0 8px 32px rgba(15, 49, 242, 0.10);
}

.ctc-company-header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(15, 49, 242, 0.10);
}

.ctc-company-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--clr-primary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-white);
  box-shadow: 0 3px 10px rgba(15, 49, 242, 0.30);
}

.ctc-company-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--clr-navy);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Detail items list */
.ctc-details {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.ctc-detail-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}

.ctc-detail-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  background: var(--clr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-white);
  margin-top: 2px;
  box-shadow: 0 3px 10px rgba(15, 49, 242, 0.40);
}

.ctc-detail-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ctc-detail-body strong {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--clr-navy);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.ctc-detail-body span,
.ctc-detail-body a {
  font-size: 0.875rem;
  color: var(--clr-gray-mid);
  line-height: 1.65;
  transition: color var(--ease-fast);
}

.ctc-detail-body a:hover { color: var(--clr-primary); }

/* Business hours card */
.ctc-hours-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: 0 8px 32px rgba(15, 49, 242, 0.10);
}

.ctc-hours-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(15, 49, 242, 0.10);
}

.ctc-hours-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--clr-primary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-white);
  box-shadow: 0 3px 10px rgba(15, 49, 242, 0.30);
}

.ctc-hours-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--clr-navy);
}

.ctc-hours-list {
  display: flex;
  flex-direction: column;
}

.ctc-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-3);
  border-bottom: 1px solid rgba(15, 49, 242, 0.08);
}
.ctc-hours-row:last-child { border-bottom: none; }

.ctc-hours-day {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--clr-navy);
}

.ctc-hours-time {
  font-size: 0.875rem;
  color: var(--clr-gray-mid);
}

.ctc-hours-closed {
  font-size: 0.875rem;
  font-weight: 600;
  color: #ff7875;
}


/* ── Right column wrapper — flex column so form card can stretch ─── */
.ctc-right {
  display: flex;
  flex-direction: column;
}

/* ── Right column: Form card ─────────────────────────────────────── */
.ctc-form-card {
  flex: 1;                /* fills the right cell height end-to-end */
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: 0 8px 40px rgba(15, 49, 242, 0.12);
}

.ctc-form-header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--clr-bg-off-white);
}

.ctc-form-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--clr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-white);
  box-shadow: 0 4px 14px rgba(15, 49, 242, 0.30);
}

.ctc-form-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  color: var(--clr-navy);
  line-height: 1.2;
}


/* ── Form grid ───────────────────────────────────────────────────── */
.ctc-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  transition: opacity 0.38s ease, transform 0.38s ease;
}

/* Full-width items inside the 2-col grid */
.ctc-span-full { grid-column: 1 / -1; }


/* ── Field group ─────────────────────────────────────────────────── */
.ctc-field-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ctc-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--clr-navy);
}


/* ── Input wrapper — handles icon + focus ring lift ──────────────── */
.ctc-input-wrap {
  position: relative;
  border-radius: var(--r-md);
  transition:
    box-shadow 0.28s ease,
    transform  0.30s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ctc-input-wrap.is-focused {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(15, 49, 242, 0.14);
}

/* Left-side field icon */
.ctc-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-gray-mid);
  display: flex;
  pointer-events: none;
  z-index: 2;
  transition: color 0.25s ease;
}

/* Textarea icon sits at the top */
.ctc-icon-top {
  top: 14px;
  transform: none;
}

.ctc-input-wrap.is-focused .ctc-input-icon,
.ctc-input-wrap.has-value  .ctc-input-icon {
  color: var(--clr-primary);
}

/* Base styles for all inputs / selects / textarea */
.ctc-input {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 1rem 0.75rem 2.65rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--clr-gray-dark);
  background: var(--clr-white);
  border: 1.5px solid rgba(15, 49, 242, 0.18);
  border-radius: var(--r-md);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color 0.25s ease,
    background   0.25s ease,
    box-shadow   0.25s ease;
}

.ctc-input::placeholder { color: var(--clr-gray-mid); opacity: 0.85; }

.ctc-input:focus {
  border-color: var(--clr-primary);
  background: var(--clr-white);
  box-shadow: 0 0 0 3px rgba(15, 49, 242, 0.10);
}

.ctc-input:hover:not(:focus) {
  border-color: rgba(15, 49, 242, 0.35);
  background: var(--clr-white);
}

/* Validation states */
.ctc-has-error .ctc-input {
  border-color: #e53e3e;
  background: #fff5f5;
}
.ctc-has-error .ctc-input:focus {
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.12);
}
.ctc-is-valid .ctc-input { border-color: #38a169; }

.ctc-error {
  font-size: 0.78rem;
  color: #e53e3e;
  min-height: 1rem;
  line-height: 1.3;
}

/* Select — custom chevron */
.ctc-select-wrap { position: relative; }

.ctc-select { padding-right: 2.5rem; cursor: pointer; }

.ctc-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-gray-mid);
  pointer-events: none;
  display: flex;
  z-index: 2;
  transition: color 0.25s ease, transform 0.25s ease;
}

.ctc-select:focus ~ .ctc-chevron { color: var(--clr-primary); }

/* Date input */
.ctc-date-input { cursor: pointer; }
.ctc-date-input::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0;
  width: 48px;
  height: 100%;
  cursor: pointer;
}

/* Textarea */
.ctc-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.65;
  padding-top: 0.85rem;
}

/* ── Submit button ────────────────────────────────────────────────── */
.ctc-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 0.92rem 2rem;
  background: linear-gradient(90deg, var(--clr-primary) 0%, var(--clr-primary-mid) 100%);
  color: var(--clr-white);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.07em;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    filter    0.30s ease,
    transform  0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.30s ease;
}

.ctc-submit-btn:hover {
  filter: brightness(1.12);
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 10px 30px rgba(15, 49, 242, 0.38);
}

.ctc-submit-btn:active {
  transform: translateY(-1px) scale(1.004);
}

/* Shimmer sweep on submit button */
@keyframes ctcShimmer {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  100% { transform: translateX(260%)  skewX(-18deg); }
}

.ctc-submit-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 38%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.26) 50%, transparent 100%);
  transform: translateX(-130%) skewX(-18deg);
  animation: ctcShimmer 2.8s ease-in-out 2s infinite;
}


/* ── Success message ─────────────────────────────────────────────── */
.ctc-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
  padding: var(--sp-12) var(--sp-8);
}

.ctc-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--clr-bg-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-primary);
  box-shadow: 0 0 0 8px rgba(15, 49, 242, 0.08);
}

.ctc-success h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.65rem;
  color: var(--clr-navy);
}

.ctc-success p {
  font-size: 0.95rem;
  color: var(--clr-gray-mid);
  max-width: 380px;
  line-height: 1.75;
}


/* ----------------------------------------------------------------
   CTC ADVENTURE (bottom CTA section)
   ---------------------------------------------------------------- */
.ctc-adventure {
  background: var(--clr-bg-blue);
  padding-block: var(--sp-16) var(--sp-20);
}

.ctc-adv-inner {
  background: var(--clr-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 340px;
  box-shadow: var(--shadow-md);
}

.ctc-adv-text {
  padding: var(--sp-12) var(--sp-10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
}

.ctc-adv-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  color: var(--clr-navy);
  line-height: 1.15;
}

/* Italic "Adventure?" in a serif cursive feel */
.ctc-adv-cursive {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  color: var(--clr-primary);
}

.ctc-adv-line {
  display: block;
  width: 40px;
  height: 3.5px;
  background: var(--clr-primary);
  border-radius: var(--r-full);
}

.ctc-adv-desc {
  font-size: 0.93rem;
  color: var(--clr-gray-mid);
  line-height: 1.75;
  max-width: 420px;
}

.ctc-adv-tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--clr-primary);
}

.ctc-adv-note {
  font-size: 0.875rem;
  color: var(--clr-gray-mid);
  line-height: 1.65;
}

/* Image half */
.ctc-adv-img-wrap {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-cyan) 100%);
}

.ctc-adv-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.65s ease;
}

.ctc-adv-inner:hover .ctc-adv-img { transform: scale(1.04); }

.ctc-adv-img-ph {
  background: linear-gradient(135deg, #0F31F2 0%, #46C4FF 100%);
}


/* ================================================================
   CONTACT PAGE — RESPONSIVE
   ================================================================ */

/* ── Tablet landscape ≤ 1024px ───────────────────────────────────── */
@media (max-width: 1024px) {
  .ctc-grid {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--sp-6);
  }
}

/* ── Tablet portrait ≤ 900px ─────────────────────────────────────── */
@media (max-width: 900px) {
  .ctc-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  /* Reset stretch / grow so stacked cards are only as tall as their content */
  .ctc-info-card { flex: none; }
  .ctc-right     { display: block; }
  .ctc-form-card { flex: none; }

  .ctc-adv-inner {
    grid-template-columns: 1fr;
  }

  .ctc-adv-img-wrap {
    min-height: 260px;
    order: -1;
  }

  .ctc-adv-text { padding: var(--sp-8); }
}

/* ── Mobile ≤ 768px ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ctc-main     { padding-top: 1.5rem; padding-bottom: var(--sp-16); }
  .ctc-adventure { padding-block: var(--sp-12) var(--sp-16); }

  .ctc-hero { min-height: 480px; }
  .ctc-hero-inner { padding-block: calc(var(--header-h) + 2.5rem) 3rem; }

  .ctc-form-card { padding: var(--sp-6); }

  .ctc-adv-text { padding: var(--sp-6); gap: var(--sp-3); }
}

/* ── Small mobile ≤ 600px: form goes single column ───────────────── */
@media (max-width: 600px) {
  .ctc-form {
    grid-template-columns: 1fr;
  }

  .ctc-input { min-height: 52px; }

  .ctc-adv-img-wrap { min-height: 200px; }
}

/* ── Extra small ≤ 480px ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .ctc-hero-title { font-size: clamp(2.4rem, 11vw, 3.2rem); }

  .ctc-form-card { padding: var(--sp-5); }

  .ctc-form-header { margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); }

  .ctc-adv-heading { font-size: 1.85rem; }
}


/* ================================================================
   WHATSAPP FLOATING WIDGET — Airplane Orbit
   ================================================================ */

/* ── Widget wrapper ──────────────────────────────────────────────── */
.wa-widget {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  /* orbit track is 80px radius; give room so plane never clips */
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* let clicks fall through to the button */
}

/* ── Main WhatsApp button ────────────────────────────────────────── */
.wa-btn {
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.45),
              0 2px 8px  rgba(15, 49, 242, 0.25);
  transition: transform var(--ease-base), box-shadow var(--ease-base);
  position: relative;
  animation: wa-float 3.2s ease-in-out infinite;
}

.wa-btn:hover {
  transform: scale(1.13);
  box-shadow: 0 10px 40px rgba(37, 211, 102, 0.60),
              0 4px 14px  rgba(0, 184, 212, 0.35);
  animation-play-state: paused;
}

.wa-btn svg {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

/* Tooltip — text driven by the --wa-tooltip-text custom property (set by
   translations.js on language change); "Chat with us!" is only the
   fallback if that property is never set for any reason. */
.wa-btn::after {
  content: var(--wa-tooltip-text, "Chat with us!");
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--clr-navy);
  color: var(--clr-white);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease-base), transform var(--ease-base);
  box-shadow: var(--shadow-md);
}
.wa-btn::before {
  content: "";
  position: absolute;
  right: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  border: 6px solid transparent;
  border-left-color: var(--clr-navy);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease-base), transform var(--ease-base);
}
.wa-btn:hover::after,
.wa-btn:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ── Orbit ring (visual guide — subtle) ─────────────────────────── */
.wa-orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed rgba(0, 184, 212, 0.25);
  animation: wa-ring-breathe 3.2s ease-in-out infinite;
}

/* ── Airplane orbit arm ──────────────────────────────────────────── */
/*
   Technique: a zero-width arm rotates around the center.
   The plane sits at the arm's tip and counter-rotates so it
   always points in the direction of travel (nose forward).
*/
.wa-orbit-arm {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;   /* = orbit radius */
  height: 0;
  transform-origin: 0 0;
  animation: wa-orbit 6s linear infinite;
}

.wa-plane {
  position: absolute;
  left: 80px;         /* tip of the arm */
  top: 0;
  transform: translate(-50%, -50%) rotate(90deg);
  /* counter-rotate to keep nose pointing along travel direction */
  animation: wa-plane-counter 6s linear infinite;
  filter: drop-shadow(0 2px 6px rgba(0,184,212,0.55));
}

.wa-plane svg {
  width: 22px;
  height: 22px;
}

/* ── Keyframes ───────────────────────────────────────────────────── */

/* WhatsApp button: gentle float */
@keyframes wa-float {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-6px);  }
}

/* Orbit ring subtle scale-breathe */
@keyframes wa-ring-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.4; }
  50%       { transform: scale(1.06); opacity: 0.8; }
}

/* Arm spins 360° continuously */
@keyframes wa-orbit {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Plane counter-spins to keep nose pointed in the flight direction */
@keyframes wa-plane-counter {
  from { transform: translate(-50%, -50%) rotate(90deg);  }
  to   { transform: translate(-50%, -50%) rotate(-270deg); }
}

/* ── Responsive adjustments ──────────────────────────────────────── */
@media (max-width: 768px) {
  .wa-widget {
    bottom: 18px;
    right: 18px;
    width: 130px;
    height: 130px;
  }

  .wa-btn {
    width: 52px;
    height: 52px;
  }

  .wa-btn svg {
    width: 28px;
    height: 28px;
  }

  .wa-orbit-arm { width: 65px; }
  .wa-plane { left: 65px; }
  .wa-plane svg { width: 18px; height: 18px; }
}

@media (max-width: 480px) {
  .wa-widget {
    bottom: 14px;
    right: 14px;
    width: 110px;
    height: 110px;
  }

  .wa-btn {
    width: 46px;
    height: 46px;
  }

  .wa-btn svg {
    width: 24px;
    height: 24px;
  }

  .wa-orbit-arm { width: 55px; }
  .wa-plane { left: 55px; }
  .wa-plane svg { width: 16px; height: 16px; }

  /* hide tooltip on tiny screens — no room */
  .wa-btn::after,
  .wa-btn::before { display: none; }
}


/* ================================================================
   HOMEPAGE BACKGROUND
   class="homepage-bg" is on <body> of index.html ONLY.
   Sub-pages are intentionally left untouched by this block.
   ================================================================ */

/* Creates a stacking context so z-index:-1 on ::before works correctly */
.homepage-bg {
  position: relative;
  isolation: isolate;
}

/* ── Fixed viewport-filling background layer ─────────────────── */
/* The ::before sits between the white body background and all page
   content. opacity < 1 softens the image without ever making real
   content (text, cards, icons) transparent — those are separate
   stacking layers and are always rendered at full opacity.        */
.homepage-bg::before {
  content: '';
  position: fixed;           /* viewport-anchored, never scrolls  */
  inset: 0;                  /* fills 100vw × 100vh at all times  */
  z-index: -1;               /* behind every piece of page content */
  background-image: url('image/home.svg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.48;             /* softened so text stays crisp on all sections */
  pointer-events: none;
}

/* Subtle dark tint over the global background image only — a separate
   layer (not baked into ::before's opacity, which would dilute it) so it
   reads at its own full strength. Sits directly above ::before and stays
   behind all real content; while the hero is on-screen its own opaque
   .hero-bg/.hero-overlay physically covers this layer, so the hero is
   never darkened twice — this only becomes visible past the hero. */
.homepage-bg::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.20);
  pointer-events: none;
}

/* Responsive: cover always fills the viewport on every screen size.
   background-size: cover already handles this; no extra rules needed. */

/* ================================================================
   TRANSPARENCY OVERRIDES — all scoped to .homepage-bg so nothing
   on the sub-pages is ever affected.
   ================================================================ */

/* ── HERO SECTION
   Replace the hard-coded blue gradient on .hero-bg with the
   dedicated hero.svg image. The dark overlay (.hero-overlay)
   is deliberately left untouched — it keeps all hero text sharp
   and legible against the SVG background.                       */
.homepage-bg .hero-bg {
  background-image: url('image/hero.svg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ── CONTENT SECTIONS
   .destinations and .why-brk are the only two homepage sections
   below the hero that carry solid background colours. Clearing
   them lets hero.svg show through the whole page.
   Inner card elements (.dest-card, .trust-card, .stat-box, etc.)
   all have their own white/light backgrounds and stay crisp.     */
.homepage-bg .destinations,
.homepage-bg .why-brk {
  background: transparent;
}

/* Extra dark overlay for the "Top 5 Destinations" section only — on top
   of (not replacing) the sitewide .homepage-bg::after tint, so the white
   destination cards stand out clearly against the beach background.
   .why-brk and the hero are untouched. Sits behind all real content via
   z-index:-1 inside .destinations' own isolated stacking context. */
.homepage-bg .destinations::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.40);
  pointer-events: none;
}

/* ── HERO WAVE DIVIDER
   The wave has fill="#ffffff" to match the old solid off-white
   section below. With .destinations now transparent the wave
   would float awkwardly — set fill to transparent to remove it
   cleanly without touching any HTML file.                        */
.homepage-bg .hero-wave path {
  fill: transparent;
}


/* ================================================================
   SUBPAGE BACKGROUND
   class="subpage-bg" is on <body> of packages / services / contact.
   index.html is intentionally left untouched.
   ================================================================ */

/* ── Stacking context so z-index:-1 on ::before works correctly ── */
.subpage-bg {
  position: relative;
  isolation: isolate;
}

/* ── The global background layer ─────────────────────────────── */
.subpage-bg::before {
  content: '';
  position: fixed;            /* viewport-anchored, never scrolls  */
  inset: 0;                   /* fills 100vw × 100vh at all times  */
  z-index: -1;                /* behind every piece of page content */
  background-image: url('image/background.svg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.88;
  pointer-events: none;
}

/* Subtle dark tint over the global background image only — a separate
   layer (not baked into ::before's opacity, which would dilute it) so it
   reads at its own full strength. Sits directly above ::before and stays
   behind all real content. Mirrors .homepage-bg::after for a consistent
   look across every page; hero sections keep their own opaque overlay
   on top, so this is never double-darkened there. */
.subpage-bg::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.20);
  pointer-events: none;
}

/* ================================================================
   TRANSPARENCY OVERRIDES — all scoped to .subpage-bg so nothing
   on the homepage is ever affected.
   ================================================================ */

/* ── HERO SECTIONS
   Remove the hard-coded blue gradient that was acting as a fallback
   colour. The dark overlay divs (.pkg-hero-overlay, .svc-hero-overlay,
   .ctc-hero-overlay) already sit on top and keep all hero text sharp
   and legible — they are deliberately left untouched.              */
.subpage-bg .pkg-hero,
.subpage-bg .svc-hero,
.subpage-bg .ctc-hero {
  background: transparent;
}

/* ── PACKAGES — content sections ─────────────────────────────── */
/* pkg-card2 already has background:white, so cards stay crisp.   */
.subpage-bg .pkg-section,
.subpage-bg .pkg-promo-section {
  background: transparent;
}

/* ── SERVICES — content sections ─────────────────────────────── */
/* svc-features: frosted-white glass strip — clean white theme, no dark overlay */
.subpage-bg .svc-features {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(15, 49, 242, 0.08);
  border-bottom: 1px solid rgba(15, 49, 242, 0.08);
}

/* ── CONTACT — content sections ──────────────────────────────── */
/* ctc-info-card, ctc-hours-card (navy) and ctc-form-card (white)
   all keep their own card backgrounds — fully readable.           */
.subpage-bg .ctc-main,
.subpage-bg .ctc-adventure {
  background: transparent;
}

/* ── WAVE DIVIDERS
   The wave SVGs in the hero sections used fill="#F5F7FA" to match
   the off-white section below. With sections now transparent the
   waves are no longer needed — setting fill to transparent removes
   them cleanly without touching any HTML file.                    */
.subpage-bg .pkg-hero-wave path,
.subpage-bg .svc-hero-wave path,
.subpage-bg .ctc-hero-wave path {
  fill: transparent;
}

/* ================================================================
   HOMEPAGE — TEXT READABILITY ON TRANSPARENT BACKGROUND
   Scoped entirely to .homepage-bg — no sub-page is ever affected.
   WHITE THEME: frosted-white glass panels only. Zero dark overlays,
   zero dark shadows. Text stays dark (navy/gray) on bright surfaces.
   White glow text-shadows add a premium luminous halo effect.
   Both wrapper divs already exist in the HTML — zero markup change.
   ================================================================ */

/* ── Destinations: frosted-white glass header panel ─────────────── */
.homepage-bg .destinations .section-intro {
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 8px 32px rgba(15, 49, 242, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.80);
  /* margin-bottom kept from .section-intro — preserves gap to dest cards */
}

/* "TOP DESTINATIONS" eyebrow — brand primary blue, white glow */
.homepage-bg .destinations .section-eyebrow {
  color: var(--clr-primary);
  text-shadow:
    0 0 14px rgba(255, 255, 255, 1),
    0 0  7px rgba(255, 255, 255, 0.90);
}

/* "Explore Amazing Places" heading — deep navy, crisp white halo */
.homepage-bg .destinations .section-heading {
  color: var(--clr-navy);
  text-shadow:
    0 0 18px rgba(255, 255, 255, 1),
    0 0  9px rgba(255, 255, 255, 0.92);
}

/* Inline plane icon inherits primary blue, white glow */
.homepage-bg .destinations .heading-plane {
  color: var(--clr-primary);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.95));
}

/* "View All Destinations" — primary-blue outlined on white glass */
.homepage-bg .destinations .btn-secondary {
  background: rgba(255, 255, 255, 0.60);
  color: var(--clr-primary);
  border-color: var(--clr-primary);
}
.homepage-bg .destinations .btn-secondary:hover {
  background: var(--clr-primary);
  color: #FFFFFF;
  border-color: var(--clr-primary);
  box-shadow: 0 8px 24px rgba(15, 49, 242, 0.28);
  transform: translateY(-2px);
}

/* ── Why BRK: frosted-white glass text panel ─────────────────────── */
.homepage-bg .why-text {
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 8px 32px rgba(15, 49, 242, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

/* "Why Travel With" — deep navy heading, white luminous halo */
.homepage-bg .why-text .section-heading {
  color: var(--clr-navy);
  text-shadow:
    0 0 18px rgba(255, 255, 255, 1),
    0 0  9px rgba(255, 255, 255, 0.92);
}

/* "BRK?" accent span — primary blue, white glow */
.homepage-bg .why-text .text-accent {
  color: var(--clr-primary);
  text-shadow:
    0 0 14px rgba(255, 255, 255, 1),
    0 0  7px rgba(255, 255, 255, 0.90);
}

/* Sub-headline paragraph */
.homepage-bg .why-sub {
  color: var(--clr-gray-dark);
  text-shadow:
    0 0 12px rgba(255, 255, 255, 1),
    0 0  6px rgba(255, 255, 255, 0.85);
}

/* Checklist items */
.homepage-bg .why-item {
  color: var(--clr-gray-dark);
  text-shadow:
    0 0 12px rgba(255, 255, 255, 1),
    0 0  6px rgba(255, 255, 255, 0.85);
}

/* Stat boxes sit inside the white glass panel — lift with strong white bg */
.homepage-bg .stat-box {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 2px 12px rgba(15, 49, 242, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Ensure stat numbers / labels / icons keep their brand colours */
.homepage-bg .stat-num  { color: var(--clr-primary);   }
.homepage-bg .stat-lbl  { color: var(--clr-gray-dark);  }
.homepage-bg .stat-icon { color: var(--clr-primary);   }


/* ── Responsive — tighten panel padding on smaller screens ────────── */
@media (max-width: 768px) {
  .homepage-bg .destinations .section-intro {
    padding: 1rem 1.25rem;
  }

  .homepage-bg .why-text {
    padding: var(--sp-6);
  }
}

@media (max-width: 480px) {
  .homepage-bg .destinations .section-intro {
    padding: 0.85rem 1rem;
  }

  .homepage-bg .why-text {
    padding: var(--sp-5);
  }
}


/* ================================================================
   SERVICES PAGE — INFINITE CAROUSEL SLIDER
   Isolated under .services-slider-section / .services-slider-container
   WHITE THEME: no dark backdrops, frosted-white overlays only.
   ================================================================ */


/* ── Hero scroll hint arrow ──────────────────────────────────────── */
.svc-scroll-hint {
  margin-top: auto;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: svc-bounce 2.2s ease-in-out infinite;
}

@keyframes svc-bounce {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(10px); }
}


/* ── Slider section wrapper ──────────────────────────────────────── */
.services-slider-section {
  background: var(--clr-white);
  padding-block: 4.5rem 5rem;
  position: relative;
  overflow: hidden;
}


/* ── Section intro ───────────────────────────────────────────────── */
.slider-intro {
  text-align: center;
  margin-bottom: 2.75rem;
}

.slider-intro .section-heading {
  justify-content: center;
  margin-block: 0.5rem 0.6rem;
}

.slider-intro-sub {
  font-size: 0.97rem;
  color: var(--clr-gray-mid);
  line-height: 1.65;
  max-width: 520px;
  margin-inline: auto;
}


/* ── Slider viewport — clips overflow, fades edges ──────────────── */
.services-slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Feathered edge mask for premium depth effect */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.85) 8%,
    rgba(0,0,0,1) 18%,
    rgba(0,0,0,1) 82%,
    rgba(0,0,0,0.85) 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.85) 8%,
    rgba(0,0,0,1) 18%,
    rgba(0,0,0,1) 82%,
    rgba(0,0,0,0.85) 92%,
    transparent 100%
  );
}


/* ── Slider track (flex row, positioned via JS transform) ────────── */
.services-slider-track {
  display: flex;
  gap: 2.5rem;
  padding-block: 2.8rem; /* vertical breathing room for scale pop */
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.services-slider-track:active { cursor: grabbing; }


/* ── Individual slide card ───────────────────────────────────────── */
.slider-card {
  flex-shrink: 0;
  width: 280px;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 3 / 4;
  /* transform · opacity · box-shadow are driven per-frame by the 3D carousel JS */
  will-change: transform, opacity;
}

/* Active (center) card: JS owns scale/opacity/shadow; CSS owns z-index + image zoom */
.slider-card.is-active {
  z-index: 10;
}


/* ── Card background image ───────────────────────────────────────── */
.slider-card-img-wrap {
  position: absolute;
  inset: 0;
  background: var(--grad-primary); /* fallback while image loads */
}

.slider-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s ease;
}

.slider-card.is-active .slider-card-img { transform: scale(1.04); }

/* Fallback gradients per service type */
.slide-img-fallback--flight    { background: linear-gradient(135deg, #0F31F2 0%, #46C4FF 100%); }
.slide-img-fallback--hotel     { background: linear-gradient(135deg, #081A92 0%, #7986CB 100%); }
.slide-img-fallback--tour      { background: linear-gradient(135deg, #E65100 0%, #FFC107 100%); }
.slide-img-fallback--cruise    { background: linear-gradient(135deg, #006064 0%, #46C4FF 100%); }
.slide-img-fallback--visa      { background: linear-gradient(135deg, #1A237E 0%, #3949AB 100%); }
.slide-img-fallback--corporate { background: linear-gradient(135deg, #263238 0%, #546E7A 100%); }
.slide-img-fallback--transfer  { background: linear-gradient(135deg, #212121 0%, #607D8B 100%); }
.slide-img-fallback--honeymoon { background: linear-gradient(135deg, #AD1457 0%, #F06292 100%); }
.slide-img-fallback--family    { background: linear-gradient(135deg, #2E7D32 0%, #81C784 100%); }
.slide-img-fallback--wellness  { background: linear-gradient(135deg, #00695C 0%, #4DB6AC 100%); }
.slide-img-fallback--custom    { background: linear-gradient(135deg, #4527A0 0%, #9575CD 100%); }


/* ── Frosted-white overlay panel (lower half of each card) ───────── */
/* WHITE THEME: no dark backgrounds — only semi-transparent white    */
.slider-card-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Elegant gradient: fully transparent photo → frosted white panel */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0)    0%,
    rgba(255, 255, 255, 0.65) 22%,
    rgba(255, 255, 255, 0.88) 44%,
    rgba(255, 255, 255, 0.97) 68%,
    rgba(255, 255, 255, 1)   100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 3rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}


/* ── Icon box inside overlay ─────────────────────────────────────── */
.slider-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--grad-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 0.25rem;
  box-shadow: 0 4px 14px rgba(15, 49, 242, 0.28);
}


/* ── Card text — dark on white, always legible ───────────────────── */
.slider-card-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--clr-navy);
  line-height: 1.2;
}

.slider-card-desc {
  font-size: 0.8rem;
  color: var(--clr-gray-mid);
  line-height: 1.55;
}

.slider-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--clr-primary);
  margin-top: 0.2rem;
  transition: gap var(--ease-base);
}

.slider-learn-more:hover { gap: 0.55rem; }


/* ── Dot progress indicators ─────────────────────────────────────── */
.slider-dots-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.slider-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: rgba(15, 49, 242, 0.18);
  border: 2px solid rgba(15, 49, 242, 0.22);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background    0.35s ease,
    border-color  0.35s ease,
    transform     0.35s ease,
    width         0.35s ease;
}

.slider-dot.slider-dot-active {
  background:   var(--clr-primary);
  border-color: var(--clr-primary);
  width: 24px;
  border-radius: 4px;
}

.slider-dot:hover:not(.slider-dot-active) {
  background:   rgba(15, 49, 242, 0.40);
  border-color: rgba(15, 49, 242, 0.40);
  transform: scale(1.2);
}


/* ── Subpage-bg: let the background SVG show through ─────────────── */
.subpage-bg .services-slider-section {
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Frosted intro panel on top of background image */
.subpage-bg .slider-intro {
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--r-lg);
  padding: 1.5rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 8px 32px rgba(15, 49, 242, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.80);
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: 2.75rem;
}

.subpage-bg .slider-intro .section-heading {
  color: var(--clr-navy);
  text-shadow:
    0 0 18px rgba(255, 255, 255, 1),
    0 0  9px rgba(255, 255, 255, 0.92);
}

.subpage-bg .slider-intro .section-eyebrow {
  color: var(--clr-primary);
  text-shadow:
    0 0 14px rgba(255, 255, 255, 1),
    0 0  7px rgba(255, 255, 255, 0.90);
}


/* ================================================================
   SERVICES SLIDER — RESPONSIVE
   ================================================================ */

/* ── Tablet landscape ≤ 1100px ─────────────────────────────────── */
@media (max-width: 1100px) {
  .slider-card { width: 255px; }
}

/* ── Tablet portrait ≤ 900px ───────────────────────────────────── */
@media (max-width: 900px) {
  .services-slider-section { padding-block: 3.5rem 4rem; }

  .slider-card {
    width: 235px;
    border-radius: 24px;
  }

  /* .slider-card.is-active scale is now driven by JS inline style */

  .services-slider-container {
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,1) 10%,
      rgba(0,0,0,1) 90%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,1) 10%,
      rgba(0,0,0,1) 90%,
      transparent 100%
    );
  }
}

/* ── Mobile ≤ 768px ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .svc-hero { min-height: 480px; }

  .services-slider-section { padding-block: 3rem 3.5rem; }

  .slider-card {
    width: 220px;
    border-radius: 22px;
  }

  .services-slider-container {
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,1) 6%,
      rgba(0,0,0,1) 94%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,1) 6%,
      rgba(0,0,0,1) 94%,
      transparent 100%
    );
  }

  .slider-card-title  { font-size: 0.94rem; }
  .slider-card-desc   { font-size: 0.76rem; }

  .subpage-bg .slider-intro {
    padding: 1.1rem 1.25rem;
  }
}

/* ── Small mobile ≤ 480px ──────────────────────────────────────── */
@media (max-width: 480px) {
  .svc-hero { min-height: 420px; }

  .services-slider-section { padding-block: 2.5rem 3rem; }

  /* Single-card focus on small screens */
  .slider-card {
    width: clamp(220px, calc(100vw - 80px), 300px);
    border-radius: 20px;
  }

  /* .slider-card.is-active scale is now driven by JS inline style */

  .slider-card-overlay { padding: 2.5rem 1.1rem 1.2rem; }

  .services-slider-container {
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,1) 4%,
      rgba(0,0,0,1) 96%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,1) 4%,
      rgba(0,0,0,1) 96%,
      transparent 100%
    );
  }

  .slider-dots-wrap { gap: 0.4rem; }
  .slider-dot       { width: 6px; height: 6px; }
  .slider-dot.slider-dot-active { width: 18px; }
}


/* ================================================================
   SERVICES RIBBON SLIDER — INTERACTION LAYER
   Safely appended. Scoped to .services-slider-section only.
   Zero impact on index.html, packages.html, or contact.html.
   ================================================================ */

/* ── Click-to-boost cursor hint on the non-track areas ───────────── */
/* Track already has cursor:grab; section covers the intro + dots */
.services-slider-section {
  cursor: pointer;
}

/* Track and its child cards restore grab — correct layering order */
.services-slider-container,
.services-slider-track {
  cursor: grab;
}
.services-slider-track:active {
  cursor: grabbing;
}

/* Dot indicators and intro text keep normal pointer cursor */
.slider-dots-wrap,
.slider-dots-wrap .slider-dot {
  cursor: pointer;
}
.slider-intro {
  cursor: default;
}

/* ── Subtle press ripple on click — visual "boost" confirmation ───── */
@keyframes srb-click-ripple {
  0%   { box-shadow: inset 0 0 0   0px rgba(15, 49, 242, 0.06); }
  40%  { box-shadow: inset 0 0 60px 0px rgba(15, 49, 242, 0.08); }
  100% { box-shadow: inset 0 0   0px 0px rgba(15, 49, 242, 0.00); }
}

.services-slider-section:active {
  animation: srb-click-ripple 0.38s ease forwards;
}

/* ── Ensure no dark overlays bleed in on subpage background ──────── */
.subpage-bg .services-slider-section:active {
  animation: srb-click-ripple 0.38s ease forwards;
}

/* ── Active card on subpage: z-index only; JS drives all shadow depth ── */
.subpage-bg .slider-card.is-active {
  z-index: 10;
}

/* ── Responsive: tighten cursor area on touch devices ────────────── */
@media (hover: none) {
  /* Touch devices don't need the pointer cursor hint */
  .services-slider-section { cursor: default; }
}


/* ================================================================
   SERVICES PAGE — WHITE THEME VISIBILITY OVERRIDES
   Scoped to .subpage-bg — zero impact on homepage / packages / contact.
   Clean, bright, inviting: frosted-white glass only. No dark overlays,
   no black shadows. All text stays high-contrast navy / gray on white.
   ================================================================ */

/* ── Feature icon: swap white border/color for blue tint ─────────── */
.subpage-bg .svc-feature-icon {
  background:   rgba(15, 49, 242, 0.08);
  border-color: rgba(15, 49, 242, 0.20);
  color:        var(--clr-primary);
}
.subpage-bg .svc-feature-item:hover .svc-feature-icon {
  background:   var(--clr-primary);
  border-color: var(--clr-primary);
  color:        var(--clr-white);
  transform: scale(1.06);
}

/* ── Feature text: dark high-contrast on frosted white ───────────── */
.subpage-bg .svc-feature-title { color: var(--clr-navy); }
.subpage-bg .svc-feature-desc  { color: var(--clr-gray-mid); }

/* ── Feature item dividers: soft blue on white ground ───────────── */
.subpage-bg .svc-feature-item {
  border-right-color: rgba(15, 49, 242, 0.10);
}

/* ── Tagline: dark text, light blue separator ───────────────────── */
.subpage-bg .svc-tagline-footer {
  color:             var(--clr-navy);
  border-top-color:  rgba(15, 49, 242, 0.12);
}

/* ── Responsive feature dividers: blue on white (tablet / mobile) ── */
@media (max-width: 900px) {
  .subpage-bg .svc-feature-item {
    border-bottom-color: rgba(15, 49, 242, 0.10);
  }
}
@media (max-width: 480px) {
  .subpage-bg .svc-feature-item {
    border-bottom-color: rgba(15, 49, 242, 0.10);
  }
}

/* ── Carousel dot indicators: blue on transparent background ─────── */
.subpage-bg .c3d-dot-btn {
  background: rgba(15, 49, 242, 0.18);
}
.subpage-bg .c3d-dot-btn.is-active {
  background:   var(--clr-primary);
  border-radius: 4px;
}

/* ================================================================
   PLACEHOLDER SVG IMAGES — RESPONSIVE FILL SAFETY NET
   Ensures image/Viya.svg, image/Thai.svg, image/Bali.svg fill
   their parent card containers cleanly at all breakpoints.
   Non-breaking addition — reinforces rules already declared above.
   ================================================================ */
.dest-img,
.pkg-img,
.why-img,
.ctc-adv-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.c3d-img-wrap > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  flex-shrink: 0;
}

/* Guarantee wrapper containers clip any SVG overflow at all breakpoints */
.dest-img-wrap,
.pkg-img-wrap,
.c3d-img-wrap,
.ctc-adv-img-wrap {
  overflow: hidden;
}