/* ============================================================
   Sariel — Private Transfers & Excursions
   Purpose: full stylesheet for the landing page. Mobile-first.
   Design tokens: Caribbean luxury — deep ocean teal, sand, soft gold.
   Type: Fraunces (display) / Archivo (body) / IBM Plex Mono (ticket data).
   Signature element: boarding-pass route tickets & calculator result.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Palette */
  --abyss:  #06262E;   /* deep ocean — headers, dark sections */
  --ocean:  #0B5D6B;   /* petrol teal — brand primary */
  --lagoon: #17A398;   /* turquoise — accents, links */
  --sand:   #F3EDE2;   /* warm sand — alternating section bg */
  --shell:  #FCFAF5;   /* near-white — page bg */
  --gold:   #C2933E;   /* soft gold — stars, prices, eyebrows on dark */
  --ink:    #23383E;   /* body text on light */
  --ink-soft: #5A6E73; /* secondary text on light */

  /* Motion (Emil Kowalski: strong custom curves, ease-out for enter) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Archivo", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;

  /* Layout */
  --container: 72rem;
  --radius: 18px;
  --header-h: 4.25rem;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--shell);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 420;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 em, h1 em { font-style: italic; color: var(--ocean); }

p { margin: 0; }

a { color: inherit; }

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

section { scroll-margin-top: var(--header-h); }

.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- 3. Utilities ---------- */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.container-narrow { max-width: 46rem; }

.section { padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.section-sand { background: var(--sand); }
.section-abyss { background: var(--abyss); color: var(--shell); }

/* Sparse text-only band (cruises.html) — the generic .section padding is
   tuned for sections with a grid/content area below the header; this one
   has only the heading + lead, so it needs much less breathing room. */
.guarantee-band { padding-block: clamp(2rem, 4vw, 3rem); }
.guarantee-band .section-head { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lagoon);
  margin-bottom: 1rem;
}

.section-head {
  max-width: 40rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-lead {
  margin-top: 1.1rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 34rem;
}

.section-head-light h2 { color: var(--shell); }
.section-head-light h2 em { color: var(--gold); }

.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  z-index: 100;
  background: var(--abyss);
  color: var(--shell);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  transition: top 160ms var(--ease-out);
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--lagoon);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.7rem;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--abyss);
  color: var(--shell);
  box-shadow: 0 10px 24px -12px rgba(6, 38, 46, 0.55);
}

/* Gradient sheen sweeps across primary buttons on hover */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(252, 250, 245, 0.16) 50%, transparent 65%);
  transform: translateX(-100%);
  pointer-events: none;
}

.btn-ghost {
  color: var(--shell);
  border: 1px solid rgba(252, 250, 245, 0.55);
  background: rgba(6, 38, 46, 0.18);
  backdrop-filter: blur(6px);
}

/* Secondary action on light surfaces (e.g. cart panel) — .btn-ghost is
   tuned for dark hero overlays and reads as invisible here. */
.btn-outline {
  color: var(--abyss);
  background: transparent;
  border: 1.5px solid rgba(6, 38, 46, 0.35);
}

@media (hover: hover) and (pointer: fine) {
  .btn-outline:hover { background: rgba(6, 38, 46, 0.06); border-color: var(--abyss); }
}

.btn-lg { padding: 1.05rem 2.1rem; font-size: 1rem; }
.btn-sm { padding: 0.6rem 1.2rem; font-size: 0.85rem; }
.btn-block { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: var(--ocean);
    box-shadow: 0 14px 30px -12px rgba(11, 93, 107, 0.6);
  }
  .btn-primary:hover::after {
    transform: translateX(100%);
    transition: transform 600ms var(--ease-out);
  }
  .btn-ghost:hover { background: rgba(6, 38, 46, 0.38); border-color: var(--shell); }
  .text-link:hover::after { transform: scaleX(1); transform-origin: left; }
}

.text-link {
  display: inline-block;
  position: relative;
  margin-top: auto;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ocean);
  text-decoration: none;
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--lagoon);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 260ms var(--ease-out);
}

/* ---------- 5. Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background-color 260ms ease, box-shadow 260ms ease;
}

.site-header.is-solid {
  background: rgba(252, 250, 245, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(6, 38, 46, 0.08);
}

.header-inner {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}

.brand-mark { width: 2.1rem; height: 2.1rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.brand-name {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  color: var(--shell);
  display: flex;
  flex-direction: column;
  line-height: 1;
  transition: color 260ms ease;
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 0.3rem;
  opacity: 0.75;
}

.site-header.is-solid .brand-name { color: var(--abyss); }

.site-nav {
  display: none;
  gap: 1.8rem;
}

.site-nav a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--shell);
  opacity: 0.9;
  transition: color 260ms ease, opacity 160ms ease;
}

.site-header.is-solid .site-nav a { color: var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { opacity: 1; color: var(--lagoon); }
}

.header-actions { display: flex; align-items: center; gap: 0.6rem; }

/* Language switch: compact EN/ES segmented control, always visible */
.lang-switch {
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
  border: 1.5px solid rgba(252, 250, 245, 0.4);
  transition: border-color 260ms ease;
}

.site-header.is-solid .lang-switch { border-color: rgba(6, 38, 46, 0.16); }

.lang-btn {
  padding: 0.4rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(252, 250, 245, 0.8);
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}

.site-header.is-solid .lang-btn { color: var(--ink-soft); }

.lang-btn.is-active {
  background: var(--gold);
  color: var(--abyss);
}

.site-header.is-solid .lang-btn.is-active { background: var(--abyss); color: var(--shell); }

.lang-btn:active { transform: scale(0.94); }

@media (hover: hover) and (pointer: fine) {
  .lang-btn:not(.is-active):hover { color: var(--shell); }
  .site-header.is-solid .lang-btn:not(.is-active):hover { color: var(--ink); }
}

