/*
 * ═══════════════════════════════════════════════════════════════
 *  AERO OVERHAUL — "CINEMATIC ALPINE LUXURY"
 *  A world-class editorial redesign for paragliding-tolmin.com
 *  Direction: Patagonia × Monocle × REI × Luxury Travel Brand
 *  Fonts: Oswald (impact display) + Manrope (refined body)
 *  Palette: Midnight Navy + Sunrise Gold + Glacier White
 * ═══════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────
   0. DESIGN SYSTEM TOKENS
───────────────────────────────────────────────────────────── */
:root {
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --ink:        #07111e;
  --ink-80:     rgba(7, 17, 30, 0.8);
  --ink-50:     rgba(7, 17, 30, 0.5);
  --ocean:      #0a2540;
  --sky:        #164e7a;
  --glacier:    #f0f5fa;
  --snow:       #ffffff;
  --gold:       #c8962a;
  --gold-light: #e8b84b;
  --mist:       rgba(255,255,255,0.06);
  --glass:      rgba(7, 17, 30, 0.55);
  --bg:         var(--glacier);
  --surface:    var(--snow);
  --text:       var(--ink);
  --text-muted: #2d3e4d; /* Darkened further for peak WCAG AAA contrast */
  --accent:     var(--ocean);
  --highlight:  var(--gold);
  --border:     rgba(7, 17, 30, 0.1);
  --border-light: rgba(255,255,255,0.12);
  --s1: clamp(6px, 1vw, 8px); --s2: clamp(12px, 1.5vw, 16px); --s3: clamp(16px, 2vw, 24px); --s4: clamp(24px, 2.5vw, 32px);
  --s5: clamp(32px, 3.5vw, 48px); --s6: clamp(40px, 4.5vw, 64px); --s7: clamp(64px, 6.5vw, 96px); --s8: clamp(80px, 8vw, 128px);

  /* Wide screen container max-width */
  --container-max: min(1400px, 95vw);
  --r-sm: 8px; --r-md: 16px; --r-lg: 28px; --r-pill: 999px;

  /* Typography Scale - Fluid */
  --fs-xs:   clamp(0.6rem, 1vw, 0.68rem);
  --fs-sm:   clamp(0.7rem, 1.2vw, 0.8rem);
  --fs-base: clamp(0.9rem, 1.5vw, 1.1rem);
  --fs-lg:   clamp(1rem, 1.8vw, 1.25rem);
  --fs-xl:   clamp(1.1rem, 2vw, 1.5rem);
  --fs-2xl:  clamp(1.8rem, 5vw, 2.8rem);

  /* Centralized Shadows */
  --shadow-color: rgba(7, 17, 30, 0.12);
  --shadow-sm: 0 2px 12px rgba(7, 17, 30, 0.06);
  --shadow-md: 0 8px 32px var(--shadow-color);
  --shadow-lg: 0 24px 64px rgba(7, 17, 30, 0.18);
  --shadow-xl: 0 40px 100px rgba(7, 17, 30, 0.28);
  --glow-gold: 0 0 40px rgba(200, 150, 42, 0.35);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s; --dur-base: 0.4s; --dur-slow: 0.7s; --dur-xl: 1.2s;

  /* Keep backward compat aliases */
  --color-accent: var(--ocean);
  --color-electric: var(--gold);
  --color-text: var(--ink);
  --color-text-light: var(--text-muted);
  --color-bg: var(--glacier);
  --color-white: var(--snow);
  --color-border: var(--border);
  --glass-bg: var(--glass);
  --glass-border: var(--border-light);
  --glass-blur: 12px;
  --radius-main: var(--r-lg);
  --radius-pill: var(--r-pill);
  --radius-sm: var(--r-sm);
  --spacing-sm: var(--s1);
  --spacing-md: var(--s2);
  --spacing-lg: var(--s4);
  --spacing-xl: var(--s6);
  --transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  --font-primary: 'Oswald', sans-serif;
  --font-secondary: 'Syne', sans-serif;

}

/* ─────────────────────────────────────────────────────────────
   1. GLOBAL RESET
───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box !important; }

html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Match overscroll bounce color to the hero background on all platforms */
html {
  background-color: #0a1628 !important;
}

body {
  font-family: var(--font-body) !important;
  background: var(--glacier) !important;
  color: var(--ink) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

img { display: block !important; max-width: 100% !important; height: auto !important; aspect-ratio: auto !important; }

video { max-width: 100% !important; height: auto !important; }
a { text-decoration: none !important; color: inherit !important; }
ul { list-style: none !important; }

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

/* ─────────────────────────────────────────────────────────────
   2. TYPOGRAPHY
───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.section-title, .offer-title, .pilot-name,
.hero-title, .hero-title-simple {
  font-family: var(--font-display) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  background: none !important;
  filter: none !important;
}

.section-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  letter-spacing: 0.08em !important;
  margin-bottom: var(--s2) !important;
  text-wrap: balance !important;
}

.section-subtitle {
  font-family: var(--font-body) !important;
  font-size: var(--fs-base) !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.03em !important;
  font-weight: 400 !important;
  margin-bottom: var(--s6) !important;
  opacity: 1 !important;
}

p, li { font-family: var(--font-body) !important; }

/* ─────────────────────────────────────────────────────────────
   3. LAYOUT
───────────────────────────────────────────────────────────── */
.container {
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 0 var(--s4) !important;
}

.offer-price, .pill-stat-number, .flight-option-price {
  font-variant-numeric: tabular-nums !important;
}

section {
  scroll-margin-top: 100px !important;
}

/* ─────────────────────────────────────────────────────────────
   4. BUTTON SYSTEM
───────────────────────────────────────────────────────────── */
.btn {
   display: inline-flex !important;
   align-items: center !important;
   gap: var(--s1) !important;
   font-family: var(--font-display) !important;
   font-size: var(--fs-sm) !important;
   font-weight: 500 !important;
   letter-spacing: 0.14em !important;
   text-transform: uppercase !important;
   border-radius: var(--r-pill) !important;
   padding: 16px 30px !important;
   min-height: 44px !important;
   border: 1.5px solid transparent !important;
   cursor: pointer !important;
   transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out) !important;
   white-space: nowrap !important;
   text-decoration: none !important;
}

.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 4px !important;
}

.btn-primary, .btn-action {
  background: var(--ocean) !important;
  color: var(--snow) !important;
  border-color: var(--ocean) !important;
  box-shadow: var(--shadow-md) !important;
}

.btn-primary:hover, .btn-action:hover {
  background: var(--sky) !important;
  border-color: var(--sky) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--snow) !important;
}

.btn-outline {
  background: transparent !important;
  color: var(--ink) !important;
  border-color: rgba(7,17,30,0.18) !important;
}

.btn-outline:hover {
  background: var(--ocean) !important;
  color: var(--snow) !important;
  border-color: var(--ocean) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Hero context: white-on-dark buttons */
.btn-hero-primary {
  background: var(--snow) !important;
  color: var(--ocean) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 32px rgba(255,255,255,0.2) !important;
}

.btn-hero-primary:hover {
  background: var(--gold) !important;
  color: var(--snow) !important;
  box-shadow: var(--glow-gold) !important;
  transform: translateY(-3px) !important;
}

/* Gold hero CTA — highest visual weight on dark background */
.btn-hero-gold {
  background: var(--gold) !important;
  color: var(--ocean) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 8px 32px rgba(200,150,42,0.45) !important;
  font-weight: 700 !important;
}

.btn-hero-gold:hover {
  background: var(--gold-light) !important;
  border-color: var(--gold-light) !important;
  color: var(--ocean) !important;
  box-shadow: 0 12px 40px rgba(200,150,42,0.6) !important;
  transform: translateY(-3px) !important;
}

/* Ghost secondary CTA */
.btn-hero-ghost {
  background: transparent !important;
  color: rgba(255,255,255,0.75) !important;
  border-color: rgba(255,255,255,0.3) !important;
  font-weight: 500 !important;
}

.btn-hero-ghost:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.6) !important;
  color: var(--snow) !important;
  transform: translateY(-2px) !important;
}

.hero-btns .btn-outline {
  background: transparent !important;
  color: var(--snow) !important;
  border-color: rgba(255,255,255,0.35) !important;
}

.hero-btns .btn-outline:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.7) !important;
  color: var(--snow) !important;
  transform: translateY(-3px) !important;
}

/* Submit CTA — larger, more prominent */
.btn-submit-cta {
  padding: 16px 36px !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.06em !important;
}

/* Booking trust micro-copy row */
.booking-trust-row {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 16px 28px !important;
  margin-top: 16px !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  color: var(--text-muted) !important;
}

.booking-trust-row span {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.booking-trust-row .fa {
  color: var(--gold) !important;
  font-size: 0.75rem !important;
}

/* ─────────────────────────────────────────────────────────────
   5. NAVIGATION
───────────────────────────────────────────────────────────── */
.hero-nav {
  position: fixed !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 48px) !important;
  max-width: var(--container-max) !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 24px !important;
  background: rgba(7, 17, 30, 0.62) !important;
  backdrop-filter: blur(18px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: var(--r-pill) !important;
  box-shadow: 0 8px 40px rgba(7,17,30,0.5), 0 2px 0 rgba(200,150,42,0.0) inset !important;
  z-index: 999 !important;
  transition:
    top 0.5s var(--ease-out),
    height 0.5s var(--ease-out),
    background 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out),
    backdrop-filter 0.45s var(--ease-out) !important;
}

/* ── Scrolled state: bold, unmistakable deep-navy bar ── */
.hero-nav.scrolled {
  top: 10px !important;
  height: 62px !important;
  background: rgba(7, 17, 30, 0.97) !important;
  backdrop-filter: blur(28px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(220%) !important;
  border-color: rgba(200, 150, 42, 0.28) !important;
  /* Gold top-accent stripe + deep layered shadow */
  box-shadow:
    0 0 0 1px rgba(200, 150, 42, 0.18),
    0 1px 0 0 rgba(200, 150, 42, 0.45),
    0 8px 40px rgba(7, 17, 30, 0.65),
    0 24px 72px rgba(7, 17, 30, 0.35) !important;
}

/* ── Scroll progress indicator ── */
.nav-scroll-progress {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 2px !important;
  width: 0% !important;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 60%, rgba(232,184,75,0) 100%) !important;
  border-radius: 0 0 var(--r-pill) var(--r-pill) !important;
  opacity: 0 !important;
  transition: width 0.1s linear, opacity 0.4s ease !important;
  pointer-events: none !important;
}

.hero-nav.scrolled .nav-scroll-progress {
  opacity: 1 !important;
}

/* ── Logo wordmark (fades in when scrolled) ── */
.hero-logo-wordmark {
  display: flex !important;
  flex-direction: column !important;
  gap: 0px !important;
  opacity: 0 !important;
  transform: translateX(-6px) !important;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out) !important;
  pointer-events: none !important;
}

.hero-nav.scrolled .hero-logo-wordmark {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.wordmark-line1 {
  font-family: var(--font-display) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--snow) !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}

.wordmark-line2 {
  font-family: var(--font-display) !important;
  font-size: 0.58rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--gold-light) !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}


/* Logo */
.hero-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.hero-logo .brand-logo {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  /* Keep brand colors but add glow for dark nav */
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.2)) !important;
  transition: filter 0.4s ease, transform 0.4s ease !important;
}

.hero-nav.scrolled .hero-logo .brand-logo {
  filter: none !important;
}

/* Nav links — centered absolutely */
.hero-nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.hero-nav-links li { list-style: none !important; }

/* --- Branded Preloader (Inside Entry Curtain) --- */
.hero-entry-curtain {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2rem !important;
}

.hero-preloader {
  position: relative;
  width: 100px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Perspective for a bit of 3D depth in the swing */
  perspective: 1000px;
}

/* Paraglider Wing Arc */
.hero-loader-arc {
  position: absolute;
  top: 0;
  width: 80px;
  height: 30px;
  border: 3.5px solid transparent;
  border-top: 3.5px solid var(--gold);
  border-radius: 50% 50% 0 0;
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.4));
  transform-origin: bottom center;
  animation: wing-swing 3s ease-in-out infinite;
}

/* Pilot dot swinging below */
.hero-loader-pilot {
  position: absolute;
  top: 45px;
  width: 6px;
  height: 6px;
  background: var(--glacier);
  border-radius: 50%;
  box-shadow: 0 0 15px var(--glacier);
  transform-origin: center -30px; /* Pendulum point at center of wing */
  animation: pilot-pendulum 3s ease-in-out infinite;
}

@keyframes wing-swing {
  0%, 100% { transform: rotate(-15deg) translateX(-12px); }
  50% { transform: rotate(15deg) translateX(12px); }
}

@keyframes pilot-pendulum {
  0%, 100% { transform: rotate(22deg) translateX(24px); }
  50% { transform: rotate(-22deg) translateX(-24px); }
}

.preloader-text {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  opacity: 0.8;
  margin-top: 15px;
  animation: text-pulse 3s ease-in-out infinite;
  display: flex;
  align-items: center;
  gap: 4px;
}

.loading-dots {
  display: inline-flex;
  margin-left: 2px;
}

.loading-dots span {
  animation: dot-blink 1.4s infinite both;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-blink {
  0% { opacity: 0.2; transform: translateY(0); }
  20% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 0.2; transform: translateY(0); }
}

@keyframes text-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1); }
}

/* Ensure curtain is on top */
#hero-entry-curtain {
  z-index: 9999 !important;
}

/* ── Hero Scroll Indicator — base token block (position/animation set below) ── */
.scroll-indicator {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-display) !important;
  font-size: var(--fs-xs) !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--snow) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
}


.scroll-indicator:hover {
  color: var(--gold-light) !important;
}

.scroll-indicator:hover .paraglider-icon svg path {
  stroke: var(--gold-light) !important;
}

.scroll-indicator .paraglider-icon {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform var(--dur-base) var(--ease-out) !important;
}

