/* ==========================================================================
   DREAMSCAPE TRAVELS - NAVIGATION
   Styled with Wondermakers Design System
   ========================================================================== */

/* ==========================================================================
   SETTINGS — DESIGN TOKENS (from Style Guide)
   ========================================================================== */
:root {
  /* ========== COLORS ========== */
  /* PRIMARY — Coral */
  --color-coral: #ff6b4a;
  --color-coral-light: #ff8f75;
  --color-coral-dark: #e54d2e;

  /* SECONDARY — Mango */
  --color-mango: #ff9a3c;
  --color-mango-light: #ffb86b;
  --color-mango-dark: #e07a1f;

  /* TERTIARY — Hot Pink */
  --color-pink: #e91e8c;
  --color-pink-light: #f54da6;
  --color-pink-dark: #c4146f;

  /* QUATERNARY — Mardi Gras Purple */
  --color-purple: #880088;
  --color-purple-light: #a855a8;
  --color-purple-dark: #5c005c;

  /* QUINARY — Teal */
  --color-teal: #00c9c9;
  --color-teal-light: #5fdfdf;
  --color-teal-dark: #00a3a3;

  /* SENARY — Ocean Blue */
  --color-ocean: #5bc0de;
  --color-ocean-light: #a8e6f0;
  --color-ocean-dark: #2a9ac4;

  /* ACCENT — Tropical Lime */
  --color-lime: #a4d233;
  --color-lime-light: #c2e66b;
  --color-lime-dark: #8ab82a;

  /* NEUTRALS */
  --color-sand: #f5e6d3;
  --color-sand-dark: #e6d4bc;
  --color-cream: #fffbf5;
  --color-coconut: #ffffff;
  --color-driftwood: #4a4238;
  --color-driftwood-light: #6b6358;
  --color-midnight: #1e1e2e;

  /* GRADIENTS */
  --gradient-sunset: linear-gradient(135deg, var(--color-coral) 0%, var(--color-mango) 25%, var(--color-pink) 50%, var(--color-purple) 75%, var(--color-teal) 100%);
  --gradient-tropical: linear-gradient(135deg, var(--color-teal) 0%, var(--color-purple) 100%);
  --gradient-paradise: linear-gradient(135deg, var(--color-pink) 0%, var(--color-ocean) 100%);

  /* ========== TYPOGRAPHY ========== */
  --font-gravitas: 'Gravitas One', 'Impact', sans-serif;
  --font-display: 'Fredoka', 'Trebuchet MS', var(--font-body);
  --font-pacifico: 'Pacifico', cursive;
  --font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Fluid Type Scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.125rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);

  /* Line Heights */
  --leading-none: 1;
  --leading-title: 1.1;        /* Titles, headers */
  --leading-tight: 1.15;
  --leading-list: 1.2;         /* List items */
  --leading-snug: 1.25;
  --leading-normal: 1.45;      /* Body text, paragraphs */

  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.15em;

  /* ========== SPACING ========== */
  --space-3xs: clamp(0.125rem, 0.1rem + 0.125vw, 0.1875rem);
  --space-2xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
  --space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.625rem);
  --space-sm: clamp(0.75rem, 0.65rem + 0.5vw, 1rem);
  --space-md: clamp(1rem, 0.875rem + 0.625vw, 1.375rem);
  --space-lg: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  --space-xl: clamp(2rem, 1.625rem + 1.875vw, 3rem);
  --space-2xl: clamp(3rem, 2.5rem + 2.5vw, 4.5rem);
  --space-3xl: clamp(4rem, 3.5rem + 3vw, 6rem);

  /* ========== EFFECTS ========== */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 50%;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-tag: 0 4px 8px -2px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-tag-hover: 0 8px 16px -4px rgb(0 0 0 / 0.2), 0 4px 8px -4px rgb(0 0 0 / 0.1);

  /* Durations — bumped up slightly for smoother, less abrupt motion */
  --duration-fast: 200ms;
  --duration-normal: 320ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;

  /* Easing — a gentle in-out curve reads softer than a pure decelerate.
     ease-out kept for entrance/reveal motion; ease-soft for hover states. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);

  --transition-fast: var(--duration-fast) var(--ease-soft);
  --transition-normal: var(--duration-normal) var(--ease-soft);
  --transition-medium: var(--duration-slow) var(--ease-soft);
  --transition-slow: var(--duration-slower) var(--ease-soft);

  /* Mobile menu height */
  --mobile-menu-height: 50vh;
}

/* ==========================================================================
   MODERN COLOR — OKLCH
   Perceptually-uniform color for modern browsers. The hex values in :root
   above remain as automatic fallbacks wherever oklch() is unsupported.
   ========================================================================== */
@supports (color: oklch(0% 0 0)) {
  :root {
    /* PRIMARY — Coral */
    --color-coral: oklch(70.7% 0.187 34.1);
    --color-coral-light: oklch(76.5% 0.141 34.1);
    --color-coral-dark: oklch(62.7% 0.194 33.3);

    /* SECONDARY — Mango */
    --color-mango: oklch(77.6% 0.159 59.2);
    --color-mango-light: oklch(83.4% 0.125 66.9);
    --color-mango-dark: oklch(68.1% 0.157 55.5);

    /* TERTIARY — Pink */
    --color-pink: oklch(61.8% 0.241 355.3);
    --color-pink-light: oklch(67.9% 0.219 351.9);
    --color-pink-dark: oklch(53.9% 0.211 357.5);

    /* QUATERNARY — Purple */
    --color-purple: oklch(44.0% 0.202 328.4);
    --color-purple-light: oklch(58.0% 0.152 327.3);
    --color-purple-dark: oklch(33.3% 0.153 328.4);

    /* QUINARY — Teal */
    --color-teal: oklch(75.7% 0.129 194.8);
    --color-teal-light: oklch(83.3% 0.112 195.2);
    --color-teal-dark: oklch(64.8% 0.111 194.8);

    /* SENARY — Ocean Blue */
    --color-ocean: oklch(75.9% 0.103 220.1);
    --color-ocean-light: oklch(88.6% 0.064 208.5);
    --color-ocean-dark: oklch(64.4% 0.114 228.5);

    /* ACCENT — Tropical Lime */
    --color-lime: oklch(80.3% 0.184 124.9);
    --color-lime-light: oklch(87.4% 0.155 123.2);
    --color-lime-dark: oklch(72.4% 0.170 126.5);

    /* NEUTRALS */
    --color-sand: oklch(93.2% 0.030 73.9);
    --color-sand-dark: oklch(87.8% 0.038 75.1);
    --color-cream: oklch(99.0% 0.009 78.3);
    --color-coconut: oklch(100% 0 0);
    --color-driftwood: oklch(38.4% 0.020 73.3);
    --color-driftwood-light: oklch(50.4% 0.020 76.0);
    --color-midnight: oklch(24.3% 0.030 283.9);
  }
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-driftwood);
  background-color: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Long unbroken strings break instead of forcing horizontal scroll */
  overflow-wrap: break-word;
}

/* ---------- Overflow safety net ----------
   1. Text elements inherit break-word so no copy can spill its container.
   2. Flex/grid children default to min-width:auto, which refuses to shrink
      below content size and causes overflow — reset common text containers
      to min-width:0 so they shrink and wrap gracefully.
   3. Replaced elements never exceed their box. */
p, h1, h2, h3, h4, h5, h6,
li, a, span, blockquote, cite, label, figcaption {
  overflow-wrap: break-word;
}

.split-section__content,
.about-intro__content,
.contact-section__info,
.hero-panel,
.page-header__content,
.destination-card__content,
.faq-item__question,
.testimonial-card,
.footer__column,
.footer__mega-column {
  min-width: 0;
}

img, picture, video, svg {
  max-width: 100%;
}

ul {
  list-style: none;
}

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

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY
   ========================================================================== */

/* Headings — tight line-height */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-title);
}

/* Paragraphs — comfortable reading line-height */
p {
  line-height: var(--leading-normal);
}

/* Lists — tighter line-height with spacing between items */
ul, ol {
  line-height: var(--leading-list);
}

li {
  line-height: var(--leading-list);
  margin-block-end: var(--space-xs);
}

li:last-child {
  margin-block-end: 0;
}

/* Nested lists get smaller spacing */
li li {
  margin-block-end: var(--space-3xs);
}

/* ==========================================================================
   SKIP LINK (Accessibility)
   ========================================================================== */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 9999;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-midnight);
  color: var(--color-coconut);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
}

.skip-link:focus {
  top: var(--space-sm);
}

/* ==========================================================================
   SITE HEADER: Two-Tier Structure
   ========================================================================== */
.site-header {
  position: relative;
  z-index: 100;
  background-color: var(--color-cream);
}

/* ==========================================================================
   TIER 1: Logo Bar
   ========================================================================== */
.header__logo-tier {
  width: 100%;
  padding: var(--space-sm) var(--space-xs);
  text-align: center;
  background-color: var(--color-midnight);
}

.logo {
  display: block;
  width: 100%;
}