@media (max-width: 420px) {
  .lang-btn { padding: 0.4rem 0.45rem; }
}

/* Cart toggle: icon button + small count badge */
.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  color: var(--shell);
  transition: background-color 200ms ease, color 260ms ease, transform 160ms var(--ease-out);
}

.site-header.is-solid .cart-btn { color: var(--abyss); }

.cart-btn svg { width: 1.25rem; height: 1.25rem; }

.cart-btn:active { transform: scale(0.92); }

@media (hover: hover) and (pointer: fine) {
  .cart-btn:hover { background: rgba(252, 250, 245, 0.14); }
  .site-header.is-solid .cart-btn:hover { background: rgba(6, 38, 46, 0.08); }
}

.cart-badge {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--abyss);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}

/* Below this width, header-actions gets crowded (lang switch + cart +
   Book Now + hamburger) — drop the standalone Book Now button; the
   hamburger menu has its own. */
@media (max-width: 460px) {
  .header-book-btn { display: none; }
}

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.6rem;
  height: 2.6rem;
  align-items: center;
  border-radius: 10px;
}
.nav-toggle span {
  width: 1.25rem;
  height: 2px;
  border-radius: 2px;
  background: var(--shell);
  transition: transform 200ms var(--ease-out), background-color 260ms ease;
}
.site-header.is-solid .nav-toggle span { background: var(--abyss); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Closed menu uses display:none — a merely-invisible (opacity/visibility)
   layer under the fixed header kept painting a ghost stripe over content
   in Chrome. `allow-discrete` + @starting-style keep the open animation. */
.mobile-nav {
  display: none;
  gap: 0.4rem;
  padding: 0.75rem 1.25rem 1.4rem;
  background: var(--shell);
  box-shadow: 0 18px 30px -18px rgba(6, 38, 46, 0.35);
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 220ms var(--ease-out),
    transform 220ms var(--ease-out),
    display 220ms allow-discrete;
}
.mobile-nav.is-open {
  display: grid;
  opacity: 1;
  transform: translateY(0);
}
@starting-style {
  .mobile-nav.is-open {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.mobile-nav a:not(.btn) {
  text-decoration: none;
  font-weight: 500;
  padding: 0.65rem 0.25rem;
  color: var(--ink);
}
.mobile-nav .btn { margin-top: 0.5rem; }

@media (min-width: 900px) {
  .site-nav { display: flex; }
  .nav-toggle, .mobile-nav { display: none; }
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--abyss);
}

.hero-bg {
  position: absolute;
  inset: -12% 0;               /* extra bleed for parallax travel */
  will-change: transform;
}

.hero-bg img, .hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: hero-zoom 18s var(--ease-out) forwards;
}

@keyframes hero-zoom {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(6, 38, 46, 0.42) 0%, rgba(6, 38, 46, 0.05) 38%, rgba(6, 38, 46, 0.72) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
  padding-block: 7rem 5.5rem;
  color: var(--shell);
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(252, 250, 245, 0.85);
  margin-bottom: 1.4rem;
}

.hero-title {
  font-size: clamp(2.7rem, 8vw, 5.4rem);
  font-weight: 420;
  color: var(--shell);
  max-width: 16ch;
}

.hero-title em { color: #EFD9A7; font-weight: 340; }

.hero-sub {
  margin-top: 1.5rem;
  max-width: 34rem;
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: rgba(252, 250, 245, 0.88);
}

.hero-cta { margin-top: 2.2rem; }
.hero-cta > span { display: inline-flex; flex-wrap: wrap; gap: 0.9rem; }

.hero-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin: 2.6rem 0 0;
  padding: 0;
  font-size: 0.88rem;
  color: rgba(252, 250, 245, 0.85);
}
.hero-trust strong { font-weight: 700; color: var(--shell); }
.hero-trust .star {
  width: 0.85rem; height: 0.85rem;
  fill: var(--gold);
  margin: 0 0.35rem 0 0.25rem;
  vertical-align: -1px;
  display: inline-block;
}
.hero-trust li { display: inline-flex; align-items: center; }

/* Masked line reveal: each hero line slides up from its own clip box */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span, .reveal-line > em { display: inline-block; }
.reveal-line > span {
  display: block;
  transform: translateY(110%);
  animation: line-up 900ms var(--ease-out) forwards;
}
.hero-eyebrow.reveal-line > span { animation-delay: 100ms; }
.hero-title .reveal-line:nth-child(1) > span { animation-delay: 220ms; }
.hero-title .reveal-line:nth-child(2) > span { animation-delay: 320ms; }
.hero-title .reveal-line:nth-child(3) > span { animation-delay: 420ms; }
.hero-sub.reveal-line > span { animation-delay: 600ms; }
.hero-cta.reveal-line > span { animation-delay: 720ms; }
.hero-trust.reveal-line { animation: fade-in 800ms ease 950ms both; }

@keyframes line-up { to { transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 1;
  width: 1.6rem; height: 2.6rem;
  border: 1.5px solid rgba(252, 250, 245, 0.6);
  border-radius: 999px;
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
}
.hero-scroll-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--shell);
  animation: scroll-dot 1.8s var(--ease-in-out) infinite;
}
@keyframes scroll-dot {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(0.9rem); opacity: 0.2; }
  61% { opacity: 0; }
}

/* ---------- 7. Services ---------- */
.service-grid {
  display: grid;
  gap: 1.5rem;
}

.service-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px -18px rgba(6, 38, 46, 0.25);
  transition: transform 300ms var(--ease-out), box-shadow 300ms ease;
}

.service-media {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.service-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 44px -20px rgba(6, 38, 46, 0.35);
  }
  .service-card:hover .service-media img { transform: scale(1.05); }
}

.service-body {
  padding: 1.5rem 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}

.service-body h3 { font-size: 1.45rem; }
.service-body p { color: var(--ink-soft); font-size: 0.95rem; }