.scroll-indicator:hover .paraglider-icon {
  transform: translateY(-4px) !important;
}

.scroll-indicator .paraglider-icon svg {
  width: 40px !important;
  height: 24px !important;
}

/* Elegant glass-gold focus ring for keyboard navigation */
.scroll-indicator:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4), 0 0 0 4px var(--gold) !important;
  border-radius: var(--r-sm) !important;
}

@keyframes floatBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}
/* Tablet gap adjustment */
@media (min-width: 641px) and (max-width: 1023px) {
  .hero-nav-links {
    gap: 16px !important;
  }
}

.hero-nav-links a {
  font-family: var(--font-display) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.82) !important;
  transition: color var(--dur-fast) ease !important;
  position: relative !important;
  padding-bottom: 3px !important;
  text-decoration: none !important;
}

.hero-nav-links a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 1.5px !important;
  background: var(--gold-light) !important;
  transition: width var(--dur-base) var(--ease-out) !important;
}

.hero-nav-links a:hover { color: var(--snow) !important; }
.hero-nav-links a:hover::after { width: 100% !important; }

/* ── Scrolled: high-contrast white nav links with gold hover ── */
.hero-nav.scrolled .hero-nav-links a { color: rgba(255,255,255,0.8) !important; }
.hero-nav.scrolled .hero-nav-links a:hover { color: var(--gold-light) !important; }
.hero-nav.scrolled .hero-nav-links a::after { background: var(--gold-light) !important; }

/* Book CTA */
.hero-nav-cta.cta-text {
  font-family: var(--font-display) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: rgba(255,255,255,0.12) !important;
  color: var(--snow) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: var(--r-pill) !important;
  padding: 9px 22px !important;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.hero-nav-cta.cta-text:hover {
  background: var(--snow) !important;
  color: var(--ocean) !important;
}

/* ── Scrolled CTA: gold accent button for maximum CTR ── */
.hero-nav.scrolled .hero-nav-cta.cta-text {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%) !important;
  color: var(--ocean) !important;
  border-color: transparent !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 20px rgba(200, 150, 42, 0.45) !important;
}

.hero-nav.scrolled .hero-nav-cta.cta-text:hover {
  background: linear-gradient(135deg, var(--gold-light) 0%, #f5cc6a 100%) !important;
  box-shadow: 0 6px 28px rgba(200, 150, 42, 0.65) !important;
  transform: translateY(-1px) !important;
}

/* Right-side nav group: language selector + Book CTA */
.hero-nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

@media (min-width: 641px) and (max-width: 900px) {
  .hero-nav-right {
    gap: 6px !important;
  }
}

/* Mobile hamburger */
.mobile-nav-toggle {
  display: none !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  width: 48px !important;
  height: 48px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 1001 !important;
  padding: 0 !important;
}

.mobile-nav-toggle span {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  background: var(--snow) !important;
  border-radius: 2px !important;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out), background-color 0.3s var(--ease-out) !important;
}

.hero-nav.scrolled .mobile-nav-toggle span {
  background: var(--snow) !important;
}

.mobile-nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
.mobile-nav-toggle.active span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
.mobile-nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

@media (max-width: 640px) {
   .mobile-nav-toggle { display: flex !important; }

   /* On mobile, hide the Book CTA from the right group (it's in the mobile dropdown) */
   .hero-nav-right .hero-nav-cta { display: none !important; }

   /* Compact right group on mobile */
   .hero-nav-right {
     gap: 6px !important;
   }

   .hero-nav-links {
     position: fixed !important;
     top: 92px !important;
     left: 50% !important;
     transform: translateX(-50%) translateY(-10px) !important;
     width: calc(100% - 40px) !important;
     max-width: 420px !important;
     flex-direction: column !important;
     gap: 0 !important;
     background: rgba(7,17,30,0.92) !important;
     backdrop-filter: blur(40px) !important;
     -webkit-backdrop-filter: blur(40px) !important;
     border: 1px solid rgba(255,255,255,0.1) !important;
     border-radius: 20px !important;
     padding: 8px !important;
     opacity: 0 !important;
     pointer-events: none !important;
     transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out), background-color 0.35s var(--ease-out) !important;
     z-index: 998 !important;
   }

   .hero-nav-links.active {
     opacity: 1 !important;
     pointer-events: all !important;
     transform: translateX(-50%) translateY(0) !important;
   }

   .hero-nav-links li { width: 100% !important; }

   .hero-nav-links a {
     display: block !important;
     padding: 14px 20px !important;
     border-radius: 12px !important;
     text-align: center !important;
     color: var(--snow) !important;
     font-size: 0.85rem !important;
   }

   .hero-nav-links a:hover { background: rgba(255,255,255,0.07) !important; }
   .hero-nav-links a::after { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   6. HERO SECTION
───────────────────────────────────────────────────────────── */
.hero {
  position: relative !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 650px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-bg-sequence {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  contain: paint !important;
}

/* Hero section: must be a sized positioned container for all absolute children */
#hero {
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Deep base color to prevent white flashes */
  background-color: #0a1628 !important;
  /* Static image as ultimate fallback */
  background-image: url('assets/images/bg/mangrt.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
}

.hero-video-remix {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

.hero-video-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0;
  /* We use a slightly longer transition for the incoming layer to ensure overlap */
  transition: opacity 3.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 1 !important;
  filter: brightness(0.92) contrast(1.08) saturate(1.15) !important;
  pointer-events: none !important;
}

/* Layer 2: The stable active video */
.hero-video-bg.active {
  opacity: 1 !important;
  z-index: 2 !important;
}

/* Layer 3: The incoming video fading in on TOP of the active one */
.hero-video-bg.incoming {
  opacity: 1 !important;
  z-index: 3 !important;
}

/* Atmospheric HUD Overlay — inline gradient, no external file */
.hero-hud {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 40%),
    linear-gradient(0deg, rgba(7,17,30,0.18) 0%, transparent 50%) !important;
  pointer-events: none !important;
  mix-blend-mode: overlay !important;
}

/* Drifting Mist / Cloud Layer */
.hero-mist {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0%, transparent 70%) !important;
  mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent) !important;
  animation: mistDrift 60s infinite linear !important;
  pointer-events: none !important;
}

@keyframes mistDrift {
  0% { transform: scale(1.2) translateX(-5%); opacity: 0.3; }
  50% { transform: scale(1.3) translateX(5%); opacity: 0.6; }
  100% { transform: scale(1.2) translateX(-5%); opacity: 0.3; }
}

/* CSS Animations for videos removed - handled by High Perf JS Sequencer */

.hero-bg-layer {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 0;
  transform: scale(1.08) !important;
  animation: heroCycle 24s infinite !important;
  will-change: opacity, transform !important;
  mix-blend-mode: normal !important;
}

.hero-bg-layer:nth-child(1) { animation-delay: 0s !important;  z-index: 4 !important; }
.hero-bg-layer:nth-child(2) { animation-delay: 6s !important;  z-index: 3 !important; }
.hero-bg-layer:nth-child(3) { animation-delay: 12s !important; z-index: 2 !important; }
.hero-bg-layer:nth-child(4) { animation-delay: 18s !important; z-index: 1 !important; }

@keyframes heroCycle {
  0%   { opacity: 0; transform: scale(1.08); }
  4%   { opacity: 1; transform: scale(1.04); }
  25%  { opacity: 1; transform: scale(1.00); }
  29%  { opacity: 0; transform: scale(0.98); }
  100% { opacity: 0; transform: scale(1.08); }
}

.hero-vignette {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  background: radial-gradient(circle at center, transparent 30%, rgba(7,17,30,0.32) 100%) !important;
  pointer-events: none !important;
}

.hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  background:
    linear-gradient(
      170deg,
      rgba(7, 17, 30, 0.65) 0%,
      rgba(7, 24, 42, 0.25) 45%,
      rgba(200, 150, 42, 0.15) 75%,
      rgba(7, 17, 30, 0.75) 100%
    ) !important;
}

/* Film-grain overlay */
.hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  pointer-events: none !important;
  opacity: 0.3 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E") !important;
}

.hero-asymmetric-wrapper {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-content {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  animation: none !important;
  justify-content: center !important;
}

/* hero-main-content: defined fully in the new animation block below */

/* ═══════════════════════════════════════════════════════════════
   ATMOSPHERIC ENTRY CURTAIN
═══════════════════════════════════════════════════════════════ */
.hero-entry-curtain {
  position: fixed !important;
  inset: 0 !important;
  background: var(--ocean) !important;
  z-index: 9 !important;
  transition: opacity 0.7s cubic-bezier(0.19, 1, 0.22, 1) !important;
  pointer-events: none !important;
}

body.hero-loaded .hero-entry-curtain {
  opacity: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   HERO WRAPPER
═══════════════════════════════════════════════════════════════ */
.hero-asymmetric-wrapper, .hero-content {
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
}

.hero-main-content {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 5vw !important;
  margin: 0 auto !important;
  text-align: center !important;
  z-index: 10 !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
}

/* ═══════════════════════════════════════════════════════════════
   PARAGLIDER SYSTEM — fixed overlay during animation
   JS drives: descent → land → collapse → text reveal
═══════════════════════════════════════════════════════════════ */
.pg-system {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  /* No !important on transform — JS inline style must win during animation */
  transform: translateX(-50%) translateY(-110vh) rotate(-5deg);
  width: min(780px, 88vw) !important;
  /* No !important on opacity — JS inline style must win during animation */
  opacity: 0;
  will-change: transform, opacity !important;
  pointer-events: none !important;
  z-index: 500 !important;
}

/* ── Dynamic dark halo backdrop for contrast separation on bright background videos ── */
.pg-system::before {
  content: '' !important;
  position: absolute !important;
  top: -15% !important;
  left: -15% !important;
  width: 130% !important;
  height: 130% !important;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(7, 20, 38, 0.48) 0%,
    rgba(7, 20, 38, 0.28) 40%,
    transparent 72%
  ) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  filter: blur(24px) !important;
  opacity: 0;
  transform: scale(0.9) !important;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pg-system.pg-descending::before,
.pg-system.pg-landed::before {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.pg-system.pg-collapsed::before {
  opacity: 0 !important;
  transform: scale(0.8) !important;
}

.pg-system.pg-descending {
  opacity: 1;
}

/* When the whole system is fading out after collapse */
.pg-system.pg-collapsed {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* The wing SVG fills the container with ambient depth dropshadows */
.pg-wing {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  overflow: visible !important;
  filter: drop-shadow(0 12px 36px rgba(7, 17, 30, 0.55)) drop-shadow(0 4px 10px rgba(7, 17, 30, 0.25)) !important;
}

/* Each cell transforms independently during collapse */
.pg-cell {
  transform-box: fill-box !important;
  transform-origin: center bottom !important;
  will-change: transform, opacity !important;
}

/* Lines go slack on collapse */
.pg-line {
  transform-box: fill-box !important;
  transform-origin: bottom center !important;
  will-change: stroke-opacity, d !important;
}

/* Pilot image in SVG with high-contrast dropshadow */
.pg-pilot {
  filter: drop-shadow(0 4px 12px rgba(7, 17, 30, 0.65)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.2)) !important;
  will-change: transform, opacity !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}

/* Dust puff on impact */
.pg-dust {
  transform-box: fill-box !important;
  transform-origin: center !important;
  pointer-events: none !important;
}

/* Gentle in-flight sway (applied while descending, removed on land) */
.pg-system.pg-descending .pg-wing {
  animation: pgInFlightSway 3s ease-in-out infinite !important;
}

@keyframes pgInFlightSway {
  0%   { transform: rotate(0deg) translateY(0px); }
  25%  { transform: rotate(-1.5deg) translateY(-3px); }
  50%  { transform: rotate(0.5deg) translateY(-1px); }
  75%  { transform: rotate(1.2deg) translateY(-4px); }
  100% { transform: rotate(0deg) translateY(0px); }
}

/* ═══════════════════════════════════════════════════════════════
   HERO TEXT BLOCK — editorial monument style
   Hidden until JS triggers .pg-text-visible after collapse
═══════════════════════════════════════════════════════════════ */
.hero-text-block {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  will-change: opacity, transform !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 1000px !important;
  pointer-events: none !important;
  position: relative !important;
}

.hero-text-glow {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 120% !important;
  height: 140% !important;
  background: radial-gradient(
    circle at center,
    rgba(7, 17, 30, 0.45) 0%,
    rgba(7, 24, 42, 0.15) 40%,
    transparent 70%
  ) !important;
  filter: blur(40px) !important;
  z-index: -1 !important;
  opacity: 0.8 !important;
  pointer-events: none !important;
}

.hero-text-block.pg-text-visible {
  pointer-events: auto !important;
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1) !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ── wordmark ── */
.hero-wordmark {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  /* Reset global h1 overrides */
  color: transparent !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
  filter: none !important;
  line-height: 1 !important;
}

/* "Tandem" — very large, italic-style slant via skewX, premium unified gradient */
.hw-tandem {
  display: block !important;
  font-size: clamp(3.2rem, 12vw, 9.5rem) !important;
  line-height: var(--line-heading) !important;
  letter-spacing: var(--tracking-tight) !important;
  background: linear-gradient(165deg, #ffffff 0%, #f0e8d8 50%, #e8d4a8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 4px 32px rgba(0,0,0,0.4)) !important;
  transform: skewX(-3deg) !important;
}

/* Horizontal rule divider */
.hw-divider {
  display: block !important;
  width: clamp(200px, 50vw, 480px) !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(232, 212, 168, 0.6) 20%, rgba(255,255,255,0.4) 50%, rgba(232, 212, 168, 0.6) 80%, transparent) !important;
  margin: 12px auto !important;
}

/* "Paragliding" — slightly smaller, tracking out, same unified gradient */
.hw-paragliding {
  display: block !important;
  font-size: clamp(1.8rem, 5.5vw, 4.8rem) !important;
  line-height: 1 !important;
  letter-spacing: 0.24em !important;
  background: linear-gradient(165deg, #ffffff 0%, #f0e8d8 50%, #e8d4a8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 20px rgba(0,0,0,0.25)) !important;
}

/* Valley line — small spaced caps flanked by rules */
.hw-valley {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 14px !important;
  width: 100% !important;
  justify-content: center !important;
}

.hw-valley-rule {
  flex: 1 !important;
  max-width: 100px !important;
  height: 1px !important;
  background: rgba(255,255,255,0.2) !important;
  display: block !important;
}

.hw-valley-text {
  font-family: var(--font-body) !important;
  font-size: clamp(0.68rem, 1.4vw, 0.85rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.65) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.65) !important;
  white-space: nowrap !important;
}

/* Overrides placed after global .hero-subtitle below in file — see HERO TEXT OVERRIDES section */

/* ═══════════════════════════════════════════════════════════════
   HERO TAG (location label above everything)
═══════════════════════════════════════════════════════════════ */
.hero-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--font-body) !important;
  font-size: 0.67rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--gold-light) !important;
  margin-bottom: 24px !important;
  opacity: 0 !important;
  transform: translateY(12px) !important;
  animation: fadeUp 1s var(--ease-out) 0.4s forwards !important;
}