/* Main title - HUGE with animated gradient text */
.logo__main {
  display: block;
  width: 100%;
  font-family: var(--font-gravitas);
  /* Use container-aware scaling */
  font-size: min(9vw, 8rem);
  font-weight: var(--weight-regular);
  line-height: var(--leading-title);
  text-transform: uppercase;
  /* Remove letter-spacing on small screens, add on larger */
  letter-spacing: 0;
  white-space: nowrap;
  
  /* Animated gradient text effect — solid coral fallback first, so the
     logo stays visible on engines without background-clip: text */
  color: var(--color-coral);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .logo__main {
    background: var(--gradient-sunset);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* Smooth gradient animation */
    animation: gradient-shift 8s ease-in-out infinite;
  }
}

/* Add letter-spacing back on larger screens where there's room */
@media (min-width: 480px) {
  .logo__main {
    letter-spacing: var(--tracking-wide);
  }
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Subtitle - Pacifico script */
.logo__sub {
  display: block;
  width: 100%;
  font-family: var(--font-pacifico);
  font-size: clamp(1rem, 4vw + 0.25rem, 2.25rem);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--color-cream);
  margin-top: -0.15em;
}

/* ==========================================================================
   TIER 2: Navigation Bar
   ========================================================================== */
.header__nav-tier {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-mango);
}

/* ==========================================================================
   LUGGAGE TAG COMPONENT — Navigation Links
   ========================================================================== */

/* Base tag styles (shared) */
.c-nav-tag {
  --_tag-bg: var(--color-coral);
  --_tag-color: var(--color-coconut);
  --_tag-hole-size: 0.5rem;
  
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  background-color: var(--_tag-bg);
  color: var(--_tag-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-tag);
  cursor: pointer;
  
  /* Paper texture overlay */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-blend-mode: soft-light;
  
  transition: 
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.c-nav-tag:hover {
  transform: translateY(-3px) rotate(-1deg);
  box-shadow: var(--shadow-tag-hover);
}

.c-nav-tag:focus-visible {
  outline: 3px solid var(--color-purple);
  outline-offset: 2px;
}

/* Punch hole - positioned via modifier */
.c-nav-tag::before {
  content: '';
  position: absolute;
  width: var(--_tag-hole-size);
  height: var(--_tag-hole-size);
  background-color: var(--color-cream);
  border-radius: var(--radius-full);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.25);
  pointer-events: none; /* Ensure pseudo-element doesn't block clicks */
}

/* ==========================================================================
   TAG MODIFIER: Horizontal (side hole) — for Desktop Nav
   ========================================================================== */
.c-nav-tag--horizontal {
  padding: var(--space-xs) var(--space-sm);
  padding-inline-start: calc(var(--space-xs) + var(--_tag-hole-size) + 0.5rem);
  font-size: var(--text-sm);
}

.c-nav-tag--horizontal::before {
  left: var(--space-xs);
  top: 50%;
  transform: translateY(-50%);
}

/* ==========================================================================
   TAG MODIFIER: Vertical (top hole) — for Mobile Nav
   ========================================================================== */
.c-nav-tag--vertical {
  --_tag-hole-size: 0.5rem;
  
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  /* Extra top padding: hole + 4px gap below it */
  padding-block-start: calc(var(--space-2xs) + var(--_tag-hole-size) + 4px);
  font-size: var(--text-sm);
  text-align: center;
}

.c-nav-tag--vertical::before {
  top: var(--space-2xs);
  left: 50%;
  transform: translateX(-50%);
}

/* ==========================================================================
   TAG COLOR VARIANTS
   ========================================================================== */
.c-nav-tag--coral { --_tag-bg: var(--color-coral); --_tag-color: var(--color-coconut); }
.c-nav-tag--mango { --_tag-bg: var(--color-mango); --_tag-color: var(--color-midnight); }
.c-nav-tag--pink { --_tag-bg: var(--color-pink); --_tag-color: var(--color-coconut); }
.c-nav-tag--purple { --_tag-bg: var(--color-purple); --_tag-color: var(--color-coconut); }
.c-nav-tag--teal { --_tag-bg: var(--color-teal); --_tag-color: var(--color-midnight); }
.c-nav-tag--ocean { --_tag-bg: var(--color-ocean); --_tag-color: var(--color-midnight); }
.c-nav-tag--lime { --_tag-bg: var(--color-lime); --_tag-color: var(--color-midnight); }

/* ==========================================================================
   DESKTOP NAVIGATION
   ========================================================================== */
.nav-desktop {
  display: none;
}

.nav-desktop__list {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.nav-desktop__list li {
  margin-block-end: 0; /* Using gap instead */
}

/* ==========================================================================
   MOBILE MENU TOGGLE BUTTON — Luggage Tag Style
   ========================================================================== */
.mobile-menu-toggle {
  --_tag-bg: var(--color-teal);
  --_tag-color: var(--color-midnight);
  --_tag-hole-size: 0.5rem;
  
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  padding-inline-start: calc(var(--space-xs) + var(--_tag-hole-size) + 0.5rem);
  background-color: var(--_tag-bg);
  color: var(--_tag-color);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-tag);
  cursor: pointer;
  
  /* Paper texture */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-blend-mode: soft-light;
  
  transition: 
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* Punch hole on left side */
.mobile-menu-toggle::before {
  content: '';
  position: absolute;
  left: var(--space-xs);
  top: 50%;
  transform: translateY(-50%);
  width: var(--_tag-hole-size);
  height: var(--_tag-hole-size);
  background-color: var(--color-mango);
  border-radius: var(--radius-full);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.25);
  pointer-events: none; /* Ensure pseudo-element doesn't block clicks */
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus-visible {
  transform: translateY(-2px) rotate(-1deg);
  box-shadow: var(--shadow-tag-hover);
}

.mobile-menu-toggle:focus-visible {
  outline: 3px solid var(--color-purple);
  outline-offset: 2px;
}

.mobile-menu-toggle i {
  font-size: 1rem;
}

/* ==========================================================================
   MOBILE MENU: Bottom Slide-Up Panel
   ========================================================================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}

.mobile-menu.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* Overlay/Backdrop */
.mobile-menu__overlay {
  position: absolute;
  inset: 0;
  background-color: rgb(30 30 46 / 0.7);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.mobile-menu.is-open .mobile-menu__overlay {
  opacity: 1;
}

/* Menu Panel */
.mobile-menu__panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--mobile-menu-height);
  background-color: var(--color-cream);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  transform: translateY(100%);
  transition: transform var(--duration-normal) var(--ease-out);
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 40px -10px rgb(0 0 0 / 0.3);
}

.mobile-menu.is-open .mobile-menu__panel {
  transform: translateY(0);
}

/* Panel Header */
.mobile-menu__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 3px solid var(--color-sand);
  background-color: var(--color-coconut);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
}

.mobile-menu__title {
  font-family: var(--font-gravitas);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  color: var(--color-purple);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.mobile-menu__close {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-coral);
  color: var(--color-coconut);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  transition: 
    transform var(--transition-fast),
    background-color var(--transition-fast);
}

.mobile-menu__close:hover,
.mobile-menu__close:focus-visible {
  transform: scale(1.1);
  background-color: var(--color-coral-dark);
}

.mobile-menu__close:focus-visible {
  outline: 3px solid var(--color-mango);
  outline-offset: 2px;
}

.mobile-menu__close i {
  font-size: 1.25rem;
}

/* Navigation Links — Tag Wall (Inverted Pyramid) */
.mobile-menu__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu__list {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: var(--space-sm);
  justify-content: center;
  justify-items: center;
  width: 100%;
  max-width: 20rem;
}

.mobile-menu__list li {
  margin-block-end: 0; /* Using gap instead */
}

/* Last item (5th) spans both columns and centers */
.mobile-menu__list li:last-child {
  grid-column: 1 / -1;
  justify-self: center;
}

/* Scattered rotation for that vintage feel */
.mobile-menu__list li:nth-child(1) .c-nav-tag { transform: rotate(-3deg); }
.mobile-menu__list li:nth-child(2) .c-nav-tag { transform: rotate(2deg); }
.mobile-menu__list li:nth-child(3) .c-nav-tag { transform: rotate(2deg); }
.mobile-menu__list li:nth-child(4) .c-nav-tag { transform: rotate(-2deg); }
.mobile-menu__list li:nth-child(5) .c-nav-tag { transform: rotate(-1deg); }

.mobile-menu__list li .c-nav-tag:hover,
.mobile-menu__list li .c-nav-tag:focus-visible {
  transform: translateY(-4px) rotate(0deg);
  z-index: 10;
}

/* CTA Button Area */
.mobile-menu__cta {
  padding: var(--space-md);
  background-color: var(--color-sand);
  border-top: 3px solid var(--color-sand-dark);
  text-align: center;
}

/* CTA uses the same tag component, just full-width */
.mobile-menu__cta .c-nav-tag {
  display: block;
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
}

/* ==========================================================================
   RESPONSIVE: Tablet & Desktop (768px+)
   ========================================================================== */
@media (min-width: 768px) {
  .mobile-menu-toggle {
    display: none;
  }
  
  .nav-desktop {
    display: block;
  }
  
  .mobile-menu {
    display: none;
  }
  
  .header__nav-tier {
    padding: var(--space-sm) var(--space-lg);
  }
}

/* ==========================================================================
   HERO CAROUSEL — Full Viewport with Ken Burns Effect
   ========================================================================== */
.hero-carousel {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height — fixes mobile browser chrome overlap */
  overflow: hidden;
  background-color: var(--color-midnight);
}

