/* =========================================================
   VGA VACATION — DESIGN SYSTEM
   Brand palette extracted directly from the VGA logo:
   teal #0398AE / orange #F48D4A / cream #F1E6C8 / black #0A0A0A
   ========================================================= */

:root {
  /* Brand colors */
  --teal: #0398AE;
  --teal-dark: #027589;
  --teal-darker: #045566;
  --orange: #F48D4A;
  --orange-dark: #E07430;
  --cream: #F1E6C8;
  --cream-light: #FAF6EA;
  --ink: #10201F;
  --black: #0A0A0A;
  --white: #FFFFFF;

  /* Semantic tokens */
  --color-bg: var(--white);
  --color-bg-alt: var(--cream-light);
  --color-text: var(--ink);
  --color-text-muted: #4A5A58;
  --color-border: #E4DCC5;
  --color-accent: var(--orange);
  --color-accent-strong: var(--teal);

  /* Type */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;

  /* Layout */
  --container-max: 1200px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(10, 20, 20, 0.06);
  --shadow-md: 0 12px 32px rgba(10, 20, 20, 0.12);
  --shadow-lg: 0 24px 60px rgba(10, 20, 20, 0.18);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 var(--space-2); color: var(--ink); }
p { margin: 0 0 var(--space-2); }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

section { padding: var(--space-6) 0; }
@media (max-width: 640px) {
  section { padding: var(--space-5) 0; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: var(--space-2);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--orange);
  display: inline-block;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.lede { font-size: 1.15rem; color: var(--color-text-muted); max-width: 640px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--orange);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-outline {
  background: transparent;
  color: var(--teal-dark);
  border-color: var(--teal);
}
.btn-outline:hover { background: var(--teal); color: var(--white); transform: translateY(-2px); }

.btn-light {
  background: var(--white);
  color: var(--teal-darker);
}
.btn-light:hover { background: var(--cream); transform: translateY(-2px); }

.btn-block { width: 100%; }
.btn-sm { padding: 0.6rem 1.3rem; font-size: 0.85rem; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 234, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem var(--space-3);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
}
.nav-brand img { height: 52px; width: 52px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-links a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--teal-dark); }

.nav-cta { display: flex; align-items: center; gap: var(--space-2); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: 0.2s;
}

@media (max-width: 880px) {
  .nav-links {
    position: fixed;
    top: 74px;
    left: 0; right: 0;
    background: var(--cream-light);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
  }
  .nav-links.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-links a { width: 100%; padding: 12px 0; }
  .nav-links a::after { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: block; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  color: var(--white);
  overflow: hidden;
  background: linear-gradient(160deg, var(--teal-darker), var(--teal) 60%, var(--orange) 140%);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,26,31,0.55) 0%, rgba(4,26,31,0.25) 45%, rgba(4,26,31,0.75) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 720px; }
.hero .eyebrow { color: var(--cream); }
.hero .eyebrow::before { background: var(--orange); }
.hero h1 { color: var(--white); }
.hero .lede { color: rgba(255,255,255,0.9); }
.hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }

.hero-stats {
  position: relative;
  z-index: 2;
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}
.hero-stat strong { display: block; font-family: var(--font-display); font-size: 2rem; }
.hero-stat span { font-size: 0.85rem; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: var(--space-3); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.tour-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}
.tour-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.tour-card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.tour-card-media img, .tour-card-media .placeholder-art { width: 100%; height: 100%; object-fit: cover; }
.tour-card-tag {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--orange);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}
.tour-card-body { padding: var(--space-3); flex: 1; display: flex; flex-direction: column; }
.tour-card-body h3 { margin-bottom: 6px; }
.tour-card-meta {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  font-size: 0.82rem; color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.tour-card-meta span { display: flex; align-items: center; gap: 5px; }
.tour-card-body p { color: var(--color-text-muted); font-size: 0.95rem; flex: 1; }
.tour-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* Placeholder art block for pages missing real photography yet */
.placeholder-art {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, var(--teal), var(--teal) 18px, var(--teal-dark) 18px, var(--teal-dark) 36px);
  color: var(--cream-light);
  font-family: var(--font-display);
  font-weight: 700;
  text-align: center;
  padding: var(--space-3);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* ---------- Feature / icon rows ---------- */
.feature-row { display: flex; gap: var(--space-3); align-items: flex-start; }
.feature-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}