.hero-tag::before, .hero-tag::after {
  content: '' !important;
  display: block !important;
  width: 28px !important;
  height: 1px !important;
  background: var(--gold-light) !important;
  opacity: 0.5 !important;
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION — instant-show everything
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pg-system {
    transform: none !important;
    opacity: 0 !important;
    display: none !important;
  }
  .hero-text-block {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .hero-tag {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.hero-subtitle {
  font-family: var(--font-body) !important;
  font-size: clamp(0.85rem, 1.6vw, 1rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: rgba(255,255,255,0.88) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.88) !important;
  background: none !important;
  margin-bottom: var(--s5) !important;
  opacity: 0 !important;
  transform: translateY(14px) !important;
  animation: fadeUp 1.1s var(--ease-out) 1.9s forwards !important;
}

.hero-btns {
  display: flex !important;
  align-items: center !important;
  gap: var(--s3) !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  opacity: 0 !important;
  transform: translateY(14px) !important;
  animation: fadeUp 1.1s var(--ease-out) 2.15s forwards !important;
}

/* ── HERO TEXT OVERRIDES: must come after global .hero-subtitle / .hero-btns ── */
.hero-text-block .hero-subtitle {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  color: rgba(255,255,255,0.95) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.95) !important;
  background: none !important;
  margin-bottom: var(--s5) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4) !important;
}

.hero-text-block .hero-btns {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Trust strip (bottom center) */
.hero-trust {
  position: absolute !important;
  bottom: 32px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  color: rgba(255,255,255,0.72) !important;
  background: rgba(7,17,30,0.45) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--r-pill) !important;
  padding: 10px 24px !important;
  white-space: nowrap !important;
  z-index: 12 !important;
  margin-top: 0 !important;
  opacity: 0 !important;
  transform: translate(-50%, 8px) !important;
  animation: fadeUpCenter 1s var(--ease-out) 1.3s forwards !important;
}

@keyframes fadeUpCenter {
  to { opacity: 1; transform: translate(-50%, 0); }
}

.hero-trust .fa-star { color: var(--gold-light) !important; }

/* Weather widget - top right */
.hero-atmosphere {
  position: absolute !important;
  top: 120px !important;
  right: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
  z-index: 12 !important;
  opacity: 0 !important;
  animation: fadeIn 1s var(--ease-out) 1.5s forwards !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.hero-atmosphere::after {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -100% !important;
  width: 50% !important;
  height: 200% !important;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  ) !important;
  transform: rotate(30deg) !important;
  animation: glassGlint 6s infinite ease-in-out !important;
}

@keyframes glassGlint {
  0% { left: -100%; }
  30% { left: 200%; }
  100% { left: 200%; }
}

.status-live {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-family: var(--font-body) !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.55) !important;
}

.status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #4ade80 !important;
  flex-shrink: 0 !important;
  animation: pulseGreen 2s infinite !important;
}

@keyframes pulseGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); }
  50%       { box-shadow: 0 0 0 7px rgba(74,222,128,0); }
}

.atmosphere-pills { display: flex !important; gap: 8px !important; }

.pill {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: rgba(7,17,30,0.5) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--r-pill) !important;
  padding: 7px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--snow) !important;
}

.pill .fa { color: var(--gold-light) !important; }

.weather-status {
  font-family: var(--font-body) !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #4ade80 !important;
}

/* Trust pill (bottom right) */
.hero-trust-pill {
  position: absolute !important;
  bottom: 80px !important;
  right: 32px !important;
  background: rgba(7,17,30,0.52) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 20px !important;
  padding: 18px 22px !important;
  z-index: 12 !important;
  opacity: 0 !important;
  animation: fadeIn 1s var(--ease-out) 1.7s forwards !important;
}

.pill-stats {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px 22px !important;
}

.pill-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

.pill-stat-number {
  font-family: var(--font-display) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--snow) !important;
  -webkit-text-fill-color: var(--snow) !important;
  line-height: 1 !important;
  background: none !important;
  filter: none !important;
}

.pill-stat-label {
  font-family: var(--font-body) !important;
  font-size: 0.56rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
}

/* Scroll cue — opacity starts at 0 (no !important so fadeIn animation can override) */
.scroll-indicator {
  position: absolute !important;
  bottom: 32px !important;
  left: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  z-index: 12 !important;
  opacity: 0;
  /* Chain: fade in after 2s delay, then bounce forever starting at 3s */
  animation: fadeIn 1s var(--ease-out) 2s forwards, floatBounce 2.5s ease-in-out 3s infinite !important;
}


.paraglider-icon svg {
  width: 42px !important;
  opacity: 0.5 !important;
  transition: opacity var(--dur-base) ease !important;
}

.scroll-indicator:hover .paraglider-icon svg { opacity: 0.9 !important; }

.scroll-indicator > span {
  font-family: var(--font-body) !important;
  font-size: 0.58rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.35) !important;
  writing-mode: vertical-rl !important;
}

/* ─────────────────────────────────────────────────────────────
   7. SCROLL REVEALS
───────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0 !important;
  transform: translateY(28px) !important;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out) !important;
}

.reveal.revealed, .reveal.active {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.reveal-delay-1 { transition-delay: 0.12s !important; }
.reveal-delay-2 { transition-delay: 0.22s !important; }
.reveal-delay-3 { transition-delay: 0.32s !important; }
.reveal-delay-4 { transition-delay: 0.44s !important; }
.reveal-delay-5 { transition-delay: 0.54s !important; }
.reveal-delay-6 { transition-delay: 0.64s !important; }

/* ─────────────────────────────────────────────────────────────
   8. OFFERS SECTION
───────────────────────────────────────────────────────────── */
.offers-section {
  background: var(--glacier) !important;
  padding: 100px 0 !important;
  position: relative !important;
}

.offers-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, var(--ocean), var(--gold), var(--ocean), transparent) !important;
}

.offers-section .section-title,
.offers-section .section-subtitle { text-align: center !important; }

.offers-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 26px !important;
  max-width: 480px !important;
  margin: 0 auto !important;
}