.hero-carousel__slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.hero-carousel__slide.is-active {
  opacity: 1;
}

.hero-carousel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Ken Burns: Start zoomed in slightly */
  transform: scale(1.1);
  animation: ken-burns 7s ease-in-out forwards;
}

/* Ken Burns animation — slow zoom out and subtle pan */
@keyframes ken-burns {
  0% {
    transform: scale(1.15) translate(0, 0);
  }
  100% {
    transform: scale(1.05) translate(-1%, -1%);
  }
}

/* Variation for different slides — alternate directions */
.hero-carousel__slide:nth-child(2) .hero-carousel__image {
  animation-name: ken-burns-alt;
}

@keyframes ken-burns-alt {
  0% {
    transform: scale(1.15) translate(-2%, 0);
  }
  100% {
    transform: scale(1.05) translate(1%, -1%);
  }
}

.hero-carousel__slide:nth-child(3) .hero-carousel__image {
  animation-name: ken-burns-alt-2;
}

@keyframes ken-burns-alt-2 {
  0% {
    transform: scale(1.1) translate(1%, -1%);
  }
  100% {
    transform: scale(1.2) translate(-1%, 1%);
  }
}

/* Reset animation when slide becomes active */
.hero-carousel__slide.is-active .hero-carousel__image {
  animation-play-state: running;
}

.hero-carousel__slide:not(.is-active) .hero-carousel__image {
  animation: none;
}

/* Visually hidden but accessible to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   CTA SECTION — Brand Message
   ========================================================================== */
.cta-section {
  background-color: var(--color-midnight);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
}

.cta-section__content {
  max-width: 50rem;
  margin-inline: auto;
}

.cta-section__eyebrow {
  font-family: var(--font-pacifico);
  font-size: var(--text-xl);
  color: var(--color-mango);
  margin-block-end: var(--space-xs);
}

.cta-section__title {
  font-family: var(--font-gravitas);
  font-size: var(--text-4xl);
  color: var(--color-coconut);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-title);
  margin-block-end: var(--space-sm);
}

.cta-section__description {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-cream);
  font-style: italic;
  opacity: 0.9;
  margin-block-end: var(--space-md);
}

.cta-section__hashtag {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-teal);
  letter-spacing: var(--tracking-wide);
}

/* ==========================================================================
   VIDEO SECTION — Background Video with Text Overlay
   ========================================================================== */
.video-section {
  position: relative;
  width: 100%;
  height: clamp(30vh, 40vh, 50vh);
  overflow: hidden;
  background-color: var(--color-midnight);
}

.video-section__fallback,
.video-section__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.video-section__fallback {
  z-index: 1;
}

.video-section__video {
  z-index: 2;
}

/* Text Overlay — Centered */
.video-section__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-section__title {
  font-family: var(--font-gravitas);
  font-size: clamp(2.5rem, 8vw, 6rem);
  color: var(--color-midnight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  line-height: var(--leading-none);
  /* Solid background behind text */
  background-color: var(--color-coconut);
  padding: var(--space-sm) var(--space-lg);
}

/* ==========================================================================
   SPLIT SECTION — 50/50 Content & Image
   ========================================================================== */
.split-section {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

/* Content Side — Teal Background */
.split-section__content {
  background-color: var(--color-teal);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Color Variant — Coral */
.split-section--coral .split-section__content {
  background-color: var(--color-coral);
}

.split-section--coral .split-section__eyebrow {
  color: var(--color-coconut);
}

.split-section--coral .split-section__description {
  color: var(--color-coconut);
}

.split-section--coral .newsletter-form__disclaimer {
  color: var(--color-coconut);
}

.split-section__eyebrow {
  font-family: var(--font-pacifico);
  font-size: var(--text-lg);
  color: var(--color-midnight);
  margin-block-end: var(--space-xs);
}

.split-section__title {
  font-family: var(--font-gravitas);
  font-size: var(--text-3xl);
  color: var(--color-coconut);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-title);
  margin-block-end: var(--space-md);
}

.split-section__description {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-midnight);
  line-height: var(--leading-normal);
  max-width: 50ch;
}

/* Image Side — Full Cover */
.split-section__image {
  position: relative;
  min-height: 20rem;
}

.split-section__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Tablet & Desktop — 50/50 Split */
@media (min-width: 768px) {
  .split-section {
    grid-template-columns: 1fr 1fr;
  }

  .split-section__content {
    padding: var(--space-2xl) var(--space-xl);
  }

  .split-section__image {
    min-height: auto;
  }

  /* Reversed layout — Image on left, Content on right */
  .split-section--reverse .split-section__image {
    order: -1;
  }
}

/* ==========================================================================
   NEWSLETTER FORM — Inside Split Section
   ========================================================================== */
.newsletter-form {
  margin-block-start: var(--space-lg);
}

.newsletter-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.newsletter-form__input {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-midnight);
  background-color: var(--color-coconut);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.newsletter-form__input::placeholder {
  color: var(--color-driftwood-light);
}

.newsletter-form__input:focus {
  border-color: var(--color-mango);
  box-shadow: 0 0 0 3px rgb(255 154 60 / 0.3);
}

.newsletter-form__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-gravitas);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-mango);
  background-color: var(--color-midnight);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.newsletter-form__button:hover {
  background-color: var(--color-purple);
  color: var(--color-coconut);
  transform: translateY(-2px);
}

.newsletter-form__button:focus-visible {
  outline: 3px solid var(--color-mango);
  outline-offset: 2px;
}

.newsletter-form__button:active {
  transform: translateY(0);
}

.newsletter-form__disclaimer {
  margin-block-start: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-midnight);
  opacity: 0.8;
}

/* Desktop — Inline form layout */
@media (min-width: 768px) {
  .newsletter-form__group {
    flex-direction: row;
  }

  .newsletter-form__input {
    max-width: 24rem;
  }
}

/* ==========================================================================
   DESTINATIONS SECTION — Fantasy Luggage Tag Wall
   ========================================================================== */
.destinations-section {
  background-color: var(--color-sand);
  padding: var(--space-2xl) var(--space-lg);
}

.destinations-section__header {
  text-align: center;
  margin-block-end: var(--space-xl);
}

.destinations-section__eyebrow {
  font-family: var(--font-pacifico);
  font-size: var(--text-lg);
  color: var(--color-purple);
  margin-block-end: var(--space-xs);
}

.destinations-section__title {
  font-family: var(--font-gravitas);
  font-size: var(--text-4xl);
  color: var(--color-midnight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-title);
}

.destinations-section__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  align-items: flex-start;
  max-width: 80rem;
  margin-inline: auto;
}

/* ==========================================================================
   LUGGAGE TAG COMPONENT — Full Size (Destination Cards)
   ========================================================================== */
.c-tag {
  --_tag-bg: var(--color-coral);
  --_tag-color: var(--color-coconut);
  --_tag-hole-size: 0.75rem;
  --_tag-hole-spacing: var(--space-xs);

  position: relative;
  display: inline-flex;
  flex-direction: column;
  min-width: 12rem;
  max-width: 100%;
  padding: var(--space-md) var(--space-lg);
  padding-block-start: calc(var(--space-sm) + var(--_tag-hole-size) + var(--_tag-hole-spacing));
  background-color: var(--_tag-bg);
  color: var(--_tag-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-tag);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  
  /* Paper texture overlay */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-blend-mode: soft-light;
}

.c-tag:hover {
  transform: translateY(-4px) rotate(1deg);
  box-shadow: var(--shadow-tag-hover);
}

/* Punch hole */
.c-tag::before {
  content: '';
  position: absolute;
  top: var(--space-sm);
  left: 50%;
  transform: translateX(-50%);
  width: var(--_tag-hole-size);
  height: var(--_tag-hole-size);
  background-color: var(--color-sand);
  border-radius: var(--radius-full);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.2);
  pointer-events: none;
}

.c-tag__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  opacity: 0.85;
  margin-block-end: var(--space-3xs);
}

.c-tag__title {
  font-family: var(--font-gravitas);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin: 0;
}

.c-tag__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  margin-block-start: var(--space-2xs);
  opacity: 0.9;
}

/* Tag Color Variants */
.c-tag--coral { --_tag-bg: var(--color-coral); --_tag-color: var(--color-coconut); }
.c-tag--mango { --_tag-bg: var(--color-mango); --_tag-color: var(--color-midnight); }
.c-tag--pink { --_tag-bg: var(--color-pink); --_tag-color: var(--color-coconut); }
.c-tag--purple { --_tag-bg: var(--color-purple); --_tag-color: var(--color-coconut); }
.c-tag--teal { --_tag-bg: var(--color-teal); --_tag-color: var(--color-midnight); }
.c-tag--ocean { --_tag-bg: var(--color-ocean); --_tag-color: var(--color-midnight); }
.c-tag--lime { --_tag-bg: var(--color-lime); --_tag-color: var(--color-midnight); }
.c-tag--midnight { --_tag-bg: var(--color-midnight); --_tag-color: var(--color-cream); }

