:root {
  --navy-900: #0a1d3a;
  --navy-800: #0f2447;
  --navy-700: #14305a;
  --gold-500: #c9a961;
  --gold-400: #d4b872;
  --gold-300: #e2c98a;
  --text-light: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.85);
  /* Subtle off-white used to alternate sections for visual rhythm. */
  --section-alt: #f6f8fb;
}

* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  background-color: var(--navy-900);
  color: var(--text-light);
  -webkit-font-smoothing: antialiased;
}

/* ====== HERO SECTION ====== */
.hero {
  position: relative;
  background: url('../img/hero-bg-desktop.webp') center/cover no-repeat;
  overflow: hidden;
}

/* ====== HERO VIDEO BACKGROUND ====== */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(7, 18, 41, 0.62);
  z-index: 1;
  pointer-events: none;
}

/* Lift hero content above the video + overlay */
.hero-content,
.hero-content--detail {
  position: relative;
  z-index: 2;
}

.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--gold-500) 50%,
      transparent 100%);
  opacity: 0.7;
  z-index: 5;
}

/* Reusable gold gradient divider between sections — solid metallic bar
   using the brand gold ramp (same colors as .btn-gold / .corporate-cta)
   oriented vertically for a metallic-shine effect across the strip. */
.gold-divider {
  border: none;
  height: 5px;
  background: linear-gradient(to bottom,
      #a88437 0%,
      #c9a961 20%,
      #e5cc7f 42%,
      #f0dc96 52%,
      #d4b872 68%,
      #b2913f 85%,
      #8a6d2c 100%);
  opacity: 1;
  margin: 0;
  display: block;
}

/* ====== NAVBAR (BRAND-LEFT, LINKS-CENTER, CTA-RIGHT) ====== */
.top-nav {
  /* 3-column grid: auto-sized brand on the left, flexible
     center track that holds the nav links, auto-sized call
     button on the right. Horizontal padding scales with width
     so smaller monitors (1366px, 1440px) keep usable space for
     all three columns. */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 22px clamp(20px, 8vw, 310px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.top-nav.scrolled {
  background-color: rgba(10, 29, 58, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  padding: 14px clamp(20px, 8vw, 310px);
}

/* Center nav: holds all the link items, evenly spaced and
   horizontally centered within the flexible middle track. */
.center-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}

.nav-link-custom {
  color: var(--text-light);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.3px;
  margin: 0 22px;
  transition: color 0.25s ease;
  white-space: nowrap;
}

.nav-link-custom:hover {
  color: var(--gold-400);
}

/* Brand / Logo — sits in column 1, flush left. No outer margin
   so the logo aligns with the page padding. */
.brand {
  text-align: left;
  line-height: 1;
  margin: 0;
}

.brand-icon {
  display: inline-block;
  color: var(--gold-500);
  font-size: 22px;
  margin-bottom: 4px;
}

.brand-name {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--text-light);
  margin: 0;
}

.brand-tagline {
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--text-light);
  margin-top: 2px;
}

/* Responsive brand logo image */
.brand-logo {
  height: clamp(100px, 5.5vw, 54px);
  width: auto;
  display: block;
}

@media (max-width: 576px) {
  .brand-logo {
    height: 100px;
  }
}

/* Call Us button — sits in the right column of the .top-nav grid on
   desktop. On mobile, .top-nav becomes a wrapping flex container and
   the call-btn flows onto its own full-width row 2 below the brand
   (handled in the mobile media query below). */
.call-btn {
  margin-left: 12px;
  background: linear-gradient(135deg,
      #a88437 0%,
      #c9a961 20%,
      #e5cc7f 42%,
      #f0dc96 52%,
      #d4b872 68%,
      #b2913f 85%,
      #8a6d2c 100%);
  border: 1px solid #8a6d2c;
  border-radius: 3px;
  padding: 10px 20px;
  text-align: center;
  line-height: 1.1;
  color: #1a1a1a;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  min-width: max-content;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.25s ease;
}

.call-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201, 169, 97, 0.4);
  filter: brightness(1.08);
  color: #1a1a1a;
}

.call-btn-label {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 500;
  display: block;
  white-space: nowrap;
}

.call-btn-number {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  display: block;
  margin-top: 2px;
  white-space: nowrap;
}

/* ====== HERO CONTENT ======
   Paddings/margins use clamp(min, Xvh, max) so the layout scales fluidly with
   viewport height. On tall monitors the values hit the upper clamp (airy
   luxury feel); on short laptops they shrink toward the floor so trusted-by
   never gets clipped. */
.hero-content {
  padding: clamp(190px, 28vh, 320px) 20px clamp(20px, 3.5vh, 50px);
  text-align: center;
  display: flex;
  flex-direction: column;
}

.pill-badge {
  display: inline-block;
  align-self: center;
  padding: 8px 22px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 12px;
  letter-spacing: 4px;
  color: #fff;
  margin-bottom: clamp(16px, 3vh, 36px);
  border-radius: 2px;
}

.hero-title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.6vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0 auto clamp(16px, 2.6vh, 30px);
  max-width: 1000px;
  color: #fff;
}

/* Display headline above the hero-title — replaces the legacy pill badge
   as the page's H1. Cabinet Grotesk to match the rest of the site. */
.hero-headline {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 6.8vw, 84px);
  line-height: 1.05;
  letter-spacing: -1px;
  color: #fff;
  margin: 0 auto clamp(80px, 13vh, 150px);
  max-width: 1000px;
}

.hero-sub {
  font-size: clamp(14px, 1.5vh, 16px);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 760px;
  margin: 0 auto clamp(22px, 4.6vh, 48px);
  font-weight: 300;
}

/* "Simple & easy to book. No Mickey Mouse." line — sits between the H1
   and the primary CTA. Plain white on the left, gold accent on the right. */
.hero-tagline {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(16px, 2vh, 20px);
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.3px;
  margin: 0 auto clamp(4px, 0.8vh, 10px);
}

.hero-tagline__accent {
  color: var(--gold-500);
}

/* ====== CTA BUTTONS ====== */
.cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 6vh, 72px);
}

.btn-gold {
  background: linear-gradient(135deg,
      #a88437 0%,
      #c9a961 20%,
      #e5cc7f 42%,
      #f0dc96 52%,
      #d4b872 68%,
      #b2913f 85%,
      #8a6d2c 100%);
  color: #1a1a1a;
  padding: 16px 36px;
  border: none;
  border-radius: 2px;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
  box-shadow: 0 4px 15px rgba(201, 169, 97, 0.35);
  cursor: pointer;
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(201, 169, 97, 0.55);
  filter: brightness(1.08);
  color: #1a1a1a;
}

.btn-outline-light-custom {
  background: transparent;
  color: #fff;
  padding: 16px 36px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 2px;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-outline-light-custom:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}

/* ====== TRUSTED BY ====== */
.trusted-section {
  text-align: center;
  padding-bottom: 0;
}

.trusted-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: clamp(18px, 3.2vh, 36px);
}

.trusted-heading .line {
  width: 60px;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
}

.trusted-heading span {
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--text-light);
  font-weight: 500;
}

.logos-row {
  display: flex;
  gap: 60px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  opacity: 0.95;
}

.logo-item {
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.logo-item:hover {
  opacity: 0.75;
  transform: translateY(-2px);
}

/* Google review badge — its own row beneath the brand logos */
.google-review-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: clamp(12px, 2.4vh, 28px);
}

.google-review-row img {
  height: clamp(42px, 9vh, 100px);
  width: auto;
  max-width: 90%;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.google-review-row img:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

/* ====== HEIGHT-AWARE SAFETY OVERRIDES ======
   The fluid clamp() values above scale paddings and the Google badge by
   viewport height, but the hero-title font scales by viewport WIDTH (vw).
   On wide-but-short windows (1366x768 laptops, 1600x900, browsers with
   many toolbars), the title stays large and pushes trusted-by below the
   fold. These media queries cap the title and tighten paddings on short
   viewports so content always fits without clipping. */

@media (max-height: 820px) and (min-width: 769px) {
  .hero-content {
    padding: clamp(140px, 18vh, 170px) 20px clamp(18px, 2.5vh, 30px);
  }

  .hero-title {
    font-size: clamp(28px, 4vw, 52px);
  }

  .hero-headline {
    font-size: clamp(36px, 5.4vw, 64px);
  }

  .logo-item img {
    max-height: 30px;
  }
}

@media (max-height: 680px) and (min-width: 769px) {
  .hero-content {
    padding: 80px 20px 16px;
  }

  .hero-title {
    font-size: clamp(20px, 2.8vw, 30px);
  }

  .hero-headline {
    font-size: clamp(28px, 3.8vw, 44px);
  }

  .hero-sub {
    font-size: 13px;
  }

  .hero-tagline {
    font-size: 13px;
  }

  .pill-badge {
    font-size: 10px;
    padding: 5px 14px;
    letter-spacing: 2.5px;
  }

  .logo-item img {
    max-height: 28px;
  }

  .google-review-row img {
    height: clamp(36px, 6vh, 50px);
  }
}

.logo-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
}

.logo-pacers {
  background: #fdbb30;
  color: #002d62;
  border: 2px solid #002d62;
}

.logo-heat {
  background: #98002e;
  color: #f9a01b;
  padding: 6px 10px;
  font-size: 10px;
  border-radius: 3px;
  line-height: 1.1;
  text-align: center;
}

.logo-marlins {
  background: #00a3e0;
  color: #fff;
  padding: 6px 12px;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-style: italic;
  border-radius: 3px;
  font-size: 16px;
}

.logo-kick {
  color: #53fc18;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 1px;
}

.logo-rainbet {
  background: #111;
  color: #fff;
  padding: 6px 14px;
  border-radius: 4px;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
}

/* ====== Responsive ====== */

/* Squeeze nav padding and link spacing on mid-width screens
   (e.g., 1366×768 laptops) so brand + nav links + call button
   all fit in one row without the call button wrapping. */
@media (min-width: 992px) and (max-width: 1500px) {
  .top-nav,
  .top-nav.scrolled {
    padding-left: 32px;
    padding-right: 32px;
  }

  .nav-link-custom {
    margin: 0 14px;
    font-size: 13px;
  }
}

@media (max-width: 992px) {
  .top-nav {
    padding: 18px 20px;
  }

  .top-nav.scrolled {
    padding: 12px 20px;
  }

  .nav-link-custom {
    margin: 0 10px;
    font-size: 13px;
  }

  .center-nav {
    display: none !important;
  }

  .hero-content {
    padding: 140px 16px 60px;
  }

  .logos-row {
    gap: 30px;
  }
}

@media (max-width: 576px) {
  .call-btn {
    padding: 8px 14px;
  }

  .call-btn-number {
    font-size: 15px;
  }

  .cta-row {
    flex-direction: column;
    align-items: center;
  }

  .btn-gold,
  .btn-outline-light-custom {
    width: 90%;
    justify-content: center;
  }
}

/* Fade-in animation */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.9s ease forwards;
}

.delay-1 {
  animation-delay: 0.15s;
}

.delay-2 {
  animation-delay: 0.3s;
}

.delay-3 {
  animation-delay: 0.45s;
}

.delay-4 {
  animation-delay: 0.6s;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================================================
    SECTION: TRUST BANNER (navy continuation)
    ================================================== */
.trust-banner {
  background: #fff;
  padding: 60px 0 70px;
  position: relative;
}

.trust-heading {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.25;
  color: var(--navy-900);
  margin-bottom: 20px;
}

.text-gold {
  color: var(--gold-500);
}

.trust-copy {
  color: #4b5a70;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 300;
  max-width: 460px;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 440px;
}

.check-list li {
  display: flex;
  align-items: center;
  color: var(--navy-900);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 0;
}

.check-icon {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg,
      #a88437 0%,
      #c9a961 20%,
      #e5cc7f 42%,
      #f0dc96 52%,
      #d4b872 68%,
      #b2913f 85%,
      #8a6d2c 100%);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  font-size: 15px;
  font-weight: 900;
  margin-right: 14px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* ==================================================
    SECTION: WHY CHOOSE
    ================================================== */
.why-choose {
  background: #fff;
  color: #0a1d3a;
  padding: 90px 0 80px;
  position: relative;
  overflow: hidden;
}

.watermark-logo {
  position: absolute;
  right: -50px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.watermark-logo svg {
  width: 520px;
  height: 520px;
  color: var(--navy-900);
}

.why-choose .container {
  position: relative;
  z-index: 1;
}

/* ---- Image collage (single composite image) ---- */
.collage {
  max-width: 520px;
  margin: 0 auto;
}

.collage-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

/* ---- Why Choose copy ---- */
.small-label {
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--gold-500);
  font-weight: 600;
  margin-bottom: 16px;
}

.why-heading {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.15;
  color: var(--navy-900);
  margin-bottom: 22px;
}

.why-copy {
  color: #4b5a70;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  max-width: 460px;
  margin-bottom: 32px;
}

.btn-gold.inline-cta {
  padding: 16px 30px;
  font-size: 13px;
}

/* ==================================================
    SECTION: FEATURE CARDS (5 numbered)
    ================================================== */
.feature-cards {
  background: #fff;
  padding: 20px 0 100px;
  position: relative;
}

.feature-card {
  border: 1px solid #e6e8ec;
  padding: 30px 24px 32px;
  height: 100%;
  background: #fff;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  position: relative;
}

.feature-card:hover {
  border-color: var(--gold-500);
  box-shadow: 0 10px 30px rgba(10, 29, 58, 0.08);
  transform: translateY(-4px);
}

.feature-num {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 44px;
  font-weight: 400;
  color: var(--gold-500);
  line-height: 1;
  margin-bottom: 26px;
  letter-spacing: -1px;
}

.feature-card h3 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--navy-900);
  margin-bottom: 14px;
  line-height: 1.3;
}

.feature-card p {
  color: #5a6b80;
  font-size: 13.5px;
  line-height: 1.65;
  margin: 0;
}

/* ==================================================
    RESPONSIVE
    ================================================== */
@media (max-width: 992px) {
  .trust-banner {
    padding: 40px 0 50px;
  }

  .trust-copy {
    max-width: 100%;
  }

  .why-choose {
    padding: 60px 0 50px;
  }

  .watermark-logo svg {
    width: 320px;
    height: 320px;
  }

  .collage {
    margin-bottom: 40px;
  }
}

@media (max-width: 576px) {
  .feature-card {
    padding: 24px 20px 26px;
  }

  .feature-num {
    font-size: 36px;
    margin-bottom: 18px;
  }
}

/* ==================================================
    SECTION: BROWSE YACHTS
    ================================================== */
.browse-yachts {
  background: var(--section-alt);
  padding: 70px 0 90px;
  position: relative;
}

/* ==================================================
   BROWSE CHAUFFEURS — homepage transportation preview section.
   Sits directly below .browse-yachts (also light), so we add a
   subtle top divider to visually break the two adjacent sections.
   Reuses .browse-heading, .browse-copy, .view-all-wrap, .view-all
   classes from the yacht section for visual consistency.
   ================================================== */
.browse-chauffeurs {
  background: var(--section-alt);
  padding: 60px 0 90px;
  position: relative;
  border-top: 1px solid rgba(10, 29, 58, 0.08);
}

.browse-chauffeurs__header {
  margin-bottom: 36px;
  text-align: center;
}

/* Override .browse-copy's default left-aligned auto margin so its
   640px max-width sits centered within the section header. */
.browse-chauffeurs__header .browse-copy {
  margin-left: auto;
  margin-right: auto;
}

.browse-heading {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 700;
  color: var(--navy-900);
  margin-bottom: 18px;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.browse-copy {
  color: #4b5a70;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 300;
}

/* ---- Crypto badge (single image) ---- */
.crypto-badge-img {
  display: inline-block;
  max-width: 180px;
  height: auto;
  border-radius: 6px;
}

/* ---- Budget slider ---- */
.budget-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  margin: 30px 0 40px;
}

.budget-label {
  color: var(--navy-900);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  min-width: 90px;
}