/* Tablet: 2 columns */
@media (min-width: 640px) {
  .offers-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
  .offers-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@container (min-width: 400px) {
  .offer-card {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .offer-content {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .offer-content .btn-outline,
  .offer-content .btn-primary {
    margin-top: auto !important;
  }
}

/* Container queries for internal card layout consistency */
.offers-grid {
  container-type: inline-size;
}

.offer-card {
  background: var(--snow) !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid rgba(7,17,30,0.08) !important;
  overflow: visible !important;
  box-shadow: var(--shadow-sm) !important;
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out),
    border-color var(--dur-base) ease !important;
  position: relative !important;
}

.offer-card::before { display: none !important; }

.offer-card:hover {
  transform: translateY(-12px) !important;
  border-color: rgba(200, 150, 42, 0.4) !important;
  box-shadow: var(--shadow-lg) !important;
  animation: flightFloat 4s ease-in-out infinite alternate !important;
}

@keyframes flightFloat {
  0% { transform: translateY(-12px); }
  100% { transform: translateY(-18px); }
}

.offer-card.highlight:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 32px 80px rgba(200, 150, 42, 0.25) !important;
}

/* ── FLIGHT PATH VISUALIZER ── */
/* Horizontal animated flight path in offer cards */

.feature-elevation {
  display: block !important;
  position: relative !important;
  padding: 0 !important;
  margin: 6px 0 2px !important;
}

.flight-path-visualizer {
  position: relative !important;
  width: 100% !important;
  background: linear-gradient(180deg, rgba(10,37,64,0.03) 0%, rgba(10,37,64,0.06) 100%) !important;
  border-radius: var(--r-sm) !important;
  padding: 8px 12px 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(10,37,64,0.06) !important;
}

.flight-path-svg {
  width: 100% !important;
  height: 55px !important;
  display: block !important;
}

/* Mountain silhouette background */
.flight-mountain {
  fill: rgba(10,37,64,0.04) !important;
  stroke: none !important;
}
.offer-card:hover .flight-mountain {
  fill: rgba(10,37,64,0.07) !important;
  transition: fill 0.5s ease !important;
}

/* Dashed flight path arc */
.flight-arc {
  stroke: var(--ocean) !important;
  stroke-width: 1.5 !important;
  stroke-dasharray: 5 3 !important;
  stroke-linecap: round !important;
  opacity: 0.25 !important;
  transition: opacity 0.4s ease !important;
}
.offer-card:hover .flight-arc {
  opacity: 0.5 !important;
  stroke-dasharray: 8 4 !important;
}
.offer-card.highlight .flight-arc {
  stroke: var(--gold) !important;
}

/* Thermal indicators (Card 2 only) */
.thermal-indicator {
  fill: rgba(200,150,42,0.06) !important;
  stroke: rgba(200,150,42,0.15) !important;
  stroke-width: 1 !important;
  stroke-dasharray: 3 2 !important;
  opacity: 0 !important;
  transition: opacity 0.5s ease !important;
}
.offer-card:hover .thermal-indicator {
  opacity: 1 !important;
  animation: thermalPulse 2s ease-in-out infinite !important;
}
.thermal-arrows {
  stroke: rgba(200,150,42,0.3) !important;
  opacity: 0 !important;
  transition: opacity 0.5s ease 0.2s !important;
}
.offer-card:hover .thermal-arrows {
  opacity: 1 !important;
  animation: thermalArrowFloat 1.5s ease-in-out infinite !important;
}

@keyframes thermalPulse {
  0%, 100% { r: 14; opacity: 0.6; }
  50% { r: 17; opacity: 1; }
}

@keyframes thermalArrowFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* ── PARAGLIDER ICON (the animated glider) ── */
.flight-glider-group {
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
  will-change: transform, opacity !important;
}

/* ── Desktop hover: trigger standard glide ── */
.offer-card:hover .flight-glider-group {
  opacity: 1 !important;
  animation: glideAlongPath 4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite !important;
}
/* Thermal variant scoped to hover */
.offer-card:hover .flight-path-visualizer.thermal .flight-glider-group {
  animation-name: glideThermalPath !important;
  animation-duration: 5s !important;
}
/* Alpine variant scoped to hover */
.offer-card:hover .flight-path-visualizer.alpine .flight-glider-group {
  animation-name: glideAlpinePath !important;
  animation-duration: 3.5s !important;
}

/* ── Scroll-triggered (universal, all devices): .in-view class set by JS IntersectionObserver ── */
.offer-card.in-view .flight-glider-group {
  opacity: 1 !important;
  animation: glideAlongPath 4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite !important;
}
.offer-card.in-view .flight-arc {
  opacity: 0.5 !important;
}
.offer-card.in-view .flight-mountain {
  fill: rgba(10,37,64,0.07) !important;
}
.offer-card.in-view .flight-label {
  opacity: 1 !important;
}
/* Thermal variant scoped to in-view */
.offer-card.in-view .flight-path-visualizer.thermal .flight-glider-group {
  animation-name: glideThermalPath !important;
  animation-duration: 5s !important;
}
.offer-card.in-view .thermal-indicator {
  opacity: 1 !important;
  animation: thermalPulse 2s ease-in-out infinite !important;
}
.offer-card.in-view .thermal-arrows {
  opacity: 1 !important;
  animation: thermalArrowFloat 1.5s ease-in-out infinite !important;
}
/* Alpine variant scoped to in-view */
.offer-card.in-view .flight-path-visualizer.alpine .flight-glider-group {
  animation-name: glideAlpinePath !important;
  animation-duration: 3.5s !important;
}

.flight-canopy {
  stroke: var(--ocean) !important;
  filter: drop-shadow(0 0 2px rgba(10,37,64,0.3)) !important;
}
.flight-line {
  stroke: rgba(10,37,64,0.4) !important;
}
.flight-pilot {
  fill: var(--ocean) !important;
  filter: drop-shadow(0 0 2px rgba(10,37,64,0.4)) !important;
}

/* Highlight card uses gold */
.offer-card.highlight .flight-canopy {
  stroke: var(--gold) !important;
  filter: drop-shadow(0 0 3px rgba(200,150,42,0.5)) !important;
}
.offer-card.highlight .flight-line {
  stroke: rgba(200,150,42,0.5) !important;
}
.offer-card.highlight .flight-pilot {
  fill: var(--gold) !important;
  filter: drop-shadow(0 0 3px rgba(200,150,42,0.5)) !important;
}

/* Alpine card slightly different mountain fill */
.flight-path-visualizer.alpine .flight-mountain {
  fill: rgba(10,37,64,0.06) !important;
}

/* ── GLIDE ANIMATION — panoramic descent with gentle banking ── */
@keyframes glideAlongPath {
  0% {
    transform: translate(20px, 18px) scale(0.75) rotate(-3deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
    transform: translate(42px, 17px) scale(1) rotate(-2deg);
  }
  25% {
    transform: translate(90px, 22px) scale(1) rotate(-1deg);
  }
  40% {
    transform: translate(130px, 28px) scale(1.02) rotate(0deg);
  }
  55% {
    transform: translate(165px, 34px) scale(1) rotate(1deg);
  }
  75% {
    transform: translate(220px, 46px) scale(1) rotate(2deg);
  }
  92% {
    opacity: 1;
    transform: translate(255px, 53px) scale(0.95) rotate(3deg);
  }
  100% {
    transform: translate(267px, 56px) scale(0.75) rotate(4deg);
    opacity: 0;
  }
}
@keyframes glideThermalPath {
  0% {
    transform: translate(20px, 18px) scale(0.8);
    opacity: 0;
  }
  8% {
    opacity: 1;
    transform: translate(45px, 17px) scale(1);
  }
  30% {
    transform: translate(100px, 26px) scale(1);
  }
  /* Thermal rise! */
  42% {
    transform: translate(125px, 14px) scale(1.1);
  }
  52% {
    transform: translate(145px, 12px) scale(1.1);
  }
  62% {
    transform: translate(165px, 28px) scale(1);
  }
  80% {
    transform: translate(225px, 47px) scale(1);
  }
  92% {
    opacity: 1;
    transform: translate(255px, 53px) scale(1);
  }
  100% {
    transform: translate(265px, 55px) scale(0.8);
    opacity: 0;
  }
}

/* Alpine path animation (steeper descent) */
@keyframes glideAlpinePath {
  0% {
    transform: translate(20px, 12px) scale(0.8);
    opacity: 0;
  }
  8% {
    opacity: 1;
    transform: translate(40px, 11px) scale(1);
  }
  25% {
    transform: translate(85px, 16px) scale(1);
  }
  50% {
    transform: translate(150px, 30px) scale(1);
  }
  75% {
    transform: translate(220px, 47px) scale(1);
  }
  92% {
    opacity: 1;
    transform: translate(255px, 53px) scale(1);
  }
  100% {
    transform: translate(265px, 55px) scale(0.8);
    opacity: 0;
  }
}

/* ── FLIGHT LABELS ── */
.flight-labels {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 4px 2px 2px !important;
  gap: 4px !important;
}

.flight-label {
  font-family: var(--font-body) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  opacity: 0.6 !important;
  transition: opacity 0.3s ease !important;
}
.offer-card:hover .flight-label {
  opacity: 1 !important;
}

.flight-label.takeoff {
  color: var(--ocean) !important;
}
.flight-label.takeoff i {
  color: var(--ocean) !important;
  font-size: 0.7rem !important;
}

.flight-label.thermal {
  color: var(--gold) !important;
  font-size: 0.6rem !important;
}
.flight-label.thermal i {
  color: var(--gold) !important;
  font-size: 0.65rem !important;
  animation: none !important;
}
.offer-card:hover .flight-label.thermal i {
  animation: thermalArrowBounce 1s ease-in-out infinite !important;
}

@keyframes thermalArrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.flight-label.landing {
  color: var(--ink-50) !important;
}
.flight-label.landing i {
  color: var(--ink-50) !important;
  font-size: 0.6rem !important;
}

/* Highlight card label colors */
.offer-card.highlight .flight-label.takeoff {
  color: var(--gold) !important;
}
.offer-card.highlight .flight-label.takeoff i {
  color: var(--gold) !important;
}

/* ── .in-view class rules now live globally (above), no @media guard needed ── */
/* Mobile touch: lower threshold for earlier trigger — handled by JS observer options */

.offer-card.highlight {
  border: 2px solid var(--gold) !important;
  box-shadow: 0 10px 40px rgba(200,150,42,0.12) !important;
  overflow: hidden !important; /* Changed to hidden for ribbon clipping */
}

/* Most Popular Ribbon */
.offer-ribbon {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 120px !important;
  height: 120px !important;
  overflow: hidden !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.offer-ribbon span {
  position: absolute !important;
  display: block !important;
  width: 180px !important;
  padding: 8px 0 !important;
  background: linear-gradient(to bottom, var(--gold), #d4af37) !important;
  color: var(--ink) !important;
  font-family: var(--font-primary) !important;
  font-weight: 800 !important;
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
  text-align: center !important;
  letter-spacing: 0.1em !important;
  right: -45px !important;
  top: 25px !important;
  transform: rotate(45deg) !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
}

.offer-image {
  width: 100% !important;
  aspect-ratio: 16/10 !important;
  overflow: hidden !important;
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
  background: var(--glacier) !important;
}

.offer-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.9s var(--ease-out) !important;
  display: block !important;
}

.offer-card:hover .offer-image img { 
  transform: scale(1.1) !important; 
}

.offer-content {
  padding: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  color: var(--ink) !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.offer-title {
  font-size: var(--fs-lg) !important;
  letter-spacing: 0.06em !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  background: none !important;
}

.offer-price {
  font-family: var(--font-display) !important;
  font-size: var(--fs-2xl) !important;
  font-weight: 700 !important;
  color: var(--ocean) !important;
  -webkit-text-fill-color: var(--ocean) !important;
  background: none !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

.offer-card.highlight .offer-price {
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold) !important;
}

.offer-price span {
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
  margin-left: 0 !important;
}

.offer-features {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.offer-features li {
  font-size: 0.83rem !important;
  color: var(--text-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1.4 !important;
}

.offer-features li .fa {
  color: var(--ocean) !important;
  width: 14px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  font-size: 0.82rem !important;
}

.offer-card.highlight .offer-features li { color: var(--text-muted) !important; }
.offer-card.highlight .offer-features li .fa { color: var(--gold) !important; }
.offer-card.highlight .offer-title { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }

.offer-content .btn-outline {
  color: var(--ocean) !important;
  border-color: rgba(10,37,64,0.18) !important;
  margin-top: auto !important;
  justify-content: center !important;
}

.offer-content .btn-primary {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  justify-content: center !important;
  margin-top: auto !important;
  color: var(--snow) !important;
}

.offer-content .btn-primary:hover {
  background: var(--gold-light) !important;
  border-color: var(--gold-light) !important;
  box-shadow: var(--glow-gold) !important;
}

/* Trust badges row */
.trust-badges {
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-top: var(--s6) !important;
}

.trust-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  color: var(--text-muted) !important;
  background: var(--snow) !important;
  border: 1px solid rgba(7,17,30,0.08) !important;
  border-radius: var(--r-pill) !important;
  padding: 10px 20px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out) !important;
}

.trust-badge:hover {
  border-color: var(--ocean) !important;
  color: var(--ocean) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ─────────────────────────────────────────────────────────────
   9. GIFT SECTION
───────────────────────────────────────────────────────────── */
.gift-section {
  background: linear-gradient(135deg, var(--ocean) 0%, #0d3560 60%, #1b5080 100%) !important;
  padding: 120px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  clip-path: polygon(0 clamp(20px, 4vw, 60px), 100% 0, 100% calc(100% - clamp(20px, 4vw, 60px)), 0 100%) !important;
  margin: 0 !important;
  text-align: center !important;
}

.gift-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse at 65% 50%, rgba(200,150,42,0.18) 0%, transparent 65%) !important;
  pointer-events: none !important;
}

.gift-mountain-line { display: none !important; }

.gift-content {
  position: relative !important;
  z-index: 1 !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  padding: 0 var(--s4) !important;
}

.gift-title {
  font-size: clamp(2rem, 5vw, 3.2rem) !important;
  color: var(--snow) !important;
  -webkit-text-fill-color: var(--snow) !important;
  background: none !important;
  margin-bottom: 20px !important;
}

.gift-desc {
  font-family: var(--font-body) !important;
  color: rgba(255,255,255,0.72) !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
  margin-bottom: var(--s4) !important;
}

.gift-btn {
  background: transparent !important;
  color: var(--snow) !important;
  border-color: rgba(255,255,255,0.35) !important;
}

.gift-btn:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  box-shadow: var(--glow-gold) !important;
  transform: translateY(-3px) !important;
  color: var(--snow) !important;
}

/* ─────────────────────────────────────────────────────────────
   10. SAFETY SECTION — "TECHNICAL PRECISION"
───────────────────────────────────────────────────────────── */
.safety-section {
  background: var(--glacier) !important;
  color: var(--ink) !important;
  padding: 140px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.safety-section::before {
  content: 'SAFETY' !important;
  position: absolute !important;
  top: 10% !important;
  left: -2% !important;
  font-family: var(--font-display) !important;
  font-size: 22vw !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
  opacity: 0.025 !important;
  line-height: 1 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.safety-section::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  right: -5% !important;
  width: 800px !important;
  height: 800px !important;
  background: url('assets/images/bg/safety-blueprint.png') no-repeat center !important;
  background-size: contain !important;
  opacity: 0.12 !important;
  transform: translateY(-50%) rotate(-8deg) !important;
  pointer-events: none !important;
  filter: brightness(0) invert(1) !important;
}

.safety-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--s4) !important;
}

.safety-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: var(--s4) !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: var(--s3) !important;
  flex-wrap: wrap !important;
}

.safety-title-group {
  flex: 1 !important;
  min-width: 300px !important;
}

.safety-text .section-title {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  text-align: left !important;
  margin-bottom: 8px !important;
}

.safety-text .section-subtitle {
  color: var(--text-muted) !important;
  text-align: left !important;
  margin-bottom: 0 !important;
}

.safety-stats-visual {
  display: flex !important;
  gap: var(--s3) !important;
  align-items: center !important;
}

.safety-stat-box {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-align: right !important;
  min-width: 120px !important;
}

.safety-stat-box.accent {
  background: none !important;
  border: none !important;
}

.stat-value {
  display: block !important;
  font-family: var(--font-display) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  line-height: 1 !important;
}

.stat-label {
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--text-muted) !important;
}

.safety-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--s3) !important;
  padding: 0 !important;
  margin-top: var(--s2) !important;
}

.safety-list li {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  background: var(--snow) !important;
  padding: 24px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.4s var(--ease-out) !important;
}

.safety-list li:hover {
  background: var(--snow) !important;
  border-color: var(--gold) !important;
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-md) !important;
}

.safety-icon {
  width: 44px !important;
  height: 44px !important;
  background: var(--glacier) !important;
  color: var(--ink) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  flex-shrink: 0 !important;
  border: 1px solid var(--border) !important;
}

.safety-list li:hover .safety-icon {
  background: var(--gold) !important;
  color: var(--snow) !important;
  border-color: var(--gold) !important;
  box-shadow: var(--glow-gold) !important;
}

.safety-content h4 {
  color: var(--ink) !important;
  font-size: 1rem !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 8px !important;
}

.safety-content p {
  color: var(--text-muted) !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   11. REVIEWS — REDESIGNED TRACK CAROUSEL
───────────────────────────────────────────────────────────── */

/* Section shell — dark field for contrast */
.reviews-section {
  background: var(--ocean) !important;
  padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 100px) !important;
  overflow: hidden !important;
  position: relative !important;
}

@media (max-width: 768px) {
  .reviews-section {
    padding-bottom: 180px !important;
  }
  /* Reduce the large hero bottom-padding gap on mobile (--s7 = 64–96px → 32px) */
  .reviews-hero {
    padding-bottom: 32px !important;
  }
}

/* Subtle noise texture overlay */
.reviews-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E") !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Header block */
.reviews-hero {
  position: relative !important;
  z-index: 1 !important;
  text-align: center !important;
  padding: 0 var(--s4) var(--s7) !important;
}

.reviews-kicker {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--s3) !important;
  font-family: var(--font-display) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  margin-bottom: var(--s4) !important;
}

.reviews-kicker-line {
  flex: 1 !important;
  max-width: 60px !important;
  height: 1px !important;
  background: var(--gold) !important;
  opacity: 0.5 !important;
}

.reviews-main-title {
  font-family: var(--font-display) !important;
  font-size: clamp(2.2rem, 5vw, 4rem) !important;
  font-weight: 700 !important;
  color: var(--snow) !important;
  -webkit-text-fill-color: var(--snow) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  margin: 0 0 var(--s5) !important;
}

/* Google trust badge */
.reviews-trust-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--s3) !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: var(--r-pill) !important;
  padding: 10px 24px !important;
  backdrop-filter: blur(8px) !important;
}

.reviews-google-icon {
  font-size: 1.2rem !important;
  color: #4285F4 !important;
}

.reviews-trust-score {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.reviews-trust-number {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--snow) !important;
  line-height: 1 !important;
}

.reviews-trust-stars .fa { color: #fbbc04 !important; font-size: 0.8rem !important; }

.reviews-trust-count {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.55) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-left: 1px solid rgba(255,255,255,0.2) !important;
  padding-left: var(--s3) !important;
}

/* Loading state */
.reviews-loading-state {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  color: rgba(255,255,255,0.4) !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  padding: 60px 40px !important;
}

.reviews-pulse {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 2px solid var(--gold) !important;
  border-top-color: transparent !important;
  animation: rv-spin 0.8s linear infinite !important;
  flex-shrink: 0 !important;
}

@keyframes rv-spin {
  to { transform: rotate(360deg); }
}

/* ── Track ───────────────────────────────────────────────────── */
.reviews-track-outer {
  position: relative !important;
  z-index: 1 !important;
}

/* Fade masks on left/right edges */
.reviews-track-outer::before,
.reviews-track-outer::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: clamp(40px, 6vw, 100px) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.reviews-track-outer::before {
  left: 0 !important;
  background: linear-gradient(to right, var(--ocean), transparent) !important;
}

.reviews-track-outer::after {
  right: 0 !important;
  background: linear-gradient(to left, var(--ocean), transparent) !important;
}