/* Scattered rotation effect */
.destinations-section__tags .c-tag:nth-child(1) { transform: rotate(-2deg); }
.destinations-section__tags .c-tag:nth-child(2) { transform: rotate(1.5deg); }
.destinations-section__tags .c-tag:nth-child(3) { transform: rotate(2deg); }
.destinations-section__tags .c-tag:nth-child(4) { transform: rotate(-1.5deg); }
.destinations-section__tags .c-tag:nth-child(5) { transform: rotate(-3deg); }
.destinations-section__tags .c-tag:nth-child(6) { transform: rotate(2.5deg); }
.destinations-section__tags .c-tag:nth-child(7) { transform: rotate(1deg); }
.destinations-section__tags .c-tag:nth-child(8) { transform: rotate(-2.5deg); }
.destinations-section__tags .c-tag:nth-child(9) { transform: rotate(3deg); }
.destinations-section__tags .c-tag:nth-child(10) { transform: rotate(-1deg); }
.destinations-section__tags .c-tag:nth-child(11) { transform: rotate(-2deg); }
.destinations-section__tags .c-tag:nth-child(12) { transform: rotate(2deg); }

.destinations-section__tags .c-tag:hover {
  transform: translateY(-6px) rotate(0deg);
  z-index: 10;
}

/* ==========================================================================
   SPARKLE COMPONENT — Pure CSS Stars
   ========================================================================== */
.c-sparkle {
  --_sparkle-size: 1rem;
  --_sparkle-color: currentColor;
  
  position: relative;
  display: inline-block;
  width: var(--_sparkle-size);
  height: var(--_sparkle-size);
}

/* 4-point star using clip-path */
.c-sparkle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--_sparkle-color);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

/* Simple 4-point sparkle variant — thicker arms */
.c-sparkle--simple::before {
  clip-path: polygon(
    50% 0%,
    58% 42%,
    100% 50%,
    58% 58%,
    50% 100%,
    42% 58%,
    0% 50%,
    42% 42%
  );
}

.c-sparkle--xs { --_sparkle-size: 0.75rem; }
.c-sparkle--sm { --_sparkle-size: 1rem; }
.c-sparkle--md { --_sparkle-size: 1.375rem; }
.c-sparkle--lg { --_sparkle-size: 1.75rem; }

/* ==========================================================================
   MEET THE TEAM SECTION
   ========================================================================== */
.team-section {
  background-color: var(--color-lime);
  padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
}

.team-section__header {
  text-align: center;
  margin-block-end: var(--space-xl);
}

.team-section__eyebrow {
  font-family: var(--font-pacifico);
  font-size: var(--text-lg);
  color: var(--color-midnight);
  margin-block-end: var(--space-xs);
}

.team-section__title {
  font-family: var(--font-gravitas);
  font-size: var(--text-3xl);
  color: var(--color-midnight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-title);
}

.team-section__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-driftwood);
  margin-block-start: var(--space-sm);
}

/* Team Row Layout */
.team-section__row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-xl);
  flex-wrap: wrap;
  max-width: 72rem;
  margin-inline: auto;
}

/* ==========================================================================
   AGENT COMPONENT — Interactive SVG Frame Cards
   ========================================================================== */
.c-agent {
  --_agent-accent: var(--color-purple);
  --_agent-accent-dark: var(--color-purple-dark);
  
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 20rem;
}

/* Color Variants */
.c-agent--purple {
  --_agent-accent: var(--color-purple);
  --_agent-accent-dark: var(--color-purple-dark);
}

.c-agent--teal {
  --_agent-accent: var(--color-teal);
  --_agent-accent-dark: var(--color-teal-dark);
}

.c-agent--mango {
  --_agent-accent: var(--color-mango);
  --_agent-accent-dark: var(--color-mango-dark);
}

.c-agent--coral {
  --_agent-accent: var(--color-coral);
  --_agent-accent-dark: var(--color-coral-dark);
}

.c-agent--pink {
  --_agent-accent: var(--color-pink);
  --_agent-accent-dark: var(--color-pink-dark);
}

.c-agent--ocean {
  --_agent-accent: var(--color-ocean);
  --_agent-accent-dark: var(--color-ocean-dark);
}

/* Trigger Button */
.c-agent__trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform var(--transition-fast);
}

.c-agent__trigger:focus-visible {
  outline: none;
}

.c-agent__trigger:focus-visible .c-frame {
  outline: 3px solid var(--color-midnight);
  outline-offset: 4px;
  border-radius: 50%;
}

/* Placeholder Image */
.c-agent__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--_agent-accent), var(--_agent-accent-dark));
  font-size: var(--text-4xl);
  color: var(--color-coconut);
  border-radius: 50%;
}

/* Agent Name */
.c-agent__name {
  font-family: var(--font-pacifico);
  font-size: var(--text-xl);
  color: var(--color-midnight);
  transition: color var(--transition-fast);
}

.c-agent__trigger:hover .c-agent__name {
  color: var(--_agent-accent-dark);
}

/* Content Panel */
.c-agent__content {
  width: 100%;
  overflow: hidden;
  transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
  max-height: 0;
  opacity: 0;
}

.c-agent__content[hidden] {
  display: block;
  visibility: hidden;
}

.c-agent__content.is-open {
  max-height: 500px;
  opacity: 1;
  visibility: visible;
}

.c-agent__panel {
  background-color: var(--color-sand);
  border: 3px solid var(--_agent-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-block-start: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Agent Info */
.c-agent__info {
  text-align: center;
}

.c-agent__label {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--_agent-accent-dark);
  margin-block-end: var(--space-3xs);
}

.c-agent__value {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-driftwood);
  line-height: var(--leading-normal);
}

/* Agent Details */
.c-agent__details {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.c-agent__detail {
  background-color: var(--color-cream);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--_agent-accent);
  text-align: left;
}

.c-agent__detail-label {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  color: var(--_agent-accent-dark);
}

.c-agent__detail-value {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-driftwood);
}

/* Agent Actions */
.c-agent__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding-block-start: var(--space-xs);
  border-top: 1px dashed var(--_agent-accent);
  margin-block-start: var(--space-xs);
}

.c-agent__cta {
  font-family: var(--font-pacifico);
  font-size: var(--text-lg);
  color: var(--_agent-accent-dark);
  text-decoration: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.c-agent__cta:hover {
  color: var(--color-midnight);
  transform: scale(1.05);
}

.c-agent__socials {
  display: flex;
  gap: var(--space-sm);
}

.c-agent__social {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--_agent-accent);
  color: var(--color-coconut);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.c-agent__social:hover {
  background-color: var(--color-midnight);
  transform: scale(1.1);
}

/* Active State */
.c-agent.is-active .c-agent__trigger .c-frame {
  transform: scale(0.95);
}

/* ==========================================================================
   TEAM CARD COMPONENT
   ========================================================================== */
.c-team-card {
  --_card-accent: var(--color-mango);
  --_card-accent-dark: var(--color-mango-dark);
  
  display: flex;
  flex-direction: column;
  background: var(--color-coconut);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  max-width: 360px;
  margin-inline: auto;
}

.c-team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Photo Section */
.c-team-card__photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.c-team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.c-team-card:hover .c-team-card__photo img {
  transform: scale(1.03);
}

/* Placeholder image */
.c-team-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-3xl);
  color: var(--color-coconut);
}

/* Name Banner — The sparkle zone! */
.c-team-card__banner {
  position: relative;
  background: var(--_card-accent);
  padding: var(--space-xs) var(--space-md);
  text-align: center;
  overflow: visible;
}

.c-team-card__name {
  font-family: var(--font-pacifico);
  font-size: var(--text-2xl);
  color: var(--color-coconut);
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.1;
  text-shadow: 1px 1px 2px rgb(0 0 0 / 0.15);
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Sparkle decorations */
.c-team-card__sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.c-team-card__sparkles .c-sparkle {
  position: absolute;
  --_sparkle-color: var(--color-coconut);
  opacity: 0.9;
  animation: sparkle-pulse 2s ease-in-out infinite;
}

/* Positioned sparkles - left side */
.c-team-card__sparkles .c-sparkle:nth-child(1) {
  top: 50%;
  left: var(--space-sm);
  transform: translateY(-50%);
  --_sparkle-size: 1.25rem;
  animation-delay: 0s;
}

.c-team-card__sparkles .c-sparkle:nth-child(2) {
  top: 15%;
  left: calc(var(--space-sm) + 1.25rem);
  --_sparkle-size: 0.625rem;
  animation-delay: 0.3s;
  animation-name: sparkle-pulse-static;
}

.c-team-card__sparkles .c-sparkle:nth-child(3) {
  bottom: 10%;
  left: calc(var(--space-sm) + 1rem);
  --_sparkle-size: 0.75rem;
  animation-delay: 0.6s;
  animation-name: sparkle-pulse-static;
}

/* Positioned sparkles - right side */
.c-team-card__sparkles .c-sparkle:nth-child(4) {
  top: 50%;
  right: var(--space-sm);
  transform: translateY(-50%);
  --_sparkle-size: 1.25rem;
  animation-delay: 0.15s;
}

.c-team-card__sparkles .c-sparkle:nth-child(5) {
  top: 15%;
  right: calc(var(--space-sm) + 1.25rem);
  --_sparkle-size: 0.625rem;
  animation-delay: 0.45s;
  animation-name: sparkle-pulse-static;
}

.c-team-card__sparkles .c-sparkle:nth-child(6) {
  bottom: 10%;
  right: calc(var(--space-sm) + 1rem);
  --_sparkle-size: 0.75rem;
  animation-delay: 0.75s;
  animation-name: sparkle-pulse-static;
}

/* Animation for centered sparkles (1 & 4) */
@keyframes sparkle-pulse {
  0%, 100% { opacity: 0.6; transform: translateY(-50%) scale(1); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.15); }
}