.slider-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  position: relative;
}

/* ---- Layered slider ----
   Three stacked layers so they read cleanly:
     back   = horizontal track line  (.slider-wrap::before, z-index 1)
     middle = vertical tick lines    (.slider-ticks,        z-index 2)
     front  = the round thumb        (.range-slider/#budgetSlider, z-index 3)
   The native input's own track is made transparent; this pseudo draws the
   real horizontal line. Filled gold portion is driven by --fill (a % set by
   JS on the .slider-wrap); the remainder is grey. */
.slider-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 2px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(#e1e0db, #e1e0db) right / calc(100% - var(--fill, 0%)) 100% no-repeat,
    linear-gradient(to right,
      var(--navy-900) 0%,
      var(--gold-500) 100%) left / 100% 100% no-repeat;
}

/* ---- Slider tick labels (positioned by % under the slider) ---- */
.slider-ticks {
  position: relative;
  height: 16px;
  width: 100%;
  margin-top: 2px;
  z-index: 2;
}

.slider-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 2px 4px;
  background: transparent;
  border: 0;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: rgba(10, 29, 58, 0.45);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: color 0.15s ease, font-weight 0.15s ease;
  user-select: none;
}

/* Gold vertical line centered on the slider track above each tick label.
   Fixed size — no hover/active resize, so every line is uniform. */
.slider-tick::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -17px;
  width: 2px;
  height: 14px;
  background: var(--gold-500);
  border-radius: 1px;
  transform: translateX(-50%);
  pointer-events: none;
}

.slider-tick:hover {
  color: var(--gold-500);
}

.slider-tick.is-active {
  color: var(--navy-900);
  font-weight: 700;
}

@media (max-width: 768px) {
  /* Override the JS proportional positioning with flex even-spacing,
     so 1.5k/3k/5k don't bunch up at the low end. */
  .slider-ticks {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .slider-tick {
    position: relative;
    transform: none;
    left: auto !important;
    font-size: 12px;
    padding: 2px 2px;
  }

  /* Keep the gold line centered over each evenly-spaced label */
  .slider-tick::before {
    left: 50%;
  }
}

#budgetSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: transparent;
  outline: none;
  cursor: pointer;
  border-radius: 2px;
  /* Front layer: only the thumb shows; the track is drawn by
     .slider-wrap::before so the tick lines can sit between them. */
  position: relative;
  z-index: 3;
}

/* Keep the native tracks invisible in every browser so only the
   .slider-wrap::before back-track line shows. */
.range-slider::-webkit-slider-runnable-track,
#budgetSlider::-webkit-slider-runnable-track {
  background: transparent;
  border: none;
}
.range-slider::-moz-range-track,
#budgetSlider::-moz-range-track {
  background: transparent;
  border: none;
}

#budgetSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid var(--gold-500);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

#budgetSlider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid var(--gold-500);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.budget-value {
  color: var(--navy-900);
  font-size: 15px;
  font-weight: 600;
  min-width: 80px;
  text-align: right;
  font-family: 'Cabinet Grotesk', sans-serif;
}

/* ---- Yacht cards ---- */
.yacht-card {
  background: transparent;
}

/* Static image variant — used on the homepage's Browse Yachts section
   (and anywhere a single image, rather than a slider, sits at the top
   of the card). Gives the bare <img> the same rounded shape and fixed
   aspect ratio that .yacht-card__slider-wrap provides for the
   slider-based fleet cards. */
.yacht-card__media {
  border-radius: 14px;
  overflow: hidden;
  display: block;
  background: rgba(10, 29, 58, 0.04);
}

.yacht-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

/* Container for the slider to hold the dots overlay */
.yacht-card__slider-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

/* The scrollable track */
.yacht-card__slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Hides scrollbar in Firefox */
  -ms-overflow-style: none; /* Hides scrollbar in IE/Edge */
}
.yacht-card__slider::-webkit-scrollbar {
  display: none; /* Hides scrollbar in Chrome/Safari */
}

/* Individual images inside the track */
.yacht-card__slider img {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  scroll-snap-align: start; /* Forces the swipe to lock onto the image */
}

/* Dots Indicator Container */
.yacht-card__dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}

/* Individual Dot */
.yacht-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: background 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}
/* Subtle Circular Navigation Buttons */
.yacht-card__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%; /* Makes them circular */
  background: rgba(255, 255, 255, 0.25); /* Not too visible / semi-transparent */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background 0.2s ease, transform 0.2s ease;
}

.yacht-card__nav:hover {
  background: rgba(255, 255, 255, 0.45);
  transform: translateY(-50%) scale(1.05);
}

.yacht-card__nav svg {
  width: 16px;
  height: 16px;
}

/* Position them on the edges */
.yacht-card__nav--prev {
  left: 8px;
}

.yacht-card__nav--next {
  right: 8px;
}



.yacht-card__dot.active {
  background: #ffffff;
  transform: scale(1.2);
}

.yacht-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 16px 0 8px;
  gap: 14px;
}

.yacht-meta {
  flex: 1;
}

.yacht-name {
  color: var(--navy-900);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
  font-family: 'Cabinet Grotesk', sans-serif;
}

.yacht-name span {
  font-weight: 400;
  color: rgba(10, 29, 58, 0.55);
  font-size: 12px;
  margin-left: 2px;
}

.yacht-price {
  color: rgba(10, 29, 58, 0.7);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.yacht-price strong {
  color: var(--navy-900);
  font-weight: 700;
  font-size: 13px;
  margin-left: 3px;
}

/* Dual-price sub-row used on chauffeur cards (transportation.html):
   hourly rate + transfer range separated by a faint |. Sits inside
   .yacht-price's existing flex row, with a tighter inner gap so the
   two price values read as a single group distinct from .pax-count. */
.yacht-price__rates {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  row-gap: 2px;
}

.yacht-price__sep {
  color: rgba(10, 29, 58, 0.25);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
}

.yacht-price__transfer {
  color: var(--gold-500);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.pax-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(10, 29, 58, 0.55);
  font-size: 11px;
}

.btn-see-details {
  border: 1px solid rgba(10, 29, 58, 0.4);
  color: var(--navy-900);
  background: transparent;
  padding: 9px 18px;
  font-size: 12px;
  text-decoration: none;
  /* Changed from 2px to 50px to make the edges completely round */
  border-radius: 50px; 
  transition: all 0.2s ease;
  white-space: nowrap;
  font-weight: 500;
}

.btn-see-details:hover {
  border-color: var(--gold-500);
  color: var(--gold-500);
  background: rgba(201, 169, 97, 0.05);
}

/* ---- View all boats link ---- */
.view-all-wrap {
  text-align: center;
  margin-top: 50px;
}

.view-all {
  color: var(--navy-900);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 4px;
  border: none;
  border-bottom: 1px solid rgba(10, 29, 58, 0.4);
  background: transparent;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
  font-family: 'Cabinet Grotesk', sans-serif;
}

.view-all:hover {
  color: var(--gold-500);
  border-color: var(--gold-500);
}

@media (max-width: 768px) {
  .browse-yachts {
    padding: 24px 0 50px;
  }

  /* Tighter heading + row spacing on mobile (heading now wraps to 3 lines
     when centered, so the default desktop margins felt loose) */
  .browse-yachts .browse-heading {
    margin-bottom: 6px;
  }

  .browse-yachts .row.mb-4 {
    margin-bottom: 0.5rem !important;
  }

  .budget-row {
    flex-wrap: wrap;
    gap: 12px;
  }

  .budget-label {
    min-width: auto;
  }

  .yacht-info {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-see-details {
    align-self: flex-start;
  }
}

/* ==================================================
    SECTION: TAILORED EXPERIENCES
    ================================================== */
.experiences {
  background: #fff;
  padding: 80px 0 90px;
  overflow: hidden;
}

.experiences-header {
  margin-bottom: 40px;
}

.experiences-heading {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 700;
  color: var(--navy-900);
  margin-bottom: 18px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  max-width: 600px;
}

.experiences-copy {
  color: #5a6b80;
  font-size: 14px;
  line-height: 1.65;
  max-width: 520px;
  font-weight: 400;
}

/* ---- Carousel ---- */
.exp-carousel-frame {
  position: relative;
}

/* Circular prev/next buttons overlaid on the carousel images
   (matches .gallery-carousel__nav style on see-details) */
.exp-circle-nav {
  position: absolute;
  /* Vertically centered on the card image (image height ~380px on desktop). */
  top: 200px;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  z-index: 5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-900);
  box-shadow: 0 4px 14px rgba(10, 29, 58, 0.18);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.exp-circle-nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 6px 18px rgba(10, 29, 58, 0.25);
}

.exp-circle-nav:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
}

.exp-circle-nav:disabled {
  opacity: 0.45;
  cursor: default;
  transform: translateY(-50%);
  box-shadow: 0 4px 14px rgba(10, 29, 58, 0.18);
}

.exp-circle-nav--prev { left: 24px; }
.exp-circle-nav--next { right: 24px; }

/* Hide circular nav on mobile — the .exp-arrow buttons in .exp-controls
   already provide arrows there (in the dots row). */
@media (max-width: 768px) {
  .exp-circle-nav { display: none; }
}

.carousel-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 10px;
}

.carousel-viewport::-webkit-scrollbar {
  display: none;
}

.carousel-track {
  display: flex;
  gap: 26px;
  padding: 10px 20px;
}

/* Align first card close to the left edge on larger screens, show peek on right */
@media (min-width: 1200px) {
  .carousel-track {
    padding-left: 20px;
    padding-right: calc((100vw - 1140px) / 2 - 220px);
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .carousel-track {
    padding-left: 20px;
    padding-right: calc((100vw - 960px) / 2 - 180px);
  }
}

/* Center the 3 experience cards on desktop.
   Overrides the peek-padding rules above (originally designed for 5 cards).
   Mobile (<= 768px) is untouched. */
@media (min-width: 769px) {
  .carousel-track {
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.exp-card {
  flex: 0 0 460px;
  scroll-snap-align: center;
  transform-origin: center center;
  transition: filter 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
  will-change: filter, transform, opacity;
}

.exp-card img {
  width: 100%;
  aspect-ratio: 4 / 3.3;
  object-fit: cover;
  display: block;
  margin-bottom: 22px;
}

.exp-card h3 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy-900);
  margin-bottom: 12px;
  letter-spacing: -0.3px;
}

.exp-card p {
  color: #5a6b80;
  font-size: 13.5px;
  line-height: 1.65;
  margin: 0;
  max-width: 340px;
}

/* ---- Dots ---- */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.c-dot {
  width: 28px;
  height: 3px;
  background: #d4d0c9;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
  border-radius: 2px;
}

.c-dot:hover {
  background: #a9a49a;
}

.c-dot.active {
  background: var(--navy-900);
  transform: scaleX(1.2);
}

@media (max-width: 768px) {
  .experiences {
    padding: 50px 0 70px;
  }

  .exp-card {
    flex: 0 0 280px;
  }

  .exp-card h3 {
    font-size: 19px;
  }
}

/* ==================================================
    SECTION: HOW BOOKING WORKS
    ================================================== */
.booking {
  background: var(--section-alt);
  padding: 90px 0 100px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.booking-watermark {
  right: -120px;
  top: 55%;
}

.booking-watermark svg {
  width: 460px;
  height: 460px;
}

.booking-heading {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 700;
  color: var(--navy-900);
  margin-bottom: 70px;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.booking .container {
  position: relative;
  z-index: 1;
}

/* Steps grid */
.steps-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}

/* Connecting gold line behind circles */
.steps-row::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(to right,
      transparent 0%,
      #8a6d2c 5%,
      #c9a961 15%,
      #e5cc7f 35%,
      #f0dc96 50%,
      #e5cc7f 65%,
      #c9a961 85%,
      #8a6d2c 95%,
      transparent 100%);
  z-index: 0;
}

.step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 10px;
}

.step-circle {
  width: 56px;
  height: 56px;
  border: 2.5px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg,
      #a88437 0%,
      #c9a961 20%,
      #e5cc7f 42%,
      #f0dc96 52%,
      #d4b872 68%,
      #b2913f 85%,
      #8a6d2c 100%) border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: #b2913f;
  margin-bottom: 26px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.step:hover .step-circle {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(201, 169, 97, 0.45);
  filter: brightness(1.05);
}

.step h3 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-900);
  margin-bottom: 14px;
  letter-spacing: -0.2px;
}

.step p {
  color: #5a6b80;
  font-size: 13px;
  line-height: 1.6;
  max-width: 230px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .booking {
    padding: 60px 0 70px;
  }

  .booking-heading {
    margin-bottom: 45px;
  }

  .steps-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px;
  }

  .steps-row::before {
    display: none;
  }
}

@media (max-width: 480px) {
  .steps-row {
    grid-template-columns: 1fr;
  }
}

/* ==================================================
    SECTION: MORE WAYS TO CUSTOMIZE
    ================================================== */
.customize {
  background: #fff;
  padding: 85px 0 95px;
  position: relative;
  overflow: hidden;
}

.customize-watermark {
  position: absolute;
  right: -60px;
  top: -70px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.customize-watermark svg {
  width: 300px;
  height: 300px;
  color: var(--navy-900);
}

.customize .container {
  position: relative;
  z-index: 1;
}

.customize-header {
  margin-bottom: 50px;
}

.customize-heading {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 700;
  color: var(--navy-900);
  margin-bottom: 18px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  max-width: 560px;
}

.customize-copy {
  color: #5a6b80;
  font-size: 14px;
  line-height: 1.65;
  max-width: 480px;
  margin: 0;
}

/* ---- Cards ---- */
.customize-card {
  background: #fff;
  height: 100%;
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  border: 1px solid transparent;
  border-radius: 14px;
}

.customize-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(10, 29, 58, 0.08);
  border-color: rgba(201, 169, 97, 0.4);
}

.customize-card-img {
  width: 100%;
  aspect-ratio: 16 / 6.5;
  object-fit: cover;
  display: block;
}

.customize-card-body {
  padding: 22px 22px 26px;
}

.customize-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.customize-icon {
  width: 36px;
  height: 36px;
  border: 1px solid #d6d2c9;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-900);
  flex-shrink: 0;
}

.customize-icon svg {
  width: 18px;
  height: 18px;
}

.customize-card h3 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.3;
  margin: 0;
  padding-top: 4px;
  letter-spacing: -0.2px;
}

.customize-card p {
  color: #6a778a;
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .customize {
    padding: 60px 0 70px;
  }

  .customize-header {
    margin-bottom: 35px;
  }
}

/* ==================================================
    SECTION: CORPORATE BANNER
    ================================================== */
.corporate-banner {
  position: relative;
  background: var(--section-alt);
  overflow: hidden;
  min-height: 420px;
}

.corporate-content {
  /* padding-left aligns with the Bootstrap container left edge on standard desktops,
     but is capped so it never grows unbounded on ultra-wide screens (which was
     squeezing the text down to a 4-line stacked column). */
  padding: 90px 40px 90px clamp(80px, calc((100vw - 1140px) / 2), 380px);
  max-width: 1400px;
  position: relative;
  z-index: 1;
}

@media (max-width: 1200px) {
  .corporate-content {
    padding: 75px 40px 75px 60px;
  }
}

.corporate-heading {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.15;
  margin: 14px 0 24px;
  letter-spacing: -0.5px;
  /* Wide enough for "Corporate Yacht Charters" to sit on a single line at max font size */
  max-width: 640px;
}

.corporate-heading .gold-line {
  color: var(--gold-500);
  display: block;
  margin-top: 4px;
}

.corporate-copy {
  color: #4b5a70;
  font-size: 14px;
  line-height: 1.65;
  max-width: 600px;
  margin-bottom: 32px;
  font-weight: 300;
}

/* Dedicated CTA button for corporate banner */
.corporate-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg,
      #a88437 0%,
      #c9a961 20%,
      #e5cc7f 42%,
      #f0dc96 52%,
      #d4b872 68%,
      #b2913f 85%,
      #8a6d2c 100%);
  color: #1a1a1a;
  padding: 14px 28px;
  border: none;
  border-radius: 2px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(201, 169, 97, 0.3);
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
  cursor: pointer;
}