.reviews-track {
  display: flex !important;
  gap: clamp(16px, 2vw, 28px) !important;
  padding: 20px clamp(40px, 6vw, 120px) 40px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  cursor: grab !important;
  position: relative !important;
  z-index: 1 !important;
}

.reviews-track::-webkit-scrollbar { display: none !important; }
.reviews-track:active { cursor: grabbing !important; }

/* ── Individual cards — Premium Dark Glass ──────────────────── */
.rv-card {
  flex: 0 0 clamp(280px, calc(33.33% - 20px), 420px) !important;
  scroll-snap-align: start !important;
  /* Dark glassmorphic card */
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 20px !important;
  padding: clamp(24px, 3vw, 36px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  box-shadow: 0 8px 32px rgba(7, 17, 30, 0.35), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease, border-color 0.4s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Gold shimmer line across the top edge */
.rv-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 10% !important;
  right: 10% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.7), transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
  pointer-events: none !important;
}

/* Radial glow overlay on hover */
.rv-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse at top left, rgba(212,175,55,0.09) 0%, transparent 65%) !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
  pointer-events: none !important;
}

@media (hover: hover) {
  .rv-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(212, 175, 55, 0.32) !important;
    box-shadow: 0 24px 60px rgba(7, 17, 30, 0.5), 0 0 0 1px rgba(212, 175, 55, 0.12), inset 0 1px 0 rgba(255,255,255,0.14) !important;
  }
  .rv-card:hover::before { opacity: 1 !important; }
  .rv-card:hover::after  { opacity: 1 !important; }
}

/* Decorative large opening-quote mark */
.rv-quote-mark {
  display: block !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 4rem !important;
  line-height: 0.8 !important;
  color: var(--gold) !important;
  opacity: 0.22 !important;
  margin-bottom: 4px !important;
  user-select: none !important;
}

/* Card top row: stars + google mark */
.rv-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
}

.rv-stars {
  display: flex !important;
  gap: 3px !important;
}

.rv-star       { color: #fbbf24 !important; font-size: 0.85rem !important; }
.rv-star-empty { color: rgba(255,255,255,0.2) !important; }

.rv-google-mark {
  font-size: 1.1rem !important;
  color: #4285F4 !important;
  opacity: 0.85 !important;
}

/* Review text */
.rv-text {
  font-family: var(--font-body) !important;
  font-size: clamp(0.875rem, 1.3vw, 0.97rem) !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-style: italic !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  border: none !important;
  flex: 1 !important;
}

/* Card footer */
.rv-card-footer {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin-top: auto !important;
}

.rv-avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  object-fit: cover !important;
}

.rv-avatar-img {
  border: 2px solid rgba(255,255,255,0.18) !important;
}

.rv-avatar-initials {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-display) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--snow) !important;
  background: hsl(var(--rv-hue, 210), 55%, 38%) !important;
  border: 2px solid rgba(255,255,255,0.15) !important;
}

.rv-author {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.rv-author-name {
  font-family: var(--font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.92) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: color 0.25s ease !important;
}

.rv-author-name:hover { color: var(--gold) !important; }

.rv-date {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  color: rgba(255, 255, 255, 0.42) !important;
  letter-spacing: 0.04em !important;
}

/* ── Controls row ────────────────────────────────────────────── */
.reviews-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--s4) !important;
  padding-top: var(--s5) !important;
  position: relative !important;
  z-index: 1 !important;
}

.rv-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  background: rgba(255,255,255,0.06) !important;
  color: var(--snow) !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.3s var(--ease-out) , border-color 0.3s var(--ease-out) , color 0.3s var(--ease-out) , fill 0.3s var(--ease-out) , stroke 0.3s var(--ease-out) , opacity 0.3s var(--ease-out) , box-shadow 0.3s var(--ease-out) , transform 0.3s var(--ease-out) , filter 0.3s var(--ease-out) , backdrop-filter 0.3s var(--ease-out) !important;
  flex-shrink: 0 !important;
}

.rv-btn:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--ocean) !important;
  transform: scale(1.08) !important;
}

/* Progress dots */
.reviews-progress-track {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.rv-dot {
  width: 12px !important; /* Slightly larger visual dot */
  height: 12px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.3) !important;
  border: 18px solid transparent !important; /* 12 + 18 + 18 = 48px touch target */
  background-clip: padding-box !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.4s var(--ease-out) !important;
}

.rv-dot:hover {
  background-color: rgba(255,255,255,0.6) !important;
}

.rv-dot-active {
  width: 32px !important;
  border-radius: var(--r-pill) !important;
  background: var(--gold) !important;
}

/* Mobile: single-card view */
@media (max-width: 639px) {
  .rv-card {
    flex: 0 0 85vw !important;
  }

  .rv-btn { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   12. TEAM / PILOTS
───────────────────────────────────────────────────────────── */
.team-section {
  background: var(--glacier) !important;
  padding: 100px 0 !important;
}

.team-section .section-title,
.team-section .section-subtitle { text-align: center !important; }

.pilots-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 30px !important;
  max-width: 880px !important;
  margin: 0 auto !important;
}

@media (max-width: 640px) { .pilots-grid { grid-template-columns: 1fr !important; } }

.pilot-card {
  background: var(--snow) !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid rgba(7,17,30,0.07) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out) !important;
  margin-bottom: 0 !important;
}

.pilot-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: var(--shadow-xl) !important;
}

.pilot-image {
  width: 100% !important;
  aspect-ratio: 3/2 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

.pilot-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 1s var(--ease-out) !important;
}

.pilot-card:hover .pilot-image img { transform: scale(1.06) !important; }

.pilot-info {
  padding: 32px !important;
  background: var(--snow) !important;
}

.pilot-name {
  font-size: 1.2rem !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  background: none !important;
  margin-bottom: 4px !important;
}

.pilot-role {
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold) !important;
  margin-bottom: 14px !important;
  display: block !important;
}

.pilot-bio {
  font-size: 0.85rem !important;
  color: var(--text-muted) !important;
  line-height: 1.7 !important;
  margin-bottom: 14px !important;
}

.pilot-stats {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  border-top: 1px solid rgba(7,17,30,0.06) !important;
  padding-top: 20px !important;
  margin-top: 10px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

.pilot-stats span { 
  display: flex !important; 
  align-items: center !important; 
  gap: 8px !important;
  background: rgba(10,37,64,0.03) !important;
  padding: 6px 12px !important;
  border-radius: var(--r-sm) !important;
}

.pilot-stats .fa { color: var(--gold) !important; font-size: 0.85rem !important; }

/* Badges and Callouts */
.badge-best {
  display: inline-block !important;
  background: var(--gold) !important;
  color: var(--snow) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  letter-spacing: 0.05em !important;
}

.card-badge {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  background: var(--gold) !important;
  color: var(--snow) !important;
  font-family: var(--font-display) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  padding: 6px 14px !important;
  border-radius: var(--r-pill) !important;
  box-shadow: 0 4px 12px rgba(200,150,42,0.3) !important;
  z-index: 2 !important;
}

/* ─────────────────────────────────────────────────────────────
   13. BOOKING / CONTACT SECTION
───────────────────────────────────────────────────────────── */
.contact-section {
  background: var(--snow) !important;
  padding: 120px 0 !important;
  border-top: 1px solid rgba(7,17,30,0.06) !important;
}

.contact-container {
  display: grid !important;
  grid-template-columns: 1fr 1.6fr !important;
  gap: 60px !important;
  align-items: start !important;
}

@media (max-width: 640px) {
   .contact-container { grid-template-columns: 1fr !important; }
}

.contact-info { display: flex !important; flex-direction: column !important; gap: 22px !important; }

.contact-item { display: flex !important; align-items: flex-start !important; gap: 16px !important; }

.contact-icon {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(10,37,64,0.07) !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  float: none !important;
  margin: 0 !important;
  text-align: left !important;
}

.contact-icon .fa {
  color: var(--ocean) !important;
  font-size: 1rem !important;
  height: auto !important;
  width: auto !important;
  border: none !important;
  border-radius: 0 !important;
  line-height: 1 !important;
}

.contact-item-text h4 {
  font-family: var(--font-display) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
  margin-bottom: 4px !important;
}

.contact-item-text p,
.contact-item-text a {
  font-size: 0.88rem !important;
  color: var(--ink) !important;
  transition: color var(--dur-fast) ease !important;
}

.contact-item-text a:hover { color: var(--ocean) !important; }

/* Booking widget */
.booking-widget {
  background: var(--glacier) !important;
  border: 1px solid rgba(7,17,30,0.08) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-md) !important;
  padding: 0 !important;
}

.booking-header {
  background: var(--ocean) !important;
  padding: 26px 30px !important;
}

.booking-header h3 {
  font-size: 1.25rem !important;
  letter-spacing: 0.06em !important;
  color: var(--snow) !important;
  -webkit-text-fill-color: var(--snow) !important;
  background: none !important;
  margin-bottom: 4px !important;
}

.booking-header p { color: rgba(255,255,255,0.62) !important; font-size: 0.85rem !important; }

/* Inner booking header (inside booking body, light context) */
#booking-interactive-content > .booking-header {
  background: transparent !important;
  padding: 0 0 20px !important;
}

#booking-interactive-content > .booking-header h3 {
  margin: 0 !important;
  font-size: 1.5rem !important;
  color: var(--ocean) !important;
  -webkit-text-fill-color: var(--ocean) !important;
  text-align: center !important;
  letter-spacing: 0.06em !important;
}

#booking-interactive-content > .booking-header p {
  font-size: 0.95rem !important;
  opacity: 0.8 !important;
  color: var(--text-muted) !important;
  margin: 4px 0 0 !important;
  text-align: center !important;
}

/* ── Date Preference Selection ── */
.date-preference-selection {
  text-align: center !important;
  margin-bottom: 24px !important;
}

.date-preference-heading {
  font-weight: 700 !important;
  color: var(--ocean) !important;
  margin-bottom: 14px !important;
  font-size: 1.05rem !important;
}

.date-preference-heading .fa {
  margin-right: 6px !important;
}

.date-preference-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.date-preference-grid .btn {
  padding: 12px !important;
  font-weight: 600 !important;
}

@media (max-width: 375px) {
  .date-preference-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .date-preference-heading {
    font-size: 0.92rem !important;
  }
}

/* ── Flex Date Confirmation Panel ── */
#flex-date-section {
  text-align: center !important;
  padding: 24px !important;
  background: rgba(15,76,129,0.04) !important;
  border-radius: 12px !important;
  border: 1px dashed rgba(15,76,129,0.2) !important;
  margin-bottom: 20px !important;
}

@media (max-width: 375px) {
  #flex-date-section {
    padding: 16px !important;
  }
}

/* ── Calendar Navigation ── */
.calendar-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
}

.month-label {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.06em !important;
  color: var(--ocean) !important;
}

.btn-nav {
  background: transparent !important;
  border: 1px solid rgba(7,17,30,0.12) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--ocean) !important;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease !important;
}

.btn-nav:hover {
  background: rgba(10,37,64,0.06) !important;
  border-color: var(--ocean) !important;
}

/* ── Flight Option Divider ── */
.flight-option-divider {
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
  gap: 12px !important;
  margin: 6px 0 !important;
  color: var(--text-muted) !important;
}

.flight-option-divider::before,
.flight-option-divider::after {
  content: '' !important;
  flex: 1 !important;
  border-bottom: 1px solid rgba(7,17,30,0.1) !important;
}

.flight-option-divider__label {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
}

.booking-steps-nav {
  display: flex !important;
  background: rgba(10,37,64,0.06) !important;
  padding: 0 30px !important;
  border-bottom: 1px solid rgba(7,17,30,0.07) !important;
  gap: 0 !important;
}

.step-indicator {
  padding: 14px 0 12px !important;
  font-family: var(--font-display) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-bottom: 2px solid transparent !important;
  margin-right: 24px !important;
  transition: color var(--dur-base) ease, border-bottom-color var(--dur-base) ease !important;
}

.step-indicator.active  { color: var(--ocean) !important; border-bottom-color: var(--ocean) !important; }
.step-indicator.completed { color: var(--gold) !important; border-bottom-color: var(--gold) !important; }

.step-circle {
  width: 21px !important;
  height: 21px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  background: rgba(10,37,64,0.1) !important;
  color: var(--text-muted) !important;
  transition: background-color var(--dur-base) ease, color var(--dur-base) ease !important;
}

.step-indicator.active   .step-circle { background: var(--ocean) !important; color: var(--snow) !important; }
.step-indicator.completed .step-circle { background: var(--gold)  !important; color: var(--snow) !important; }

.booking-body { padding: 22px 30px 30px !important; }
.booking-step { display: none !important; }
.booking-step.active { display: block !important; }

.flight-select-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 22px !important;
}

.flight-option {
  border: 1.5px solid rgba(7,17,30,0.1) !important;
  border-radius: var(--r-md) !important;
  padding: 14px 18px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--snow) !important;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out) !important;
  position: relative !important;
}

.flight-option:hover, .flight-option.selected {
  border-color: var(--ocean) !important;
  background: rgba(10,37,64,0.04) !important;
  transform: none !important;
  box-shadow: inset 0 0 0 1px var(--ocean) !important;
}

.flight-option h4 {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  margin-bottom: 2px !important;
  letter-spacing: 0.04em !important;
}

.flight-option p { font-size: 0.73rem !important; color: var(--text-muted) !important; }

.flight-option-price {
  font-family: var(--font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--ocean) !important;
  -webkit-text-fill-color: var(--ocean) !important;
}

