/* ═══════════════════════════════════════════════════════════════
   THE TRAVEL SQUAD: SITE-WIDE STYLESHEET
   Loaded by every page. Core pages use all of it; trip pages use the
   tokens, the navbar and the footer, and add snow-squad.css on top.
   Navy #0F1A24  |  Teal #11A68D  |  Sand #D4C5B0  |  White #FFFFFF
   Fonts: Barlow Condensed (headings) · Inter (body)
═══════════════════════════════════════════════════════════════ */

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

:root {
  --navy:      #0F1A24;
  --navy-mid:  #162130;
  --navy-panel:#162433;
  --teal:      #11A68D;
  --teal-hover: #13B89B;
  --sand:      #D4C5B0;
  --white:     #FFFFFF;
  /* Booking-state colours. Semantic, not decorative. See .trip-status-badge */
  --status-available: #11A68D;
  --status-soldout:   #D02525;
  --status-soon:      #7C3AED;
  --status-drop:      #D4C5B0;
  --font-head: 'Barlow Condensed', sans-serif;
  --font-body: 'Inter', sans-serif;
  --nav-h:     90px;
  /* The layout column. Every page's content sits inside a .container, which
     is --container wide including a --gutter each side. See .container. */
  --container: 1200px;
  --gutter:    24px;
}

html { scroll-behavior: smooth; }

/* The hidden attribute always wins. Without this, any component that sets its
   own display (the countdown, flex rows) stays visible when JS hides it. */
[hidden] { display: none !important; }

/* Screen-reader-only text. Present for crawlers and assistive tech,
   invisible on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Visible keyboard focus. Applies site-wide. Do not remove. */
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Calm decorative CSS animations for the OS "reduce motion" setting.
   Deliberately limited: it must not touch transitions, because Swiper moves
   the sliders with one, and video playback ignores this setting entirely.
   Every clip autoplays on every machine. See playAutoplayVideos in main.js. */
/* @media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
} */

body {
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }

/* ── THE LAYOUT RULE ──────────────────────────────────────────────
   Every page, Core and trip alike, is built the same way:

     <section class="...">          full width: background, borders and
       <div class="container">      vertical spacing only, never side padding
         ...content...              the column: same width on every page

   Only two kinds of thing may leave the column, and both are explicit:
     - hero media (a full-bleed photo or video at the top of a page)
     - sliders (.slider, see SLIDERS below), which bleed to the screen
       edges while their first slide still lines up with the column.
   Narrower reading widths (a 640px block of centred copy) sit INSIDE the
   container as a max-width on the inner element. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 2px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.btn-teal            { background: var(--teal);  color: var(--navy);  border-color: var(--teal); }
.btn-teal:hover      { background: var(--teal-hover); border-color: var(--teal-hover); }
.btn-outline-light   { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); }
.btn-outline-light:hover { background: rgba(255,255,255,0.1); border-color: var(--white); }
.btn-sm { padding: 10px 20px; font-size: 14px; }

/* ── SECTION TYPOGRAPHY ──────────────────────────────────────── */
.section-heading {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(36px, 5.5vw, 60px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy);
}
.section-heading--light { color: var(--white); }
.section-sub {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(15,26,36,0.65);
  margin-top: 10px;
}
.section-sub--light { color: var(--sand); }
.section-header { margin-bottom: 48px; }


/* ══════════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--navy);
  transition: box-shadow 0.25s;
}
.navbar.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.45); }

/* One geometry for every page, Core and trip alike: same width, same height,
   logo top left, links centred, button pushed to the right. The links sit
   in the middle of the bar (margin: 0 auto on .nav-links), so the logo and
   button frame them symmetrically. Page level settings (includes/config.php,
   HEADER_DEFAULTS) can change what the header says, never where things sit. */
.nav-inner {
  display: flex;
  align-items: center;
  height: var(--nav-h);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  gap: 32px;
}

.nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
/* Logo sits inside the 90px bar with breathing room top and bottom. */
.nav-logo-img {
  height: 72px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  margin: 0 auto;
}
.nav-links a,
.nav-dropdown-toggle {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  transition: color 0.2s;
}
.nav-links a:hover,
.nav-dropdown-toggle:hover { color: var(--white); }