/* Animation for non-centered sparkles (2, 3, 5, 6) */
@keyframes sparkle-pulse-static {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Variant: no animation */
.c-team-card--static .c-sparkle {
  animation: none;
  opacity: 0.85;
}

/* Content Section */
.c-team-card__content {
  padding: var(--space-sm) var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.c-team-card__specialty {
  background: var(--color-sand);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--_card-accent);
}

.c-team-card__label {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-style: italic;
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--_card-accent-dark);
  margin-block-end: var(--space-3xs);
}

.c-team-card__value {
  font-size: var(--text-xs);
  color: var(--color-driftwood);
  line-height: var(--leading-normal);
}

/* Stacked details */
.c-team-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.c-team-card__detail {
  background: var(--color-sand);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--_card-accent);
}

.c-team-card__detail-label {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-style: italic;
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--_card-accent-dark);
  margin-block-end: var(--space-3xs);
}

.c-team-card__detail-value {
  font-size: var(--text-xs);
  color: var(--color-driftwood);
  line-height: var(--leading-normal);
}

/* Footer / CTA */
.c-team-card__footer {
  position: relative;
  background: var(--_card-accent);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.c-team-card__cta {
  font-family: var(--font-pacifico);
  font-size: var(--text-lg);
  letter-spacing: normal;
  line-height: 1.1;
  color: var(--color-coconut);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: transform var(--transition-fast);
}

.c-team-card__cta:hover {
  transform: scale(1.05);
}

.c-team-card__socials {
  display: flex;
  gap: var(--space-sm);
}

.c-team-card__social {
  color: var(--color-coconut);
  font-size: var(--text-lg);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  opacity: 0.9;
}

.c-team-card__social:hover {
  transform: scale(1.15);
  opacity: 1;
}

/* Footer sparkles */
.c-team-card__footer .c-sparkle {
  --_sparkle-color: var(--color-coconut);
  --_sparkle-size: 0.75rem;
  opacity: 0.7;
}

.c-team-card__footer .c-sparkle:first-child {
  margin-right: auto;
}

.c-team-card__footer .c-sparkle:last-child {
  margin-left: auto;
}

/* Team Card Color Variants */
.c-team-card--coral {
  --_card-accent: var(--color-coral);
  --_card-accent-dark: var(--color-coral-dark);
}

.c-team-card--mango {
  --_card-accent: var(--color-mango);
  --_card-accent-dark: var(--color-mango-dark);
}

.c-team-card--pink {
  --_card-accent: var(--color-pink);
  --_card-accent-dark: var(--color-pink-dark);
}

.c-team-card--purple {
  --_card-accent: var(--color-purple);
  --_card-accent-dark: var(--color-purple-dark);
}

.c-team-card--teal {
  --_card-accent: var(--color-teal);
  --_card-accent-dark: var(--color-teal-dark);
}

.c-team-card--ocean {
  --_card-accent: var(--color-ocean);
  --_card-accent-dark: var(--color-ocean-dark);
}

/* ==========================================================================
   SVG FRAME COMPONENT
   Clean, mathematically-precise decorative borders
   ========================================================================== */
.c-frame {
  --_frame-size: 10rem;
  --_frame-color: var(--color-coconut);
  --_image-inset: 22%; /* Increased to show more decorative border */
  
  position: relative;
  width: var(--_frame-size);
  height: var(--_frame-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.15));
}

.c-frame__border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* White sticker backing - same container, path is generated larger */
.c-frame__backing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.c-frame__backing path {
  fill: var(--color-coconut);
}

.c-frame__border path,
.c-frame__border circle {
  fill: var(--_frame-color);
}

.c-frame__image {
  position: relative;
  width: calc(100% - var(--_image-inset) * 2);
  height: calc(100% - var(--_image-inset) * 2);
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
}

.c-frame__image img,
.c-frame__image > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Size variants */
.c-frame--sm { --_frame-size: 6rem; --_image-inset: 20%; }
.c-frame--md { --_frame-size: 10rem; --_image-inset: 22%; }
.c-frame--lg { --_frame-size: 14rem; --_image-inset: 22%; }
.c-frame--xl { --_frame-size: 18rem; --_image-inset: 24%; }

/* Color variants */
.c-frame--coral { --_frame-color: var(--color-coral); }
.c-frame--mango { --_frame-color: var(--color-mango); }
.c-frame--pink { --_frame-color: var(--color-pink); }
.c-frame--purple { --_frame-color: var(--color-purple); }
.c-frame--teal { --_frame-color: var(--color-teal); }
.c-frame--ocean { --_frame-color: var(--color-ocean); }
.c-frame--lime { --_frame-color: var(--color-lime); }

/* ==========================================================================
   ANIMATIONS - The Disney Magic! ✨
   ========================================================================== */

/* Gentle float/bob - like floating in water */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.c-frame--float {
  animation: float 3s ease-in-out infinite;
}

.c-frame--float-slow {
  animation: float 5s ease-in-out infinite;
}

.c-frame--float-fast {
  animation: float 2s ease-in-out infinite;
}

/* Slow spin - lazy susan vibes */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.c-frame--spin {
  animation: spin 20s linear infinite;
}

.c-frame--spin-slow {
  animation: spin 35s linear infinite;
}

.c-frame--spin-reverse {
  animation: spin 25s linear infinite reverse;
}

/* Rock/tip side to side - like a metronome */
@keyframes rock {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

.c-frame--rock {
  animation: rock 2.5s ease-in-out infinite;
}

.c-frame--rock-slow {
  animation: rock 4s ease-in-out infinite;
}

/* Pulse/breathe - gentle scale */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.c-frame--pulse {
  animation: pulse 3s ease-in-out infinite;
}

/* Wiggle - excited jitter */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
}

.c-frame--wiggle {
  animation: wiggle 0.5s ease-in-out infinite;
}

.c-frame--wiggle-slow {
  animation: wiggle 1.5s ease-in-out infinite;
}

/* Bounce - playful hop */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-5px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-3px); }
}

.c-frame--bounce {
  animation: bounce 2s ease-in-out infinite;
}

/* Float + Rock combo */
@keyframes float-rock {
  0% { transform: translateY(0) rotate(-2deg); }
  25% { transform: translateY(-6px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
  75% { transform: translateY(-4px) rotate(0deg); }
  100% { transform: translateY(0) rotate(-2deg); }
}

.c-frame--float-rock {
  animation: float-rock 4s ease-in-out infinite;
}

/* Twinkle - opacity shimmer */
@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.c-frame--twinkle {
  animation: twinkle 2s ease-in-out infinite;
}

/* Pop in on hover */
.c-frame--hover-pop {
  transition: transform 0.3s ease;
}

.c-frame--hover-pop:hover {
  transform: scale(1.1);
  animation: none; /* Pause any running animation on hover */
}

/* Lift on hover */
.c-frame--hover-lift {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.c-frame--hover-lift:hover {
  transform: translateY(-10px);
  filter: drop-shadow(0 12px 20px rgb(0 0 0 / 0.25));
}

/* Spin burst on hover */
.c-frame--hover-spin {
  transition: transform 0.5s ease;
}

.c-frame--hover-spin:hover {
  transform: rotate(15deg) scale(1.05);
}

/* Wiggle on hover */
.c-frame--hover-wiggle:hover {
  animation: wiggle 0.3s ease-in-out 3;
}

/* Animation delay utilities */
.c-frame--delay-1 { animation-delay: 0.2s; }
.c-frame--delay-2 { animation-delay: 0.4s; }
.c-frame--delay-3 { animation-delay: 0.6s; }
.c-frame--delay-4 { animation-delay: 0.8s; }
.c-frame--delay-5 { animation-delay: 1s; }

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .c-frame--float,
  .c-frame--float-slow,
  .c-frame--float-fast,
  .c-frame--spin,
  .c-frame--spin-slow,
  .c-frame--spin-reverse,
  .c-frame--rock,
  .c-frame--rock-slow,
  .c-frame--pulse,
  .c-frame--wiggle,
  .c-frame--wiggle-slow,
  .c-frame--bounce,
  .c-frame--float-rock,
  .c-frame--twinkle {
    animation: none;
  }
  
  .c-frame--hover-pop:hover,
  .c-frame--hover-lift:hover,
  .c-frame--hover-spin:hover {
    transform: none;
  }
}

/* ==========================================================================
   MAIN CONTENT & PLACEHOLDER
   ========================================================================== */
.main-content {
  min-height: 50vh;
}

.placeholder-section {
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  background: var(--color-sand);
}

.placeholder-section h2 {
  font-family: var(--font-gravitas);
  font-size: var(--text-2xl);
  color: var(--color-purple);
  margin-bottom: var(--space-sm);
}

.placeholder-section p {
  max-width: 60ch;
  margin-inline: auto;
  color: var(--color-driftwood-light);
}

/* ==========================================================================
   SITE FOOTER — Mega Footer Layout (Option B)
   ========================================================================== */
.site-footer {
  background-color: var(--color-midnight);
  color: var(--color-cream);
  position: relative;
}

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  width: 3rem;
  height: 3rem;
  background-color: var(--color-mango);
  color: var(--color-coconut);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  box-shadow: var(--shadow-lg);
  transition: background-color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.back-to-top:hover {
  background-color: var(--color-coral);
  transform: scale(1.1);
}

.back-to-top:focus-visible {
  outline: 3px solid var(--color-mango);
  outline-offset: 2px;
}

/* ==========================================================================
   FOOTER BRAND TIER (Top)
   ========================================================================== */
.footer__brand-tier {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--space-xl) var(--space-lg);
}

/* Background video — fills only this band (tier clips it via overflow:hidden) */
.footer__brand-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim keeps the white logo, tagline and icons readable over the video */
.footer__brand-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgb(30 30 46 / 0.82) 0%,
    rgb(30 30 46 / 0.72) 50%,
    rgb(30 30 46 / 0.85) 100%
  );
}