.corporate-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(201, 169, 97, 0.5);
  filter: brightness(1.08);
  color: #1a1a1a;
}

.corporate-cta svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: #1a1a1a;
}

@media (max-width: 768px) {
  .corporate-banner {
    background: var(--section-alt);
    min-height: 360px;
  }

  .corporate-content {
    padding: 50px 24px;
  }
}

/* ==================================================
    SECTION: EXPLORE DESTINATIONS
    ================================================== */
.explore {
  background: #fff;
  padding: 90px 0 100px;
}

.explore-heading {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 700;
  color: var(--navy-900);
  margin: 14px 0 20px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  max-width: 420px;
}

.explore-copy {
  color: #5a6b80;
  font-size: 14px;
  line-height: 1.65;
  max-width: 460px;
  margin: 0;
}

/* ---- Destination list ---- */
.destination-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  border-top: 1px solid #e5e7ec;
}

.destination-list li {
  border-bottom: 1px solid #e5e7ec;
}

.destination-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 2px;
  color: var(--navy-900);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Manrope', sans-serif;
  transition: color 0.25s ease, padding-left 0.25s ease;
}

.destination-list a:hover {
  color: var(--gold-500);
  padding-left: 10px;
}

.destination-list svg {
  color: var(--gold-500);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.destination-list a:hover svg {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .explore {
    padding: 60px 0 70px;
  }
}

/* ==================================================
    SECTION: TESTIMONIALS
    ================================================== */
.testimonials {
  background: var(--navy-900);
  padding: 80px 0 90px;
  overflow: hidden;
  position: relative;
}

.testimonials-header {
  text-align: center;
  margin-bottom: 55px;
  padding: 0 20px;
}

.testimonials-heading {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 700;
  color: #fff;
  margin: 14px 0 18px;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.testimonials-heading .text-gold {
  color: var(--gold-500);
}

.testimonials-copy {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13.5px;
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
  font-weight: 300;
}

/* ---- Carousel ---- */
.testi-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 10px;
}

.testi-viewport::-webkit-scrollbar {
  display: none;
}

.testi-track {
  display: flex;
  gap: 22px;
  padding: 10px 20px;
}

@media (min-width: 1200px) {
  .testi-track {
    padding-left: calc((100vw - 1140px) / 2 - 80px);
    padding-right: calc((100vw - 1140px) / 2 - 80px);
  }
}

.testi-card {
  flex: 0 0 320px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 26px 26px 24px;
  scroll-snap-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.testi-card:hover {
  border-color: rgba(201, 169, 97, 0.35);
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.04);
}

.testi-stars {
  color: var(--gold-500);
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 18px;
  font-family: 'Manrope', sans-serif;
}

.testi-quote {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13.5px;
  line-height: 1.6;
  min-height: 50px;
  margin-bottom: 26px;
  font-weight: 400;
}

.testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testi-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.testi-avatar svg {
  width: 16px;
  height: 16px;
}

.testi-name {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  flex: 1;
}

.testi-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.2);
}

.testi-google {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ---- Dots ---- */
.testi-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.t-dot {
  width: 28px;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
  border-radius: 2px;
}

.t-dot:hover {
  background: rgba(255, 255, 255, 0.5);
}

.t-dot.active {
  background: #fff;
  transform: scaleX(1.3);
}

@media (max-width: 768px) {
  .testimonials {
    padding: 55px 0 70px;
  }

  .testi-card {
    flex: 0 0 280px;
    padding: 22px;
  }
}

/* ==================================================
    SECTION: FAQ
    ================================================== */
.faq {
  background: var(--section-alt);
  padding: 90px 0 100px;
}

.faq-header {
  margin-bottom: 55px;
}

.faq-heading {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 700;
  color: var(--navy-900);
  margin: 14px 0 20px;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.faq-copy {
  color: #5a6b80;
  font-size: 14px;
  line-height: 1.65;
  max-width: 500px;
  margin: 0;
}

.faq-list {
  border-top: 1px solid #e5e7ec;
}

.faq-item {
  border-bottom: 1px solid #e5e7ec;
}

.faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--navy-900);
  font-size: 14px;
  font-weight: 500;
  font-family: 'Manrope', sans-serif;
  cursor: pointer;
  text-align: left;
  transition: color 0.25s ease;
  gap: 16px;
}

.faq-q:hover {
  color: var(--gold-500);
}