.nav-book-btn {
  flex-shrink: 0;
  background: var(--teal);
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  transition: background 0.2s;
}
.nav-book-btn:hover { background: var(--teal-hover); }

/* Hamburger. The only navigation control at phone width, so it gets the
   full 44x44px touch target; the bars inside stay 22px wide. The negative
   right margin keeps the bars where they were against the page edge. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  padding: 0;
  margin-left: auto;
  margin-right: -11px;
  position: relative;
  z-index: 300;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ── Nav dropdown ────────────────────────────────────────────── */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
  display: flex !important;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}
.nav-dropdown-arrow {
  font-size: 9px;
  opacity: 0.65;
  transition: transform 0.2s;
  line-height: 1;
}
.nav-dropdown:hover .nav-dropdown-arrow,
.nav-dropdown.open .nav-dropdown-arrow { transform: rotate(180deg); }

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy-mid);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 6px 0;
  min-width: 220px;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.55);
  z-index: 300;
}
@media (min-width: 769px) {
  .nav-dropdown:hover .nav-dropdown-menu { display: flex; }
}
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-dropdown-menu li { list-style: none; }
.nav-dropdown-menu a {
  display: block;
  padding: 11px 18px;
  font-size: 14px !important;
  font-weight: 500;
  color: rgba(255,255,255,0.75) !important;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.2s, background 0.2s;
}
.nav-dropdown-menu li:last-child a { border-bottom: none; }
.nav-dropdown-menu a:hover {
  color: var(--white) !important;
  background: rgba(255,255,255,0.05);
}

@media (max-width: 768px) {
  .nav-dropdown-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: rgba(255,255,255,0.03);
    padding: 0;
    min-width: 0;
    display: none;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: flex; }
  /* The Trips row matches the How It Works and Contact rows under it. */
  .nav-links .nav-dropdown-toggle {
    width: 100%;
    padding: 15px 0;
    font-size: 16px;
  }
  .nav-dropdown-menu a {
    padding: 13px 0 13px 20px !important;
    font-size: 15px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   TRIPS PAGE - 2027 SECTION
══════════════════════════════════════════════════════════════ */
.trips-notify-section {
  background: var(--navy);
  border-top: 2px solid var(--teal);
  padding: 80px 0;
  text-align: center;
}
.trips-notify-inner {
  max-width: 600px;
  margin: 0 auto;
}
.trips-notify-heading {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(32px, 5.5vw, 56px);
  color: var(--white);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.trips-notify-sub {
  font-size: 17px;
  color: var(--sand);
  line-height: 1.6;
  margin-bottom: 28px;
}


.trips-2027-section {
  background: var(--navy-mid);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 88px 0;
  text-align: center;
}
.trips-2027-inner {
  max-width: 640px;
  margin: 0 auto;
}
.trips-2027-heading {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(40px, 7vw, 80px);
  color: var(--white);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 32px;
}


/* ══════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════ */
@keyframes fadeOutDelayed {
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--navy);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.50);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  transform: translateY(-10%);
}
.hero-logo {
  width: 750px;
  max-width: 85vw;
  height: auto;
  display: block;
  animation: fadeOutDelayed 9s ease forwards;
}
.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Buttons under a text block rather than over a hero image, as on 404. */
.hero-buttons--spaced { margin-top: 36px; }
.btn-primary {
  padding: 14px 32px;
  border-radius: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 1px;
  background: var(--teal);
  color: var(--navy);
  border: 2px solid var(--teal);
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.btn-outline {
  padding: 14px 32px;
  border-radius: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 1px;
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════
   STATS BAR
══════════════════════════════════════════════════════════════ */
.stats-bar {
  background: var(--sand);
  padding: 20px 0;
  text-align: center;
}
.stats-bar p {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(15px, 2.2vw, 20px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
}


/* ══════════════════════════════════════════════════════════════
   STORY SECTION
══════════════════════════════════════════════════════════════ */
.story-section {
  background: var(--navy);
}

.story-container {
  padding-top: 110px;
  padding-bottom: 110px;
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 80px;
  align-items: center;
}


.story-heading {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 28px;
}

.story-body p {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.72);
  max-width: 520px;
}
.story-body p + p {
  margin-top: 16px;
}

.story-embed-col {
  display: flex;
  justify-content: center;
}

/* Holds a 9:16 portrait Vimeo player at its own shape at any width. */
.vimeo-ratio {
  position: relative;
  aspect-ratio: 9 / 16;
}
.vimeo-ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vimeo-wrap {
  width: 100%;
  max-width: 290px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}


/* ══════════════════════════════════════════════════════════════
   LEGENDARY PAST TRIPS
══════════════════════════════════════════════════════════════ */
.past-trips-section {
  background: var(--sand);
  padding: 100px 0 80px;
}
.past-trips-section .section-heading { color: var(--navy); }
.past-trips-section .section-sub     { color: var(--navy); }

.past-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 4px;
  overflow: hidden;
  cursor: default;
}

/* ── Card media area ── */
.card-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--navy);
}
/* Landscape cards */
.card-media--landscape { aspect-ratio: 16 / 9; }