.best-badge {
  font-family: var(--font-display) !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  background: var(--gold) !important;
  color: var(--snow) !important;
  -webkit-text-fill-color: var(--snow) !important;
  border-radius: var(--r-pill) !important;
  padding: 2px 8px !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

.form-control {
  width: 100% !important;
  border: 1.5px solid rgba(7,17,30,0.1) !important;
  border-radius: var(--r-md) !important;
  padding: 12px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 0.86rem !important;
  color: var(--ink) !important;
  background: var(--snow) !important;
  height: auto !important;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease !important;
}

.form-control:focus {
  outline: none !important;
  border-color: var(--ocean) !important;
  box-shadow: 0 0 0 3px rgba(10,37,64,0.1) !important;
  transform: none !important;
}

.form-group { margin-bottom: 12px !important; }
textarea.form-control { min-height: 95px !important; resize: vertical !important; }

.booking-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 18px !important;
  flex-wrap: wrap !important;
}

.booking-policy-note {
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  color: var(--text-muted) !important;
  background: rgba(10, 37, 64, 0.05) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 12px 14px !important;
  margin: 16px 0 4px !important;
  line-height: 1.5 !important;
}

/* ─────────────────────────────────────────────────────────────
   VOUCHER REDEEM BUTTON + PANEL
───────────────────────────────────────────────────────────── */
.btn-voucher-redeem {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  background: var(--ocean) !important;
  color: var(--snow) !important;
  border: 1.5px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--r-md) !important;
  padding: 14px 18px !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out) !important;
}

.btn-voucher-redeem:hover,
.btn-voucher-redeem:focus {
  background: var(--sky) !important;
  box-shadow: var(--shadow-md) !important;
}

.voucher-redeem-icon {
  font-size: 1.1rem !important;
  color: var(--gold) !important;
  flex-shrink: 0 !important;
}

.voucher-redeem-text {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: rgba(255,255,255,0.85) !important;
}

.voucher-redeem-text strong {
  color: var(--snow) !important;
}

.voucher-redeem-arrow {
  color: rgba(255,255,255,0.45) !important;
  font-size: 1rem !important;
  transition: transform var(--dur-base) var(--ease-out) !important;
}

.btn-voucher-redeem[aria-expanded="true"] .voucher-redeem-arrow {
  transform: rotate(90deg) !important;
}

.redeem-panel-glass {
  background: var(--snow) !important;
  border: 1.5px solid rgba(10,37,64,0.1) !important;
  border-radius: var(--r-md) !important;
  padding: 20px !important;
  box-shadow: var(--shadow-sm) !important;
}

.booking-policy-note .fa {
  color: var(--ocean) !important;
  margin-right: 6px !important;
}

.calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 6px !important;
}

.calendar-day {
  border: 1px solid rgba(7,17,30,0.09) !important;
  border-radius: var(--r-sm) !important;
  padding: 9px 4px !important;
  text-align: center !important;
  font-size: 0.73rem !important;
  cursor: pointer !important;
  background: var(--snow) !important;
  color: var(--ocean) !important;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease !important;
}

.calendar-day:hover { border-color: var(--ocean) !important; background: rgba(10,37,64,0.04) !important; }
.calendar-day.selected { background: var(--ocean) !important; color: var(--snow) !important; border-color: var(--ocean) !important; font-weight: 700 !important; }

.time-slot-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

.time-btn {
  border: 1.5px solid rgba(7,17,30,0.09) !important;
  border-radius: var(--r-sm) !important;
  padding: 11px !important;
  text-align: center !important;
  font-family: var(--font-display) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  background: var(--snow) !important;
  color: var(--text-muted) !important;
  transition: background-color var(--dur-base) ease, color var(--dur-base) ease !important;
}

.time-btn:hover, .time-btn.selected {
  background: var(--ocean) !important;
  color: var(--snow) !important;
  border-color: var(--ocean) !important;
}

.form-success {
  display: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.form-success.show {
  display: block !important;
  animation: successFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

/* Full-panel success state */
.booking-success-panel {
  text-align: center !important;
  padding: 48px 30px 40px !important;
}

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

.booking-success-icon {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0d6efd22 0%, rgba(74,222,128,0.18) 100%) !important;
  border: 2px solid rgba(74,222,128,0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 22px !important;
  box-shadow: 0 0 0 10px rgba(74,222,128,0.07), 0 0 0 20px rgba(74,222,128,0.035) !important;
  animation: successPulse 2.2s ease-in-out 0.4s infinite !important;
}

@keyframes successPulse {
  0%, 100% { box-shadow: 0 0 0 10px rgba(74,222,128,0.07), 0 0 0 20px rgba(74,222,128,0.035); }
  50%       { box-shadow: 0 0 0 14px rgba(74,222,128,0.11), 0 0 0 28px rgba(74,222,128,0.05); }
}

.booking-success-icon .fa {
  font-size: 1.75rem !important;
  color: #16a34a !important;
  line-height: 1 !important;
}

.booking-success-title {
  font-family: var(--font-display) !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  background: none !important;
  margin-bottom: 10px !important;
}

.booking-success-body {
  font-size: 0.88rem !important;
  color: var(--text-muted) !important;
  line-height: 1.65 !important;
  max-width: 320px !important;
  margin: 0 auto 28px !important;
}

.booking-success-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: rgba(10,37,64,0.03) !important;
  border: 1px solid rgba(10,37,64,0.07) !important;
  border-radius: var(--r-md) !important;
  padding: 18px 22px !important;
  margin-bottom: 22px !important;
  text-align: left !important;
}

.booking-success-detail-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 0.83rem !important;
  color: var(--ink) !important;
}

.booking-success-detail-item .fa {
  width: 18px !important;
  text-align: center !important;
  color: var(--ocean) !important;
  font-size: 0.9rem !important;
  flex-shrink: 0 !important;
}

.booking-success-footer-note {
  font-size: 0.78rem !important;
  color: var(--text-muted) !important;
}

.booking-success-footer-note a {
  color: var(--ocean) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.form-error {
  display: none;
  background: rgba(239,68,68,0.07) !important;
  border: 1px solid rgba(239,68,68,0.28) !important;
  border-radius: var(--r-sm) !important;
  padding: 13px 16px !important;
  font-size: 0.85rem !important;
  color: #991b1b !important;
  margin-bottom: 14px !important;
}

.form-error.show { display: block !important; }

.map-container {
  width: 100% !important;
  height: 300px !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  border: 1px solid rgba(7,17,30,0.08) !important;
  box-shadow: var(--shadow-md) !important;
  margin-top: 48px !important;
}

.map-container iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
}

/* ─────────────────────────────────────────────────────────────
   14. FOOTER
───────────────────────────────────────────────────────────── */
.main-footer {
  background: var(--ink) !important;
  color: rgba(255,255,255,0.72) !important;
  padding: 80px 0 0 !important;
  position: relative !important;
}

.main-footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, var(--gold), var(--ocean), var(--gold), transparent) !important;
}

.footer-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr !important;
  gap: 60px !important;
  margin-bottom: 48px !important;
  container-type: inline-size;
}

@container (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 36px !important;
  }
  
  .footer-tagline {
    max-width: none !important;
    margin: 0 auto !important;
  }
  
  .footer-logo .brand-logo,
  .main-footer .brand-logo {
    margin: 0 auto 16px !important;
  }
  
  .footer-social {
    justify-content: center !important;
  }
  
  .footer-contact-small {
    justify-content: center !important;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 639px) {
    .footer-grid {
      grid-template-columns: 1fr !important;
      text-align: center !important;
      gap: 36px !important;
    }
    
    .hero-main-content {
      padding: 0 var(--s2) !important;
    }
    
    .hero {
      min-height: 500px !important;
    }
    
    .hero-tag {
      font-size: 0.6rem !important;
      gap: 8px !important;
    }
    
    .hero-tag::before, .hero-tag::after {
      width: 20px !important;
    }
    
    .hero-atmosphere {
      top: 100px !important;
      right: 16px !important;
    }
    
    .hero-trust-pill {
      bottom: 60px !important;
      right: 16px !important;
      padding: 12px 16px !important;
    }
    
    .pill-stats {
      gap: 10px 16px !important;
    }
    
    .pill-stat-number {
      font-size: 1.1rem !important;
    }
    
    .pill-stat-label {
      font-size: 0.5rem !important;
    }
    
    .scroll-indicator {
      bottom: 20px !important;
      left: 16px !important;
    }
    
    .hero-trust {
      bottom: 20px !important;
      font-size: 0.65rem !important;
      padding: 8px 16px !important;
    }
  }
}

.footer-logo {
  margin-bottom: 20px !important;
}

.footer-logo .brand-logo,
.main-footer .brand-logo {
  max-width: 44px !important;
  width: 44px !important;
  height: 44px !important;
  display: block !important;
  margin: 0 !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
}

@media (max-width: 639px) {
  .footer-logo .brand-logo,
  .main-footer .brand-logo {
    margin: 0 auto 16px !important;
  }
}

.footer-tagline {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: rgba(255,255,255,0.45) !important;
  line-height: 1.75 !important;
  max-width: 270px !important;
  opacity: 1 !important;
}

@container (max-width: 600px) {
  .footer-tagline { max-width: none !important; margin: 0 auto !important; }
}

@supports not (container-type: inline-size) {
  @media (max-width: 639px) {
    .footer-tagline { max-width: none !important; margin: 0 auto !important; }
  }
}

.footer-title {
  font-family: var(--font-display) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.28) !important;
  margin-bottom: 20px !important;
}

.footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.footer-links a {
  font-size: 0.85rem !important;
  color: rgba(255,255,255,0.5) !important;
  transition: color var(--dur-fast) ease !important;
  text-decoration: none !important;
}

.footer-links a:hover { color: var(--snow) !important; }

.footer-social {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
}

@container (max-width: 600px) {
  .footer-social {
    justify-content: center !important;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 639px) {
    .footer-social { justify-content: center !important; }
  }
}

.footer-social a {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 50% !important;
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.88rem !important;
  transition: background-color var(--dur-base) var(--ease-out) , border-color var(--dur-base) var(--ease-out) , color var(--dur-base) var(--ease-out) , fill var(--dur-base) var(--ease-out) , stroke var(--dur-base) var(--ease-out) , opacity var(--dur-base) var(--ease-out) , box-shadow var(--dur-base) var(--ease-out) , transform var(--dur-base) var(--ease-out) , filter var(--dur-base) var(--ease-out) , backdrop-filter var(--dur-base) var(--ease-out) !important;
}

.footer-social a:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--snow) !important;
  transform: translateY(-3px) !important;
}

.footer-contact-small {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.4) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 0 !important;
  opacity: 1 !important;
}

@container (max-width: 600px) {
  .footer-contact-small { justify-content: center !important; }
}

@supports not (container-type: inline-size) {
  @media (max-width: 639px) {
    .footer-contact-small { justify-content: center !important; }
  }
}

.footer-contact-small .fa { color: var(--gold) !important; width: auto !important; text-align: left !important; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  padding: 22px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: center !important;
  margin-top: 0 !important;
}

.footer-bottom p {
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.28) !important;
  margin: 0 !important;
}

.footer-legal-info {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 6px 18px !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.3) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-top: 0 !important;
  opacity: 1 !important;
}

.legal-item { position: relative !important; }
.legal-item:not(:last-child)::after { content: '·' !important; margin-left: 18px !important; opacity: 0.35 !important; }

/* ─────────────────────────────────────────────────────────────
   15. LANGUAGE SELECTOR
───────────────────────────────────────────────────────────── */
.language-dropdown { position: relative !important; flex-shrink: 0 !important; }

.language-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: var(--r-pill) !important;
  padding: 7px 13px !important;
  color: var(--snow) !important;
  font-family: var(--font-display) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  cursor: pointer !important;
  transition: background-color var(--dur-base) var(--ease-out) , border-color var(--dur-base) var(--ease-out) , color var(--dur-base) var(--ease-out) , fill var(--dur-base) var(--ease-out) , stroke var(--dur-base) var(--ease-out) , opacity var(--dur-base) var(--ease-out) , box-shadow var(--dur-base) var(--ease-out) , transform var(--dur-base) var(--ease-out) , filter var(--dur-base) var(--ease-out) , backdrop-filter var(--dur-base) var(--ease-out) !important;
}

.language-trigger:hover {
  background: rgba(255,255,255,0.2) !important;
  border-color: rgba(255,255,255,0.4) !important;
}

.hero-nav.scrolled .language-trigger {
  background: rgba(10,37,64,0.07) !important;
  border-color: rgba(10,37,64,0.14) !important;
  color: var(--ink) !important;
}

.language-menu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  min-width: 68px !important;
  background: rgba(7,17,30,0.93) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) !important;
  transition: background-color var(--dur-base) var(--ease-out) , border-color var(--dur-base) var(--ease-out) , color var(--dur-base) var(--ease-out) , fill var(--dur-base) var(--ease-out) , stroke var(--dur-base) var(--ease-out) , opacity var(--dur-base) var(--ease-out) , box-shadow var(--dur-base) var(--ease-out) , transform var(--dur-base) var(--ease-out) , filter var(--dur-base) var(--ease-out) , backdrop-filter var(--dur-base) var(--ease-out) !important;
  box-shadow: var(--shadow-xl) !important;
  z-index: 1001 !important;
}

.language-dropdown.active .language-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.lang-option {
  display: block !important;
  width: 100% !important;
  padding: 8px 0 !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.62) !important;
  font-family: var(--font-display) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease !important;
  letter-spacing: 0.08em !important;
}

.lang-option:hover { background: rgba(255,255,255,0.08) !important; color: var(--snow) !important; }
.lang-option.active { background: rgba(200,150,42,0.18) !important; color: var(--gold-light) !important; }

/* ─────────────────────────────────────────────────────────────
   16. FOCUS & ACCESSIBILITY
───────────────────────────────────────────────────────────── */
.skip-link {
  position: fixed !important;
  top: -100% !important;
  left: 16px !important;
  z-index: 99999 !important;
  background: var(--ocean) !important;
  color: var(--snow) !important;
  padding: 8px 16px !important;
  border-radius: var(--r-sm) !important;
  transition: top 0.2s !important;
  font-family: var(--font-body) !important;
}

.skip-link:focus { top: 16px !important; }