.footer__brand-container {
  position: relative;
  max-width: 80rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}

.footer__logo {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1;
  align-items: center;
}

.footer__logo-text {
  font-family: var(--font-gravitas);
  font-size: var(--text-2xl);
  color: var(--color-coconut);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.footer__logo-accent {
  font-family: var(--font-pacifico);
  font-size: var(--text-lg);
  color: var(--color-mango);
}

.footer__tagline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-cream);
  opacity: 0.8;
  line-height: var(--leading-normal);
  max-width: 40ch;
}

.footer__social {
  display: flex;
  gap: var(--space-sm);
}

.footer__social-link {
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cream);
  font-size: var(--text-lg);
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.footer__social-link:hover {
  background-color: var(--color-mango);
  color: var(--color-coconut);
  transform: translateY(-3px);
}

/* ==========================================================================
   FOOTER LINKS TIER (Middle)
   ========================================================================== */
.footer__links-tier {
  padding: var(--space-xl) var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__links-container {
  max-width: 80rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 640px) {
  .footer__links-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer__links-container {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

/* Mega Destinations Column */
.footer__mega-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .footer__mega-column {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .footer__mega-column {
    grid-column: span 1;
  }
}

.footer__destinations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 480px) {
  .footer__destinations-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.footer__sub-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer__subheading {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  color: var(--color-mango);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-block-end: var(--space-2xs);
}

/* Regular Columns */
.footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer__heading {
  font-family: var(--font-gravitas);
  font-size: var(--text-base);
  color: var(--color-coconut);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-block-end: var(--space-xs);
}

.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer__links li {
  margin-block-end: 0;
}

.footer__links a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-cream);
  opacity: 0.7;
  text-decoration: none;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.footer__links a:hover {
  opacity: 1;
  color: var(--color-mango);
}

/* Contact Column */
.footer__contact {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer__contact li {
  margin-block-end: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-cream);
  opacity: 0.8;
}

.footer__contact i {
  width: 1rem;
  color: var(--color-mango);
  flex-shrink: 0;
  margin-top: 0.15em;
}

.footer__contact a {
  color: var(--color-cream);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__contact a:hover {
  color: var(--color-mango);
}

/* ==========================================================================
   FOOTER TRUST TIER
   ========================================================================== */
.footer__trust-tier {
  background-color: rgba(0, 0, 0, 0.2);
  padding: var(--space-lg) var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__trust-container {
  max-width: 80rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 768px) {
  .footer__trust-container {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer__trust-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
}

@media (min-width: 768px) {
  .footer__trust-group {
    align-items: flex-start;
    text-align: left;
  }
}

.footer__trust-label {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  color: var(--color-cream);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  opacity: 0.6;
}

.footer__trust-items {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
}

@media (min-width: 768px) {
  .footer__trust-items {
    justify-content: flex-start;
  }
}

.footer__trust-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-cream);
  opacity: 0.8;
  background-color: rgba(255, 255, 255, 0.05);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.footer__trust-badge i {
  color: var(--color-teal);
}

/* Payment Icons */
.footer__payment-icons {
  font-size: var(--text-2xl);
  color: var(--color-cream);
  opacity: 0.7;
}

.footer__payment-icons i {
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.footer__payment-icons i:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* ==========================================================================
   FOOTER BOTTOM
   ========================================================================== */
.footer__bottom {
  padding: var(--space-md) var(--space-lg);
}

.footer__bottom-container {
  max-width: 80rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .footer__bottom-container {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer__copyright {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-cream);
  opacity: 0.5;
}

.footer__legal {
  display: flex;
  gap: var(--space-md);
  list-style: none;
}

.footer__legal li {
  margin-block-end: 0;
}

.footer__legal a {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-cream);
  opacity: 0.5;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.footer__legal a:hover {
  opacity: 1;
}

.footer__credit {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-cream);
  opacity: 0.5;
}

.footer__credit a {
  color: var(--color-mango);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.footer__credit a:hover {
  opacity: 0.8;
}

/* ==========================================================================
   FAQ SECTION — Accordion Style
   ========================================================================== */
.faq-section {
  background-color: var(--color-sand);
  padding: var(--space-2xl) var(--space-lg);
}

.faq-section__header {
  text-align: center;
  margin-block-end: var(--space-xl);
}

.faq-section__eyebrow {
  font-family: var(--font-pacifico);
  font-size: var(--text-lg);
  color: var(--color-purple);
  margin-block-end: var(--space-xs);
}

.faq-section__title {
  font-family: var(--font-gravitas);
  font-size: var(--text-3xl);
  color: var(--color-midnight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-title);
}

.faq-section__accordion {
  max-width: 50rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* FAQ Item */
.faq-item {
  --_faq-accent: var(--color-purple);
  
  background-color: var(--color-coconut);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  border-left: 4px solid var(--_faq-accent);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.faq-item:hover {
  box-shadow: var(--shadow-lg);
  transform: translateX(4px);
}

/* Color variants for visual interest */
.faq-item:nth-child(1) { --_faq-accent: var(--color-coral); }
.faq-item:nth-child(2) { --_faq-accent: var(--color-teal); }
.faq-item:nth-child(3) { --_faq-accent: var(--color-pink); }
.faq-item:nth-child(4) { --_faq-accent: var(--color-mango); }
.faq-item:nth-child(5) { --_faq-accent: var(--color-purple); }
.faq-item:nth-child(6) { --_faq-accent: var(--color-ocean); }
.faq-item:nth-child(7) { --_faq-accent: var(--color-coral); }
.faq-item:nth-child(8) { --_faq-accent: var(--color-teal); }

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-midnight);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__question:hover {
  background-color: var(--color-cream);
}

.faq-item__icon {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--_faq-accent);
  color: var(--color-coconut);
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.faq-item__icon i {
  font-size: 0.75rem;
  line-height: 1;
}

.faq-item[open] .faq-item__icon {
  transform: rotate(45deg);
  background-color: var(--color-midnight);
}

.faq-item[open] .faq-item__question {
  background-color: var(--_faq-accent);
  color: var(--color-coconut);
}

.faq-item[open] .faq-item__question .faq-item__icon {
  background-color: var(--color-coconut);
  color: var(--_faq-accent);
}

.faq-item__answer {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  background-color: var(--color-cream);
  border-top: 2px dashed var(--_faq-accent);
}

.faq-item__answer p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-driftwood);
  line-height: var(--leading-normal);
}

/* ==========================================================================
   TESTIMONIALS SECTION — Customer Reviews
   ========================================================================== */
.testimonials-section {
  background-color: var(--color-purple);
  padding: var(--space-2xl) var(--space-lg);
}

.testimonials-section__header {
  text-align: center;
  margin-block-end: var(--space-xl);
}

.testimonials-section__eyebrow {
  font-family: var(--font-pacifico);
  font-size: var(--text-lg);
  color: var(--color-mango);
  margin-block-end: var(--space-xs);
}

.testimonials-section__title {
  font-family: var(--font-gravitas);
  font-size: var(--text-3xl);
  color: var(--color-coconut);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-title);
}

.testimonials-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: 70rem;
  margin-inline: auto;
}

/* Tablet up — three across (3 cards fill the row, no orphan) */
@media (min-width: 768px) {
  .testimonials-section__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Testimonial Card */
.testimonial-card {
  --_card-accent: var(--color-mango);
  
  background-color: var(--color-coconut);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.testimonial-card__stars {
  display: flex;
  gap: var(--space-2xs);
  color: var(--color-mango);
  font-size: var(--text-base);
}

.testimonial-card__quote {
  flex: 1;
}

.testimonial-card__quote p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--color-driftwood);
  line-height: var(--leading-normal);
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block-start: var(--space-sm);
  border-block-start: 2px solid var(--_card-accent);
}

.testimonial-card__avatar {
  width: 3rem;
  height: 3rem;
  background-color: var(--_card-accent);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-coconut);
  font-size: var(--text-lg);
}

.testimonial-card__info {
  display: flex;
  flex-direction: column;
}

.testimonial-card__name {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  font-style: normal;
  color: var(--color-midnight);
}

.testimonial-card__location {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-driftwood-light);
}

/* Testimonial Card Color Variants */
.testimonial-card--pink {
  --_card-accent: var(--color-pink);
}

.testimonial-card--teal {
  --_card-accent: var(--color-teal);
}

.testimonial-card--mango {
  --_card-accent: var(--color-mango);
}

.testimonial-card--coral {
  --_card-accent: var(--color-coral);
}

.testimonial-card--purple {
  --_card-accent: var(--color-purple);
}

/* ==========================================================================
   CONTACT SECTION — Get in Touch (Video Background)
   ========================================================================== */
.contact-section {
  position: relative;
  padding: var(--space-2xl) var(--space-lg);
  overflow: hidden;
}

/* Video Background */
.contact-section__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Overlay for readability */
.contact-section__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(91, 192, 222, 0.85) 0%,
    rgba(0, 201, 201, 0.8) 100%
  );
  z-index: 1;
}