.card-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s;
  z-index: 2;
}
.card-video-wrap {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s;
  z-index: 1;
  background: #000;
}
.hover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Card info box ── */
.card-info {
  padding: 16px 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.15;
}
.card-tagline {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(15,26,36,0.62);
}

.past-trips-cta {
  margin-top: 40px;
  text-align: center;
}


/* ══════════════════════════════════════════════════════════════
   PHOTO GALLERY
══════════════════════════════════════════════════════════════ */
.gallery-section {
  background: var(--navy);
  padding: 80px 0 72px;
}
.gallery-header {
  text-align: center;
  margin-bottom: 40px;
}
.gallery-heading {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(28px, 4.5vw, 52px);
  color: var(--white);
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin-bottom: 12px;
}
.gallery-sub {
  font-size: 16px;
  color: var(--sand);
  line-height: 1.6;
}

/* A landscape tile whose subject sits low in the frame. */
.gallery-img--bottom { object-position: center bottom; }

.gallery-img {
  width: 300px;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  display: block;
  pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════
   LIVE BOOKABLE TRIPS  (navy background)
══════════════════════════════════════════════════════════════ */
.live-trips-section {
  background: var(--navy);
  padding: 100px 0;
}

/* 2 × 2 card grid */
.live-trips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 36px;
}

.trip-card {
  background: var(--navy-mid);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
}
.trip-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.trip-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
}

.trip-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.trip-status-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--white);
  background: var(--status-available);
  z-index: 2;
}
/* Booking state. The colour carries meaning, so always use a modifier
   rather than an inline background. */
.trip-status-badge--available { background: var(--status-available); color: var(--navy); }
.trip-status-badge--sold-out  { background: var(--status-soldout); }
.trip-status-badge--soon      { background: var(--status-soon); }
.trip-status-badge--drop      { background: var(--status-drop); color: var(--navy); }
.trip-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.4s;
}
.trip-card:hover .trip-card-image img { transform: scale(1.04); }

/* Vietnam motorbike road: pull focus to center-lower portion */
.trip-card-image--vietnam img { object-position: center 60%; }

.trip-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.trip-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.05;
}
.trip-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--sand);
  flex: 1;
}
.trip-buttons {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.trip-buttons--center { justify-content: center; }

/* Deposit note, sits below the grid */
.deposit-note {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--sand);
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.deposit-note strong { color: var(--white); font-weight: 800; }


/* ══════════════════════════════════════════════════════════════
   NOTIFICATION HUB
══════════════════════════════════════════════════════════════ */
.notify-section {
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 96px 0;
}
.notify-inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

/* Eyebrow */
.notify-eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(14px, 2vw, 17px);
  letter-spacing: 0.1em;
  color: var(--teal);
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* Countdown */
.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  margin-bottom: 28px;
}
.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
}
.countdown-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(48px, 9vw, 86px);
  line-height: 1;
  color: var(--white);
  letter-spacing: -0.02em;
}
.countdown-label {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--sand);
  margin-top: 6px;
  text-transform: uppercase;
}
.countdown-sep {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(40px, 7vw, 72px);
  color: rgba(255,255,255,0.3);
  line-height: 1;
  padding-top: 4px;
  user-select: none;
}

/* Subtext */
.notify-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 32px;
  line-height: 1.6;
}

/* Main toggle button */
.btn-notify-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal);
  color: var(--navy);
  border: none;
  border-radius: 4px;
  padding: 16px 32px;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn-notify-toggle:hover  { background: var(--teal-hover); }