.faq-q .faq-icon {
  color: var(--gold-500);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

/* Toggle icon visibility: arrow when closed, chevron when open */
.faq-item .icon-chevron {
  display: none;
}

.faq-item.open .icon-arrow {
  display: none;
}

.faq-item.open .icon-chevron {
  display: inline-block;
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 4px;
}

.faq-item.open .faq-a {
  max-height: 400px;
  padding: 0 4px 22px;
}

.faq-a p {
  color: #5a6b80;
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
  max-width: 520px;
}

@media (max-width: 768px) {
  .faq {
    padding: 60px 0 70px;
  }

  .faq-header {
    margin-bottom: 35px;
  }
}

/* ==================================================
    SECTION: CTA BANNER (Ready to Book)
    ================================================== */
.cta-banner {
  position: relative;
  padding: 90px 20px;
  text-align: center;
  background: var(--section-alt);
  overflow: hidden;
  min-height: 420px;
}

.cta-banner-content {
  max-width: 620px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.cta-heading {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.15;
  margin: 0 0 22px;
  letter-spacing: -0.5px;
}

.cta-heading .gold-line {
  color: var(--gold-500);
  display: block;
  margin-top: 6px;
}

/* Inline variant — gold portion stays on the same line as the white text. */
.cta-heading .gold-inline {
  color: var(--gold-500);
}

.cta-copy {
  color: #4b5a70;
  font-size: 14px;
  line-height: 1.65;
  margin: 0 auto 18px;
  font-weight: 300;
  max-width: 520px;
}

.cta-subcopy {
  color: #6b7a90;
  font-size: 13px;
  margin: 0 0 28px;
  font-weight: 400;
}

@media (max-width: 768px) {
  .cta-banner {
    padding: 60px 24px;
    background: var(--section-alt);
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cta-banner-content {
    width: 100%;
    max-width: 100%;
  }

  .cta-heading {
    font-size: 30px;
    line-height: 1.2;
  }

  .cta-copy {
    font-size: 15px;
    max-width: 100%;
  }

  .cta-subcopy {
    font-size: 14px;
    margin-bottom: 30px;
  }

  .corporate-cta {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 16px 20px;
    font-size: 13px;
    letter-spacing: 1.5px;
  }
}

/* ==================================================
    FOOTER
    ================================================== */
.footer {
  background: var(--navy-900);
  color: #fff;
  padding: 50px 0 30px;
  position: relative;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 35px;
}

.footer-left,
.footer-right {
  display: flex;
  gap: 50px;
  align-items: flex-start;
  padding-top: 28px;
}

.footer-right {
  justify-content: flex-end;
}

.footer-left a,
.footer-right>a {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease;
  font-weight: 400;
}

.footer-left a:hover,
.footer-right>a:hover,
.contact-group .main-link:hover {
  color: var(--gold-400);
}

/* Brand (center) */
.footer-brand {
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.footer-brand .brand-icon {
  color: var(--gold-500);
  margin-bottom: 4px;
  display: inline-block;
}

.footer-brand-name {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 2px;
  color: #fff;
  margin: 0;
  line-height: 1;
}

.footer-brand-tagline {
  font-size: 10px;
  letter-spacing: 4px;
  color: #fff;
  margin-top: 4px;
}

/* Contact group (stacked under "Contact Us") */
.contact-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-group .main-link {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  margin-bottom: 4px;
  transition: color 0.25s ease;
}

.contact-group .sub-link {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12.5px;
  text-decoration: none;
  transition: color 0.25s ease;
}

.contact-group .sub-link:hover {
  color: #fff;
}

/* Socials */
.socials {
  display: flex;
  gap: 14px;
  margin-top: 6px;
}

.socials a {
  color: #fff;
  display: inline-flex;
  transition: color 0.25s ease, transform 0.25s ease;
}

.socials a:hover {
  color: var(--gold-400);
  transform: translateY(-2px);
}

.socials svg {
  width: 18px;
  height: 18px;
}

/* Divider — gold gradient line matching hero bottom */
.footer-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--gold-500) 50%,
      transparent 100%);
  opacity: 0.7;
  margin: 0;
}

/* Bottom row */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-copy {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12.5px;
}

.footer-legal {
  display: flex;
  gap: 28px;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s ease;
}

.footer-legal a:hover {
  color: var(--gold-400);
}

.footer-credit {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12.5px;
}

.footer-credit a {
  text-decoration: none;
}

@media (max-width: 992px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .footer-left,
  .footer-right {
    justify-content: center;
    padding-top: 0;
    flex-wrap: wrap;
    gap: 24px 40px;
  }

  .contact-group {
    align-items: center;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
}

/* ==================================================
    MOBILE STYLES — SECTION 1 (HERO)
    Added: mobile-only adjustments; desktop layout untouched
    ================================================== */

/* Hide hamburger by default (desktop) */
.mobile-menu-btn {
  display: none;
}

/* Hide feature carousel controls by default (desktop) */
.feature-controls {
  display: none;
}

/* Hide experiences carousel arrows by default (desktop shows dots only) */
.exp-arrow {
  display: none;
}

/* Hide customize carousel controls by default (desktop) */
.customize-controls {
  display: none;
}

@media (max-width: 768px) {

  /* ===== HERO BACKGROUND (swap desktop image for mobile) ===== */
  .hero {
    background: url('../img/hero-bg-mobile.webp') center/cover no-repeat;
  }

  /* ===== NAV BAR ===== */
  /* Transparent by default — solid only when .scrolled is added (desktop behavior).
     Override the desktop grid layout with flex+wrap so the call button can
     drop onto its own full-width row below the brand. */
  .top-nav {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    gap: 0;
    /* no background-color here — inherits desktop transparent default */
  }

  .top-nav.scrolled {
    padding: 0;
    /* background/blur/shadow inherited from desktop .scrolled rule */
  }

  /* Brand centered horizontally within row 1 */
  .brand {
    margin: 0 auto;
    order: 1;
    flex: 0 0 auto;
    text-align: center;
    padding: 12px 0;
  }

  .brand-logo {
    height: 54px !important;
  }

  /* Hide the desktop center nav on mobile — the hamburger menu
     panel (.mobile-menu) takes over. The call-btn is already a
     direct child of .top-nav, so it flows into row 2 naturally
     via the existing flex-wrap rules. */
  .center-nav {
    display: none !important;
  }

  /* Hamburger pinned to the right via absolute positioning so it doesn't
      shift the centered logo. Full height of row 1 for easy tapping. */
  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    position: absolute;
    top: 0;
    right: 0;
    height: 78px;
    /* matches row 1 (54px logo + 2×12px padding) */
    padding: 0 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 2;
  }

  .mobile-menu-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transition: 0.3s;
  }

  /* Call button: edge-to-edge gold bar on row 2, flush with nav above.
     Overrides the desktop absolute positioning so it flows into the
     wrapped flex row instead of floating over the navbar. */
  .call-btn {
    position: static;
    transform: none;
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    margin: 0 !important;
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
  }

  .call-btn-label,
  .call-btn-number {
    display: inline-block !important;
    margin: 0 !important;
  }

  .call-btn-label {
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: 700;
  }

  .call-btn-number {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.5px;
  }

  /* ===== HERO CONTENT ===== */
  .hero-content {
    padding: 260px 20px 20px;
    text-align: center;
  }

  .pill-badge {
    font-size: 10px;
    letter-spacing: 2.5px;
    padding: 6px 14px;
    margin-bottom: 22px;
  }

  .hero-headline {
    font-size: clamp(40px, 12vw, 60px);
    line-height: 1.02;
    letter-spacing: -1px;
    text-align: center;
    margin: 0 auto 90px;
  }

  .hero-title {
    font-size: 32px;
    line-height: 1.15;
    text-align: left;
    margin: 0 0 20px;
    letter-spacing: -0.5px;
  }

  .hero-sub {
    font-size: 15px;
    line-height: 1.55;
    text-align: left;
    margin: 0 0 28px;
  }

  .hero-tagline {
    font-size: 16px;
    text-align: center;
    margin: 0 auto 6px;
  }

  /* ===== CTA BUTTONS ===== */
  .cta-row {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 50px;
  }

  .btn-gold,
  .btn-outline-light-custom {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 12px;
    letter-spacing: 1.5px;
  }

  /* ===== TRUSTED BY ===== */
  .trusted-section {
    padding-bottom: 0;
  }

  .trusted-heading {
    gap: 14px;
    margin-bottom: 28px;
    justify-content: center;
  }

  .trusted-heading .line {
    width: 70px;
    height: 1px;
  }

  .trusted-heading span {
    font-size: 14px;
    letter-spacing: 5px;
    font-weight: 400;
  }

  /* Single tight row of 6 logos on mobile. Each logo gets an equal share
     of the available row width via flex: 1 1 0; the image's object-fit:
     contain (rule below) keeps each one centred in its share without
     squashing. Wider logos (BlackRock, Rainbet) and compact ones (Heat)
     all land in the same visual footprint. */
  .logos-row {
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
  }

  .logo-item {
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  .logo-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .google-review-row {
    margin-top: 30px;
  }

  .google-review-row img {
    height: 56px;
  }

  /* ==================================================
      SECTION 2: TRUST BANNER (mobile)
      ================================================== */
  .trust-banner {
    padding: 55px 20px 50px;
  }

  /* Let the heading wrap naturally — disable the hardcoded <br> */
  .trust-heading br {
    display: none;
  }

  .trust-heading {
    font-size: 32px;
    line-height: 1.15;
    text-align: center;
    letter-spacing: -0.5px;
    margin-bottom: 24px;
  }

  .trust-copy {
    text-align: center;
    font-size: 15px;
    line-height: 1.6;
    max-width: 100%;
    margin: 0 0 36px;
  }

  /* Check list: left-aligned items, full container width */
  .check-list {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  .check-list li {
    align-items: flex-start;
    /* icon aligns with first line of text */
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    padding: 9px 0;
  }

  .check-icon {
    width: 26px;
    height: 26px;
    font-size: 16px;
    margin-right: 14px;
    margin-top: 1px;
    /* nudge icon to visually center with first line */
  }

  /* ==================================================
      SECTION 3: WHY CHOOSE (mobile)
      ================================================== */
  .why-choose {
    padding: 60px 20px 60px;
  }

  /* Collage image above the copy on mobile (columns already stack naturally) */
  .collage {
    max-width: 100%;
    margin-bottom: 28px;
  }

  /* "OUR PROMISE" label — bumped up per request */
  .small-label {
    font-size: 13px;
    letter-spacing: 4.5px;
    margin-bottom: 18px;
  }

  .why-heading {
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
  }

  .why-copy {
    font-size: 15px;
    line-height: 1.6;
    max-width: 100%;
    margin: 0 0 28px;
  }

  /* Inline CTA button — full width on mobile */
  .btn-gold.inline-cta {
    width: 100%;
    justify-content: center;
    padding: 16px 20px;
    font-size: 13px;
    letter-spacing: 1.5px;
  }

  /* ==================================================
      SECTION 4: FEATURE CARDS (mobile — horizontal carousel)
      ================================================== */
  .feature-cards {
    padding: 40px 0 50px;
  }

  /* Let the row reach viewport edges for peek effect */
  .feature-cards .container {
    padding-left: 0;
    padding-right: 0;
  }

  /* Row becomes a horizontal scroll container with snap */
  .feature-cards .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 20px;
    margin: 0;
    padding: 0 20px 10px;
    gap: 16px;
    scrollbar-width: none;
    /* Firefox */
  }

  .feature-cards .row::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
  }

  /* Each column: fixed width snap point (85% viewport → next card peeks) */
  .feature-cards .row>[class*='col-'] {
    flex: 0 0 85%;
    max-width: 85%;
    padding: 0;
    scroll-snap-align: start;
  }

  /* Ensure cards stretch to equal height */
  .feature-cards .feature-card {
    height: 100%;
  }

  /* Controls row: arrows on edges, dots centered */
  .feature-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 0;
  }

  .feature-arrow {
    background: transparent;
    border: none;
    color: var(--navy-900);
    padding: 6px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
  }

  .feature-arrow svg {
    width: 26px;
    height: 26px;
  }

  .feature-arrow:disabled {
    opacity: 0.25;
    cursor: default;
  }

  .feature-dots {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .feature-dot {
    width: 22px;
    height: 2px;
    background: rgba(10, 29, 58, 0.2);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease;
  }

  .feature-dot.active {
    background: var(--navy-900);
  }

  /* ==================================================
      SECTION 5: BROWSE YACHTS (mobile)
      ================================================== */
  .browse-yachts {
    padding: 55px 20px 60px;
  }

  /* Remove container horizontal padding since section provides it */
  .browse-yachts .container {
    padding-left: 0;
    padding-right: 0;
  }

  .browse-heading {
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
  }

  .browse-copy {
    font-size: 15px;
    max-width: 100%;
    margin-bottom: 26px;
    line-height: 1.6;
  }

  /* ACCEPTED PAYMENTS label + crypto badge → side-by-side */
  .browse-yachts .col-lg-4 {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  /* Narrow label so it wraps "ACCEPTED / PAYMENTS" onto 2 lines */
  .browse-yachts .col-lg-4 .small-label {
    font-size: 11px !important;
    letter-spacing: 3px !important;
    max-width: 85px;
    line-height: 1.5;
    margin-bottom: 0 !important;
    flex-shrink: 0;
  }

  .crypto-badge-img {
    max-width: 140px;
  }

  /* Budget slider — on mobile, stack the label + value on top
     and let the slider span full width below. */
  .budget-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label value"
      "slider slider";
    column-gap: 14px;
    row-gap: 8px;
    padding: 14px 0;
    margin: 28px 0 30px;
    align-items: center;
  }

  .budget-label {
    grid-area: label;
    font-size: 14px;
    white-space: nowrap;
    min-width: auto;
  }

  .slider-wrap {
    grid-area: slider;
  }

  .budget-value {
    grid-area: value;
    font-size: 16px;
    min-width: auto;
    white-space: nowrap;
  }

  /* Bigger slider thumb for better touch target */
  #budgetSlider::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
  }

  #budgetSlider::-moz-range-thumb {
    width: 18px;
    height: 18px;
  }

  /* Yacht cards — keep info + button HORIZONTAL on mobile
      (override the earlier flex-direction: column rule) */
  .yacht-info {
    flex-direction: row;
    align-items: center;
    padding: 18px 0 8px;
    gap: 14px;
  }

  .yacht-name {
    font-size: 16px;
    margin-bottom: 4px;
  }

  .yacht-name span {
    font-size: 13px;
  }

  .yacht-price {
    font-size: 13px;
  }

  .yacht-price strong {
    font-size: 15px;
  }

  .pax-count {
    font-size: 12px;
  }

  .btn-see-details {
    align-self: center;
    padding: 12px 22px;
    font-size: 13px;
  }

  /* ==================================================
      SECTION 6: TAILORED EXPERIENCES (mobile)
      ================================================== */
  .experiences {
    padding: 55px 0 60px;
  }

  /* Header (label + heading + copy) gets side padding.
      Carousel itself stays flush so cards can peek from the edges. */
  .experiences-header {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 30px;
  }

  /* Let the heading wrap naturally — disable the forced <br> */
  .experiences-heading br {
    display: none;
  }

  .experiences-heading {
    font-size: 32px;
    line-height: 1.12;
    letter-spacing: -0.5px;
    max-width: 100%;
    margin-bottom: 18px;
  }

  .experiences-copy {
    font-size: 15px;
    max-width: 100%;
    line-height: 1.6;
  }

  /* Card sizing — one card + peek of next */
  .carousel-track {
    padding: 10px 20px;
    gap: 18px;
  }

  .exp-card {
    flex: 0 0 85%;
    max-width: 85%;
  }

  .exp-card img {
    margin-bottom: 20px;
  }

  .exp-card h3 {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .exp-card p {
    font-size: 14.5px;
    max-width: 100%;
  }

  /* Controls: arrows on edges, dots centered */
  .exp-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-top: 28px;
  }

  .exp-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 6px 8px;
    cursor: pointer;
    color: var(--navy-900);
    transition: opacity 0.2s ease;
  }

  .exp-arrow svg {
    width: 26px;
    height: 26px;
  }

  .exp-arrow:disabled {
    opacity: 0.25;
    cursor: default;
  }

  /* Reset dots margin (exp-controls has the margin now) and let them
      take the middle space so arrows stay pinned to edges */
  .experiences .carousel-dots {
    margin-top: 0;
    flex: 1;
    justify-content: center;
  }

  /* ==================================================
      SECTION 7: HOW BOOKING WORKS (mobile)
      ================================================== */
  .booking {
    padding: 55px 20px 60px;
  }

  .booking .container {
    padding-left: 0;
    padding-right: 0;
  }

  .booking-heading {
    font-size: 34px;
    line-height: 1.15;
    margin-bottom: 40px;
  }

  /* Steps: stack into one column (overrides 2-column rule from earlier media query) */
  .steps-row {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  /* Main connecting line stays hidden on mobile */
  .steps-row::before {
    display: none;
  }

  /* Each step gets its own horizontal gold line passing through the circle */
  .step {
    position: relative;
    padding: 0;
  }

  .step::before {
    content: '';
    position: absolute;
    top: 28px;
    /* half of 56px circle height → line passes through center */
    left: 0;
    right: 0;
    height: 1.5px;
    background: linear-gradient(to right,
        transparent 0%,
        #8a6d2c 8%,
        #c9a961 22%,
        #e5cc7f 40%,
        #f0dc96 50%,
        #e5cc7f 60%,
        #c9a961 78%,
        #8a6d2c 92%,
        transparent 100%);
    z-index: 0;
  }

  /* Circle must sit ABOVE the line — give it a positioned stacking context
      so its white interior masks the part of the line behind it */
  .step-circle {
    position: relative;
    z-index: 2;
  }

  .step h3 {
    font-size: 21px;
    margin-bottom: 12px;
    letter-spacing: -0.2px;
  }

  .step p {
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 320px;
  }

  /* ==================================================
      SECTION 8: MORE WAYS TO CUSTOMIZE (mobile — carousel)
      ================================================== */
  .customize {
    padding: 55px 20px 60px;
  }

  .customize .container {
    padding-left: 0;
    padding-right: 0;
  }

  .customize-header {
    margin-bottom: 28px;
  }

  .customize-heading {
    font-size: 34px;
    line-height: 1.12;
    max-width: 100%;
    margin-bottom: 16px;
  }

  .customize-copy {
    font-size: 15px;
    max-width: 100%;
    line-height: 1.6;
  }

  /* Transform the card grid into a horizontal scroll carousel */
  .customize .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 4px 0 10px;
    gap: 16px;
    scrollbar-width: none;
  }

  .customize .row::-webkit-scrollbar {
    display: none;
  }

  .customize .row>[class*='col-'] {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
    scroll-snap-align: start;
  }

  /* Shorter, wider image on mobile (matches desktop's banner proportions) */
  .customize-card-img {
    aspect-ratio: 16 / 6.5;
  }

  .customize-card h3 {
    font-size: 17px;
  }

  .customize-card p {
    font-size: 13.5px;
  }

  /* Controls row — arrows on edges, dots centered */
  .customize-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 0;
    margin-top: 6px;
  }

  .customize-arrow {
    background: transparent;
    border: none;
    color: var(--navy-900);
    padding: 6px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
  }

  .customize-arrow svg {
    width: 26px;
    height: 26px;
  }

  .customize-arrow:disabled {
    opacity: 0.25;
    cursor: default;
  }

  .customize-dots {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .customize-dot {
    width: 22px;
    height: 2px;
    background: rgba(10, 29, 58, 0.2);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease;
  }

  .customize-dot.active {
    background: var(--navy-900);
  }

  /* ==================================================
      SECTION 9: CORPORATE BANNER (mobile)
      Off-white tint to keep alternation visible on small screens.
      ================================================== */
  .corporate-banner {
    background: var(--section-alt);
    min-height: auto;
  }

  /* No top image to clear, so tighten the padding back up. */
  .corporate-content {
    padding: 60px 28px 50px;
    max-width: 100%;
  }

  .corporate-heading {
    font-size: 32px;
    line-height: 1.15;
    margin: 14px 0 20px;
  }

  .corporate-heading .gold-line {
    display: block;
    margin-top: 4px;
  }

  .corporate-copy {
    font-size: 15px;
    max-width: 100%;
    margin-bottom: 28px;
    line-height: 1.6;
  }

  /* Full-width CTA button on mobile */
  .corporate-cta {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 16px 20px;
    font-size: 13px;
    letter-spacing: 1.5px;
  }

  /* ==================================================
      SECTION 10: EXPLORE DESTINATIONS (mobile)
      ================================================== */
  .explore {
    padding: 55px 20px 60px;
  }

  .explore .container {
    padding-left: 0;
    padding-right: 0;
  }

  .explore-heading {
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -0.5px;
    max-width: 100%;
    margin: 14px 0 20px;
  }

  .explore-copy {
    font-size: 15px;
    max-width: 100%;
    line-height: 1.6;
  }

  .destination-list {
    margin-top: 16px;
  }

  .destination-list a {
    font-size: 15px;
    padding: 18px 0;
  }

  .destination-list svg {
    width: 18px;
    height: 18px;
  }

  /* ==================================================
      SECTION 11: FAQ (mobile)
      ================================================== */
  .faq {
    padding: 55px 20px 60px;
  }

  .faq .container {
    padding-left: 0;
    padding-right: 0;
  }

  .faq-header {
    margin-bottom: 30px;
  }

  .faq-heading {
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -0.5px;
    margin: 14px 0 20px;
  }

  .faq-copy {
    font-size: 15px;
    max-width: 100%;
    line-height: 1.6;
  }

  .faq-q {
    font-size: 15px;
    padding: 20px 0;
  }

  .faq-q .faq-icon {
    width: 18px;
    height: 18px;
  }

  .faq-a {
    padding: 0;
  }

  .faq-item.open .faq-a {
    padding: 0 0 22px;
  }

  .faq-a p {
    font-size: 14px;
    max-width: 100%;
  }

  /* ==================================================
      FOOTER (mobile)
      ================================================== */
  .footer {
    padding: 45px 20px 30px;
  }

  .footer .container {
    padding-left: 0;
    padding-right: 0;
  }

  /* Layout:
      Row 1: brand (full-width, centered)
      Row 2: left nav | right nav  (2 equal columns)
      Row 3: socials (full-width, centered — via absolute positioning
            since they're nested inside .contact-group inside .footer-right) */
  .footer-top {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand  brand"
      "left   right";
    gap: 40px 20px;
    padding-bottom: 85px;
    /* reserves space for absolute socials + breathing room before divider */
    text-align: center;
  }

  .footer-brand {
    grid-area: brand;
    justify-self: center;
    margin-bottom: 6px;
  }

  /* Larger footer logo on mobile (override the 54px nav rule) */
  .footer-brand .brand-logo {
    height: 120px !important;
  }

  /* Left column — vertical stack, center-aligned */
  .footer-left {
    grid-area: left;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-top: 0;
  }

  /* Right column — vertical stack, center-aligned */
  .footer-right {
    grid-area: right;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-top: 0;
    justify-content: flex-start;
  }

  /* Flatten contact-group so Contact Us aligns with the other right links */
  .contact-group {
    align-items: center;
    flex-direction: column;
    gap: 20px;
  }

  /* Hide sub-links (Contacts, Address) — not shown in mobile reference */
  .contact-group .sub-link {
    display: none;
  }

  .contact-group .main-link {
    margin-bottom: 0;
  }

  /* Nav link size on mobile */
  .footer-left a,
  .footer-right>a,
  .contact-group .main-link {
    font-size: 16px;
  }

  /* Socials — absolutely positioned at bottom of footer-top, lifted 18px
      so the icons don't overlap the gold divider that follows */
  .socials {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    justify-content: center;
    margin-top: 0;
    gap: 22px;
  }

  .socials svg {
    width: 22px;
    height: 22px;
  }

  /* Bottom row: stack copy above legal, centered */
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 22px;
    text-align: center;
  }

  .footer-legal {
    gap: 24px;
  }

  .footer-copy {
    font-size: 13px;
  }

  .footer-legal a {
    font-size: 13px;
  }
}


/* ==================================================
   SEE DETAILS — STYLES
   Append to the end of style.css
   ================================================== */

/* ====== HERO (detail variant) ====== */

/* Override the default 100vh hero height for detail pages */
.hero--detail {
  min-height: auto;
}

/* Left-aligned hero content for yacht detail pages */
.hero-content--detail {
  padding: 170px 20px 50px;
  text-align: left;
  max-width: 1320px;
}

/* Yacht name — bigger, tighter, all-caps display treatment */
.yacht-title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 800;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}

/* Yacht spec subtitle (size, model, year) */
.yacht-sub {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  margin: 0 0 48px;
}

/* Bottom row: trusted-by sits left, CTA sits right */
.hero-detail-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

/* Left-aligned variants of the trusted-by block */
.trusted-section--left {
  text-align: left;
  padding-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.trusted-heading--left {
  justify-content: flex-start;
  margin-bottom: 22px;
}

.logos-row--left {
  justify-content: flex-start;
  gap: 44px;
}

/* Larger gold CTA — used as the primary action on detail pages */
.btn-gold--lg {
  padding: 20px 44px;
  font-size: 13px;
  letter-spacing: 2.5px;
  white-space: nowrap;
}

/* Hero responsive */
@media (max-width: 992px) {
  .hero-content--detail {
    padding: 150px 20px 40px;
  }
  .hero-detail-bottom {
    gap: 32px;
  }
  .yacht-sub {
    margin-bottom: 36px;
  }
}

@media (max-width: 768px) {
  /* Center-align all hero content on mobile (override desktop's left-align).
     Top padding accounts for the fixed mobile header (~128px: 78px logo row
     + 50px gold call-us bar) plus ~50px breathing room. */
  .hero-content--detail {
    padding: 180px 20px 40px;
    text-align: center;
  }

  .yacht-title {
    font-size: clamp(38px, 11vw, 56px);
  }

  /* Note: hero-title/hero-sub mobile overrides for .hero-content--detail
     live near the bottom of this file (after their desktop overrides) so
     source order picks them on mobile. Don't add them here — they won't apply. */

  /* Stack vertically AND reverse: button shows above the trusted-by row */
  .hero-detail-bottom {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 36px;
  }

  /* Force the "left" trusted-by variant back to centered on mobile */
  .trusted-section--left {
    text-align: center;
    width: 100%;
  }

  .trusted-heading--left {
    justify-content: center;
  }

  /* Match the homepage's mobile pattern: the 6 brand logos sit on a single
     compressed line via flex: 1 1 0, while Google (last-child) is forced
     onto its own full-width row below by flex-basis: 100% + the row gap,
     which causes it to wrap. Keeps the same HTML across all 7 detail
     pages — only the CSS changes. */
  .logos-row--left {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }

  .logos-row--left .logo-item:not(:last-child) {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  .logos-row--left .logo-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* Google Reviews (the last logo) — own row, taller, centered */
  .logos-row--left .logo-item:last-child {
    flex: 0 0 100%;
    width: 100%;
    height: 56px;
    margin-top: 12px;
  }

  .logos-row--left .logo-item:last-child img {
    max-height: 56px;
  }

  /* Full-width gold CTA */
  .btn-gold--lg {
    width: 100%;
    justify-content: center;
    padding: 18px 28px;
  }
}


/* ====== BOOKING CARD SECTION ====== */

.booking-card-section {
  background: #fff;
  padding: 80px 20px 100px;
  position: relative;
  overflow: hidden;
}

.booking-card-section .container {
  position: relative;
  z-index: 1;
}

/* Watermark compass — both sides */
.booking-card-watermark {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  color: var(--navy-900);
}

.booking-card-watermark svg {
  width: 520px;
  height: 520px;
  display: block;
}

.booking-card-watermark--left {
  left: -200px;
}

.booking-card-watermark--right {
  right: -200px;
}

/* The white card */
.booking-card {
  max-width: 1080px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(10, 29, 58, 0.08);
  border-radius: 14px;
  padding: 48px 56px 40px;
  box-shadow: 0 10px 40px rgba(10, 29, 58, 0.06);
}

/* Top header row */
.booking-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
}

.booking-card__from {
  display: block;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--gold-500);
  font-weight: 600;
  margin-bottom: 6px;
}

.booking-card__price {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--gold-500);
  line-height: 1;
  margin-bottom: 14px;
}

.booking-card__title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0;
  letter-spacing: -0.3px;
}

.booking-card__badges {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.award-badge {
  width: 100px;
  height: 100px;
  display: block;
}

.booking-card__divider {
  border: none;
  border-top: 1px solid rgba(10, 29, 58, 0.1);
  margin: 0 0 32px;
}

/* Field group */
.booking-field {
  margin-bottom: 24px;
}

.booking-field__label {
  display: block;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 600;
  color: var(--gold-500);
  margin-bottom: 10px;
}

/* Toggle radio group */
.option-toggle {
  display: grid;
  gap: 10px;
  position: relative;
}

.option-toggle--3 {
  grid-template-columns: repeat(3, 1fr);
}

.option-toggle--4 {
  grid-template-columns: repeat(4, 1fr);
}

.option-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.option-toggle label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1px solid rgba(10, 29, 58, 0.15);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-900);
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
  user-select: none;
}

.option-toggle label:hover {
  border-color: var(--gold-500);
}

.option-toggle input[type="radio"]:checked + label {
  background: linear-gradient(135deg,
      #a88437 0%,
      #c9a961 20%,
      #e5cc7f 50%,
      #c9a961 80%,
      #a88437 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(201, 169, 97, 0.35);
}

.option-toggle input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

/* Disabled state — used when a yacht doesn't offer that duration tier
   (e.g. 118' Azimut has no 4hr or 6hr rate). The label is faded and
   pointer-events are blocked so the user can't toggle to it. */
.option-toggle input[type="radio"]:disabled + label {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
  color: rgba(10, 29, 58, 0.5);
  background: rgba(10, 29, 58, 0.03);
}

.option-toggle input[type="radio"]:disabled + label:hover {
  border-color: rgba(10, 29, 58, 0.12);
  background: rgba(10, 29, 58, 0.03);
  color: rgba(10, 29, 58, 0.5);
}

/* Inputs and selects */
.booking-input,
.booking-select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(10, 29, 58, 0.12);
  border-radius: 4px;
  background: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  color: var(--navy-900);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.booking-input::placeholder {
  color: rgba(10, 29, 58, 0.45);
}

.booking-input:focus,
.booking-select:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
}

.booking-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230a1d3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

/* Auto-derived End Time display.
   Sits directly under the Start Time <select>. Read-only by design — Duration
   is the source of truth, so the customer can't create an inconsistent booking.
   Visually styled as a subtle gold-tinted info readout (not an input) so users
   immediately understand it's calculated, not something they need to fill in. */
.booking-end-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 9px 14px;
  background: rgba(201, 169, 97, 0.07);
  border: 1px solid rgba(201, 169, 97, 0.28);
  border-radius: 4px;
  line-height: 1.2;
}

.booking-end-time__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold-500);
}

.booking-end-time__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-900);
  font-family: 'Manrope', sans-serif;
}

.booking-end-time__value--placeholder {
  font-weight: 400;
  color: rgba(10, 29, 58, 0.45);
}

/* Price breakdown */
.price-breakdown {
  margin: 36px 0 16px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 8px 0;
}

.price-row__label {
  color: rgba(10, 29, 58, 0.7);
}

.price-row__value {
  font-weight: 600;
  color: var(--navy-900);
}

/* Total row */
.price-total {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 0 0;
  margin-bottom: 32px;
  border-top: 1px solid rgba(10, 29, 58, 0.08);
}

.price-total__label-block {
  padding-top: 6px;
}

.price-total__label {
  display: block;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--navy-900);
  letter-spacing: -0.3px;
}

.price-total__caption {
  display: block;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(10, 29, 58, 0.5);
  margin-top: 4px;
  font-weight: 500;
}

.price-total__value {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1;
  padding-top: 6px;
}

/* Book Now button */
.btn-gold--book {
  display: flex !important;
  margin: 0 auto 22px;
  width: 280px;
  max-width: 100%;
  justify-content: center;
  padding: 18px 36px;
  font-size: 13px;
  letter-spacing: 2.5px;
  border: none;
}

/* Consent */
.consent-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  color: rgba(10, 29, 58, 0.6);
  line-height: 1.55;
  max-width: 540px;
  margin: 0 auto;
  cursor: pointer;
}

.consent-row input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--gold-500);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.consent-row a {
  color: var(--gold-500);
  text-decoration: underline;
}

.consent-row a:hover {
  color: var(--gold-400);
}

/* Booking card responsive */
@media (max-width: 768px) {
  .booking-card-section {
    padding: 20px 16px 70px;
  }

  .booking-card {
    padding: 32px 22px;
    border-radius: 10px;
  }

  /* Center the entire top header block on mobile
     (price/title stacked above centered badges) */
  .booking-card__top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
  }

  .booking-card__intro {
    text-align: center;
  }

  .booking-card__price {
    font-size: 32px;
  }

  .booking-card__title {
    font-size: 22px;
  }

  /* Badges sit centered side-by-side, beneath the title */
  .booking-card__badges {
    align-self: center;
    justify-content: center;
  }

  .award-badge {
    width: 100px;
    height: 100px;
  }

  /* Keep all 4 gratuity options on a single row (override desktop's 2x2 mobile fallback) */
  .option-toggle--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Tighter padding so 3-up duration and 4-up gratuity fit on narrow screens */
  .option-toggle label {
    padding: 12px 6px;
    font-size: 13px;
  }

  /* Keep Full name + Phone side-by-side on mobile (override Bootstrap's
     col-md-6 stacking). Email/Guests/Start time still stack full-width. */
  .booking-form .row > div:nth-child(1),
  .booking-form .row > div:nth-child(2) {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .price-total__value {
    font-size: 26px;
  }

  .price-total__label {
    font-size: 20px;
  }

  /* Full-width gold CTA on mobile (was fixed 280px) */
  .btn-gold--book {
    width: 100%;
  }

  .booking-card-watermark svg {
    width: 320px;
    height: 320px;
  }

  .booking-card-watermark--left {
    left: -140px;
  }

  .booking-card-watermark--right {
    right: -140px;
  }
}


/* ==================================================
   SEE DETAILS — WHAT'S INCLUDED + CEO BAR
   Append to the end of style.css
   ================================================== */

/* ====== WHAT'S INCLUDED SECTION ====== */

.whats-included {
  background: var(--section-alt);
  padding: 70px 20px 90px;
}

/* Header now lives inside .whats-included__grid as its left column,
   so it no longer needs a bottom margin (the grid's row gap handles
   spacing when it wraps on mobile). */
.whats-included__header {
  margin-bottom: 0;
}

.section-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--gold-500);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-heading {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  color: var(--navy-900);
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1.15;
}

/* Grid: heading (left) + two spec lists (right).
   Heading column gets ~1.5x weight so it doesn't squeeze the title
   onto too many lines; spec columns keep their compact width. */
.whats-included__grid {
  display: grid;
  grid-template-columns: 1.5fr 1.2fr 1.2fr;
  gap: 24px 48px;
  align-items: start;
}

/* Check Availability CTA below the specs/amenities grid */
.whats-included__cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

@media (max-width: 768px) {
  .whats-included__cta {
    margin-top: 32px;
  }
  .whats-included__cta .btn-gold {
    width: 100%;
    max-width: 360px;
    justify-content: center;
  }
}

/* Amenity check list */
.amenity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.amenity-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  color: var(--navy-900);
  font-size: 15px;
  font-weight: 500;
}

.amenity-check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--navy-900);
}

/* Spec list (boxed rows) */
.spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.spec-row {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(10, 29, 58, 0.12);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}

.spec-row__label {
  padding: 14px 18px;
  font-size: 11px;
  letter-spacing: 1.8px;
  color: rgba(10, 29, 58, 0.6);
  font-weight: 700;
  text-transform: uppercase;
  flex: 0 0 42%;
  display: flex;
  align-items: center;
}

.spec-row__value {
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy-900);
  flex: 1;
  border-left: 1px solid rgba(10, 29, 58, 0.12);
  display: flex;
  align-items: center;
}


/* ====== CEO CONTACT BAR ====== */

.ceo-bar {
  background: #fff;
  padding: 36px 0;
}

.ceo-bar__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 20px;
}

.ceo-bar__avatar {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(10, 29, 58, 0.08);
}

.ceo-bar__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ceo-bar__body {
  flex: 1;
  min-width: 0;
}

.ceo-bar__role {
  display: block;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: rgba(10, 29, 58, 0.65);
  text-transform: uppercase;
  margin-bottom: 18px;
  font-weight: 500;
}

.ceo-bar__name {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}

.ceo-bar__name .text-gold {
  color: var(--gold-500);
}

.ceo-bar__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ceo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border: 1px solid rgba(10, 29, 58, 0.18);
  background: rgba(10, 29, 58, 0.02);
  color: var(--navy-900);
  font-size: 12px;
  letter-spacing: 1.8px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 3px;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  text-align: center;
}

.ceo-btn__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.ceo-btn:hover {
  background: rgba(10, 29, 58, 0.06);
  border-color: rgba(10, 29, 58, 0.32);
  color: var(--navy-900);
  transform: translateY(-1px);
}

.ceo-btn--primary {
  background: linear-gradient(135deg,
      #a88437 0%,
      #c9a961 20%,
      #e5cc7f 42%,
      #f0dc96 52%,
      #d4b872 68%,
      #b2913f 85%,
      #8a6d2c 100%);
  color: #1a1a1a;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(201, 169, 97, 0.3);
}

.ceo-btn--primary:hover {
  filter: brightness(1.08);
  color: #1a1a1a;
  border-color: transparent;
  background: linear-gradient(135deg,
      #a88437 0%,
      #c9a961 20%,
      #e5cc7f 42%,
      #f0dc96 52%,
      #d4b872 68%,
      #b2913f 85%,
      #8a6d2c 100%);
  box-shadow: 0 6px 20px rgba(201, 169, 97, 0.5);
}


/* ====== Responsive ====== */

@media (max-width: 992px) {
  .whats-included__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 36px;
  }

  /* Header spans the full width above the two spec columns at this
     breakpoint so it doesn't leave an awkward empty cell. */
  .whats-included__grid .whats-included__header {
    grid-column: 1 / -1;
  }

  .ceo-bar__actions {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .whats-included {
    padding: 50px 16px 60px;
  }

  /* Bump heading size on mobile (scoped to this section only) */
  .whats-included__header .section-heading {
    font-size: 36px;
    line-height: 1.1;
  }

  /* Stack header + spec lists in one column on mobile, with consistent
     vertical rhythm via the grid's row gap. */
  .whats-included__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Slightly tighter gap between the two spec lists (they're related
     content vs the header which deserves more breathing room). */
  .spec-list + .spec-list {
    margin-top: -12px;
  }

  .ceo-bar {
    padding: 28px 0;
  }

  .ceo-bar__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    padding: 0 16px;
  }

  .ceo-bar__avatar {
    width: 90px;
    height: 90px;
  }

  .ceo-bar__name {
    font-size: 24px;
    margin-bottom: 4px;
  }

  .ceo-bar__actions {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }

  .ceo-bar__actions .ceo-btn--primary {
    grid-column: 1 / -1;
  }
}
/* ==================================================
   SEE DETAILS — GALLERY SECTION
   Append to the end of style.css
   ================================================== */

.gallery-section {
  background: #fff;
  padding: 80px 0 100px;
}

.gallery-section__header {
  text-align: center;
  margin-bottom: 50px;
}

.gallery-section__header .section-eyebrow {
  display: block;
  margin-bottom: 8px;
}


/* ====== HERO CAROUSEL (peek effect) ====== */

.gallery-carousel {
  position: relative;
  margin-bottom: 16px;
}

/* This ensures the 80px bumper ONLY applies to screens larger than mobile */
@media (min-width: 769px) {
  .gallery-carousel {
    padding: 0 80px;
  }
}

.gallery-carousel__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  
  /* Update the minimum padding from 16px to 96px. 
     This guarantees the images always stay to the right of the button. */
  padding: 0 max(96px, calc((100% - 900px) / 2));
  
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gallery-carousel__track::-webkit-scrollbar {
  display: none;
}

.gallery-carousel__slide {
  flex: 0 0 900px;
  max-width: 90vw;
  height: clamp(320px, 48vw, 520px);
  
  /* Snaps to the left instead of centering */
  scroll-snap-align: start; 
  
  border-radius: 8px;
  overflow: hidden;
  background: #e8e2d4;
}

.gallery-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Prev / Next arrows */
.gallery-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  z-index: 5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-900);
  box-shadow: 0 4px 14px rgba(10, 29, 58, 0.18);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-carousel__nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 6px 18px rgba(10, 29, 58, 0.25);
}

.gallery-carousel__nav:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
}

.gallery-carousel__nav--prev {
  left: 24px;
}

.gallery-carousel__nav--next {
  right: 24px;
}


/* ====== THUMBNAIL MOSAIC GRID ====== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 220px 220px 220px;
  gap: 12px;
  margin-top: 36px;
}

.gallery-grid__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: #e8e2d4;
}

.gallery-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.gallery-grid__item:hover img {
  transform: scale(1.06);
}

/* Feature image — top-left, spans 2x2 */
.gallery-grid__item--feature {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

/* "View more" CTA card */
.gallery-grid__item--more {
  background: #fff;
  border: 1px solid rgba(10, 29, 58, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
  padding: 16px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.gallery-grid__item--more:hover {
  border-color: var(--gold-500);
  transform: translateY(-2px);
}

.gallery-more__count {
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--gold-500);
  font-weight: 600;
}

.gallery-more__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg,
      #a88437 0%,
      #c9a961 20%,
      #e5cc7f 42%,
      #f0dc96 52%,
      #d4b872 68%,
      #b2913f 85%,
      #8a6d2c 100%);
  color: #1a1a1a;
  padding: 12px 24px;
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 600;
  border-radius: 2px;
  width: 100%;
  max-width: 180px;
  box-shadow: 0 4px 14px rgba(201, 169, 97, 0.3);
  transition: filter 0.2s ease, transform 0.2s ease;
}

.gallery-grid__item--more:hover .gallery-more__btn {
  filter: brightness(1.08);
}

/* Wrapper that positions the circular prev/next arrows over the carousel
   on mobile. The arrows themselves have .d-md-none so they only show on
   small screens; on desktop the wrapper is invisible (no styling impact).
   Pattern mirrors .yacht-card__slider-wrap + .yacht-card__nav. */
.gallery-grid-wrap {
  position: relative;
}

.gallery-grid__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Stronger drop-shadow so the white button stays visible over bright
     interior photos (white couches, sunlit decks, etc.). */
  box-shadow: 0 4px 16px rgba(10, 29, 58, 0.35);
  color: var(--navy-900);
  z-index: 3;
  padding: 0;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-grid__nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 6px 20px rgba(10, 29, 58, 0.45);
}

.gallery-grid__nav svg { width: 16px; height: 16px; }

/* Position the buttons OVER the visible slide image, not in the white
   padding zone — the carousel uses `padding: 0 10vw` on mobile, so the
   slide image starts at 10vw from the viewport edge. Buttons at 14vw
   sit just inside the slide where the image content provides contrast. */
.gallery-grid__nav--prev { left: 14vw; }
.gallery-grid__nav--next { right: 14vw; }


/* ====== Responsive ====== */

@media (max-width: 992px) {
  .gallery-carousel__slide {
    flex-basis: 720px;
    height: clamp(280px, 56vw, 440px);
  }

  .gallery-carousel__track {
    padding: 0 max(16px, calc((100% - 720px) / 2));
  }

  .gallery-grid {
    grid-template-rows: 180px 180px 180px;
  }

  .gallery-carousel__nav {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 768px) {
  .gallery-section {
    padding: 28px 0 40px;
  }

  /* Tighter header/grid spacing on mobile (was 50px + 36px = 86px of air) */
  .gallery-section__header {
    margin-bottom: 18px;
  }

  /* Bump Gallery heading on mobile (scoped to this section only) */
  .gallery-section__header .section-heading {
    font-size: 36px;
    line-height: 1.1;
  }

  .gallery-carousel__slide {
    flex-basis: 80vw; /* Shrunk from 88vw to give it more space away from the edges */
    max-width: none;
    height: 56vw;
    min-height: 240px;
    scroll-snap-align: center; /* Forces the image to lock dead center when swiping */
  }

  .gallery-carousel__track {
    padding: 0 10vw; /* Increased from 6vw to perfectly center the new 80vw image */
    gap: 16px;
  }

  .gallery-carousel__nav {
    display: none; /* swipe-only on mobile */
  }

  /* Convert the mosaic grid into a horizontal snap-scroll carousel on mobile.
     Each slide takes ~80vw with the next/previous peeking on either side,
     matching the .gallery-carousel pattern. Arrow buttons (.gallery-grid__nav)
     overlay the carousel for tap-to-advance. */
  .gallery-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 10vw;
    gap: 12px;
    margin-top: 12px;
    /* Reset desktop grid declarations */
    grid-template-columns: none;
    grid-template-rows: none;
  }

  .gallery-grid::-webkit-scrollbar { display: none; }

  /* Every slide: same width, same 3:2 aspect ratio so heights line up */
  .gallery-grid__item {
    flex: 0 0 80vw;
    scroll-snap-align: center;
    aspect-ratio: 3 / 2;
  }

  /* Feature item is just another slide in carousel mode — no row/col span */
  .gallery-grid__item--feature {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 3 / 2;
  }

  /* Re-enable items 5-8: the user can now swipe to reach them in the carousel */
  .gallery-grid__item:nth-child(n+5):not(.gallery-grid__item--more) {
    display: block;
  }

  /* "View More" card uses the same slide footprint as the thumbnails */
  .gallery-grid__item--more {
    aspect-ratio: 3 / 2;
    padding: 22px 16px;
    gap: 14px;
    min-height: 0;
  }

  .gallery-more__count {
    font-size: 13px;
    letter-spacing: 2px;
  }

  .gallery-more__btn {
    padding: 14px 20px;
    font-size: 12px;
    letter-spacing: 2px;
    width: 100%;
    max-width: 100%;
  }
}


/* ==================================================
   SEE DETAILS — MOBILE GALLERY PREVIEW
   Renders above the booking card on phones; shows only the first 5
   images. Visually mirrors .gallery-carousel but uses distinct class
   names so the existing lightbox JS doesn't double-count its slides.
   Hidden on desktop via the .d-md-none Bootstrap utility on the
   section itself.
   ================================================== */
.gallery-preview {
  background: #fff;
  padding: 30px 0 12px;
}

.gallery-preview__carousel {
  position: relative;
}

.gallery-preview__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 10vw;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery-preview__track::-webkit-scrollbar { display: none; }

.gallery-preview__slide {
  flex: 0 0 80vw;
  height: 56vw;
  min-height: 240px;
  scroll-snap-align: center;
  border-radius: 8px;
  overflow: hidden;
  background: #e8e2d4;
  cursor: zoom-in;
}

.gallery-preview__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* On mobile only: the preview above already shows the hero carousel,
   so hide the original .gallery-carousel here. The "IMAGES / Gallery"
   header and the .gallery-grid mosaic thumbnails below it remain
   visible — the mosaic thumbs still open the same lightbox. */
@media (max-width: 768px) {
  .gallery-section .gallery-carousel {
    display: none;
  }
}


/* ==================================================
   OUR FLEET — EMPTY STATE
   Shown by the slider-filter JS when no yachts match.
   ================================================== */
.browse-yachts .yachts-empty {
  width: 100%;
}

.browse-yachts .yachts-empty__inner {
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed rgba(10, 29, 58, 0.18);
  border-radius: 14px;
  background: #fafafa;
}

.browse-yachts .yachts-empty__icon {
  color: rgba(10, 29, 58, 0.35);
  margin-bottom: 16px;
}

.browse-yachts .yachts-empty__title {
  font-family: 'Cabinet Grotesk', 'Manrope', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 8px;
}

.browse-yachts .yachts-empty__copy {
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  color: rgba(10, 29, 58, 0.6);
  margin: 0;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) {
  .browse-yachts .yachts-empty__inner {
    padding: 40px 16px;
  }
}

/* ==================================================
   SEE DETAILS — SIMILAR BOATS
   White-bg variant of the existing yacht-card pattern
   ================================================== */

.similar-boats {
  background: var(--section-alt);
  padding: 80px 0 90px;
}

.similar-boats__header {
  text-align: center;
  margin-bottom: 50px;
}

.similar-boats__header .section-eyebrow {
  display: block;
  margin-bottom: 8px;
}

/* Image wrapper — gives the bare <img> in similar-boats consistent
   rounded corners, aspect ratio and object-fit, without affecting
   the slider-based yacht-card on /our-fleet. */
.similar-boats__media {
  border-radius: 14px;
  overflow: hidden;
  display: block;
  background: #f4f5f7;
}

.similar-boats__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

/* Light-theme overrides for yacht-card (originally designed for navy bg) */
.similar-boats .yacht-name {
  color: var(--navy-900);
}

.similar-boats .yacht-name span {
  color: rgba(10, 29, 58, 0.5);
}

.similar-boats .yacht-price {
  color: rgba(10, 29, 58, 0.65);
}

.similar-boats .yacht-price strong {
  color: var(--navy-900);
}

.similar-boats .pax-count {
  color: rgba(10, 29, 58, 0.5);
}

.similar-boats .btn-see-details {
  border-color: rgba(10, 29, 58, 0.22);
  color: var(--navy-900);
  /* Override the global pill radius — the similar-boats screenshot uses
     a softly-rounded rectangle. Scoped so /our-fleet keeps its pill. */
  border-radius: 6px;
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 20px;
}

.similar-boats .btn-see-details:hover {
  border-color: var(--gold-500);
  color: var(--gold-500);
  background: rgba(201, 169, 97, 0.05);
}

.similar-boats .view-all {
  color: var(--navy-900);
  border-bottom-color: rgba(10, 29, 58, 0.2);
}

.similar-boats .view-all:hover {
  color: var(--gold-500);
  border-bottom-color: var(--gold-500);
}

.similar-boats .view-all-wrap {
  margin-top: 40px;
}

@media (max-width: 768px) {
  .similar-boats {
    padding: 60px 0 70px;
  }

  .similar-boats__header {
    margin-bottom: 36px;
  }
}


/* ==================================================
   HERO DETAIL — TEXT VARIANTS
   Left-align hero-title / hero-sub when used inside
   .hero-content--detail (e.g. our-fleet, about, etc.)
   ================================================== */
.hero-content--detail .hero-title {
  margin: 0 0 20px;
  max-width: 900px;
  text-align: left;
}

.hero-content--detail .hero-sub {
  margin: 0 0 44px;
  max-width: 1100px;
  text-align: left;
}

/* Mobile override — must come AFTER the two rules above (which have the same
   specificity) so source order picks these on screens ≤768px. */
@media (max-width: 768px) {
  .hero-content--detail .hero-title {
    text-align: center;
    font-size: 40px;
    line-height: 1.1;
    margin: 0 0 20px;
  }

  .hero-content--detail .hero-sub {
    text-align: center;
    margin: 0 0 36px;
  }
}


/* ==================================================
   BROWSE YACHTS — LIGHT VARIANT (fleet listing page)
   White background, dark text, gold sliders, light cards
   ================================================== */

.browse-yachts--light {
  background: #fff;
}

.browse-yachts--light .browse-heading {
  color: var(--navy-900);
}

.browse-yachts--light .browse-copy {
  color: rgba(10, 29, 58, 0.7);
}

.browse-yachts--light .payments-label {
  color: rgba(10, 29, 58, 0.55);
  margin-bottom: 10px;
}

/* Yacht cards on white bg — light theme overrides */
.browse-yachts--light .yacht-name {
  color: var(--navy-900);
}

.browse-yachts--light .yacht-name span {
  color: rgba(10, 29, 58, 0.5);
}

.browse-yachts--light .yacht-price {
  color: rgba(10, 29, 58, 0.65);
}

.browse-yachts--light .yacht-price strong {
  color: var(--navy-900);
}

.browse-yachts--light .pax-count {
  color: rgba(10, 29, 58, 0.5);
}

.browse-yachts--light .btn-see-details {
  border-color: rgba(10, 29, 58, 0.22);
  color: var(--navy-900);
}

.browse-yachts--light .btn-see-details:hover {
  border-color: var(--gold-500);
  color: var(--gold-500);
  background: rgba(201, 169, 97, 0.05);
}

/* Two-up range slider row */
.range-row {
  display: flex;
  align-items: center;
  gap: 56px;
  margin: 30px 0 50px;
  padding: 18px 0;
}

.range-group {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 0;
}

.range-label {
  color: rgba(10, 29, 58, 0.7);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  white-space: nowrap;
}

.range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  /* Front layer: only the thumb is visible; the track is drawn by
     .slider-wrap::before so the tick lines can sit between them. */
  position: relative;
  z-index: 3;
  background: transparent;
  outline: none;
  border-radius: 2px;
  cursor: pointer;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--navy-900);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(10, 29, 58, 0.3);
}

.range-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--navy-900);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(10, 29, 58, 0.3);
}

.range-value {
  color: var(--navy-900);
  font-size: 15px;
  font-weight: 600;
  font-family: 'Cabinet Grotesk', sans-serif;
  flex-shrink: 0;
  min-width: 64px;
  text-align: right;
}

@media (max-width: 768px) {
  .range-row {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    margin: 20px 0 36px;
  }

  /* Stack the label + value on top, slider full-width below
     (matches the .budget-row mobile layout on the homepage). */
  .range-group {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label value"
      "slider slider";
    column-gap: 14px;
    row-gap: 8px;
    align-items: center;
  }

  .range-group .range-label {
    grid-area: label;
  }

  .range-group .slider-wrap {
    grid-area: slider;
  }

  .range-group .range-value {
    grid-area: value;
    min-width: auto;
  }
}


/* ==================================================
   TRANSPORTATION FLEET — vehicle card grid
   ================================================== */

.transport-fleet {
  background: #fff;
  padding: 70px 0 90px;
}

.transport-fleet__header {
  margin-bottom: 50px;
}

.transport-fleet__copy {
  color: rgba(10, 29, 58, 0.7);
  font-size: 14px;
  line-height: 1.65;
  font-weight: 300;
  max-width: 720px;
  margin: 18px 0 0;
}

/* Vehicle card */
.transport-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
}

.transport-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  margin-bottom: 18px;
  background: #e8e2d4;
}

.transport-card__title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 12px;
  letter-spacing: -0.2px;
}

.transport-card__desc {
  color: rgba(10, 29, 58, 0.65);
  font-size: 13px;
  line-height: 1.65;
  margin: 0 0 22px;
  /* Pushes the button to the bottom of the card so all CTAs align across rows */
  flex: 1 1 auto;
}

/* Inquire Now button */
.btn-inquire {
  align-self: center;
  border: 1px solid rgba(10, 29, 58, 0.25);
  color: var(--navy-900);
  background: transparent;
  padding: 11px 36px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 2px;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}

.btn-inquire:hover {
  border-color: var(--gold-500);
  color: var(--gold-500);
  background: rgba(201, 169, 97, 0.05);
}

@media (max-width: 768px) {
  .transport-fleet {
    padding: 50px 0 60px;
  }

  .transport-fleet__header {
    margin-bottom: 32px;
  }

  /* Bump heading on mobile (scoped to this section only) */
  .transport-fleet__header .section-heading {
    font-size: 36px;
    line-height: 1.1;
  }

  /* Right-align "Inquire Now" at the bottom of each card (was centered on desktop) */
  .transport-card .btn-inquire {
    align-self: flex-end;
  }
}


/* ==================================================
   USE CASES — checklist row pattern
   ================================================== */

.use-cases {
  background: var(--section-alt);
  padding: 80px 0 100px;
}

.use-cases__header {
  /* uses .section-eyebrow + .section-heading — no extra rules needed */
}

.use-cases__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.use-case-item {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid rgba(10, 29, 58, 0.08);
  border-radius: 4px;
  padding: 16px 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy-900);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.use-case-item:hover {
  border-color: rgba(201, 169, 97, 0.4);
  transform: translateX(2px);
}

.use-case-check {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1.5px solid var(--gold-500);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gold-500);
}

.use-case-check svg {
  width: 16px;
  height: 16px;
  display: block;
}


/* ==================================================
   CTA BANNER — TRANSPORT VARIANT (different bg + 2 buttons)
   ================================================== */

.cta-banner--transport {
  background: #fff;
}

/* Mobile: keep white — image removed. */
@media (max-width: 768px) {
  .cta-banner--transport {
    background: #fff;
  }
}

/* .cta-banner--water-toys inherits the base off-white tint
   so the three toys subsections alternate W → O → W → O cleanly. */

/* 2-button row inside any cta-banner */
.cta-banner__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.cta-banner__actions .corporate-cta,
.cta-banner__actions .btn-outline-light-custom {
  letter-spacing: 1.8px;
}

/* CTA banner is now white — override the white-outline button so it reads on light bg. */
.cta-banner .btn-outline-light-custom {
  color: var(--navy-900);
  border-color: rgba(10, 29, 58, 0.45);
}
.cta-banner .btn-outline-light-custom:hover {
  background: rgba(10, 29, 58, 0.05);
  border-color: var(--navy-900);
  color: var(--navy-900);
}

/* When the banner has a 2-button action row, widen the content area so
   both buttons stay on a single line on desktop. The narrower text
   max-widths inside (.cta-copy, .cta-subcopy) keep readability intact. */
.cta-banner-content:has(.cta-banner__actions) {
  max-width: 760px;
}

/* Responsive */
@media (max-width: 768px) {
  .use-cases {
    padding: 60px 0 70px;
  }

  .use-cases__header {
    margin-bottom: 24px;
  }

  .use-case-item {
    padding: 14px 18px;
    gap: 14px;
  }

  .cta-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-banner__actions .corporate-cta,
  .cta-banner__actions .btn-outline-light-custom {
    justify-content: center;
    width: 100%;
  }
}


/* ==================================================
   PRIVATE CHEF — SECTION 1: OUR APPROACH
   ================================================== */

.our-approach {
  background: #fff;
  padding: 80px 0 100px;
}

.our-approach__copy {
  /* Constrain so it sits on the cream area, but wider than before */
  max-width: 880px;
}

.our-approach__copy .section-heading {
  margin-bottom: 22px;
  max-width: 720px;
}

.lead-copy {
  color: rgba(10, 29, 58, 0.7);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 300;
  max-width: 560px;
  margin: 0 0 28px;
}

.bullet-list {
  list-style: disc;
  padding-left: 22px;
  margin: 0;
  max-width: 580px;
}

.bullet-list li {
  color: rgba(10, 29, 58, 0.75);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 8px;
}

.bullet-list li::marker {
  color: var(--gold-500);
}

/* Widen lead-copy + bullet-list specifically inside our-approach */
.our-approach__copy .lead-copy {
  max-width: 780px;
}

.our-approach__copy .bullet-list {
  max-width: 820px;
}


/* ==================================================
   PRIVATE CHEF — SECTION 2: WHAT WE CAN ARRANGE
   ================================================== */

.arrange-section {
  background: var(--section-alt);
  padding: 80px 0 100px;
}

.arrange-section__header {
  text-align: center;
  margin-bottom: 50px;
}

.arrange-section__header .section-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: rgba(10, 29, 58, 0.6);
}

.arrange-section__header .section-heading {
  color: var(--navy-900);
}

.arrange-card {
  background: #fff;
  border: 1px solid rgba(10, 29, 58, 0.1);
  border-radius: 14px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.arrange-card:hover {
  border-color: rgba(201, 169, 97, 0.5);
  box-shadow: 0 10px 30px rgba(10, 29, 58, 0.08);
  transform: translateY(-3px);
}

.arrange-card__img {
  width: 100%;
  aspect-ratio: 12 / 5; /* Cinematic 2.4:1 — shorter than the previous 16:9 */
  object-fit: cover;
  display: block;
}

.arrange-card__img--wide {
  aspect-ratio: 3 / 1; /* Extra-wide letterbox for the bottom-row larger cards */
}

.arrange-card__body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px 26px;
  flex: 1;
}

.arrange-card__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid rgba(10, 29, 58, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-900);
}

.arrange-card__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.arrange-card__title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 8px;
  letter-spacing: -0.2px;
}

.arrange-card__desc {
  color: rgba(10, 29, 58, 0.6);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}


/* ==================================================
   PRIVATE CHEF — SECTION 3: OUR PROMISE
   ================================================== */

.our-promise {
  background: #fff;
  padding: 90px 0 100px;
  position: relative;
  overflow: hidden;
}

.our-promise .container {
  position: relative;
  z-index: 1;
}

.our-promise .section-heading {
  margin-bottom: 22px;
  max-width: 520px;
}

.our-promise .btn-gold--lg {
  margin-top: 14px;
}

.principles__lead {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: rgba(10, 29, 58, 0.55);
  font-weight: 600;
  margin: 0 0 26px;
  text-transform: uppercase;
}

.principle-item {
  padding: 18px 0;
  border-top: 1px solid rgba(10, 29, 58, 0.08);
}

.principle-item:first-of-type {
  border-top: none;
  padding-top: 0;
}

.principle-item__title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-500);
  margin: 0 0 8px;
  letter-spacing: -0.1px;
}

.principle-item p {
  color: rgba(10, 29, 58, 0.7);
  font-size: 13.5px;
  line-height: 1.65;
  margin: 0;
}


/* ==================================================
   PRIVATE CHEF — SECTION 4: BENEFITS
   ================================================== */

.benefits-section {
  background: var(--section-alt);
  padding: 80px 0 100px;
}

.benefits-section .section-heading {
  margin-bottom: 18px;
  max-width: 460px;
}

.numbered-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.numbered-list__item {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 22px 4px;
  border-top: 1px solid rgba(10, 29, 58, 0.1);
}

.numbered-list__item:last-child {
  border-bottom: 1px solid rgba(10, 29, 58, 0.1);
}

.numbered-list__num {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 36px;
  font-weight: 400;
  color: rgba(201, 169, 97, 0.55);
  letter-spacing: -1px;
  flex-shrink: 0;
  min-width: 56px;
  line-height: 1;
}

.numbered-list__text {
  color: var(--navy-900);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}


/* ==================================================
   PRIVATE CHEF — SECTION 5: RESERVE CTA (chef variant)
   ================================================== */

.cta-banner--chef {
  background: #fff;
}

/* Mobile: keep white — image removed. */
@media (max-width: 768px) {
  .cta-banner--chef {
    background: #fff;
  }
}

.cta-banner__concierge {
  margin: 28px auto 24px;
  max-width: 520px;
  text-align: center;
}

.concierge-name {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 4px;
}

.concierge-availability {
  color: #4b5a70;
  font-size: 13px;
  margin: 0 0 12px;
}

.concierge-tagline {
  color: var(--gold-500);
  font-size: 11px;
  letter-spacing: 3px;
  font-weight: 600;
  margin: 0;
}


/* ==================================================
   PRIVATE CHEF — RESPONSIVE
   ================================================== */

@media (max-width: 992px) {
  .our-approach {
    /* Keep flat white on tablet/mobile — image and cream gradient removed. */
    background: #fff;
    padding-top: 60px;
  }

  .our-approach__copy {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  /* Other chef sections — full padding shorthand for mobile */
  .arrange-section,
  .our-promise,
  .benefits-section {
    padding: 60px 0 70px;
  }

  /* our-approach: keep the 280px top padding from the 992px rule so the
     text sits BELOW the chef photo banner. Slightly increased on mobile
     for stronger visual prominence of the food image banner. */
  .our-approach {
    padding-top: 300px;
    padding-bottom: 70px;
  }

  /* Bump heading on mobile (scoped to this section only) */
  .our-approach__copy .section-heading {
    font-size: 32px;
    line-height: 1.15;
  }

  .arrange-section__header {
    margin-bottom: 32px;
  }

  .arrange-card__body {
    padding: 18px 18px 22px;
    gap: 14px;
  }

  .principle-item p {
    font-size: 13px;
  }

  .numbered-list__item {
    gap: 18px;
    padding: 18px 2px;
  }

  .numbered-list__num {
    font-size: 30px;
    min-width: 44px;
  }

  .cta-banner__concierge {
    margin: 22px auto 20px;
  }

  /* Hide the CALL NOW button inside the Our Promise section on mobile */
  .our-promise .btn-gold--lg {
    display: none;
  }
}

/* Global container padding on mobile — gives every section that uses .container
   a consistent ~20px breathing room from the screen edge (Bootstrap default is 12px). */
@media (max-width: 768px) {
  .container,
  .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* ==================================================
   SECTION: CONTACT FORM CARD
   ================================================== */
.contact-form-section {
  padding: 80px 0 100px;
  background: #ffffff;
}

.contact-card {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: 14px;
  padding: 56px 64px;
  box-shadow: 0 6px 24px rgba(10, 29, 58, 0.04);
  overflow: hidden;
}

/* Faint Charter Heaven watermark on the right.
   Using the existing logo SVG. Swap for a logo-mark variant if available. */
.contact-card::after {
  content: "";
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: 460px;
  height: 460px;
  background-image: url('../img/logo.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.contact-card > * {
  position: relative;
  z-index: 1;
}

/* ---------- Top row: heading + phone CTA ---------- */
.contact-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

.contact-card__heading {
  flex: 1;
  min-width: 0;
}

.contact-card__title {
  margin-top: 4px;
  margin-bottom: 14px;
}

.contact-card__copy {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #5b6577;
  margin: 0;
  max-width: 640px;
}

.contact-card__copy--form {
  margin-top: 8px;
  margin-bottom: 28px;
}

/* Gold gradient phone pill (single-line variant of the call-btn) */
.contact-phone-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
      #a88437 0%,
      #c9a961 20%,
      #e5cc7f 42%,
      #f0dc96 52%,
      #d4b872 68%,
      #b2913f 85%,
      #8a6d2c 100%);
  border: 1px solid #8a6d2c;
  border-radius: 4px;
  padding: 16px 32px;
  color: #1a1a1a;
  text-decoration: none;
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(201, 169, 97, 0.3);
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
  flex-shrink: 0;
}

.contact-phone-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(201, 169, 97, 0.45);
  filter: brightness(1.08);
  color: #1a1a1a;
}

/* ---------- Dividers ---------- */
.contact-card__divider {
  border: 0;
  border-top: 1px solid #e6e8ec;
  margin: 36px 0 32px;
  opacity: 1;
}

.contact-card__divider--form {
  margin: 36px 0 28px;
}

/* ---------- Form block ---------- */
.contact-card__form-block .section-eyebrow {
  margin-bottom: 6px;
}

.contact-form__input,
.contact-form__select {
  width: 100%;
  background: #f4f1ea;
  border: 1px solid #ebe6d8;
  border-radius: 4px;
  padding: 16px 20px;
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  color: var(--navy-900);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.contact-form__input::placeholder {
  color: #8b94a3;
  opacity: 1;
}

.contact-form__input:focus,
.contact-form__select:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18);
  background: #ffffff;
}

/* Custom chevron on selects */
.contact-form__select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230a1d3a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-color: #f4f1ea;
  padding-right: 50px;
  cursor: pointer;
}

.contact-form__select:focus {
  background-color: #ffffff;
}

/* Make first option (placeholder) look muted */
.contact-form__select option[value=""][disabled] {
  color: #8b94a3;
}

/* ---------- Submit row ---------- */
.contact-form__submit-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.contact-form__submit {
  padding: 16px 56px;
  font-size: 13px;
  letter-spacing: 2px;
  border: none;
}

.contact-form__consent {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: #5b6577;
  cursor: pointer;
}

.contact-form__consent input[type="checkbox"] {
  margin-top: 3px;
  width: 14px;
  height: 14px;
  accent-color: var(--gold-500);
  flex-shrink: 0;
  cursor: pointer;
}

.contact-form__consent a {
  color: #5b6577;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-form__consent a:hover {
  color: var(--navy-900);
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .contact-card {
    padding: 48px 40px;
  }

  .contact-card::after {
    width: 360px;
    height: 360px;
    right: -80px;
    opacity: 0.04;
  }
}

@media (max-width: 768px) {
  .contact-form-section {
    padding: 56px 0 72px;
  }

  .contact-card {
    padding: 36px 24px;
    border-radius: 10px;
  }

  .contact-card::after {
    display: none;
  }

  .contact-card__top {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }

  /* Center the top heading block (eyebrow + title + copy) on mobile */
  .contact-card__heading {
    text-align: center;
  }

  /* Bump "Contact details" heading on mobile (scoped) */
  .contact-card__title {
    font-size: 32px;
    line-height: 1.15;
  }

  .contact-phone-cta {
    width: 100%;
    font-size: 16px;
    padding: 14px 20px;
  }

  .contact-card__divider {
    margin: 28px 0 24px;
  }

  /* Keep Full name + Phone side-by-side on mobile (override Bootstrap's
     col-md-6 stacking). Email/Guests/Start time still stack full-width. */
  .contact-form .row > div:nth-child(1),
  .contact-form .row > div:nth-child(2) {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .contact-form__submit {
    width: 100%;
    padding: 16px 24px;
  }
}


/* ==================================================
   MULTIDAYS — SECTION 2: ESCAPE FURTHER IN STYLE
   Split layout: navy copy on the left, yacht visual on the right.
   ================================================== */
.escape-section {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.escape-section__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 380px;
}

/* ---------- Left column: copy ----------
   Left padding tracks Bootstrap's .container left edge so this copy lines
   up with the destinations heading in the next section on desktop. The
   mobile media queries below override this with their own padding. */
.escape-section__copy {
  position: relative;
  z-index: 2;
  padding: 80px 40px 80px clamp(80px, calc((100vw - 1320px) / 2 + 12px), 50vw);
  max-width: 1000px;
}

.escape-section__eyebrow {
  color: var(--gold-500);
  margin-bottom: 18px;
}

.escape-section__title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--navy-900);
  margin: 0 0 22px;
}

/* Gold gradient accent on the highlighted word ("Style"),
   matching the brand's btn-gold / call-btn gradient family. */
.escape-section__title-accent {
  background: linear-gradient(135deg,
      #e5cc7f 0%,
      #f0dc96 50%,
      #d4b872 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.escape-section__lede {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 300;
  color: #4b5a70;
  margin: 0;
  max-width: 560px;
}

/* ---------- Right column: yacht deck visual ----------
   Hidden — the image now lives on the whole .escape-section as
   a continuous backdrop, so this column is no longer needed. */
  .escape-section__visual {
    display: none;
  }

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  /* Mobile: keep flat white — image and navy background removed. */
  .escape-section {
    background-color: #fff;
    background-image: none;
  }

  .escape-section__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  /* padding-top no longer needs to clear a background image. */
  .escape-section__copy {
    padding: 60px 24px 56px;
    max-width: 100%;
  }

  .escape-section__lede {
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .escape-section__copy {
    padding: 50px 20px 40px;
  }

  .escape-section__lede {
    font-size: 14px;
  }
}


/* ==================================================
   MULTIDAYS — SECTION 3: POPULAR MULTI-DAY DESTINATIONS
   ================================================== */
.destinations-section {
  background: var(--section-alt);
  padding: 90px 0 70px;
}

.destinations-section__header {
  margin-bottom: 50px;
}

.destinations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.destination-card {
  display: flex;
  flex-direction: column;
}

.destination-card__image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 26px;
}

.destination-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

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

.destination-card__title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 12px;
  letter-spacing: -0.2px;
}

.destination-card__copy {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: #5a6b80;
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .destinations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
}

@media (max-width: 600px) {
  .destinations-section {
    padding: 64px 0 50px;
  }

  .destinations-section__header {
    margin-bottom: 36px;
  }

  .destinations-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .destination-card__image {
    margin-bottom: 20px;
  }
}


/* ==================================================
   MULTIDAYS — SECTION 4: WHAT'S INCLUDED IN THE EXPERIENCE
   ================================================== */
.experience-section {
  background: #fff;
  padding: 30px 0 100px;
}

.experience-section__header {
  margin-bottom: 50px;
}

.experience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.experience-card {
  background: #ffffff;
  border: 1px solid #ebe6d8;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.experience-card:hover {
  transform: translateY(-3px);
  border-color: #dcd4bd;
  box-shadow: 0 8px 22px rgba(10, 29, 58, 0.08);
}

.experience-card__image {
  aspect-ratio: 5 / 2;
  overflow: hidden;
}

.experience-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.experience-card__body {
  padding: 18px 20px 22px;
}

.experience-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.experience-card__icon {
  width: 34px;
  height: 34px;
  border: 1px solid #e6e2d3;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-900);
  flex-shrink: 0;
  background: #fbf9f3;
}

.experience-card__icon svg {
  width: 18px;
  height: 18px;
}

.experience-card__title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.1px;
}

.experience-card__copy {
  font-family: 'Manrope', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: #5a6b80;
  margin: 0;
}

/* Controls (arrows + dots) hidden on desktop, revealed on mobile via media query below */
.experience-controls {
  display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .experience-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .experience-section {
    padding: 24px 0 60px;
  }

  .experience-section__header {
    margin-bottom: 32px;
  }

  /* Bump heading on mobile (scoped to this section only) */
  .experience-section__header .section-heading {
    font-size: 32px;
    line-height: 1.15;
  }

  /* Turn the grid into a horizontal scroll carousel
     (one card visible at a time, snap-aligned, hidden scrollbar) */
  .experience-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: none;
    gap: 16px;
    margin: 0;
    padding: 4px 0 10px;
    scrollbar-width: none;
  }

  .experience-grid::-webkit-scrollbar {
    display: none;
  }

  .experience-grid > .experience-card {
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: start;
  }

  .experience-card__image {
    aspect-ratio: 16 / 6;
  }

  /* Reveal carousel controls on mobile */
  .experience-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 0;
    margin-top: 6px;
  }

  .experience-arrow {
    background: transparent;
    border: none;
    color: var(--navy-900);
    padding: 6px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
  }

  .experience-arrow svg {
    width: 26px;
    height: 26px;
  }

  .experience-arrow:disabled {
    opacity: 0.25;
    cursor: default;
  }

  .experience-dots {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .experience-dot {
    width: 22px;
    height: 2px;
    background: rgba(10, 29, 58, 0.2);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease;
  }

  .experience-dot.active {
    background: var(--navy-900);
  }
}


/* ==================================================
   EVENTS — SECTION 2: EVENTS DESIGNED AROUND YOUR OCCASION
   2x2 grid of landscape-image cards on the cream bg.
   ================================================== */
.occasions-section {
  background: #fff;
  padding: 90px 0 100px;
}

.occasions-section__header {
  margin-bottom: 56px;
  max-width: 760px;
}