.contact-section__container {
  position: relative;
  z-index: 2;
  max-width: 70rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .contact-section__container {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Contact Info Side */
.contact-section__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-section__eyebrow {
  font-family: var(--font-pacifico);
  font-size: var(--text-lg);
  color: var(--color-midnight);
}

.contact-section__title {
  font-family: var(--font-gravitas);
  font-size: var(--text-3xl);
  color: var(--color-coconut);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-title);
}

.contact-section__description {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-midnight);
  line-height: var(--leading-normal);
  max-width: 45ch;
}

.contact-section__details {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-midnight);
}

.contact-detail i {
  width: 1.5rem;
  color: var(--color-coconut);
}

.contact-detail a {
  color: var(--color-midnight);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-detail a:hover {
  color: var(--color-coconut);
}

.contact-section__social {
  display: flex;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
}

.contact-social-link {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-coconut);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ocean);
  font-size: var(--text-lg);
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.contact-social-link:hover {
  background-color: var(--color-midnight);
  color: var(--color-coconut);
  transform: translateY(-3px);
}

/* Contact Form */
.contact-section__form-wrapper {
  background-color: var(--color-coconut);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-lg);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

@media (min-width: 480px) {
  .contact-form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.contact-form__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-midnight);
}

.contact-form__label .optional {
  font-weight: var(--weight-regular);
  color: var(--color-driftwood-light);
}

.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-midnight);
  background-color: var(--color-cream);
  border: 2px solid var(--color-sand);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  border-color: var(--color-ocean);
  box-shadow: 0 0 0 3px rgb(91 192 222 / 0.3);
}

.contact-form__select {
  cursor: pointer;
}

.contact-form__textarea {
  resize: vertical;
  min-height: 5rem;
}

.contact-form__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-gravitas);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-coconut);
  background-color: var(--color-ocean);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  align-self: center;
  margin-block-start: var(--space-xs);
}

.contact-form__button:hover {
  background-color: var(--color-teal);
  transform: translateY(-2px);
}

.contact-form__button:focus-visible {
  outline: 3px solid var(--color-mango);
  outline-offset: 2px;
}

.contact-form__button:active {
  transform: translateY(0);
}

/* ==========================================================================
   FORM VALIDATION STATES
   ========================================================================== */

/* Error state for inputs */
.newsletter-form__input.is-error,
.contact-form__input.is-error,
.contact-form__select.is-error,
.contact-form__textarea.is-error {
  border-color: var(--color-coral);
  box-shadow: 0 0 0 3px rgb(255 107 74 / 0.3);
}

/* Error message */
.form-error {
  display: block;
  margin-block-start: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-coral);
}

/* Success state for buttons */
.newsletter-form__button.is-success,
.contact-form__button.is-success {
  background-color: var(--color-teal);
}

/* Success message */
.form-success {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  margin-block-end: var(--space-md);
  background-color: var(--color-teal-light);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-teal);
  animation: fadeSlideIn 0.3s ease-out;
}

.form-success i {
  color: var(--color-teal-dark);
  font-size: var(--text-xl);
  flex-shrink: 0;
}

.form-success p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-midnight);
  line-height: var(--leading-normal);
}

.form-success.is-hiding {
  animation: fadeSlideOut 0.3s ease-out forwards;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Spinner animation */
@keyframes fa-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.fa-spin {
  animation: fa-spin 1s linear infinite;
}

/* ==========================================================================
   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;
  }
}

/* ==========================================================================
   BODY SCROLL LOCK (when menu is open)
   ========================================================================== */
body.menu-open {
  overflow: hidden;
}

/* ==========================================================================
   PAGE HEADER — Interior Pages
   ========================================================================== */
.page-header {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-header__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30, 30, 46, 0.75) 0%, rgba(136, 0, 136, 0.6) 100%);
}

.page-header__content {
  position: relative;
  z-index: 2;
  padding: var(--space-2xl) var(--space-lg);
  max-width: 50rem;
}

.page-header__eyebrow {
  font-family: var(--font-pacifico);
  font-size: var(--text-lg);
  color: var(--color-mango);
  margin-block-end: var(--space-xs);
}

.page-header__title {
  font-family: var(--font-gravitas);
  font-size: var(--text-4xl);
  color: var(--color-coconut);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-title);
  margin-block-end: var(--space-sm);
}

.page-header__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-cream);
  opacity: 0.9;
}

/* ==========================================================================
   DESTINATIONS GALLERY
   ========================================================================== */
.destinations-gallery {
  background-color: var(--color-cream);
  padding: var(--space-2xl) var(--space-lg);
}

.destinations-gallery__container {
  max-width: 80rem;
  margin-inline: auto;
}

.destinations-gallery__group {
  margin-block-end: var(--space-2xl);
}

.destinations-gallery__group:last-child {
  margin-block-end: 0;
}

.destinations-gallery__group-title {
  font-family: var(--font-gravitas);
  font-size: var(--text-2xl);
  color: var(--color-midnight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-align: center;
  margin-block-end: var(--space-lg);
  padding-block-end: var(--space-sm);
  border-bottom: 3px solid var(--color-mango);
  display: inline-block;
  width: 100%;
}

.destinations-gallery__grid {
  display: grid;
  grid-template-columns: 1fr; /* xs/sm mobile — single column */
  gap: var(--space-lg);
}

/* Large mobile / tablet — 2×2 (four cards never orphan) */
@media (min-width: 640px) {
  .destinations-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop — single row of four */
@media (min-width: 1024px) {
  .destinations-gallery__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Destination Card */
.destination-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-coconut);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.destination-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.destination-card__image {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.destination-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.destination-card:hover .destination-card__image img {
  transform: scale(1.03);
}

.destination-card__category {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-coconut);
  background-color: var(--color-purple);
  border-radius: var(--radius-sm);
}

.destination-card__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--space-md);
}

.destination-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.15;
  color: var(--color-midnight);
  margin-block-end: var(--space-2xs);
}

.destination-card__subtitle {
  font-family: var(--font-pacifico);
  font-size: var(--text-base);
  color: var(--color-purple);
  margin-block-end: var(--space-sm);
}

.destination-card__description {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-driftwood);
  line-height: var(--leading-normal);
}

.destination-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-coral);
  text-decoration: none;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.destination-card__cta:hover {
  color: var(--color-mango);
  gap: var(--space-sm);
}

/* ==========================================================================
   ABOUT PAGE SECTIONS
   ========================================================================== */
.about-intro {
  background-color: var(--color-coconut);
  padding: var(--space-2xl) var(--space-lg);
}

.about-intro__container {
  max-width: 70rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .about-intro__container {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}

.about-intro__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.about-intro__eyebrow {
  font-family: var(--font-pacifico);
  font-size: var(--text-lg);
  color: var(--color-purple);
}

.about-intro__title {
  font-family: var(--font-gravitas);
  font-size: var(--text-3xl);
  color: var(--color-midnight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-title);
}

.about-intro__text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-driftwood);
  line-height: var(--leading-normal);
}

.about-intro__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  align-items: stretch;
}

.about-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 8.5rem;
  padding: var(--space-md);
  background-color: var(--color-cream);
  border-radius: var(--radius-md);
  text-align: center;
  border-left: 4px solid var(--color-mango);
  box-shadow: 0 2px 6px -2px rgb(30 30 46 / 0.18);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-left-color var(--transition-fast);
}

.about-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px -6px rgb(30 30 46 / 0.28);
  border-left-color: var(--color-coral);
}

.about-stat__number {
  display: block;
  font-family: var(--font-gravitas);
  font-size: var(--text-3xl);
  color: var(--color-coral);
  line-height: 1;
}

.about-stat__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-driftwood);
}

/* About Values */
.about-values {
  background-color: var(--color-sand);
  padding: var(--space-2xl) var(--space-lg);
}

.about-values__container {
  max-width: 70rem;
  margin-inline: auto;
}

.about-values__header {
  text-align: center;
  margin-block-end: var(--space-xl);
}

.about-values__eyebrow {
  font-family: var(--font-pacifico);
  font-size: var(--text-lg);
  color: var(--color-purple);
  margin-block-end: var(--space-xs);
}

.about-values__title {
  font-family: var(--font-gravitas);
  font-size: var(--text-3xl);
  color: var(--color-midnight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-title);
}

.about-values__grid {
  display: grid;
  grid-template-columns: 1fr; /* xs/sm mobile — single column */
  gap: var(--space-lg);
}