:focus-visible {
  outline: 2.5px solid var(--gold) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

:focus:not(:focus-visible) { outline: none !important; }

/* ─────────────────────────────────────────────────────────────
   17. KEYFRAMES
───────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(var(--_from, 16px)); }
  100% { opacity: 1; transform: translateY(0); }
}

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

body.menu-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  /* top is set dynamically by JS to preserve scroll position */
}

/* ─────────────────────────────────────────────────────────────
   18. VISUALLY HIDDEN
───────────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   19. MOBILE RESPONSIVENESS FINE-TUNING
───────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .hero-trust-pill { display: none !important; }
  .hero-atmosphere { top: 110px !important; right: 16px !important; }

  .hero-main-content { margin-top: 0 !important; }

  .contact-section .section-title { margin-bottom: var(--s2) !important; }

  .hero-btns {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 300px !important;
    gap: 12px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .hero-btns .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 18px !important;
    font-size: 0.72rem !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

@container (max-width: 480px) {
  .hero-btns {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 300px !important;
    gap: 12px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .hero-btns .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 18px !important;
    font-size: 0.72rem !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 639px) {
    .hero-btns {
      flex-direction: column !important;
      width: 100% !important;
      max-width: 300px !important;
      gap: 12px !important;
      margin: 0 auto !important;
      padding: 0 !important;
    }

    .hero-btns .btn {
      width: 100% !important;
      justify-content: center !important;
      padding: 12px 18px !important;
      font-size: 0.72rem !important;
      white-space: normal !important;
      text-align: center !important;
    }
  }
}

@media (max-width: 480px) {
  .hero-tag { display: none !important; }
  .hero-atmosphere { display: none !important; }
  .scroll-indicator { display: none !important; }
}
.review-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--snow) !important;
  background: linear-gradient(135deg, var(--ocean), var(--sky)) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 4px 12px rgba(10,37,64,0.15) !important;
  border: 2px solid var(--snow) !important;
  flex-shrink: 0 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* Luxury Badge Shimmer */
.card-badge, .badge-best {
  position: relative !important;
  overflow: hidden !important;
}

.card-badge::after, .badge-best::after {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: linear-gradient(
    45deg,
    transparent 45%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 55%
  ) !important;
  animation: shimmer 3s infinite !important;
}

@keyframes shimmer {
  0% { transform: translateX(-100%) translateY(-100%); }
  100% { transform: translateX(100%) translateY(100%); }
}
/* ─────────────────────────────────────────────────────────────
   A11Y: REDUCED MOTION SUPPORT
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  
  .hero-logo-fly, .hero-title, .hero-tag, .hero-subtitle, .hero-btns, .hero-trust, .hero-atmosphere {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-video-bg {
    transition: none !important;
  }
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .parallax-img, .hero-main-content, .hero-mist, .hero-hud {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   SAFETY SECTION MOBILE RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .safety-list {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 639px) {
  .safety-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: var(--s3) !important;
  }

  .safety-title-group {
    text-align: center !important;
    min-width: 0 !important;
  }

  .safety-text .section-title,
  .safety-text .section-subtitle {
    text-align: center !important;
  }

  .safety-stats-visual {
    justify-content: center !important;
    width: 100% !important;
    border-top: 1px solid var(--border) !important;
    padding-top: var(--s2) !important;
  }

  .safety-list {
    grid-template-columns: 1fr !important;
  }
  
  .safety-stat-box {
    text-align: center !important;
    min-width: 100px !important;
  }
}

@container (max-width: 400px) {
  .safety-grid {
    gap: 32px !important;
  }
  
  .safety-list li {
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .safety-icon {
    margin: 0 auto !important;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 480px) {
    .safety-stats-visual {
      flex-direction: column !important;
    }
  }
}


/* ─────────────────────────────────────────────────────────────
   PILOTS SECTION SUBTITLE SPACING FIX
───────────────────────────────────────────────────────────── */
.team-section .section-subtitle {
  margin-bottom: var(--s5) !important;
}

/* ─────────────────────────────────────────────────────────────
   FAQ HOVER REFINEMENT
───────────────────────────────────────────────────────────── */
.faq-item[open] .faq-question {
  color: var(--ocean) !important;
  -webkit-text-fill-color: var(--ocean) !important;
}

.faq-item {
  transition: box-shadow var(--dur-base) ease, border-color var(--dur-base) ease !important;
}

.faq-item:hover {
  border-color: rgba(10,37,64,0.2) !important;
}

/* ─────────────────────────────────────────────────────────────
   CONTACT SECTION HEADING TEXT ALIGNMENT
───────────────────────────────────────────────────────────── */
.contact-section .section-title {
  text-align: left !important;
}

@media (max-width: 639px) {
  .contact-section .section-title {
    text-align: center !important;
  }
}

@container (max-width: 480px) {
  .contact-section .section-title {
    font-size: 1.5rem !important;
  }
}

/* Ensure #booking anchor (inner container) respects nav height */
#booking {
  scroll-margin-top: 100px !important;
}

/* Booking footer split (back + continue) */
.booking-footer--split {
  justify-content: space-between !important;
}

/* Booking step sub-headings */
.booking-step-label {
  font-family: var(--font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
  background: none !important;
  margin-bottom: 12px !important;
}

.booking-step-label--spaced {
  margin-top: 20px !important;
}

/* ─────────────────────────────────────────────────────────────
   BOOKING WIDGET GIFT MODE BANNER BODY PADDING
───────────────────────────────────────────────────────────── */
.booking-body .gift-mode-banner {
  margin: -8px 0 16px !important;
}

/* ─────────────────────────────────────────────────────────────
   SCROLL INDICATOR TOUCH TARGET IMPROVEMENT
───────────────────────────────────────────────────────────── */
.scroll-indicator {
  padding: 8px !important;
}

/* ─────────────────────────────────────────────────────────────
   HERO TRUST BOTTOM: PREVENT OVERLAP WITH SCROLL INDICATOR
───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .hero-trust {
    bottom: 80px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   OFFER CARD BUTTON FULL WIDTH ON MOBILE
───────────────────────────────────────────────────────────── */
@container (max-width: 480px) {
  .offer-content .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  
  .offer-content .btn-outline,
  .offer-content .btn-primary {
    margin-top: 12px !important;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 480px) {
    .offer-content .btn {
      width: 100% !important;
      justify-content: center !important;
    }
    
    .offer-content .btn-outline,
    .offer-content .btn-primary {
      margin-top: 12px !important;
    }
  }
}

/* ─────────────────────────────────────────────────────────────
   CONTACT INFO LINKS TOUCH TARGET
───────────────────────────────────────────────────────────── */
.contact-item-text a {
  display: inline-block !important;
  padding: 2px 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   SAFETY LIST HOVER: PREVENT HORIZONTAL OVERFLOW ON MOBILE
───────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .safety-list li:hover {
    transform: none !important;
  }
}

@container (max-width: 400px) {
  .safety-list li {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .safety-icon {
    margin: 0 auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   GIFT SECTION ENHANCEMENTS
───────────────────────────────────────────────────────────── */
.gift-reassurances {
  display: flex !important;
  gap: var(--s3) !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin: 14px 0 20px !important;
}

.gift-reassurances span {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.8) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Gift mode banner inside booking widget */
.gift-mode-banner {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: rgba(200, 150, 42, 0.12) !important;
  border: 1px solid rgba(200, 150, 42, 0.3) !important;
  border-radius: var(--r-md) !important;
  padding: 14px 16px !important;
  margin: 0 0 16px !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
}

.gift-mode-banner .fa {
  color: var(--gold) !important;
  font-size: 1.2rem !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.gift-mode-banner strong {
  display: block !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
}

.gift-mode-banner span {
  color: var(--text-muted) !important;
  line-height: 1.4 !important;
}

/* Gift voucher flight option */
.flight-option--gift {
  border-color: var(--gold) !important;
  background: rgba(200, 150, 42, 0.06) !important;
}

.flight-option--gift.selected {
  background: rgba(200, 150, 42, 0.15) !important;
  border-color: var(--gold) !important;
}

/* ─────────────────────────────────────────────────────────────
   OFFER CARD URGENCY STRIP
───────────────────────────────────────────────────────────── */
.offer-urgency {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--ocean) !important;
  background: rgba(10, 37, 64, 0.07) !important;
  border-radius: var(--r-sm) !important;
  padding: 7px 12px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.offer-urgency--hot {
  color: #b45309 !important;
  background: rgba(217, 119, 6, 0.1) !important;
}

/* ─────────────────────────────────────────────────────────────
   FAQ SECTION
───────────────────────────────────────────────────────────── */
.faq-section {
  padding: var(--s7) 0 !important;
  background: var(--ocean) !important;
}

.faq-section .section-title {
  color: var(--snow) !important;
  -webkit-text-fill-color: var(--snow) !important;
}

.faq-section .section-subtitle {
  color: rgba(255,255,255,0.7) !important;
}

.faq-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--s3) !important;
  margin-top: var(--s4) !important;
  container-type: inline-size;
}

@container (max-width: 600px) {
  .faq-grid {
    grid-template-columns: 1fr !important;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 768px) {
    .faq-grid { grid-template-columns: 1fr !important; }
  }
}

.faq-item {
  background: var(--snow) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--dur-base) ease !important;
}

.faq-item[open] {
  box-shadow: var(--shadow-md) !important;
}

.faq-question {
  font-family: var(--font-display) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  padding: 18px 20px !important;
  cursor: pointer !important;
  list-style: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  line-height: 1.4 !important;
}

.faq-question::-webkit-details-marker { display: none !important; }

.faq-question::after {
  content: '+' !important;
  font-size: 1.4rem !important;
  font-weight: 300 !important;
  color: var(--ocean) !important;
  flex-shrink: 0 !important;
  transition: transform var(--dur-base) ease !important;
}

details[open] .faq-question::after {
  transform: rotate(45deg) !important;
}

.faq-answer {
  padding: 0 20px 18px !important;
  border-top: 1px solid var(--border) !important;
}

.faq-answer p {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--text-muted) !important;
  line-height: 1.65 !important;
  margin-top: 14px !important;
}

/* ─────────────────────────────────────────────────────────────
   COMPACT MOBILE NAV BOOK BUTTON
   Shown only on mobile (≤640px) inside the navbar, between
   the language selector and the hamburger icon.
───────────────────────────────────────────────────────────── */
.nav-mobile-book {
  display: none !important;
}

@media (max-width: 640px) {
  .nav-mobile-book {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 16px !important;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%) !important;
    color: var(--ocean) !important;
    font-family: var(--font-display) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: var(--r-pill) !important;
    border: none !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 10px rgba(200, 150, 42, 0.35) !important;
    transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) ease, box-shadow var(--dur-base) ease !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
  }

  .nav-mobile-book:active {
    transform: scale(0.95) !important;
  }

  .nav-mobile-book:hover,
  .nav-mobile-book:focus {
    background: linear-gradient(135deg, var(--gold-light) 0%, #f5cc6a 100%) !important;
    box-shadow: 0 4px 16px rgba(200, 150, 42, 0.55) !important;
    color: var(--ocean) !important;
    outline: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   STICKY MOBILE BOOK NOW CTA
   Now hidden on mobile since the CTA lives in the navbar.
   Kept for tablet landscape breakpoints if needed.
───────────────────────────────────────────────────────────── */
.sticky-mobile-cta {
  display: none;
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  min-width: 240px;
  min-height: 52px;
  z-index: 1002;
  background: rgba(10, 37, 64, 0.92) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--snow) !important;
  text-align: center;
  padding: 14px 36px;
  border-radius: var(--r-pill);
  font-family: var(--font-display) !important;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 20px 50px rgba(7,17,30,0.4);
  transition: transform 0.4s var(--ease-out), background 0.4s ease, box-shadow 0.4s ease, opacity 0.3s ease;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sticky-mobile-cta:active {
  transform: translateX(-50%) scale(0.96) !important;
}

.sticky-mobile-cta i {
  margin-right: 8px;
}

.sticky-mobile-cta:hover, .sticky-mobile-cta:focus {
  background: var(--sky) !important;
  color: var(--snow) !important;
}

/* Hide on mobile — the CTA now lives in the navbar */
@media (max-width: 639px) {
  .sticky-mobile-cta {
    display: none !important;
  }
  /* Remove the extra footer padding that was needed for the sticky bar */
  .main-footer {
    padding-bottom: 40px !important;
  }
}

/* Micro screen */
@media (max-width: 375px) {
  .sticky-mobile-cta {
    display: none !important;
  }
}

@media (min-width: 640px) and (max-width: 900px) {
  .sticky-mobile-cta {
    display: none !important;
  }
}

/* Hide sticky CTA when booking section is in view (toggled by JS) */
.sticky-mobile-cta.hidden {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   MOBILE HERO FALLBACK IMAGE
   Video sequencer is disabled on mobile (window.innerWidth <= 768).
   Show a static background so the hero isn't a black void.
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #hero {
    background-position: center top !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE NAV BOOK NOW CTA
───────────────────────────────────────────────────────────── */
.mobile-nav-book-btn {
  display: none !important;
}

@media (max-width: 639px) {
  .mobile-nav-book-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 40px) !important;
    margin: 8px 20px 4px !important;
    padding: 14px 20px !important;
    background: var(--gold) !important;
    color: var(--ocean) !important;
    font-family: var(--font-display) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    border: none !important;
    gap: 8px !important;
  }

  .mobile-nav-book-btn:hover,
  .mobile-nav-book-btn:focus {
    background: var(--gold-light) !important;
    color: var(--ocean) !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   FLOATING SOCIAL BUTTONS (WhatsApp + Instagram)
───────────────────────────────────────────────────────────── */
.social-floats {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  z-index: 900 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  align-items: center !important;
}

.whatsapp-float,
.instagram-float {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  /* Hidden until curtain lifts (.hero-loaded set on body) */
  opacity: 0 !important;
  transform: scale(0.6) !important;
  transition: opacity 0.5s ease 0.2s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s, box-shadow 0.2s ease !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.6rem !important;
  text-decoration: none !important;
  color: #fff !important;
  will-change: transform !important;
  position: relative !important;
}

body.hero-loaded .whatsapp-float,
body.hero-loaded .instagram-float {
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
}

/* Instagram loads in slightly after WhatsApp */
body.hero-loaded .instagram-float {
  transition-delay: 0.1s !important;
}

.whatsapp-float {
  background: #25D366 !important;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45), 0 2px 8px rgba(0,0,0,0.25) !important;
}

.instagram-float {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  box-shadow: 0 4px 20px rgba(188, 24, 136, 0.45), 0 2px 8px rgba(0,0,0,0.25) !important;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6), 0 4px 12px rgba(0,0,0,0.3) !important;
  outline: none !important;
}

.instagram-float:hover,
.instagram-float:focus {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 28px rgba(188, 24, 136, 0.6), 0 4px 12px rgba(0,0,0,0.3) !important;
  outline: none !important;
}

/* Pulse ring on WhatsApp to draw attention */
.whatsapp-float::before {
  content: '' !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(37, 211, 102, 0.5) !important;
  animation: wa-pulse 2.5s ease-out infinite !important;
  pointer-events: none !important;
}

/* Pulse ring on Instagram */
.instagram-float::before {
  content: '' !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(188, 24, 136, 0.5) !important;
  animation: wa-pulse 2.5s ease-out 0.8s infinite !important;
  pointer-events: none !important;
}

@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(1.4); opacity: 0;   }
  100% { transform: scale(1.4); opacity: 0;   }
}