.btn-notify-toggle:active { transform: scale(0.98); }

/* Panel */
.notify-panel {
  display: none;
  background: var(--navy-panel);
  border-radius: 8px;
  margin-top: 16px;
  padding: 28px 32px;
  text-align: left;
}
.notify-panel.open { display: block; }

.notify-email-mobile { display: none; }

.notify-panel-headline {
  font-weight: 700;
  color: var(--white);
  font-size: 15px;
  margin-bottom: 24px;
  text-align: center;
}

/* Each option row */
.notify-option {
  padding: 18px 0;
}
.notify-option-label {
  color: var(--white);
  font-size: 15px;
  margin-bottom: 8px;
}
.notify-option-body {
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.notify-option-action {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
/* Two links, one above the other. */
.notify-option-action--stack {
  flex-direction: column;
  align-items: flex-start;
}
.btn-add {
  padding: 10px 20px;
  background: var(--teal);
  color: var(--navy);
  border: none;
  border-radius: 4px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
  text-decoration: none;
  display: inline-block;
}
.btn-add:hover { background: var(--teal-hover); }
.btn-add--link { align-self: flex-start; }
/* The mobile stand-in for the email iframe: a full-width tappable row. */
.btn-add--block {
  display: block;
  text-align: center;
  padding: 14px;
  margin-bottom: 16px;
}

/* The Brevo signup form. It sets no height of its own, so it needs one. */
.notify-email-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 750px;
  border: none;
}

.notify-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
}