.occasions-section__intro {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #5a6b80;
  margin: 16px 0 0;
  max-width: 640px;
}

.occasions-grid {
  display: grid;
  /* 5-column track lets us alternate narrow (span 2) and wide (span 3) cards
     across rows for an asymmetric magazine-style layout. */
  grid-template-columns: repeat(5, 1fr);
  gap: 60px 36px;
}

/* Alternating widths, repeating every 4 cards:
   Row 1: narrow | wide
   Row 2: wide   | narrow  (and so on) */
.occasions-grid .occasion-card:nth-child(4n + 1) { grid-column: span 2; }
.occasions-grid .occasion-card:nth-child(4n + 2) { grid-column: span 3; }
.occasions-grid .occasion-card:nth-child(4n + 3) { grid-column: span 3; }
.occasions-grid .occasion-card:nth-child(4n + 4) { grid-column: span 2; }

.occasion-card {
  display: flex;
  flex-direction: column;
}

.occasion-card__image {
  /* Fixed responsive height (instead of aspect-ratio) so all images are the
     same height even though the cards have different widths. object-fit: cover
     on the inner img handles the cropping. */
  height: clamp(360px, 32vw, 480px);
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 24px;
}

.occasion-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.occasion-card:hover .occasion-card__image img {
  transform: scale(1.04);
}

.occasion-card__title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 10px;
  letter-spacing: -0.2px;
  line-height: 1.25;
}

.occasion-card__copy {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: #5a6b80;
  margin: 0;
  max-width: 460px;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .occasions-section {
    padding: 64px 0 72px;
  }

  .occasions-section__header {
    margin-bottom: 36px;
  }

  .occasions-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Reset the asymmetric column spans when the grid collapses. */
  .occasions-grid .occasion-card:nth-child(4n + 1),
  .occasions-grid .occasion-card:nth-child(4n + 2),
  .occasions-grid .occasion-card:nth-child(4n + 3),
  .occasions-grid .occasion-card:nth-child(4n + 4) {
    grid-column: auto;
  }

  .occasion-card__image {
    /* Less aggressive crop on mobile: 4:5 aspect ratio (instead of 2:3) and a
       max-height cap so the image reads as zoomed-out / less cropped. Cards
       stack in single column on mobile so uniform height isn't a concern
       (unlike desktop's asymmetric grid). */
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 380px;
    margin-bottom: 18px;
  }

  .occasion-card__title {
    font-size: 20px;
  }
}


/* ==================================================
   WATER TOYS — SECTION 2: ADVENTURE WATER TOYS
   3-column grid of toy cards (image + title + price + description).
   ================================================== */
.toys-section {
  background: #fff;
  padding: 90px 0 100px;
}

/* Middle toys-section uses the alt tint so the three subsections alternate. */
.toys-section--group {
  background: var(--section-alt);
}

/* When two .toys-section sit back-to-back (e.g. Adventure + Group Fun on
   water-toys.html), trim the second's top padding so they read as related
   subcategories rather than two visually disconnected sections. */
.toys-section + .toys-section {
  padding-top: 30px;
}

.toys-section__header {
  margin-bottom: 50px;
  max-width: 760px;
}

.toys-section__intro {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #5a6b80;
  margin: 16px 0 0;
  max-width: 600px;
}

.toys-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 36px;
}

.toy-card {
  display: flex;
  flex-direction: column;
}

.toy-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 18px;
}

.toy-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.toy-card:hover .toy-card__image img {
  transform: scale(1.04);
}

.toy-card__title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 4px;
  letter-spacing: -0.2px;
  line-height: 1.25;
}

/* Price line — sits tight under the title, lighter and a touch smaller
   than the description below. */
.toy-card__price {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #7a8499;
  margin: 0 0 14px;
  line-height: 1.4;
}

.toy-card__copy {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #5a6b80;
  margin: 0;
}

/* Carousel controls (arrows + dots) — hidden on desktop, revealed on mobile */
.toys-controls {
  display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .toys-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 28px;
  }
}

@media (max-width: 768px) {
  .toys-section {
    padding: 64px 0 60px;
  }

  .toys-section + .toys-section {
    padding-top: 28px;
  }

  .toys-section__header {
    margin-bottom: 32px;
  }

  /* Bump heading on mobile (scoped to this section only) */
  .toys-section__header .section-heading {
    font-size: 32px;
    line-height: 1.15;
  }

  /* Convert grid to horizontal scroll carousel
     (one card visible at a time, snap-aligned, hidden scrollbar) */
  .toys-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: none;
    gap: 16px;
    margin: 0;
    padding: 4px 0 10px;
    scrollbar-width: none;
  }

  .toys-grid::-webkit-scrollbar {
    display: none;
  }

  .toys-grid > .toy-card {
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: start;
  }

  /* Reveal carousel controls on mobile */
  .toys-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 0;
    margin-top: 6px;
  }

  .toys-arrow {
    background: transparent;
    border: none;
    color: var(--navy-900);
    padding: 6px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
  }

  .toys-arrow svg {
    width: 26px;
    height: 26px;
  }

  .toys-arrow:disabled {
    opacity: 0.25;
    cursor: default;
  }

  .toys-dots {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .toys-dot {
    width: 22px;
    height: 2px;
    background: rgba(10, 29, 58, 0.2);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease;
  }

  .toys-dot.active {
    background: var(--navy-900);
  }
}


/* ==================================================
   ADD-ON DROPDOWNS (header + footer)
   ================================================== */

/* ====== HEADER NAV DROPDOWN ====== */
.nav-dropdown {
  position: relative;
  display: inline-block;
  margin: 0 18px;
}

.nav-dropdown .nav-dropdown-toggle {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.nav-dropdown-caret {
  transition: transform 0.25s ease;
}

.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown.open .nav-dropdown-toggle {
  color: var(--gold-400);
}

.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown.open .nav-dropdown-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 14px;
  transform: translateX(-50%) translateY(-6px);
  min-width: 180px;
  background: rgba(10, 29, 58, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 6px;
  padding: 8px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  z-index: 1100;
}

/* Invisible bridge so hover doesn't break crossing the gap */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item {
  display: block;
  padding: 10px 18px;
  color: var(--text-light);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-dropdown-item:hover {
  color: var(--gold-400);
  background-color: rgba(201, 169, 97, 0.08);
}

/* ====== FOOTER DROPDOWN (opens upward) ====== */
.footer-dropdown {
  position: relative;
  display: inline-block;
}

.footer-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  font-family: inherit;
  transition: color 0.25s ease;
}

.footer-dropdown-toggle:hover,
.footer-dropdown.open .footer-dropdown-toggle {
  color: var(--gold-400);
}

.footer-dropdown-caret {
  transition: transform 0.25s ease;
}

.footer-dropdown:hover .footer-dropdown-caret,
.footer-dropdown.open .footer-dropdown-caret {
  transform: rotate(180deg);
}

.footer-dropdown-menu {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 12px;
  transform: translateX(-50%) translateY(6px);
  min-width: 170px;
  background: rgba(10, 29, 58, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 6px;
  padding: 8px 0;
  box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  z-index: 100;
}

.footer-dropdown-menu::before {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.footer-dropdown:hover .footer-dropdown-menu,
.footer-dropdown.open .footer-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.footer-dropdown-item {
  display: block;
  padding: 9px 18px;
  color: #fff;
  text-decoration: none;
  font-size: 13.5px;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.footer-dropdown-item:hover {
  color: var(--gold-400);
  background-color: rgba(201, 169, 97, 0.08);
}


/* ==================================================
   MOBILE MENU PANEL
   ================================================== */

/* Hidden on desktop */
.mobile-menu {
  display: none;
}

@media (max-width: 768px) {
  .mobile-menu {
    display: block;
    order: 4; /* appears below brand row + call-btn row */
    width: 100%;
    background: rgba(10, 29, 58, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    border-top: 1px solid rgba(201, 169, 97, 0.18);
  }

  .top-nav.menu-open .mobile-menu {
    max-height: 700px;
  }

  /* Force solid nav background while menu is open so links read clearly
     even when the user is at the top of the page (nav otherwise transparent) */
  .top-nav.menu-open {
    background-color: rgba(10, 29, 58, 0.98);
  }

  .mobile-menu-link,
  .mobile-menu-sublink {
    display: block;
    padding: 16px 22px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: color 0.2s ease, background-color 0.2s ease;
  }

  .mobile-menu-link:hover,
  .mobile-menu-link:active,
  .mobile-menu-sublink:hover,
  .mobile-menu-sublink:active {
    color: var(--gold-400);
    background-color: rgba(201, 169, 97, 0.06);
  }

  /* Add on group label + nested sublinks */
  .mobile-menu-group {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .mobile-menu-group-label {
    display: block;
    padding: 14px 22px 6px;
    color: var(--gold-400);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
  }

  .mobile-menu-sublink {
    padding: 12px 22px 12px 38px;
    font-size: 15px;
    border-bottom: none;
  }

  /* Hamburger animates to X when menu is open */
  .top-nav.menu-open .mobile-menu-btn span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .top-nav.menu-open .mobile-menu-btn span:nth-child(2) {
    opacity: 0;
  }
  .top-nav.menu-open .mobile-menu-btn span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* ==================================================
   SEE DETAILS — GALLERY LIGHTBOX
   ================================================== */

.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8, 16, 34, 0.94);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.gallery-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.gallery-lightbox__stage {
  position: relative;
  max-width: 92vw;
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-lightbox__img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gallery-lightbox__img.is-loaded {
  opacity: 1;
  transform: scale(1);
}

.gallery-lightbox__close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.gallery-lightbox__close:hover {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: #1a1a1a;
  transform: scale(1.06);
}

.gallery-lightbox__counter {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  letter-spacing: 2.5px;
  font-weight: 600;
  z-index: 4;
}

.gallery-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.gallery-lightbox__nav svg {
  width: 24px;
  height: 24px;
}

.gallery-lightbox__nav:hover {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: #1a1a1a;
  transform: translateY(-50%) scale(1.06);
}

.gallery-lightbox__nav--prev { left: 28px; }
.gallery-lightbox__nav--next { right: 28px; }

/* Make slides + grid thumbs feel clickable */
.gallery-carousel__slide,
.gallery-grid__item:not(.gallery-grid__item--more) {
  cursor: zoom-in;
}

@media (max-width: 768px) {
  .gallery-lightbox__close {
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
  }
  .gallery-lightbox__counter {
    top: 22px;
    font-size: 11px;
  }
  .gallery-lightbox__nav {
    width: 44px;
    height: 44px;
  }
  .gallery-lightbox__nav svg {
    width: 20px;
    height: 20px;
  }
  .gallery-lightbox__nav--prev { left: 10px; }
  .gallery-lightbox__nav--next { right: 10px; }
}

/* ==================================================
   FLEET POP-OUT MODAL — opens from the homepage
   "View all boats" button. Mirrors the our-fleet
   listing visually (light theme, two sliders, full
   yacht grid) inside a fixed-position overlay.
   ================================================== */
.fleet-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: stretch;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.fleet-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.fleet-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 34, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Lock background scroll while the modal is open */
body.fleet-modal-open {
  overflow: hidden;
}

.fleet-modal__panel {
  position: relative;
  width: min(1280px, 100%);
  max-height: 100vh;
  margin: 0 auto;
  background: #f5f2ec;
  color: var(--navy-900);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.35s ease;
}

.fleet-modal.is-open .fleet-modal__panel {
  transform: translateY(0);
}

.fleet-modal__header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 36px 20px;
  border-bottom: 1px solid rgba(10, 29, 58, 0.08);
}

.fleet-modal__title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 700;
  color: var(--navy-900);
  margin: 6px 0 0;
  line-height: 1.15;
  letter-spacing: -0.4px;
}

.fleet-modal__title .text-gold {
  color: var(--gold-500);
}

.fleet-modal__close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(10, 29, 58, 0.15);
  background: #fff;
  color: var(--navy-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.fleet-modal__close:hover {
  background: var(--navy-900);
  color: #fff;
  border-color: var(--navy-900);
  transform: scale(1.05);
}

.fleet-modal__close:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
}

.fleet-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 36px 40px;
  /* Remove default WebKit scrollbar styling jitter */
  -webkit-overflow-scrolling: touch;
}

/* Inside the modal, switch the yacht-card text styles to the LIGHT
   variant used on /our-fleet (dark text on light bg). The yacht-card
   markup is identical in both grids — only the surrounding context
   changes. */
.fleet-modal .yacht-name {
  color: var(--navy-900);
}
.fleet-modal .yacht-name span {
  color: rgba(10, 29, 58, 0.6);
}
.fleet-modal .yacht-price {
  color: rgba(10, 29, 58, 0.7);
}
.fleet-modal .yacht-price strong {
  color: var(--navy-900);
}
.fleet-modal .pax-count {
  color: rgba(10, 29, 58, 0.7);
}
.fleet-modal .btn-see-details {
  color: var(--navy-900);
  border-color: rgba(10, 29, 58, 0.35);
}
.fleet-modal .btn-see-details:hover {
  background: var(--navy-900);
  color: #fff;
  border-color: var(--navy-900);
}

/* Slider track fill (CSS variable populated by JS via --fill). The
   .slider-wrap::before back-track rule paints the gold gradient using
   var(--fill); .range-label and .range-value are already dark navy by
   default, so they look correct on light backgrounds without overrides. */

@media (max-width: 768px) {
  .fleet-modal__panel {
    max-height: 100vh;
  }
  .fleet-modal__header {
    padding: 18px 20px 14px;
  }
  .fleet-modal__body {
    padding: 18px 20px 30px;
  }
  .fleet-modal__close {
    width: 40px;
    height: 40px;
  }
}

/* ==================================================
   UNIFIED IMAGE CORNERS
   --------------------------------------------------
   Applies a consistent 14px border-radius to all
   content/card images sitewide so every image has
   the same rounded-edge look. Matches the radius
   already used by .yacht-card__media (14px).

   Targets both wrappers (with overflow: hidden so
   the inner <img> is clipped) and direct <img>
   elements where there is no wrapper.

   Skipped on purpose:
   - .ceo-bar__avatar img       (circular avatar)
   - .logo-item img             (brand SVG logos)
   ================================================== */
.exp-card img,
.transport-card__img,
.gallery-carousel__slide,
.gallery-grid__item,
.destination-card__image,
.occasion-card__image,
.toy-card__image,
.yacht-card__media,
.yacht-card__slider-wrap,
.similar-boats__media {
  border-radius: 14px;
  overflow: hidden;
}

/* ==================================================
   STICKY BOOKING BAR — see-details.html only.
   Fixed-bottom CTA that mirrors the booking card's "STARTING FROM"
   price and the currently selected duration. Slides up once the user
   has scrolled past the booking card's primary BOOK NOW button.
   Stays below modal backdrops (z-index 9999) and the nav.
   ================================================== */
.sticky-book-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 24px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: var(--navy-900);
  color: #fff;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
  transform: translateY(110%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.sticky-book-bar.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

.sticky-book-bar__price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex-shrink: 0;
}

.sticky-book-bar__price {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.sticky-book-bar__hours {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.3px;
}

.sticky-book-bar__cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  max-width: 480px;
}

.sticky-book-bar__btn {
  width: 100%;
  background: var(--gold-500);
  color: var(--navy-900);
  border: 0;
  border-radius: 999px;
  padding: 12px 28px;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.05s ease;
}

.sticky-book-bar__btn:hover {
  filter: brightness(1.08);
}

.sticky-book-bar__btn:active {
  transform: translateY(1px);
}

.sticky-book-bar__note {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.2px;
}

@media (max-width: 600px) {
  .sticky-book-bar {
    padding: 10px 14px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    gap: 12px;
  }

  .sticky-book-bar__price {
    font-size: 18px;
  }

  .sticky-book-bar__hours {
    font-size: 11px;
  }

  .sticky-book-bar__btn {
    padding: 11px 18px;
    font-size: 14px;
  }

  .sticky-book-bar__note {
    font-size: 10px;
  }
}