/* Push buttons to bottom-right on small screens */
@media (max-width: 639px) {
  .social-floats {
    bottom: 24px !important;
    right: 12px !important;
    gap: 10px !important;
  }

  .whatsapp-float,
  .instagram-float {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.3rem !important;
  }
}

/* 320–375px micro: hide Instagram (available in footer), keep only WhatsApp */
@media (max-width: 375px) {
  .social-floats {
    right: 4px !important;
    bottom: 20px !important;
    gap: 0 !important;
  }

  .instagram-float {
    display: none !important;
  }

  .whatsapp-float {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.1rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   320px MICRO-SCREEN OVERFLOW FIX
   Tighten padding on elements that overflow at the smallest
   breakpoint (320px) to prevent horizontal scroll.
───────────────────────────────────────────────────────────── */
@media (max-width: 375px) {
  /* Container: reduce side padding */
  .container {
    padding: 0 16px !important;
  }

  /* Booking widget inner body */
  .booking-body {
    padding: 18px 16px 24px !important;
  }

  /* Booking header */
  .booking-header {
    padding: 20px 16px !important;
  }

  /* Booking steps nav */
  .booking-steps-nav {
    padding: 0 16px !important;
  }

  /* Trust badges row can wrap tighter */
  .trust-badges {
    gap: 10px !important;
  }

  /* Hero btns: perfectly centered on all mobile devices */
  .hero-btns {
    max-width: 300px !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  /* Contact section heading */
  .contact-section .section-title {
    font-size: 1.35rem !important;
  }

  /* Safety stats side-by-side on tiny screens */
  .safety-stats-visual {
    flex-direction: column !important;
  }

  /* Booking policy note */
  .booking-policy-note {
    font-size: 0.72rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   DUPLICATE .hero-tag ANIMATION FIX
   The first declaration at line ~817 uses delay 1.6s,
   the second (correct) at line ~1098 uses 0.4s.
   The second wins due to cascade, but the 1.6s ghost can
   cause a visible delay on some repaints. Normalise here.
───────────────────────────────────────────────────────────── */
.hero-tag {
  animation: fadeUp 1s var(--ease-out) 0.4s forwards !important;
}

/* ─────────────────────────────────────────────────────────────
   WHATSAPP BUTTON TRANSITION FIX
   The element had two transition declarations — the second
   (transform/box-shadow only) was overriding the first
   (opacity/scale reveal), causing the button to stay visible
   even before .hero-loaded fires on some browsers.
───────────────────────────────────────────────────────────── */
.whatsapp-float,
.instagram-float {
  transition: opacity 0.5s ease 0.2s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s, box-shadow 0.2s ease !important;
}

.whatsapp-float:hover,
.whatsapp-float:focus,
.instagram-float:hover,
.instagram-float:focus {
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.5s ease 0.2s !important;
}

/* ─────────────────────────────────────────────────────────────
   ACCESSIBILITY HARDENING: FOOTER CONTRAST
───────────────────────────────────────────────────────────── */
.footer-tagline {
  opacity: 0.9 !important; /* Boosted for contrast */
  color: var(--snow) !important;
}

.footer-legal-info {
  opacity: 0.95 !important;
  color: var(--snow) !important;
}

.footer-bottom p {
  opacity: 0.85 !important;
  color: var(--snow) !important;
}

.legal-item b {
  color: var(--gold) !important;
}

/* ─────────────────────────────────────────────────────────────
   iPhone / Small Screen Enhancements
───────────────────────────────────────────────────────────── */

/* Prevent iOS auto-zoom on inputs */
@media (max-width: 640px) {
  .booking-form input,
  .booking-form select,
  .booking-form textarea,
  input.form-control,
  select.form-control,
  textarea.form-control,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Specific overrides for very small screens (iPhone SE / Mini) */
@media (max-width: 430px) {
  /* Scale down the flight path visualizer to prevent card overflow */
  .flight-path-visualizer {
    transform: scale(0.85);
    transform-origin: center right;
  }
  
  /* Increase readability of flight labels */
  .flight-title, .flight-price, .badge-best {
    font-size: 105% !important;
  }
  
  /* Reduce card padding slightly to give more room */
  .offer-card {
    padding: var(--s3) !important;
  }

  /* Ensure hero text scales well */
  .hero-title {
    font-size: clamp(2.5rem, 10vw, 3.5rem) !important;
  }
  
  /* Hide hero trust pill on very narrow screens */
  .hero-trust-pill {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE FIX: BOOKING MODULE + FULL PAGE AUDIT
   Covers every breakpoint from 320px micro-screens to 2K+ displays.
   ═══════════════════════════════════════════════════════════════ */

/* ── TABLET: Contact container needs to stack earlier ── */
@media (max-width: 991px) {
  .contact-container {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Center the contact info on tablet when stacked */
  .contact-info {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }

  .contact-section {
    padding: 80px 0 !important;
  }
}

/* ── MOBILE: Contact & booking cleanup ── */
@media (max-width: 639px) {
  .contact-section {
    padding: 60px 0 !important;
  }

  .contact-info {
    grid-template-columns: 1fr !important;
  }

  /* Booking body padding — prevent overflow on standard phones */
  .booking-body {
    padding: 18px 18px 24px !important;
  }

  /* Booking header padding */
  .booking-header {
    padding: 22px 18px !important;
  }

  /* Booking steps nav — reduce padding + indicator spacing */
  .booking-steps-nav {
    padding: 0 14px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .booking-steps-nav::-webkit-scrollbar {
    display: none !important;
  }

  .step-indicator {
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    font-size: 0.65rem !important;
  }

  .step-indicator span {
    white-space: nowrap !important;
  }

  /* Step circle smaller on mobile */
  .step-circle {
    width: 19px !important;
    height: 19px !important;
    font-size: 0.62rem !important;
  }

  /* Booking footer buttons — stack vertically on mobile */
  .booking-footer--split {
    flex-direction: column-reverse !important;
    gap: 10px !important;
  }

  .booking-footer--split .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .booking-footer .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Flight option cards — ensure text doesn't overflow */
  .flight-option {
    padding: 12px 14px !important;
  }

  .flight-option h4 {
    font-size: 0.78rem !important;
  }

  .flight-option p {
    font-size: 0.68rem !important;
  }

  .flight-option-price {
    font-size: 1rem !important;
    flex-shrink: 0 !important;
    min-width: 50px !important;
    text-align: right !important;
  }

  /* Calendar grid — smaller day cells */
  .calendar-day {
    padding: 7px 2px !important;
    font-size: 0.68rem !important;
  }

  /* Calendar nav */
  .calendar-nav {
    flex-wrap: nowrap !important;
  }

  /* Map container */
  .map-container {
    margin-top: 32px !important;
    height: 250px !important;
    border-radius: var(--r-md) !important;
  }

  /* Booking trust row — wrap nicely */
  .booking-trust-row {
    gap: 8px 16px !important;
    font-size: 0.65rem !important;
  }

  /* Booking success panel */
  .booking-success-panel {
    padding: 36px 18px 32px !important;
  }

  .booking-success-body {
    max-width: 280px !important;
  }

  .booking-success-details {
    padding: 14px 16px !important;
  }

  /* Redeem panel glass */
  .redeem-panel-glass {
    padding: 16px !important;
  }

  /* Date preference buttons grid */
  #date-preference-selection .btn {
    padding: 10px 8px !important;
    font-size: 0.78rem !important;
  }

  /* Out of order sign */
  #out-of-order-sign {
    padding: 32px 16px !important;
  }

  /* Voucher recipient fields */
  #voucher-recipient-fields > div {
    padding: 12px 14px !important;
  }
}

/* ── MICRO SCREENS: 320–375px ── */
@media (max-width: 375px) {
  .booking-body {
    padding: 14px 12px 20px !important;
  }

  .booking-header {
    padding: 18px 12px !important;
  }

  .booking-steps-nav {
    padding: 0 10px !important;
  }

  .step-indicator {
    margin-right: 8px !important;
    gap: 5px !important;
  }

  .flight-option {
    padding: 10px 10px !important;
    gap: 6px !important;
  }

  .flight-option h4 {
    font-size: 0.72rem !important;
  }

  .flight-option-price {
    font-size: 0.9rem !important;
  }

  /* Form controls need tighter padding */
  .form-control {
    padding: 10px 12px !important;
  }

  /* Calendar: tighter gap */
  .calendar-grid {
    gap: 3px !important;
  }

  .calendar-day {
    padding: 6px 1px !important;
    font-size: 0.62rem !important;
  }

  /* Booking footer buttons */
  .booking-footer--split .btn {
    padding: 12px 16px !important;
    font-size: 0.7rem !important;
  }

  /* Trust row */
  .booking-trust-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Map */
  .map-container {
    height: 220px !important;
    margin-top: 24px !important;
  }

  /* Voucher redeem button */
  .btn-voucher-redeem {
    padding: 12px 12px !important;
    font-size: 0.8rem !important;
    gap: 8px !important;
  }
}

/* ── WIDE TABLET / SMALL LAPTOP: booking looks great ── */
@media (min-width: 992px) and (max-width: 1200px) {
  .contact-container {
    gap: 40px !important;
  }
}

/* ── LARGE DESKTOP: ensure booking widget doesn't stretch too wide ── */
@media (min-width: 1400px) {
  .booking-widget {
    max-width: 720px !important;
  }

  .map-container {
    height: 380px !important;
  }
}

/* ── REVIEWS SECTION: Override inline styles for responsiveness ── */
@media (max-width: 639px) {
  .reviews-main-title {
    font-size: 1.8rem !important;
  }

  .reviews-trust-badge {
    padding: 8px 14px !important;
    gap: 8px !important;
  }

  .reviews-trust-number {
    font-size: 1rem !important;
  }

  .reviews-trust-stars {
    font-size: 0.9rem !important;
  }

  .reviews-trust-count {
    font-size: 0.75rem !important;
  }

  .reviews-controls {
    gap: 12px !important;
    margin-top: 20px !important;
  }

  .rv-btn {
    width: 40px !important;
    height: 40px !important;
  }
}

@media (max-width: 375px) {
  .reviews-main-title {
    font-size: 1.5rem !important;
  }

  .reviews-kicker {
    font-size: 0.72rem !important;
  }

  .reviews-kicker-line {
    width: 24px !important;
  }
}

/* ── GIFT SECTION: Responsive padding ── */
@media (max-width: 639px) {
  .gift-section {
    padding: 60px 20px !important;
  }

  .gift-title {
    font-size: 1.6rem !important;
  }

  .gift-desc {
    font-size: 0.88rem !important;
  }

  .gift-reassurances {
    gap: 8px 14px !important;
  }

  .gift-reassurances span {
    font-size: 0.72rem !important;
  }
}

/* ── SAFETY SECTION: Responsive padding ── */
@media (max-width: 639px) {
  .safety-section {
    padding: 60px 0 !important;
  }
}

/* ── FAQ SECTION: Responsive padding ── */
@media (max-width: 639px) {
  .faq-section {
    padding: 48px 0 !important;
  }

  .faq-question {
    padding: 14px 16px !important;
    font-size: 0.8rem !important;
  }

  .faq-answer {
    padding: 0 16px 14px !important;
  }

  .faq-answer p {
    font-size: 0.82rem !important;
  }
}

/* ── TEAM SECTION: Responsive padding ── */
@media (max-width: 639px) {
  .team-section {
    padding: 60px 0 !important;
  }
}

/* ── OFFERS SECTION: Responsive padding ── */
@media (max-width: 639px) {
  .offers-section {
    padding: 60px 0 !important;
  }
}

/* ── FOOTER: Responsive ── */
@media (max-width: 639px) {
  .main-footer {
    padding: 48px 0 0 !important;
  }

  .footer-grid {
    gap: 28px !important;
  }

  .footer-bottom {
    padding: 16px 0 !important;
  }

  .footer-legal-info {
    font-size: 0.6rem !important;
    gap: 4px 10px !important;
  }
}

/* ── PRINT: basic readability ── */
@media print {
  .hero-section,
  .hero-nav,
  .social-floats,
  .sticky-mobile-cta,
  .hero-entry-curtain {
    display: none !important;
  }

  .contact-container {
    grid-template-columns: 1fr !important;
  }

  .booking-widget {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
}