/* Footnote */
.notify-footnote {
  margin-top: 28px;
  font-size: 13px;
  color: var(--sand);
  line-height: 1.6;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .notify-section { padding: 64px 0; }
  .countdown-unit { min-width: 56px; }
  .notify-panel   {
    padding: 20px 18px;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .notify-email-desktop { display: none; }
  .notify-email-mobile { display: block; }
  .notify-option-action { flex-direction: column; align-items: stretch; }
  .btn-add--link  { text-align: center; }
}
@media (max-width: 480px) {
  .countdown { gap: 2px; }
  .countdown-unit { min-width: 44px; }
  .countdown-sep  { font-size: 32px; }
}


/* ══════════════════════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════════════════════ */
.testimonials-section {
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 96px 0;
}
.testimonials-header {
  text-align: center;
  margin-bottom: 56px;
}
.testimonials-heading {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(32px, 5vw, 56px);
  color: var(--white);
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin-bottom: 14px;
}
.testimonials-sub {
  font-size: 17px;
  color: var(--sand);
  line-height: 1.6;
}

/* Single portrait video, centered */
.testimonials-videos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

/* Each video wrapper */
.testimonial-video { flex: 1; }
.testimonial-video--portrait { flex: 0 0 auto; width: 320px; }

/* Ratio containers */
.video-ratio {
  position: relative;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}

.video-ratio--portrait {
  padding-top: 177.78%; /* 9:16 aspect ratio */
  height: 0;
}

.video-ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-ratio--portrait iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Mobile: stack portrait above landscape */
@media (max-width: 768px) {
  .testimonials-section { padding: 64px 0; }
  .testimonials-videos {
    flex-direction: column;
    gap: 24px;
  }
  .testimonial-video,
  .testimonial-video--portrait {
    width: 100%;
    flex: none;
  }
  /* Portrait first on mobile: already in DOM order */
}


/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
.footer {
  background: var(--navy);
  padding: 60px 0 30px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  flex-wrap: wrap;
}
.footer-logo {
  width: 120px;
  height: auto;
}
.footer-links {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-col h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sand);
  margin: 0 0 4px 0;
}
.footer-col a {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col a:hover {
  color: var(--teal);
}
.footer-bottom {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-bottom p {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE: TABLET  (≤ 1024px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .story-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .story-body p  { max-width: 100%; }
  .story-embed-col { justify-content: flex-start; }

  /* footer-top no longer used */
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE: MOBILE  (≤ 768px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Nav */
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    z-index: 199;
    background: var(--navy);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s;
    padding: 0 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .nav-links.open     { max-height: 480px; }
  .nav-links li       { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .nav-links a        { display: block; padding: 15px 0; font-size: 16px; }
  .nav-toggle         { display: flex; }
  .nav-book-btn       { display: none; }

  /* Hero */
  .hero {
    height: 75vw;
    min-height: unset;
    align-items: center;
  }
  .hero-video {
    height: 75vw;
    object-fit: cover;
  }
  .hero-content img {
    display: none !important;
  }
  .stats-bar {
    display: none !important;
  }
  .hero-buttons {
    display: none;
  }

  /* Live trips: single column */
  .live-trips-grid { grid-template-columns: 1fr; }
  .bl-trips-grid { grid-template-columns: 1fr !important; }

  /* WhatsApp CTA button: contain within viewport */
  .bl-whatsapp-section .btn { width: 100%; }

  /* Any button may wrap on a phone rather than run past the column. A long
     label ("Notify Me When the Next Trip Drops", "Join the TTS Bucketlist
     chat to grab tickets") otherwise spills out of both sides. This one
     rule replaces three per-page patches that did the same. */
  .btn { white-space: normal; text-align: center; }

  /* Trip buttons: stack */
  .trip-buttons { flex-direction: column; }
  .trip-buttons .btn { width: 100%; justify-content: center; }

  /* Story */
  .story-container  { padding-top: 72px; padding-bottom: 72px; }
  .story-embed-col  { justify-content: center; }
  .vimeo-wrap       { max-width: 260px; }

  /* Footer */
  .footer-inner {
    flex-direction: column;
    gap: 40px;
  }
  .footer-links {
    flex-direction: column;
    gap: 32px;
  }
  .footer {
    padding: 40px 0 24px;
  }
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE: SMALL  (≤ 480px)
══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   RESPONSIVE: SHORT SCREENS (max-height)
══════════════════════════════════════════════════════════════ */
@media (max-height: 700px) {
  .hero-logo {
    width: 500px;
    max-width: 75vw;
  }
  .hero-content {
    gap: 1rem;
  }
  .btn-primary, .btn-outline {
    padding: 10px 24px;
    font-size: 1rem;
  }
}

@media (max-height: 550px) {
  .hero-logo {
    width: 380px;
    max-width: 65vw;
  }
  .hero-content {
    gap: 0.75rem;
  }
}


/* ══════════════════════════════════════════════════════════════
   BUCKETLIST TEASER BANNER
══════════════════════════════════════════════════════════════ */
.bucketlist-teaser {
  background: var(--navy);
  border-top: 2px solid var(--teal);
  padding: 72px 0;
}
/* Used together with .container, which gives it the column. */
.bucketlist-teaser-inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 64px;
  align-items: center;
}
.bucketlist-teaser-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.bucketlist-teaser-heading {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 48px);
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 14px;
}
.bucketlist-teaser-sub {
  font-size: 17px;
  color: var(--sand);
  line-height: 1.6;
  margin-bottom: 28px;
}
.bucketlist-teaser-card { width: 100%; min-width: 0; }
@media (max-width: 900px) {
  .bucketlist-teaser-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .bucketlist-teaser-text { align-items: center; text-align: center; }
  .bucketlist-teaser-card { max-width: 420px; margin: 0 auto; }
  .bucketlist-teaser .btn { width: 100%; justify-content: center; }
  .bl-trips-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ══════════════════════════════════════════════════════════════
   LEGAL PAGES
══════════════════════════════════════════════════════════════ */
.page-legal {
  background: var(--navy);
  color: var(--white);
}
.legal-page {
  padding: calc(var(--nav-h) + 60px) 0 100px;
}
.legal-page h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 8px;
  line-height: 1;
}
.legal-page h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin: 40px 0 12px;
  line-height: 1.1;
}
.legal-page h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 22px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin: 28px 0 10px;
  line-height: 1.2;
}
.legal-page p {
  color: var(--sand);
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 16px;
}
.legal-page ul,
.legal-page ol {
  padding-left: 24px;
  margin-bottom: 16px;
}
.legal-page li {
  color: var(--sand);
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 8px;
  list-style: disc;
}
.last-updated {
  color: var(--sand);
  font-size: 13px;
  margin-bottom: 32px;
  opacity: 0.75;
}
.legal-page a {
  color: var(--teal);
}
.legal-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
}
.legal-page th,
.legal-page td {
  text-align: left;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 14px;
  line-height: 1.6;
}
.legal-page th {
  background: rgba(255,255,255,0.07);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white);
}
.legal-page td {
  color: var(--sand);
}