/* Large mobile / tablet — 2×2 */
@media (min-width: 640px) {
  .about-values__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop — single row of four */
@media (min-width: 1024px) {
  .about-values__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.about-value {
  background-color: var(--color-coconut);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.about-value__icon {
  width: 4rem;
  height: 4rem;
  margin-inline: auto;
  margin-block-end: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-purple);
  color: var(--color-coconut);
  border-radius: var(--radius-full);
  font-size: var(--text-xl);
}

.about-value__title {
  font-family: var(--font-gravitas);
  font-size: var(--text-base);
  color: var(--color-midnight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-block-end: var(--space-sm);
}

.about-value__text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-driftwood);
  line-height: var(--leading-normal);
}

/* ==========================================================================
   FAQ PAGE SECTIONS
   ========================================================================== */
.faq-section--page {
  background-color: var(--color-coconut);
  padding: var(--space-2xl) var(--space-lg);
}

.faq-section--page .faq-section__accordion {
  max-width: 50rem;
  margin-inline: auto;
}

.faq-help {
  background-color: var(--color-cream);
  padding: var(--space-2xl) var(--space-lg);
}

.faq-help__container {
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
}

.faq-help__title {
  font-family: var(--font-gravitas);
  font-size: var(--text-2xl);
  color: var(--color-midnight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-block-end: var(--space-sm);
}

.faq-help__text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-driftwood);
  margin-block-end: var(--space-xl);
}

.faq-help__options {
  display: grid;
  grid-template-columns: 1fr; /* mobile — stacked */
  gap: var(--space-lg);
}

/* Tablet up — three across (fills the row cleanly) */
@media (min-width: 640px) {
  .faq-help__options {
    grid-template-columns: repeat(3, 1fr);
  }
}

.faq-help__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--color-coconut);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

a.faq-help__option:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.faq-help__option i {
  font-size: var(--text-2xl);
  color: var(--color-purple);
}

.faq-help__option-title {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  color: var(--color-midnight);
}

.faq-help__option-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-driftwood);
}

/* ==========================================================================
   CONTACT PAGE SECTIONS
   ========================================================================== */
.contact-section--page {
  background-color: var(--color-ocean);
  padding: var(--space-2xl) var(--space-lg);
}

/* FAQ Section "View All" Link */
.faq-section__more {
  text-align: center;
  margin-block-start: var(--space-lg);
}

/* CTA Button Style */
.cta-section__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-gravitas);
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-midnight);
  background-color: var(--color-mango);
  border: none;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.cta-section__button:hover {
  background-color: var(--color-coral);
  color: var(--color-coconut);
  transform: translateY(-2px);
}

/* ==========================================================================
   RESPONSIVE: Large Desktop (1280px+)
   Refines spacing and container widths on wide viewports so content
   uses the extra horizontal space without stretching to unreadable widths.
   ========================================================================== */
@media (min-width: 1280px) {
  /* Let the widest content bands breathe on large monitors */
  .destinations-section__tags,
  .footer__links-container,
  .destinations-gallery__container {
    max-width: 88rem;
  }

  /* Give the tag wall a touch more breathing room */
  .destinations-section__tags {
    gap: var(--space-lg);
  }
}

/* ==========================================================================
   RESPONSIVE: Extra-Large Desktop (1440px+)
   ========================================================================== */
@media (min-width: 1440px) {
  /* Cap hero height so it isn't excessively tall on large displays,
     while still filling most of the viewport */
  .hero-carousel {
    height: min(100dvh, 60rem);
  }

  /* Widen primary content containers a final step */
  .destinations-section__tags,
  .footer__links-container,
  .destinations-gallery__container,
  .team-section__row {
    max-width: 96rem;
  }

  /* Slightly larger testimonial/gallery gaps for a more spacious feel */
  .testimonials-section__grid,
  .destinations-gallery__grid {
    gap: var(--space-xl);
  }
}

/* ==========================================================================
   FINESSE LAYER — Visual polish pass
   Typography flow, hero voice, wave seams, scroll reveals.
   ========================================================================== */

/* ---------- Typography flow ---------- */
h1, h2, h3, h4,
.c-tag__title,
.destination-card__title {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* ---------- Hero: content overlay ---------- */
.hero-carousel__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgb(30 30 46 / 0.15) 0%,
    rgb(30 30 46 / 0.05) 35%,
    rgb(30 30 46 / 0.55) 100%
  );
  pointer-events: none;
}

.hero-carousel__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-lg);
}

.hero-panel {
  max-width: 40rem;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-xl);
  background-color: rgb(30 30 46 / 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgb(255 255 255 / 0.18);
  box-shadow: var(--shadow-xl);
}

.hero-panel__eyebrow {
  font-family: var(--font-pacifico);
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  color: var(--color-mango);
  margin-block-end: var(--space-2xs);
}

.hero-panel__title {
  font-family: var(--font-gravitas);
  font-size: clamp(1.875rem, 6vw, 3.75rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-coconut);
  margin-block-end: var(--space-sm);
}

/* Gradient key-word utility — guarded so engines without background-clip:text
   keep solid, visible text instead of transparent (invisible) text. */
.u-gradient-text {
  color: inherit;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .u-gradient-text {
    background: linear-gradient(100deg, var(--color-coral) 0%, var(--color-mango) 45%, var(--color-pink) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.hero-panel__subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: var(--color-cream);
  margin-block-end: var(--space-sm);
}

.hero-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-gravitas);
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-midnight);
  background-color: var(--color-mango);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-lg);
}

.hero-panel__cta:hover,
.hero-panel__cta:focus-visible {
  background-color: var(--color-coral);
  color: var(--color-coconut);
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
}

.hero-panel__hashtag {
  font-family: var(--font-pacifico);
  font-size: var(--text-sm);
  color: var(--color-teal-light);
  margin-block-start: var(--space-sm);
}

/* Hero entrance — gentle staggered rise */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-panel > * {
  animation: hero-rise 0.8s var(--ease-out) both;
}

.hero-panel > *:nth-child(2) { animation-delay: 0.12s; }
.hero-panel > *:nth-child(3) { animation-delay: 0.24s; }
.hero-panel > *:nth-child(4) { animation-delay: 0.36s; }
.hero-panel > *:nth-child(5) { animation-delay: 0.48s; }

/* Slightly more horizontal breathing room from tablet up (vertical stays tight) */
@media (min-width: 640px) {
  .hero-panel {
    padding: var(--space-lg) var(--space-2xl);
  }
}

/* ---------- Wave seam divider ---------- */
/* Seam mode: sits between two solid-color sections.
   color = the section ABOVE's background (fills the wave crest);
   background = the section BELOW's background (fills under the curve). */
.c-wave {
  display: block;
  line-height: 0;
}

.c-wave svg {
  display: block;
  width: 100%;
  height: clamp(2rem, 6vw, 4rem);
}

/* FROM colors (wave crest = section above) */
.c-wave--from-sand    { color: var(--color-sand); }
.c-wave--from-lime    { color: var(--color-lime); }
.c-wave--from-purple  { color: var(--color-purple); }

/* TO colors (background = section below) */
.c-wave--to-lime      { background-color: var(--color-lime); }
.c-wave--to-purple    { background-color: var(--color-purple); }

/* Overlay mode: absolute at the bottom of an image banner (page headers).
   color = the FOLLOWING section's background; no background of its own. */
.c-wave--overlay {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  z-index: 2;
  background: transparent;
}

.c-wave--overlay.c-wave--to-cream   { color: var(--color-cream); }
.c-wave--overlay.c-wave--to-coconut { color: var(--color-coconut); }
.c-wave--overlay.c-wave--to-ocean   { color: var(--color-ocean); }

/* ---------- Scroll reveal (JS-gated, progressive enhancement) ---------- */
/* Uses the independent `translate` property (not `transform`) so reveals
   compose with component transforms — e.g. the luggage tags' scattered
   rotate() tilt — instead of overriding them. JS removes these classes
   after the reveal completes, returning elements to their pristine state. */
html.js .reveal {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity 0.7s var(--ease-out),
    translate 0.7s var(--ease-out);
}

html.js .reveal.is-revealed {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* ---------- Interior page cohesion ---------- */
/* Page headers speak the hero's language: glass panel + staggered rise */
.page-header__content {
  border-radius: var(--radius-xl);
  background-color: rgb(30 30 46 / 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgb(255 255 255 / 0.18);
  box-shadow: var(--shadow-xl);
  margin-inline: var(--space-md);
}

.page-header__content > * {
  animation: hero-rise 0.8s var(--ease-out) both;
}

.page-header__content > *:nth-child(2) { animation-delay: 0.12s; }
.page-header__content > *:nth-child(3) { animation-delay: 0.24s; }

/* Wave seam modifiers for interior pages */
.c-wave--from-cream  { color: var(--color-cream); }
.c-wave--to-midnight { background-color: var(--color-midnight); }

/* CTA pill shape unified with the hero CTA */
.cta-section__button {
  border-radius: var(--radius-pill);
}

/* ---------- Cross-engine fallbacks ---------- */
/* Engines without backdrop-filter (older Firefox and others) get a more
   opaque panel so text stays readable without the blur behind it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-panel,
  .page-header__content {
    background-color: rgb(30 30 46 / 0.72);
  }
}

/* ---------- Rendering performance ---------- */
/* Below-the-fold sections skip layout/paint until scrolled near.
   Unsupported browsers ignore this entirely — pure progressive win.
   contain-intrinsic-size reserves estimated space to keep the
   scrollbar stable before render. */
.team-section,
.faq-section,
.testimonials-section,
.destinations-gallery,
.about-values,
.faq-help {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}