.service-body p.service-meta {
  font-size: 0.85rem;
  color: var(--ink);
}
.service-meta .mono { color: var(--lagoon); margin-right: 0.4rem; }
.service-meta strong { font-weight: 700; }

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

/* --- Route tickets (signature element) --- */
.routes { margin-top: clamp(2.5rem, 5vw, 4rem); }

.routes-label {
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.ticket-rail {
  display: grid;
  gap: 1rem;
}

@media (min-width: 760px) {
  .ticket-rail { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .ticket-rail { grid-template-columns: repeat(4, 1fr); }
}

.ticket {
  background: var(--abyss);
  color: var(--shell);
  border-radius: 14px;
  padding: 1.2rem 1.3rem 1.05rem;
  position: relative;
  overflow: hidden;
  transition: transform 300ms var(--ease-out), box-shadow 300ms ease;
}

/* Perforation between route and stub */
.ticket-stub {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1.5px dashed rgba(252, 250, 245, 0.28);
  position: relative;
}
.ticket-stub::before, .ticket-stub::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--shell);
}
/* Notches sit centered on the ticket's outer edges (padding 1.3rem + radius 7px) */
.ticket-stub::before { left: calc(-1.3rem - 7px); }
.ticket-stub::after { right: calc(-1.3rem - 7px); }

.ticket-route {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Capped at 34% each so the long Spanish place names (e.g. "Aeropuerto de
   Puerto Plata") can't squeeze .ticket-path down to a sliver — the van
   needs real room to travel the route. */
.ticket-point { display: flex; flex-direction: column; min-width: 0; flex: 0 1 34%; }
.ticket-point:last-child { text-align: right; align-items: flex-end; }

.ticket-code { font-size: 1.15rem; letter-spacing: 0.08em; color: var(--shell); }
.ticket-place {
  font-size: 0.72rem;
  color: rgba(252, 250, 245, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.ticket-path {
  flex: 1 1 auto;
  min-width: 64px;
  height: 14px;
  position: relative;
  border-bottom: 1.5px dashed rgba(252, 250, 245, 0.35);
}

/* Van glyph drives the dashed route on a continuous ambient loop — fades in
   at the pickup point, travels to the destination, fades out before the
   reset so the jump back to start is never seen. Each ticket starts its own
   loop at a different offset so the four cards don't move in lockstep. */
.ticket-van {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 22px; height: 13px;
  fill: var(--gold);
  opacity: 0;
  animation: ticket-van-drive 4.2s var(--ease-in-out) infinite;
}

.ticket:nth-child(1) .ticket-van { animation-delay: 0s; }
.ticket:nth-child(2) .ticket-van { animation-delay: 1.05s; }
.ticket:nth-child(3) .ticket-van { animation-delay: 2.1s; }
.ticket:nth-child(4) .ticket-van { animation-delay: 3.15s; }

@keyframes ticket-van-drive {
  0%   { left: 0; opacity: 0; }
  10%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { left: calc(100% - 22px); opacity: 0; }
}

@media (hover: hover) and (pointer: fine) {
  .ticket:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -18px rgba(6, 38, 46, 0.55);
  }
}

.ticket-time { color: rgba(252, 250, 245, 0.75); }
.ticket-price { font-size: 0.85rem; color: rgba(252, 250, 245, 0.75); }
.ticket-price strong { font-size: 1.05rem; font-weight: 700; color: var(--gold); }

.ticket-extra-note {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: rgba(252, 250, 245, 0.55);
}

.ticket-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.ticket-reserve, .ticket-book-direct {
  flex: 1 1 auto;
  padding: 0.55rem;
  border: 0;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}

.ticket-reserve {
  background: var(--gold);
  color: var(--abyss);
}

.ticket-book-direct {
  background: transparent;
  color: var(--shell);
  border: 1.5px solid rgba(252, 250, 245, 0.35);
}

.ticket-reserve:active, .ticket-book-direct:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  .ticket-reserve:hover { background: #D6A64A; }
  .ticket-book-direct:hover { background: rgba(252, 250, 245, 0.08); border-color: var(--shell); }
}

/* ---------- 7b. Full destination price list ---------- */
.price-list-grid {
  display: grid;
  gap: 0 2.5rem;
  background: #fff;
  border-radius: 18px;
  padding: 0.5rem clamp(1.2rem, 3vw, 2rem);
  box-shadow: 0 18px 34px -26px rgba(6, 38, 46, 0.35);
}

@media (min-width: 700px) {
  .price-list-grid { grid-template-columns: repeat(2, 1fr); }
}

.price-list-col { display: grid; }

.price-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(6, 38, 46, 0.1);
}
.price-list-col .price-item:last-child { border-bottom: 0; }

.price-item-name { color: var(--ink); }
.price-item-value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--lagoon);
  white-space: nowrap;
}

.price-list-note {
  margin-top: 1.2rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- 8. Calculator ---------- */
.calc-layout {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 900px) {
  .calc-layout { grid-template-columns: 1fr 1.1fr; gap: 3rem; }
}

/* Two columns at every width: pickup|destination share row 1, and the
   pax/luggage row spans the full grid so its own 2-col layout lines up. */
.calc-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 0.75rem;
  align-items: start;
}

.field { display: grid; gap: 0.45rem; align-content: start; }
.field[hidden] { display: none; }

.calc-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: start;
  grid-column: 1 / -1;
}

@media (min-width: 480px) {
  .calc-form { gap: 1.3rem; }
  .calc-form-row { gap: 1.3rem; }
}

/* Narrow phones: half-width controls need tighter type and chrome so option
   labels like "Puerto Plata Airport (POP)" stay readable. */
@media (max-width: 479px) {
  .calc-form .field label { font-size: 0.78rem; }
  .calc-form .field select,
  .calc-form .field input[type="number"] { font-size: 0.9rem; padding: 0.7rem 0.7rem; }
  .calc-form .field select { padding-right: 1.9rem; background-position: right 0.65rem center; }
  .calc-form .field-hint { font-size: 0.72rem; }
  .calc-form .stepper { grid-template-columns: 2.4rem 1fr 2.4rem; }
}

.field label {
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.field-hint {
  font-size: 0.78rem;
  color: rgba(6, 38, 46, 0.6);
  margin: 0;
}

.field select,
.field input[type="text"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="time"],
.field input[type="number"],
.field input[type="email"] {
  font: inherit;
  color: var(--ink);
  padding: 0.8rem 1rem;
  border-radius: 12px;
  border: 1.5px solid rgba(6, 38, 46, 0.16);
  background: #fff;
  width: 100%;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  appearance: none;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2323383E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}

.field select:focus, .field input:focus {
  outline: none;
  border-color: var(--lagoon);
  box-shadow: 0 0 0 3px rgba(23, 163, 152, 0.18);
}

.stepper {
  display: grid;
  grid-template-columns: 3rem 1fr 3rem;
  border: 1.5px solid rgba(6, 38, 46, 0.16);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.stepper input {
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.stepper-btn {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--ocean);
  background: var(--sand);
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.stepper-btn:active { transform: scale(0.94); }

@media (hover: hover) and (pointer: fine) {
  .stepper-btn:hover { background: #EAE0CD; }
}

/* --- Boarding pass result --- */
.boarding-pass {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 24px 50px -24px rgba(6, 38, 46, 0.4);
  display: grid;
  overflow: hidden;
  position: relative;
}

@media (min-width: 640px) {
  .boarding-pass { grid-template-columns: 1.6fr 2px 1fr; }
}

.bp-main { padding: 1.8rem 1.8rem 1.6rem; }

.bp-label {
  color: var(--ink-soft);
  margin-bottom: 1.2rem;
}

.bp-route {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.bp-point { display: flex; flex-direction: column; min-width: 0; }
.bp-point:last-child { align-items: flex-end; text-align: right; }

.bp-code {
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--abyss);
  line-height: 1;
}

.bp-place { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.3rem; }

.bp-path {
  flex: 1;
  position: relative;
  height: 16px;
  border-bottom: 1.5px dashed rgba(6, 38, 46, 0.3);
}

.bp-van {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 26px; height: 15px;
  transform: translateX(-50%);
  fill: var(--gold);
}

.bp-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem 1.2rem;
  margin: 0;
}

.bp-details dt { color: var(--ink-soft); margin-bottom: 0.15rem; }
.bp-details dd {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
}

.bp-note {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--ocean);
  background: rgba(23, 163, 152, 0.1);
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
}

/* Perforated divider with notches (vertical on desktop, horizontal on mobile) */
.bp-divider { position: relative; }

.bp-divider::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  border-left: 2px dashed rgba(6, 38, 46, 0.18);
}

.boarding-pass .bp-divider::after { content: none; }

@media (max-width: 639.98px) {
  .bp-divider { height: 2px; margin-inline: 1.4rem; }
  .bp-divider::before {
    inset: 50% 0 auto 0;
    border-left: 0;
    border-top: 2px dashed rgba(6, 38, 46, 0.18);
  }
}

.bp-stub {
  padding: 1.8rem;
  background: var(--sand);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8rem;
}

.bp-price {
  font-family: var(--font-display);
  color: var(--abyss);
  display: flex;
  align-items: baseline;
  line-height: 1;
}

.bp-currency { font-size: 1.2rem; margin-right: 0.2rem; color: var(--ink-soft); }

.bp-amount {
  font-size: clamp(3rem, 6vw, 3.8rem);
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  transition: filter 220ms ease, opacity 220ms ease;
}

/* Price "reprint" transition while ticking to a new value */
.bp-amount.is-updating { filter: blur(5px); opacity: 0.45; }

.bp-fineprint {
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align: center;
}

/* .bp-content wraps bp-main/bp-divider/bp-stub only so the trio can be
   hidden as one unit (see js/calculator.js) — display:contents keeps them
   direct grid children of .boarding-pass so its 3-column layout is
   unaffected by the extra wrapper. */
.bp-content { display: contents; }
.bp-content[hidden] { display: none; }

.bp-quote-cta {
  grid-column: 1 / -1;
  padding: 2.2rem 1.8rem;
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
}
.bp-quote-cta[hidden] { display: none; }

.bp-quote-text { color: var(--ink-soft); max-width: 26rem; }

/* Stacked (mobile) boarding pass: same information, tighter rhythm so the
   card doesn't run past the fold. Only spacing and type scale change. */
@media (max-width: 639.98px) {
  .bp-main { padding: 1.2rem 1.2rem 1.1rem; }
  .bp-label { margin-bottom: 0.75rem; }
  .bp-route { margin-bottom: 1rem; gap: 0.75rem; }
  .bp-code { font-size: 1.5rem; }
  .bp-place { font-size: 0.74rem; margin-top: 0.2rem; }
  .bp-details { gap: 0.6rem 1rem; }
  .bp-details dd { font-size: 0.86rem; }
  .bp-note { margin-top: 0.75rem; font-size: 0.78rem; }
  .bp-stub { padding: 1.1rem 1.2rem 1.3rem; gap: 0.6rem; }
  .bp-amount { font-size: 2.6rem; }
  .bp-stub .btn { padding: 0.7rem 1.2rem; font-size: 0.9rem; }
  .bp-fineprint { font-size: 0.72rem; }
}

/* ---------- 9. Excursions ---------- */
.excursions {
  background: var(--abyss);
  color: var(--shell);
  padding-block: clamp(4.5rem, 9vw, 7.5rem) 0;
}

.excursions .section-head {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.excursions .section-head .eyebrow { color: var(--gold); }
.excursions .section-head h2 { color: var(--shell); }
.excursions .section-head h2 em { color: var(--gold); }
.excursions .section-head .section-lead { color: rgba(252, 250, 245, 0.75); }
.why .section-head .section-lead { color: rgba(252, 250, 245, 0.75); }

.exc {
  display: grid;
  min-height: 18rem;
}

@media (min-width: 900px) {
  .exc { grid-template-columns: 1.15fr 1fr; }
  .exc-flip .exc-media { order: 2; }
  .exc-flip .exc-body { order: 1; }
}

.exc-media {
  margin: 0;
  overflow: hidden;
  position: relative;
  min-height: 14rem;
}

.exc-media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.exc-body {
  padding: clamp(0.75rem, 2vw, 4rem) clamp(1.25rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
}

.exc:nth-child(even) .exc-body { background: #082E37; }

.exc-body .eyebrow { color: var(--gold); margin-bottom: 0; }
.exc-body h3 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); color: var(--shell); }

.exc-desc { color: rgba(252, 250, 245, 0.8); max-width: 32rem; }

.exc-includes {
  list-style: none;
  padding: 0;
  margin: 0.3rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.2rem;
  max-width: 30rem;
}

.exc-includes li {
  font-size: 0.88rem;
  color: rgba(252, 250, 245, 0.85);
  padding-left: 1.4rem;
  position: relative;
}

.exc-includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--lagoon);
  font-weight: 700;
}

.exc-duration { color: rgba(252, 250, 245, 0.6); margin-top: 0.3rem; }

.exc-booking {
  margin-top: 1.2rem;
  display: grid;
  gap: 1rem;
  justify-items: start;
}

/* Cruise cards only: optional ship name + departure time inputs, stacked
   on narrow screens and side-by-side from 480px up. */
.cruise-fields {
  display: grid;
  gap: 0.8rem;
  width: 100%;
  max-width: 24rem;
}

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

.cruise-fields .field span {
  font-weight: 600;
  font-size: 0.85rem;
  color: rgba(252, 250, 245, 0.85);
}

.guest-picker {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.guest-btn {
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1.5px solid rgba(252, 250, 245, 0.3);
  color: rgba(252, 250, 245, 0.85);
  font-size: 0.85rem;
  font-weight: 500;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.guest-btn:active { transform: scale(0.95); }

.guest-btn.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--abyss);
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .guest-btn:not(.is-active):hover { border-color: var(--gold); color: var(--shell); }
}

/* Manual group-size entry, alongside the guest-btn presets — for parties
   bigger than the presets cover. */
.guest-manual {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: rgba(252, 250, 245, 0.6);
}

.guest-manual-input {
  width: 4.5rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  border: 1.5px solid rgba(252, 250, 245, 0.3);
  background: transparent;
  color: var(--shell);
  font-family: inherit;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.guest-manual-input:focus-visible { border-color: var(--gold); outline: none; }

.exc-price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 560;
  color: var(--shell);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  line-height: 1;
}

.exc-price-amount { display: flex; align-items: baseline; gap: 0.6rem; }
.exc-price-amount[hidden] { display: none; }

.exc-price-quote {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--shell);
}

.exc-amount {
  font-variant-numeric: tabular-nums;
  transition: filter 220ms ease, opacity 220ms ease;
}
.exc-amount.is-updating { filter: blur(5px); opacity: 0.4; }

.exc-per {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(252, 250, 245, 0.6);
}

.exc-per-person {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(252, 250, 245, 0.65);
  margin-top: -0.5rem;
}
.exc-per-person[hidden] { display: none; }

.exc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  width: 100%;
}
.exc-actions .btn { flex: 1 1 auto; }

/* Phones: one excursion should read as a single screenful, so the card is
   compacted rather than truncated — shorter media band, tighter rhythm,
   and the paired fields/actions forced side by side instead of stacked. */
@media (max-width: 599.98px) {
  .exc { min-height: 0; }
  .exc-media { min-height: 12.4rem; }
  .exc-body { padding: 1rem 1.25rem 1.4rem; gap: 0.6rem; }
  .exc-body h3 { font-size: 1.55rem; }
  .exc-desc { font-size: 0.88rem; }
  .exc-duration { margin-top: 0; font-size: 0.72rem; }
  .exc-includes { gap: 0.35rem 1rem; margin-top: 0; }
  .exc-includes li { font-size: 0.8rem; }
  .exc-booking { margin-top: 0.5rem; gap: 0.7rem; }
  .guest-btn { padding: 0.42rem 0.8rem; font-size: 0.8rem; }
  .guest-manual { font-size: 0.8rem; gap: 0.5rem; }
  .exc-price { font-size: 1.6rem; }
  .exc-per-person { font-size: 0.78rem; margin-top: -0.35rem; }
  .cruise-fields { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .cruise-fields .field span { font-size: 0.76rem; }
  .cruise-fields .field input { padding: 0.6rem 0.7rem; font-size: 0.88rem; }
  .exc-actions { flex-wrap: nowrap; gap: 0.5rem; }
  .exc-actions .btn { flex: 1 1 0; padding: 0.7rem 0.6rem; font-size: 0.85rem; white-space: normal; }
}

/* ---------- 10. Gallery ---------- */
.masonry {
  columns: 2;
  column-gap: 1rem;
}

@media (min-width: 760px) { .masonry { columns: 3; column-gap: 1.25rem; } }
@media (min-width: 1080px) { .masonry { columns: 4; } }

.masonry-item {
  margin: 0 0 1rem;
  break-inside: avoid;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

.masonry-item img {
  width: 100%;
  transition: transform 700ms var(--ease-out);
}

.masonry-item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem 0.9rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--shell);
  background: linear-gradient(to top, rgba(6, 38, 46, 0.75), transparent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms ease, transform 300ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .masonry-item:hover img { transform: scale(1.05); }
  .masonry-item:hover figcaption { opacity: 1; transform: translateY(0); }
}

@media (hover: none) {
  .masonry-item figcaption { opacity: 1; transform: none; }
}

/* ---------- 11. Why choose us ---------- */
.why .eyebrow { color: var(--gold); }

.why-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.why-card {
  background: rgba(252, 250, 245, 0.05);
  border: 1px solid rgba(252, 250, 245, 0.1);
  border-radius: var(--radius);
  padding: 1.7rem 1.5rem;
  transition: background-color 300ms ease, transform 300ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .why-card:hover {
    background: rgba(252, 250, 245, 0.09);
    transform: translateY(-4px);
  }
}

.why-icon {
  width: 2rem; height: 2rem;
  color: var(--gold);
  margin-bottom: 1rem;
}

.why-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
  color: var(--shell);
}

.why-card p { font-size: 0.9rem; color: rgba(252, 250, 245, 0.72); }

/* nosotros.html reuses the same why-grid/why-card content on a light
   section (no section-abyss wrapper) — override the dark-tuned colors. */
.why-grid-full .why-card { background: none; border: none; padding: 0; }
.why-grid-full .why-card:hover { background: none; transform: none; }
.why-grid-full .why-card h3 { color: var(--ink); }
.why-grid-full .why-card p { color: var(--ink-soft); }

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1rem;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(252, 250, 245, 0.14);
}

@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat { text-align: center; }

.stat dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(252, 250, 245, 0.6);
  margin-bottom: 0.5rem;
}

.stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 560;
  color: var(--gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* nosotros.html reuses .stats on a light section with only 2 figures —
   keep it to 2 columns and swap the dark-tuned label color for ink. */
.stats-light { grid-template-columns: repeat(2, 1fr); border-top-color: rgba(6, 38, 46, 0.12); }
.stats-light .stat dt { color: var(--ink-soft); }

/* ---------- 11b. About us / meet the team ---------- */
.about-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.about-logo {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.team-grid {
  display: grid;
  gap: 1.5rem 1rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) { .team-grid { grid-template-columns: repeat(4, 1fr); gap: 1.75rem 1.25rem; } }

.team-card { margin: 0; }

.team-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: var(--sand);
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .team-card:hover .team-photo img { transform: scale(1.05); }
}

.team-card figcaption { padding: 0.85rem 0.15rem 0; }

.team-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 420;
  font-size: 1.3rem;
  line-height: 1.15;
}

.team-role {
  display: block;
  margin-top: 0.35rem;
  color: var(--ink-soft);
}

.fleet { margin-top: clamp(3rem, 6vw, 4.5rem); }

.fleet-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.fleet-heading { font-size: clamp(1.45rem, 2.6vw, 2rem); }

.fleet-heading em { font-style: italic; color: var(--ocean); }

.fleet-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 760px) { .fleet-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

/* .fleet-item reuses .masonry-item (rounded corners, caption overlay, hover
   zoom) inside a grid instead of CSS columns — normalize margin + ratio */
.fleet-item { margin: 0; }

.fleet-item img {
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------- 12. Reviews ---------- */
.review-grid {
  display: grid;
  gap: 1.25rem;
}

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

.review-card {
  margin: 0;
  background: #fff;
  border-radius: var(--radius);
  padding: 1.8rem 1.8rem 1.6rem;
  box-shadow: 0 10px 30px -20px rgba(6, 38, 46, 0.3);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.review-stars {
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.2em;
}

.review-card p {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink);
}

.review-card footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.review-card footer strong { font-weight: 700; font-size: 0.95rem; }
.review-card footer span { font-size: 0.82rem; color: var(--ink-soft); }

/* ---------- 13. FAQ ---------- */
.faq-list { display: grid; gap: 0.75rem; }

.faq-item {
  background: #fff;
  border: 1.5px solid rgba(6, 38, 46, 0.1);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 240ms ease;
}

.faq-item.is-open { border-color: var(--lagoon); }

.faq-heading { margin: 0; font: inherit; }

.faq-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  text-align: left;
  padding: 1.15rem 1.3rem;
  font-weight: 600;
  font-size: 1rem;
}

.faq-chevron {
  flex: none;
  width: 0.75rem; height: 0.75rem;
  border-right: 2px solid var(--ocean);
  border-bottom: 2px solid var(--ocean);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 260ms var(--ease-out);
}

.faq-item.is-open .faq-chevron { transform: rotate(225deg) translateY(-2px); }

/* Grid-rows technique: animates to content height without JS measuring */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms var(--ease-out);
}

.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }

.faq-panel-inner { overflow: hidden; }

.faq-panel-inner p {
  padding: 0 1.3rem 1.25rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---------- 14. Final booking CTA ---------- */
.book {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 9vw, 8rem);
  color: var(--shell);
  background: var(--abyss);
}

.book-bg {
  position: absolute;
  inset: -10% 0;
  will-change: transform;
}

.book-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.book-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, rgba(6, 38, 46, 0.88) 0%, rgba(6, 38, 46, 0.55) 55%, rgba(6, 38, 46, 0.28) 100%);
}

.book-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 900px) {
  .book-inner { grid-template-columns: 1.1fr 1fr; gap: 4rem; }
}

/* Single centered column — used now that the section is a direct-contact
   CTA rather than a two-column layout beside a form. */
.book-inner-solo {
  grid-template-columns: 1fr;
  max-width: 34rem;
}

.book-copy .eyebrow { color: var(--gold); }
.book-copy h2 { color: var(--shell); }
.book-copy h2 em { color: #EFD9A7; }
.book-copy > p {
  margin-top: 1.2rem;
  max-width: 30rem;
  color: rgba(252, 250, 245, 0.85);
}

.book-points {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  display: grid;
  gap: 0.6rem;
}

.book-points li {
  padding-left: 1.6rem;
  position: relative;
  font-size: 0.95rem;
  color: rgba(252, 250, 245, 0.9);
}

.book-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--lagoon);
  font-weight: 700;
}

.book-direct-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* ---------- 15. Footer ---------- */
.site-footer {
  background: var(--abyss);
  color: rgba(252, 250, 245, 0.75);
  padding-block: 3.5rem 1.5rem;
}

.footer-inner {
  display: grid;
  gap: 2.2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(252, 250, 245, 0.12);
}

@media (min-width: 760px) {
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.footer-brand .brand-name { color: var(--shell); }
.footer-brand p {
  margin-top: 1rem;
  font-size: 0.88rem;
  max-width: 22rem;
}

.footer-col { display: grid; gap: 0.55rem; align-content: start; }

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.footer-col a {
  text-decoration: none;
  font-size: 0.9rem;
  color: rgba(252, 250, 245, 0.75);
  transition: color 160ms ease;
  justify-self: start;
}

@media (hover: hover) and (pointer: fine) {
  .footer-col a:hover { color: var(--shell); }
}

.footer-col p { font-size: 0.9rem; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 1.5rem;
  font-size: 0.8rem;
  color: rgba(252, 250, 245, 0.5);
}

/* ---------- 16. WhatsApp FAB ---------- */
.whatsapp-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -10px rgba(18, 140, 70, 0.65);
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms var(--ease-out);
}

.whatsapp-fab.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.whatsapp-fab svg {
  width: 1.7rem; height: 1.7rem;
  fill: #fff;
}

.whatsapp-fab:active { transform: scale(0.94); }

@media (hover: hover) and (pointer: fine) {
  .whatsapp-fab:hover { transform: translateY(-3px) scale(1.04); }
}

/* ---------- 17. Cart panel ---------- */
/* Right-anchored drawer. Closed state moves it fully off-screen via
   transform (not opacity/visibility) — an off-screen element can't leave
   the "invisible but still painted" ghost-layer artifact a merely
   transparent fixed layer can in some browsers. */
.cart-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(6, 38, 46, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.cart-scrim.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 71;
  width: min(100%, 26rem);
  height: 100dvh;
  background: var(--shell);
  box-shadow: -20px 0 50px -20px rgba(3, 16, 20, 0.5);
  transform: translateX(100%);
  transition: transform 320ms var(--ease-in-out);
}

.cart-panel.is-open { transform: translateX(0); }

.cart-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.cart-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem 1.5rem;
  border-bottom: 1px solid rgba(6, 38, 46, 0.1);
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--shell);
}

.cart-panel-header h3 { font-size: 1.25rem; }

.cart-close {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink-soft);
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.cart-close:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) {
  .cart-close:hover { background: var(--sand); color: var(--ink); }
}

.cart-items {
  padding: 0.5rem 1.5rem;
}

.cart-item {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(6, 38, 46, 0.08);
}

.cart-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.cart-item-title {
  font-weight: 600;
  font-size: 0.92rem;
}

.cart-item-meta {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* Per-item trip-detail fields (flight/date/luggage for transfers, date for
   excursions), rendered inline under each cart row — a 2-column grid keeps
   the drawer scannable instead of stacking every field full-width. */
.cart-item-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.6rem;
  margin-top: 0.55rem;
}

@media (max-width: 380px) {
  .cart-item-fields { grid-template-columns: 1fr; }
}

.cart-mini-field {
  display: grid;
  gap: 0.2rem;
}

.cart-mini-field > span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}

.cart-mini-field input {
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink);
  padding: 0.4rem 0.55rem;
  border: 1.5px solid rgba(6, 38, 46, 0.16);
  border-radius: 8px;
  background: #fff;
  width: 100%;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.cart-mini-field input:focus {
  outline: none;
  border-color: var(--lagoon);
  box-shadow: 0 0 0 3px rgba(23, 163, 152, 0.18);
}

.cart-item-qty {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  justify-self: start;
  border: 1.5px solid rgba(6, 38, 46, 0.16);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.cart-item-qty .stepper-btn {
  width: 1.35rem;
  height: 1.35rem;
  font-size: 0.85rem;
  line-height: 1;
}

.cart-item-qty .stepper-btn:disabled {
  color: rgba(6, 38, 46, 0.28);
  cursor: not-allowed;
}

.cart-item-qty-value {
  min-width: 0.9rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.8rem;
}

.cart-item-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

.cart-item-price {
  font-weight: 700;
  color: var(--ocean);
  white-space: nowrap;
}

.cart-item-remove {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-soft);
  transition: background-color 160ms ease, color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .cart-item-remove:hover { background: #F4E3E0; color: #B4432F; }
}

.cart-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.cart-panel-footer {
  padding: 1.2rem 1.5rem 1.5rem;
  border-top: 1px solid rgba(6, 38, 46, 0.1);
  display: grid;
  gap: 0.9rem;
}

.cart-panel-footer .field label {
  font-size: 0.8rem;
}

.cart-checkout-options {
  display: grid;
  gap: 0.6rem;
}

.cart-channel-step, .cart-details-step, .field-group {
  display: grid;
  gap: 0.9rem;
}
.cart-channel-step[hidden], .cart-details-step[hidden], .field-group[hidden] { display: none; }

.cart-channel-lead {
  text-align: center;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0;
}

.cart-channel-back {
  justify-self: start;
  background: none;
  border: none;
  padding: 0;
  color: var(--ocean);
  text-decoration: underline;
  font-size: 0.82rem;
  cursor: pointer;
}

.cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.95rem;
}

.cart-total strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--abyss);
}

.cart-fineprint {
  text-align: center;
  font-size: 0.76rem;
  color: var(--ink-soft);
}

.cart-status, .contact-status {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
}

.cart-status.is-sending, .contact-status.is-sending { color: var(--ink-soft); }
.cart-status.is-success, .contact-status.is-success { color: var(--lagoon); background: rgba(23, 163, 152, 0.1); }
.cart-status.is-error, .contact-status.is-error { color: #B3261E; background: rgba(179, 38, 30, 0.08); }

/* ---------- 18. Scroll-reveal system ---------- */
/* .reveal elements fade+rise on first viewport entry (IntersectionObserver).
   Siblings inside grids get stagger via --reveal-delay set in JS. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Image panels reveal with a rising clip instead of movement */
.reveal-img {
  clip-path: inset(0 0 14% 0);
  transition: clip-path 900ms var(--ease-out);
}

.reveal-img.in-view { clip-path: inset(0 0 0 0); }

/* ---------- 19. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero-bg img, .hero-bg video { animation: none; }
  .reveal-line > span { animation-duration: 1ms; animation-delay: 0ms; }
  .hero-trust.reveal-line { animation-duration: 1ms; animation-delay: 0ms; }
  .hero-scroll-dot { animation: none; }
  .ticket-van { animation: none; left: calc(50% - 11px); opacity: 1; }

  .reveal, .reveal-img {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }

  .btn, .btn-primary::after, .ticket, .ticket-van, .service-card,
  .service-media img, .masonry-item img, .why-card, .guest-btn,
  .cart-panel, .cart-scrim {
    transition-duration: 1ms !important;
  }

  .hero-bg, .book-bg { transform: none !important; }
}

/* ---------- Service picker dialog (home) ---------- */
.service-dialog { border: none; border-radius: 22px; padding: 0; max-width: 540px; width: calc(100% - 2rem);
  background:
    linear-gradient(rgba(252,250,245,.70), rgba(252,250,245,.70)),
    url('../img/logo.jpg') center / 500px no-repeat,
    var(--shell);
  color: #000; box-shadow: 0 30px 80px rgba(6,38,46,.4); }
.service-dialog::backdrop { background: rgba(6,38,46,.55); backdrop-filter: blur(3px); }
.service-dialog .eyebrow, .service-dialog h2, .service-dialog .service-option-name,
.service-dialog .service-option-desc, .service-dialog-browse { color: #000; }
.service-dialog .eyebrow { font-size: 0.82rem; }
.service-dialog .service-option-name { font-size: 1.1rem; }
.service-dialog .service-option-desc { font-size: 0.9rem; }
.service-dialog-browse { font-size: 1.05rem; }
.service-dialog-inner { padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center; position: relative; }
.service-dialog-close { position: absolute; top: .75rem; right: 1rem; background: none; border: none;
  font-size: 1.75rem; line-height: 1; cursor: pointer; color: var(--ocean); }
.service-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 1.5rem 0; }
.service-option { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1.25rem .5rem;
  border: 1.5px solid rgba(11,93,107,.18); border-radius: 16px; text-decoration: none; color: inherit;
  transition: border-color .18s, transform .18s, box-shadow .18s; }
.service-option:hover { border-color: var(--lagoon); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(6,38,46,.12); }
.service-option-icon { font-size: 2rem; }
.service-option-name { font-weight: 700; }
.service-option-desc { font-size: .8rem; color: var(--ocean); }
.service-dialog-browse { background: none; border: none; color: var(--ocean); text-decoration: underline;
  cursor: pointer; font: inherit; }
@media (max-width: 480px) { .service-options { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .service-dialog[open] { animation: dialogpop .25s ease-out; }
  @keyframes dialogpop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
}

/* ---------- Contact dialog ("Email Us" CTA, all 5 pages) ---------- */
.contact-dialog {
  border: none; border-radius: 22px; padding: 0; max-width: 480px; width: calc(100% - 2rem);
  box-shadow: 0 30px 80px rgba(6,38,46,.4);
}
.contact-dialog::backdrop { background: rgba(6,38,46,.55); backdrop-filter: blur(3px); }
.contact-dialog-inner { padding: clamp(1.5rem, 4vw, 2.5rem); position: relative; display: grid; gap: 0.9rem; }
.contact-dialog-inner h2 { margin: 0; padding-right: 1.5rem; }
.contact-dialog-lead { color: var(--ink-soft); font-size: 0.92rem; margin: -0.4rem 0 0; }
.contact-dialog-close {
  position: absolute; top: .75rem; right: 1rem; background: none; border: none;
  font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ink-soft);
}
.contact-dialog textarea {
  font: inherit; color: var(--ink); padding: 0.8rem 1rem; border-radius: 12px;
  border: 1.5px solid rgba(6, 38, 46, 0.16); background: #fff; width: 100%;
  resize: vertical; transition: border-color 200ms ease, box-shadow 200ms ease;
}
.contact-dialog textarea:focus {
  outline: none; border-color: var(--lagoon); box-shadow: 0 0 0 3px rgba(23, 163, 152, 0.18);
}
@media (prefers-reduced-motion: no-preference) {
  .contact-dialog[open] { animation: dialogpop .25s ease-out; }
}

/* ---------- Home service picker section (#services-picker) ----------
   The page-level 3-card selector after the hero. Mirrors .service-card
   styling; also the no-JS fallback for the service-picker <dialog>. */
.picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.picker-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: #fff;
  border: 1px solid rgba(11, 93, 107, 0.14);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 8px 30px -18px rgba(6, 38, 46, 0.25);
  transition: transform 300ms var(--ease-out), box-shadow 300ms ease, border-color 300ms ease;
}
.picker-icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 14px;
  background: var(--sand);
  color: var(--ocean);
}
.picker-icon svg { width: 1.75rem; height: 1.75rem; }
.picker-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 560;
  color: var(--abyss);
}
.picker-desc { font-size: 0.92rem; line-height: 1.5; color: var(--ink); opacity: 0.85; }
@media (hover: hover) and (pointer: fine) {
  .picker-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 44px -20px rgba(6, 38, 46, 0.35);
    border-color: var(--lagoon);
  }
}
@media (max-width: 720px) { .picker-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .picker-card { transition: none; } }