/* ══════════════════════════════════════════════════════════════
   BUCKETLIST PAGE
══════════════════════════════════════════════════════════════ */
.bl-hero {
  background: var(--navy);
  padding: calc(var(--nav-h) + 72px) 0 80px;
  text-align: center;
}
.bl-hero-eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}
/* The larger eyebrow on the Bucketlist and Adventures heroes. Must follow
   the base rule above, which sets the same properties. */
.bl-hero-eyebrow--large {
  font-size: 1.5rem;
  font-weight: 800;
}
.bl-hero-heading {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 32px;
}
.bl-hero-desc {
  font-size: 17px;
  line-height: 1.85;
  color: rgba(255,255,255,0.72);
  max-width: 740px;
  margin: 0 auto;
}
.bl-hero-desc p + p { margin-top: 18px; }

.bl-trips-section {
  background: var(--navy);
  padding: 80px 0 100px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.bl-trips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}


.trip-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.trip-features li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--sand);
}
.trip-features li::before {
  content: "- ";
}

.bl-whatsapp-section {
  background: var(--navy-mid);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 80px 0;
  text-align: center;
}
.bl-whatsapp-inner {
  max-width: 600px;
  margin: 0 auto;
}
.bl-whatsapp-heading {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(22px, 3.5vw, 34px);
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 14px;
}
.bl-whatsapp-sub {
  font-size: 16px;
  color: var(--sand);
  line-height: 1.7;
  margin-bottom: 28px;
}


/* ══════════════════════════════════════════════════════════════
   SHARED-COMPONENT ADDITIONS (PHP build)
══════════════════════════════════════════════════════════════ */

/* Skip link. First focusable element on every page, visible only on focus. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 300;
  padding: 12px 20px;
  background: var(--teal);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  border-radius: 3px;
  transition: top 0.15s;
}
.skip-link:focus { top: 8px; }

/* Trip-page navbar skin. The trip pages previously used a sticky, translucent
   `.topbar`; their content sits directly under it with no offset. Keeping the
   nav sticky rather than fixed preserves that layout while the markup, the
   logo and the menu are now shared with the rest of the site. */
/* Colour and position only. Width and height come from the shared .nav-inner,
   so the logo and links do not shift between a Core page and a trip page.
   The hairline under the bar is an inset shadow rather than a border, which
   would add a pixel to the bar's height. */
.navbar--trip {
  position: sticky;
  background: rgba(15, 26, 36, 0.92);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 -1px 0 rgba(212, 197, 176, 0.12);
}
.navbar--trip.scrolled {
  box-shadow: inset 0 -1px 0 rgba(212, 197, 176, 0.12), 0 2px 24px rgba(0,0,0,0.45);
}

@media (max-width: 768px) {
  /* The mobile menu is positioned against a fixed bar, so anchor it to the
     sticky bar's own height instead. */
  .navbar--trip .nav-links { position: absolute; top: 100%; }
}

/* The Trips dropdown is a control, not a destination, so it is a <button>.
   Strip the UA button styling so it still reads as a nav link. */