/* ---------- Bands ---------- */
.band-teal { background: var(--teal-darker); color: var(--white); }
.band-teal h2, .band-teal h3 { color: var(--white); }
.band-teal .eyebrow { color: var(--cream); }
.band-cream { background: var(--cream-light); }

/* ---------- Testimonials ---------- */
.testimonial {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.testimonial-quote { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: var(--space-2); }
.testimonial-name { font-weight: 700; }
.testimonial-stars { color: var(--orange); letter-spacing: 2px; margin-bottom: var(--space-1); }

/* ---------- Program detail page ---------- */
.detail-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  background: var(--teal-darker);
  overflow: hidden;
}
.detail-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.65; }
.detail-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(4,26,31,0.9) 0%, rgba(4,26,31,0.15) 60%);
}
.detail-hero-content { position: relative; z-index: 2; padding-bottom: var(--space-4); max-width: 780px; }
.detail-hero h1, .detail-hero h2, .detail-hero h3 { color: var(--white); }
.breadcrumb { font-size: 0.85rem; color: rgba(255,255,255,0.8); margin-bottom: var(--space-2); }
.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.detail-hero-meta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); font-size: 0.9rem; }
.detail-hero-meta span { display: flex; align-items: center; gap: 6px; }

.detail-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 960px) { .detail-layout { grid-template-columns: 1fr; } }

.detail-block { margin-bottom: var(--space-5); }
.detail-block h2 { margin-bottom: var(--space-2); }
.detail-block ul.checklist li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.detail-block ul.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 800; }
.detail-block ul.crosslist li { position: relative; padding-left: 28px; margin-bottom: 10px; color: var(--color-text-muted); }
.detail-block ul.crosslist li::before { content: "✕"; position: absolute; left: 0; color: #C4674A; font-weight: 800; }
.detail-block ul.bullets li { position: relative; padding-left: 22px; margin-bottom: 10px; }
.detail-block ul.bullets li::before { content: "—"; position: absolute; left: 0; color: var(--orange); }

.two-col-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
@media (max-width: 560px) { .two-col-list { grid-template-columns: 1fr; } }

.option-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--white);
}
.option-card h4 { margin-bottom: 6px; font-family: var(--font-body); font-size: 1rem; font-weight: 800; }
.option-card p { margin: 0; color: var(--color-text-muted); font-size: 0.92rem; }

.itinerary-step { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.itinerary-time {
  flex-shrink: 0; width: 84px;
  font-weight: 800; color: var(--teal-dark);
  font-family: var(--font-display);
}
.itinerary-body h4 { margin: 0 0 4px; font-family: var(--font-body); font-size: 1rem; }
.itinerary-body p { margin: 0; color: var(--color-text-muted); font-size: 0.92rem; }

/* Sticky inquiry sidebar card */
.inquiry-card {
  position: sticky;
  top: 100px;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-md);
}
.inquiry-card h3 { margin-bottom: 4px; }
.inquiry-card .ota-list { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.ota-btn {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  font-weight: 700; font-size: 0.9rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ota-btn:hover { border-color: var(--teal); background: var(--cream-light); }
.ota-btn.ota-btn-pending { color: var(--color-text-muted); cursor: default; pointer-events: none; }
.ota-btn.ota-btn-pending:hover { border-color: var(--color-border); background: none; }
.ota-btn.ota-btn-pending span:last-child { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

.notice-box {
  background: #FFF6ED;
  border: 1px solid #F0D3B0;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: 0.88rem;
  color: #7A4A1E;
  margin-bottom: var(--space-3);
}
.notice-box strong { color: #5C3512; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-2); }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.85rem; font-weight: 700; }
.form-field input, .form-field select, .form-field textarea {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--white);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(3,152,174,0.15);
}
.form-note { font-size: 0.8rem; color: var(--color-text-muted); margin-top: var(--space-2); }
.form-success {
  display: none;
  background: #EAF6EC; border: 1px solid #BFE3C4; color: #24632E;
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  margin-top: var(--space-2); font-weight: 600;
}
.form-error {
  display: none;
  background: #FBEAEA; border: 1px solid #E3BFBF; color: #7A2323;
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  margin-top: var(--space-2); font-weight: 600;
}

/* ---------- Contact channels ---------- */
.channel-card {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--white);
}
.channel-icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal); color: var(--white); font-size: 1.3rem; flex-shrink: 0;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.85); padding: var(--space-6) 0 var(--space-3); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-2); }
.footer-brand img { height: 46px; width: 46px; }
.footer-brand span { font-family: var(--font-display); font-size: 1.1rem; color: var(--white); font-weight: 700; }
.footer-col h4 { color: var(--white); font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-2); }
.footer-col a, .footer-col p { display: block; color: rgba(255,255,255,0.75); font-size: 0.92rem; margin-bottom: 10px; }
.footer-col a:hover { color: var(--orange); }
.footer-social { display: flex; gap: 12px; margin-top: var(--space-2); }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
}
.footer-social a:hover { background: var(--orange); border-color: var(--orange); }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.82rem; color: rgba(255,255,255,0.55);
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.section-head { max-width: 640px; margin: 0 auto var(--space-5); text-align: center; }
.badge-pill {
  display: inline-block;
  background: var(--cream);
  color: var(--teal-darker);
  font-size: 0.78rem; font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
}
.divider { height: 1px; background: var(--color-border); border: none; margin: var(--space-5) 0; }

/* Sticky mobile CTA */
.mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: var(--white);
  border-top: 1px solid var(--color-border);
  padding: 10px var(--space-3);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.08);
}
@media (max-width: 760px) {
  .mobile-sticky-cta.active { display: flex; gap: 10px; }
}

/* =========================================================
   BRIGHT LAGOON — landing page redesign (v2)
   Moving off the logo's teal/orange for the marketing pages,
   toward a photo-led ocean palette. Scoped under .theme-lagoon
   so pages not yet redesigned (Tours, About, Contact, tour
   detail pages) keep the original brand-color system untouched.
   ========================================================= */
:root {
  --lagoon-turq: #0EA8B8;
  --lagoon-turq-dark: #0B8794;
  --lagoon-turq-light: #E4F5F6;
  --lagoon-navy: #12262B;
  --lagoon-navy-soft: #35494E;
  --lagoon-sand: #FBF4E6;
  --lagoon-sand-deep: #F0E4CC;
  --lagoon-white: #FFFFFF;
}

.theme-lagoon { background: var(--lagoon-sand); }

/* Header / footer restyled for the lagoon theme.
   The header floats transparently over the hero photo (no separate colored
   bar) until the visitor scrolls past it, at which point it gains the
   solid sand background back so it stays legible over page content. */
.theme-lagoon .site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
}
.theme-lagoon .site-header.scrolled {
  background: rgba(251, 244, 230, 0.92);
  border-bottom: 1px solid var(--lagoon-sand-deep);
  backdrop-filter: blur(10px);
}
.theme-lagoon .site-header .nav-brand,
.theme-lagoon .site-header .nav-links a { color: var(--lagoon-white); }
.theme-lagoon .site-header .nav-toggle span { background: var(--lagoon-white); }
.theme-lagoon .site-header.scrolled .nav-brand,
.theme-lagoon .site-header.scrolled .nav-links a { color: var(--lagoon-navy); }
.theme-lagoon .site-header.scrolled .nav-toggle span { background: var(--lagoon-navy); }
.theme-lagoon .nav-links a.active,
.theme-lagoon .nav-links a:hover { color: var(--lagoon-turq); }
.theme-lagoon .site-header.scrolled .nav-links a.active,
.theme-lagoon .site-header.scrolled .nav-links a:hover { color: var(--lagoon-turq-dark); }
.theme-lagoon .nav-links a::after { background: var(--lagoon-turq); }
/* The open mobile dropdown is always a solid sand panel, scrolled or not,
   so its links need to stay dark regardless of the header's own state.
   Matches the header-scoped selector's specificity so it wins inside the
   breakpoint without needing !important. */
@media (max-width: 880px) {
  .theme-lagoon .site-header .nav-links a { color: var(--lagoon-navy); }
}
.theme-lagoon .btn-primary {
  background: var(--lagoon-turq);
  color: var(--lagoon-white);
}
.theme-lagoon .btn-primary:hover { background: var(--lagoon-turq-dark); }
.theme-lagoon .eyebrow { color: var(--lagoon-turq-dark); }
.theme-lagoon .eyebrow::before { background: var(--lagoon-turq); }
.theme-lagoon .site-footer { background: var(--lagoon-navy); }
.theme-lagoon .footer-col a:hover { color: var(--lagoon-turq); }
.theme-lagoon .footer-social a:hover { background: var(--lagoon-turq); border-color: var(--lagoon-turq); }

/* Inner pages (About, tour details) reuse .detail-hero as a banner under
   the same fixed/transparent header as the homepage hero, so it needs the
   lagoon navy wash instead of v1's teal-darker, and the bullet marker
   should pick up the turquoise accent instead of v1's orange. */
.theme-lagoon .detail-hero { background: var(--lagoon-navy); align-items: center; }
.theme-lagoon .detail-hero::after {
  background: linear-gradient(0deg, rgba(18,38,43,0.92) 0%, rgba(18,38,43,0.2) 60%);
}
/* The fixed header floats over this banner (see .theme-lagoon .site-header
   above), so centering the content block on the cross axis alone would let
   it drift up under the logo/hamburger. Push it down past the header first,
   then let the centering share the remaining space evenly top and bottom. */
.theme-lagoon .detail-hero-content { padding-top: var(--space-7); padding-bottom: var(--space-4); }
@media (max-width: 760px) {
  .theme-lagoon .detail-hero-content { padding-top: var(--space-6); }
}
.theme-lagoon .detail-block ul.bullets li::before { color: var(--lagoon-turq); }
.theme-lagoon .detail-block ul.checklist li::before { color: var(--lagoon-turq); }
.theme-lagoon .itinerary-time { color: var(--lagoon-turq-dark); }
.theme-lagoon .ota-btn:hover { border-color: var(--lagoon-turq); background: var(--lagoon-sand); }
/* Tours listing page (tours.html) card tag + badge pill */
.theme-lagoon .tour-card-tag { background: var(--lagoon-turq); }
.theme-lagoon .badge-pill { background: var(--lagoon-turq-light); color: var(--lagoon-turq-dark); }

/* Tour detail page photo gallery — reuses the [data-carousel] track/arrow
   component from the homepage tour carousel, just swapped to plain photo
   tiles (no card chrome) since these are gallery shots, not tour cards. */
.gallery-carousel-item {
  width: calc((100% - (2 * 1.5rem)) / 3);
  min-width: 240px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.gallery-carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 960px) {
  .gallery-carousel-item { width: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 640px) {
  .gallery-carousel-item { width: 82%; }
}

/* ---------- Hero v2 ---------- */
.hero-v2 {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-v2-bg { position: absolute; inset: 0; overflow: hidden; }
/* Hero photo slideshow: slides are stacked and cross-fade via opacity.
   Auto-advances (see main.js) and can also be swiped or jumped to with
   the dots below; pauses on hover/touch so it never fights the visitor. */
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 55%;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-slide.active { opacity: 1; z-index: 1; }
/* Desktop and mobile each rotate through their own separate photo set
   (see main.js, which fills in data-bg only for the current device's
   slides). This is a no-JS fallback only: below 760px, force the mobile
   set's first slide visible instead of the desktop set's, so a visitor
   without JS still sees a photo that was actually fetched for them. */
@media (max-width: 760px) {
  .hero-slide.slide-desktop.active { opacity: 0; }
  .hero-slide.mobile-default-active { opacity: 1; z-index: 1; }
}
.hero-v2-overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(18,38,43,0.58) 0%, rgba(18,38,43,0.18) 42%, rgba(18,38,43,0.8) 100%);
}
.hero-slide-dots {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 3;
  display: flex; gap: 9px;
}
.hero-slide-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.4); border: none; padding: 0; cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero-slide-dot:hover { background: rgba(255,255,255,0.7); }
.hero-slide-dot.active { background: var(--lagoon-white); transform: scale(1.35); }
/* Only show the dot row that matches the current device's photo set. */
.hero-slide-dot.dot-mobile { display: none; }
@media (max-width: 760px) {
  .hero-slide-dot.dot-desktop { display: none; }
  .hero-slide-dot.dot-mobile { display: block; }
}
.hero-v2-inner { position: relative; z-index: 2; width: 100%; }
.hero-v2-top {
  display: flex; justify-content: flex-end; align-items: flex-start;
  gap: var(--space-4); flex-wrap: wrap;
}
.hero-v2-left { max-width: 440px; color: var(--lagoon-white); }
.hero-v2-left .tag { font-size: 1.1rem; font-weight: 600; margin: 0 0 12px; text-wrap: balance; }
.hero-v2-left p { font-size: 0.98rem; line-height: 1.65; opacity: 0.92; margin: 0 0 24px; }
.hero-v2-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-v2-actions .btn-outline-light {
  border: 1.5px solid var(--lagoon-white); color: var(--lagoon-white); background: transparent;
}
.hero-v2-actions .btn-outline-light:hover { background: rgba(255,255,255,0.12); }
.hero-v2-stats {
  display: flex; gap: var(--space-5); flex-wrap: wrap;
  margin-top: var(--space-6);
}
.hero-v2-stat strong {
  display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--lagoon-white);
}
.hero-v2-stat span {
  font-size: 0.76rem; color: rgba(255,255,255,0.82);
  text-transform: uppercase; letter-spacing: 0.07em;
}
@media (max-width: 760px) {
  .hero-v2-top { flex-direction: column; }
  .hero-v2-stats { gap: var(--space-3) var(--space-4); margin-top: var(--space-5); }
}

/* ---------- Carousels (tours + testimonials) ---------- */
.carousel-section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap;
}
.carousel-section-head h2 { margin-bottom: 4px; }
.carousel-controls { display: flex; align-items: center; gap: 10px; }
.carousel-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--lagoon-navy);
  background: var(--lagoon-white);
  display: flex; align-items: center; justify-content: center;
  color: var(--lagoon-navy);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.carousel-arrow:hover { background: var(--lagoon-turq); border-color: var(--lagoon-turq); color: var(--lagoon-white); }
.carousel-arrow:disabled { opacity: 0.35; pointer-events: none; }

.carousel-track {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; flex-shrink: 0; }

/* Tours carousel cards: ~3 visible on desktop, peek on mobile */
.tour-carousel-card {
  width: calc((100% - (2 * 1.5rem)) / 3);
  min-width: 280px;
  background: var(--lagoon-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--lagoon-sand-deep);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
@media (max-width: 960px) {
  .tour-carousel-card { width: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 640px) {
  .tour-carousel-card { width: 82%; }
}
.tour-carousel-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.tour-carousel-media img { width: 100%; height: 100%; object-fit: cover; }
.tour-carousel-tag {
  position: absolute; top: 14px; left: 14px;
  background: var(--lagoon-navy); color: var(--lagoon-white);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--radius-pill);
}
.tour-carousel-body { padding: var(--space-3); flex: 1; display: flex; flex-direction: column; }
.tour-carousel-body h3 { font-size: 1.1rem; margin-bottom: 8px; }
.tour-carousel-body p { color: var(--color-text-muted); font-size: 0.92rem; flex: 1; margin-bottom: var(--space-2); }
.tour-carousel-body .btn { align-self: flex-start; }
.tour-carousel-body .btn-primary { background: var(--lagoon-turq); }
.tour-carousel-body .btn-primary:hover { background: var(--lagoon-turq-dark); }

/* Testimonial carousel cards */
.testimonial-carousel-card {
  width: calc((100% - (2 * 1.5rem)) / 3);
  min-width: 280px;
  background: var(--lagoon-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--lagoon-sand-deep);
  padding: var(--space-3);
  display: flex; flex-direction: column;
}
@media (max-width: 960px) {
  .testimonial-carousel-card { width: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 640px) {
  .testimonial-carousel-card { width: 85%; }
}
.testimonial-stars-row { color: var(--lagoon-turq-dark); letter-spacing: 2px; margin-bottom: 10px; font-size: 0.95rem; }
.testimonial-carousel-card p.quote {
  font-family: var(--font-display); font-size: 1rem; line-height: 1.5;
  margin: 0 0 var(--space-2); flex: 1; color: var(--lagoon-navy);
}
.testimonial-carousel-foot { display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-2); border-top: 1px solid var(--lagoon-sand-deep); }
.testimonial-carousel-foot .name { font-weight: 700; font-size: 0.9rem; }
.testimonial-carousel-foot .meta { font-size: 0.78rem; color: var(--color-text-muted); }

/* Final CTA band, lagoon theme */
.band-lagoon {
  background: var(--lagoon-navy);
  color: var(--lagoon-white);
}
.band-lagoon h2 { color: var(--lagoon-white); }
.band-lagoon p { color: rgba(255,255,255,0.82); }
.band-lagoon .btn-primary { background: var(--lagoon-turq); }
.band-lagoon .btn-primary:hover { background: var(--lagoon-turq-dark); }

/* Spam-honeypot field for the contact form — hidden from sighted users,
   present in the DOM so Netlify's bot-field trap still works. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}