.nav-dropdown-toggle {
  background: none;
  border: 0;
  padding: 0;
  /* Family only. The `font` shorthand would also reset the 15px size set in
     the NAVBAR section, and Trips would render larger than its neighbours. */
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* ══════════════════════════════════════════════════════════════
   SLIDERS
   One component for everything on the site that swipes. Built on Swiper
   (assets/vendor/swiper, loaded only on pages that have a slider) and
   driven by assets/js/sliders.js. Markup comes from slider_start() and
   slider_end() in includes/config.php, never by hand.

   Presets, chosen with data-slider:
     gallery  free-scrolling photos at their own widths (hub galleries,
              boat photos)
     marquee  a gallery that drifts on its own (homepage photos)
     cards    one card at a time on a phone, four across on a desktop
              (past trips)
     videos   portrait clips, three across on a desktop (hub carousels)
     strip    a slider on a phone, a centred wrapping grid from 768px
              (trip page photo and TikTok strips)

   Sliders are the sanctioned exception to THE LAYOUT RULE: they bleed to
   both screen edges, while the first slide lines up with the column.
   --vw is the viewport width without the scrollbar, set by sliders.js;
   1vw is the no-JS fallback.
══════════════════════════════════════════════════════════════ */
.slider {
  --bleed: max(var(--gutter), calc(50 * var(--vw, 1vw) - var(--container) / 2 + var(--gutter)));
  position: relative;
  margin-inline: calc(50% - 50 * var(--vw, 1vw));
}
.slider .swiper {
  padding-inline: var(--bleed);
}

/* Before Swiper starts, or without JS at all, the slides still scroll. */
.slider .swiper:not(.swiper-initialized) {
  overflow-x: auto;
  scrollbar-width: none;
}
.slider .swiper:not(.swiper-initialized) .swiper-wrapper { gap: 12px; }

/* Galleries and the marquee go edge to edge, no column alignment. */
.slider--gallery .swiper,
.slider--marquee .swiper {
  padding-inline: 0;
}

/* Slides that size to their own content. */
.slider--gallery .swiper-slide,
.slider--marquee .swiper-slide,
.slider--strip .swiper-slide {
  width: auto;
}

/* Cards stretch to the tallest card in view. */
.slider--cards .swiper-slide {
  height: auto;
  display: flex;
}
.slider--cards .swiper-slide > * { width: 100%; }

/* A marquee glides at a constant speed rather than easing in and out. */
.slider--marquee {
  --swiper-wrapper-transition-timing-function: linear;
}

/* The strip is only a slider on a phone. From 768px it is a centred,
   wrapping grid inside the column, and sliders.js takes Swiper away. */
@media (min-width: 768px) {
  .slider--strip {
    margin-inline: 0;
  }
  .slider--strip .swiper {
    padding-inline: 0;
    overflow: visible;
  }
  .slider--strip .swiper-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   PODCAST CLIPS
   The clips from includes/podcasts.php. That include is the slider only:
   each page wraps it in its own section and writes its own heading, so
   there is no band or heading style here, just the clip itself.

   The clips carry sound and are tap to play. Nothing here starts them.
══════════════════════════════════════════════════════════════ */

/* The clips are landscape. object-fit: contain rather than cover, so a clip
   that is not exactly 16:9 is letterboxed instead of having a face cropped.

   height: auto is load bearing. The markup carries width="960" height="540"
   so the browser reserves the right box before a clip loads, and preload is
   "none", so that wait is the normal case. Those attributes also set a used
   height, and aspect-ratio is ignored unless the height is auto: without
   this line every clip renders 540px tall. */
.podcast-clip {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 6px;
  background: var(--navy);
}

/* On the homepage the clips sit inside Testimonials, under the clip already
   there, so the gap between the two is set here. The Sail Squad hub needs no
   equivalent: snow-squad-hub.css already spaces every .slider--videos on a
   trip page, and the clips keep that rhythm with the hub's other carousels. */
.testimonials-section .slider--videos {
  margin-top: 32px;
}

@media (max-width: 768px) {
  .testimonials-section .slider--videos { margin-top: 24px; }
}

/* ── Print ──────────────────────────────────────────────────────
   The booking terms and the privacy policy are documents people print. */
@media print {
  .navbar,
  .site-header,
  .skip-link,
  .footer,
  .nav-toggle,
  video,
  iframe {
    display: none !important;
  }

  html, body, .legal-page {
    background: #fff !important;
    color: #000 !important;
  }

  .legal-page {
    max-width: none;
    padding: 0;
  }

  .legal-page h1, .legal-page h2, .legal-page h3 { color: #000 !important; }
  .legal-page a { color: #000 !important; text-decoration: underline; }

  /* Spell out link targets, which a printed page otherwise loses. */
  .legal-page a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.9em; }

  .legal-page table { border-collapse: collapse; }
  .legal-page th, .legal-page td { border: 1px solid #666 !important; color: #000 !important; }
  .legal-page h2, .legal-page h3 { break-after: avoid; }
  .legal-page table, .legal-page tr { break-inside: avoid; }
}

/* Wide tables must scroll inside their own box rather than pushing the page
   sideways on a phone. Focusable, since the scroll is keyboard-operable. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 24px 0;
}
.table-scroll table { margin: 0; }
.table-scroll:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }