/* =============================================
   MĀLĀ SAIL CHARTERS — PREMIUM CSS
   ============================================= */

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

:root {
  --ocean-deep:   #f7f2ea;
  --ocean-mid:    #f1e9dc;
  --ocean-light:  #e7dcc9;
  --cyan:         #b08652;
  --cyan-light:   #c29a6b;
  --gold:         #a07a49;
  --gold-light:   #d4b484;
  --coral:        #bd8b66;
  --white:        #ffffff;
  --off-white:    #f3ede1;
  --gray-100:     #eae0d0;
  --gray-300:     #aa9480;
  --gray-500:     #7d6a58;
  --gray-700:     #57483a;
  --text-dark:    #33261a;
  --ink:          #33261a;
  --ink-muted:    rgba(51,38,26,0.72);
  --ink-soft:     rgba(51,38,26,0.58);
  --ink-faint:    rgba(51,38,26,0.42);
  --card:         #fdfaf3;
  /* Kept light so the photo reads as a daylight photo. Darkening is only
   applied on the left, behind the text, and fades out by mid-screen. */
--gradient-hero: linear-gradient(100deg, rgba(18,13,7,0.5) 0%, rgba(20,15,8,0.28) 38%, rgba(24,18,10,0.04) 68%, rgba(24,18,10,0) 100%);
  --gradient-card: linear-gradient(180deg, transparent 40%, rgba(24,16,10,0.95) 100%);
  --font-main:    'DM Sans', sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  /* Top navigation only, so the bar reads as its own thing.
     Questrial is the closest free match to the AMANAY wordmark: the same
     geometric skeleton (monolinear, no serifs, pointed A, M vertex that
     stops above the baseline) at a similar stroke-to-cap ratio. */
  --font-nav:     'Questrial', sans-serif;
  /* The wordmark in the top bar only, and only the four glyphs of MALA.
     AWA Aruba titles its pages in BuganTra, a paid geometric sans that is
     heavy even at weight 400 (stem is 25% of cap height). Montserrat 700
     is the closest free match on stroke weight and on the width ratios of
     A, M, W, O and S. Questrial is far too light to stand in for it. */
  --font-wordmark: 'Montserrat', sans-serif;
  --quote-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath fill='%23fff' d='M6.056 21.448C4.376 21.448 3.056 20.872 2.096 19.72 1.184 18.568.728 16.816.728 14.464.728 11.92 1.328 9.496 2.528 7.192 3.776 4.84 5.576 2.512 7.928 0.208 7.976.16 8.048.136 8.144.136c.144 0 .24.072.288.216.096.096.12.216.072.36C7.208 2.296 6.296 3.88 5.768 5.464 5.288 7 5.048 8.728 5.048 10.648c0 1.344.12 2.352.36 3.024.24.624.624 1.152 1.152 1.584L3.896 15.76c-.048-.816.192-1.44.72-1.872.528-.432 1.248-.648 2.16-.648 1.248 0 2.208.36 2.88 1.08.72.72 1.08 1.704 1.08 2.952 0 1.296-.432 2.328-1.296 3.096-.816.72-1.944 1.08-3.384 1.08Zm12.456 0c-1.68 0-3-.576-3.96-1.728-.912-1.152-1.368-2.904-1.368-5.256 0-2.544.6-4.968 1.8-7.272 1.248-2.352 3.048-4.68 5.4-6.984.048-.048.12-.072.216-.072.144 0 .24.072.288.216.096.096.12.216.072.36-1.296 1.584-2.208 3.168-2.736 4.752-.48 1.536-.72 3.264-.72 5.184 0 1.344.12 2.352.36 3.024.24.624.624 1.152 1.152 1.584l-2.664.504c-.048-.816.192-1.44.72-1.872.528-.432 1.248-.648 2.16-.648 1.248 0 2.208.36 2.88 1.08.72.72 1.08 1.704 1.08 2.952 0 1.296-.432 2.328-1.296 3.096-.816.72-1.944 1.08-3.384 1.08Z'/%3E%3C/svg%3E");
  --radius-sm:    8px;
  --radius-md:    16px;
  --radius-lg:    24px;
  --radius-xl:    40px;
  --shadow-sm:    0 4px 16px rgba(176,134,82,0.18);
  --shadow-md:    0 10px 34px rgba(176,134,82,0.26);
  --shadow-lg:    0 22px 64px rgba(176,134,82,0.34);
  --transition:   0.3s cubic-bezier(0.4,0,0.2,1);
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font-main);
  background: var(--ocean-deep);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
}

/* Display face for headings. Cormorant Garamond is an airy, high-contrast
   old-style serif: even at weight 500 it reads far finer and more elegant
   than a heavy serif, which is exactly the look we want for the titles. */
h1, h2, h3, h4,
.hero-title,
.hero-title-accent,
.section-title,
.feature-title,
.trip-title,
.trips-group-title,
.review-heading {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: 0.01em;
}

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

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

ul { list-style: none; }

/* --- CONTAINER --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- SECTION LABELS --- */
.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(176,134,82,0.1);
  border: 1px solid rgba(176,134,82,0.4);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.section-title {
  font-size: clamp(2.15rem, 4.3vw, 3.05rem);
  font-weight: 500;
  line-height: 1.24;
  margin-bottom: 48px;
  color: var(--ink);
}

.highlight {
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* The macron over the two a's of Mālā is drawn here instead of using the ā
   glyph: Fraunces sets a short, thin bar that some browsers position
   differently, so we place it ourselves. The percentages resolve against the
   letter's own advance box (0.565em) and `top` against the top of that box,
   which sits 0.9833em above the baseline in Fraunces. The result is a 0.43em
   bar, 0.1em thick, starting 0.04em above the x-height: wider, thicker and
   closer to the letter than the font's own mark. */
.macron {
  position: relative;
}

.macron::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0.37em;
  height: 0.1em;
  border-radius: 0.03em;
  background: currentColor;
}

/* Inside the gradient title the letters are painted with the gradient rather
   than with `color`, so the bar has to take the gradient's first stop. */
.section-title .highlight .macron::after {
  background: var(--cyan);
}

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  touch-action: manipulation;
  border-radius: 999px;
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--cyan), #8a6437);
  color: var(--white);
  box-shadow: 0 4px 20px rgba(176,134,82,0.4);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(176,134,82,0.55);
}

.btn-ghost {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.15);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--cyan);
  border: 2px solid var(--cyan);
}
.btn-outline:hover {
  background: var(--cyan);
  color: var(--ocean-deep);
  transform: translateY(-2px);
}

.btn-sm { padding: 10px 20px; font-size: 0.85rem; }

.btn-full { width: 100%; justify-content: center; }

.btn-social {
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #ec4899);
  color: var(--white);
  box-shadow: 0 4px 20px rgba(131,58,180,0.4);
}
.btn-social:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(131,58,180,0.55);
}

/* =============================================
   NAVBAR
   ============================================= */
/* At the very top the bar floats transparent over the hero photo, with no
   white band. The moment the page scrolls down it acquires the solid white
   band, the hairline and the shadow, and the type returns to ink. Over the
   photo the type is white, kept readable by the soft scrim on the overlay. */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 16px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: var(--transition);
}
.navbar.scrolled {
  padding: 12px 0;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(176,134,82,0.18);
  box-shadow: 0 4px 30px rgba(51,38,26,0.1);
}

/* Light type while the bar is transparent over the hero photo. */
.navbar:not(.scrolled) .nav-logo { color: #fff; }
.navbar:not(.scrolled) .nav-link { color: rgba(255,255,255,0.92); }
.navbar:not(.scrolled) .nav-link:hover {
  background: rgba(255,255,255,0.16);
  color: #fff;
}
.navbar:not(.scrolled) .burger-btn span { background: #fff; }
.navbar:not(.scrolled) .logo-icon-svg { color: #fff; }

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Shared lockup geometry. The type itself differs between the two marks, so
   only the layout lives here; see .navbar .nav-logo and .footer-brand below. */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  /* The bar is the one place a tracked lockup could wrap mid-name. */
  white-space: nowrap;
  color: var(--ink);
}

/* Top bar: AWA-style single word, but set light and tracked wide like the
   AMANAY lockup: the letters carry the mark, so they stay fine and airy. */
.navbar .nav-logo {
  font-family: var(--font-wordmark);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.14em;
}
/* letter-spacing also pads the last glyph, which skews the lockup right. */
.navbar .logo-text { margin-right: -0.14em; }

/* The top-bar lockup stacks the wordmark over its descriptor, matching the
   link-preview card: the big MALA, then SAIL CHARTERS tracked wide beneath. */
.navbar .logo-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.navbar .logo-tagline {
  font-family: var(--font-wordmark);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.36em;
  margin-top: 5px;
  margin-right: -0.36em;
  opacity: 0.72;
}

/* Both marks on the navbar lockup are drawn here, not typed. The bar clears
   Montserrat's cap height (0.7em) by 0.05em; `top` resolves against the
   inline box, whose top sits 0.972em above the baseline. The round dot sits on
   the glyph's own axis (0.35em from its origin, where both pairs of A edges
   cross), 0.10em across, a touch under halfway up the 0.64em opening the
   crossbar used to close — the AMANAY weight, balanced inside the pyramid. */
.navbar .logo-text .macron::after {
  top: 0.154em;
  height: 0.06em;
  left: 0.13em;
  right: auto;
  width: 0.44em;
  border-radius: 0.02em;
}

/* The A loses its crossbar and becomes a bare pyramid, dot in the middle.
   Instead of redrawing the letter we cut the crossbar out: the wedge below is
   bounded by the glyph's own inner edges (0.0592em + 0.4534em per em of
   height on the left, mirrored on the right, measured off Montserrat 300) and
   reaches from 0.26em over the baseline — just above the bar at 0.24em — down
   past the baseline where there is no ink. The cut lives on the letter itself,
   so the macron and the dot hang off the wrapper and stay whole however low
   they sit. */
.navbar .logo-text .macron .glyph {
  clip-path: polygon(0 1.2222em, 0.0592em 1.2222em, 0.0592em 0.9722em,
    0.1771em 0.7122em, 0.5242em 0.7122em, 0.6425em 0.9722em,
    0.6425em 1.2222em, 0.9em 1.2222em, 0.9em 0, 0 0);
}

.navbar .logo-text .macron::before {
  content: "";
  position: absolute;
  left: 0.30em;
  bottom: 0.50em;
  width: 0.10em;
  height: 0.10em;
  border-radius: 50%;
  background: currentColor;
}

/* Footer keeps the full name, quiet, on the lighter navigational face. */
.footer-brand .nav-logo {
  font-family: var(--font-nav);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.2em;
}
.footer-brand .logo-text { margin-right: -0.2em; }
.logo-icon { font-size: 1.6rem; }
.logo-icon-svg { 
  width: 32px; 
  height: 32px; 
  color: var(--cyan);
  flex-shrink: 0;
}
.logo-text strong { color: var(--cyan); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-nav);
}

.nav-link {
  padding: 8px 16px;
  border-radius: 999px;
  /* Questrial ships a single weight, so anything heavier is synthesised
     and goes blot. 400 it is. */
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  transition: var(--transition);
}
.nav-link:hover {
  background: rgba(176,134,82,0.12);
  color: var(--cyan);
}

.nav-cta {
  padding: 10px 22px;
  background: linear-gradient(135deg, var(--cyan), #8a6437);
  color: var(--white);
  border-radius: 999px;
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(176,134,82,0.35);
}
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(176,134,82,0.5);
}

.burger-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px;
  margin: -10px;
  touch-action: manipulation;
}
.burger-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: var(--transition);
}
.burger-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-btn.active span:nth-child(2) { opacity: 0; }
.burger-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================
   HERO
   ============================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Mild correction: the photo's median sits at 111/255, slightly under
     mid-grey, and the right half is darker than the left. Lifts it without
     washing out the sky. */
  filter: brightness(1.12) contrast(1.03) saturate(1.06);
  transform: scale(1.05);
  animation: heroZoom 20s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1.12); }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  /* A soft dark wash across the top so the transparent white bar stays
     readable over the bright sky; it fades out well before the content. */
  background:
    linear-gradient(180deg, rgba(18,13,7,0.5) 0%, rgba(18,13,7,0.24) 6%, rgba(18,13,7,0) 16%),
    var(--gradient-hero);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 24px 80px;
  max-width: 760px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(176,134,82,0.15);
  border: 1px solid rgba(176,134,82,0.4);
  backdrop-filter: blur(8px);
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cyan-light);
  margin-bottom: 24px;
  animation: fadeInDown 0.8s ease both;
}

.hero-title {
  font-size: clamp(2.7rem, 6.4vw, 4.9rem);
  font-weight: 500;
  line-height: 1.14;
  margin-bottom: 24px;
  color: #fff;
  animation: fadeInUp 0.8s ease 0.2s both;
}

.hero-title-accent {
  display: block;
  background: linear-gradient(135deg, var(--cyan-light), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255,255,255,0.92);
  max-width: 560px;
  margin-bottom: 36px;
  animation: fadeInUp 0.8s ease 0.4s both;
  line-height: 1.7;
}

/* The photo is now brighter, so white text needs its own contrast instead of
   relying on the old heavy overlay. */
.hero-badge,
.hero-title,
.hero-subtitle,
.hero-scroll-hint {
  text-shadow: 0 1px 14px rgba(10,6,3,0.55);
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 56px;
  animation: fadeInUp 0.8s ease 0.6s both;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: bounce 2s infinite;
  z-index: 1;
}
.scroll-arrow {
  width: 20px;
  height: 20px;
  border-right: 2px solid rgba(255,255,255,0.4);
  border-bottom: 2px solid rgba(255,255,255,0.4);
  transform: rotate(45deg);
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* =============================================
   WHY US
   ============================================= */
.why-us {
  padding: 100px 0;
  background: linear-gradient(180deg, var(--ocean-mid) 0%, var(--ocean-deep) 100%);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.feature-card {
  background: var(--card);
  border: 1px solid rgba(176,134,82,0.45);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  cursor: default;
  box-shadow: var(--shadow-sm);
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  transform: scaleX(0);
  transition: var(--transition);
}
.feature-card:hover {
  border-color: rgba(176,134,82,0.6);
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.feature-card:hover::before { transform: scaleX(1); }

.feature-number {
  position: absolute;
  top: 24px; right: 24px;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 3.5rem;
  font-weight: 500;
  color: rgba(176,134,82,0.15);
  line-height: 1;
}

.feature-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--ink);
}

.feature-desc {
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.7;
}

/* =============================================
   TRIPS
   ============================================= */
.trips-section {
  padding: 100px 0;
  background: linear-gradient(180deg, var(--ocean-mid) 0%, var(--ocean-deep) 100%);
}

.trips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  margin-bottom: 48px;
}
.trips-grid.is-collapsed { display: none; }

.trips-group-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0 4px;
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.trips-group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(176,134,82,0.4), transparent);
}

.trip-card {
  background: var(--card);
  border: 1px solid rgba(176,134,82,0.45);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.trip-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(176,134,82,0.6);
}

.trip-card-img-wrap {
  position: relative;
  height: 240px;
  overflow: hidden;
}
.trip-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.trip-card:hover .trip-card-img { transform: scale(1.08); }

.trip-badge {
  position: absolute;
  top: 16px; left: 16px;
  background: linear-gradient(135deg, var(--gold), var(--coral));
  color: var(--white);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  z-index: 2;
}
.badge-new { background: linear-gradient(135deg, var(--cyan), #8a6437); }

.trip-overlay {
  position: absolute;
  inset: 0;
  background: rgba(24,16,10,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition);
  z-index: 3;
}
.trip-card:hover .trip-overlay { opacity: 1; }

.trip-card-body { padding: 24px; }

.trip-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.trip-location { font-size: 0.8rem; color: var(--cyan); font-weight: 600; }
.trip-date { font-size: 0.8rem; color: var(--gray-500); }

.trip-title {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--ink);
}
.trip-desc {
  font-size: 0.88rem;
  color: var(--ink-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}
.trip-host {
  font-size: 0.78rem;
  color: var(--gray-500);
  margin: -10px 0 20px;
}
.trip-host strong { color: var(--cyan); font-weight: 600; }

.trip-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(51,38,26,0.1);
}
.trip-price { font-size: 0.88rem; color: var(--gray-500); }
.trip-price strong { font-size: 1.1rem; color: var(--cyan); }

.trip-spots { display: flex; align-items: center; gap: 4px; }
.spots-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyan);
}
.spots-dot.empty { background: rgba(51,38,26,0.15); }
.spots-text { font-size: 0.75rem; color: var(--gray-500); margin-left: 6px; }

.trips-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

/* =============================================
   CALENDAR
   ============================================= */
.calendar-section {
  padding: 100px 0;
  background: linear-gradient(180deg, var(--ocean-mid) 0%, var(--ocean-deep) 100%);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  /* Cards size to their own content. Without this they stretch to the
     tallest item in the row and turn into half-empty boxes. */
  align-items: start;
}

.cal-month {
  background: var(--card);
  border: 1px solid rgba(176,134,82,0.45);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.cal-month:hover {
  border-color: rgba(176,134,82,0.6);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.cal-month-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(176,134,82,0.08);
  border-bottom: 1px solid rgba(176,134,82,0.12);
}
.cal-month-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.cal-month-count {
  font-size: 0.75rem;
  color: var(--cyan);
  background: rgba(176,134,82,0.15);
  padding: 3px 10px;
  border-radius: 999px;
}

.cal-trips { padding: 8px; display: flex; flex-direction: column; gap: 4px; }

.cal-trip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  cursor: pointer;
}
.cal-trip:hover {
  background: rgba(176,134,82,0.08);
}
.cal-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cal-trip div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cal-trip div strong { font-size: 0.85rem; color: var(--ink); }
.cal-trip div span { font-size: 0.75rem; color: var(--gray-500); }
.cal-arrow { color: var(--cyan); font-size: 0.9rem; opacity: 0; transition: var(--transition); }
.cal-trip:hover .cal-arrow { opacity: 1; transform: translateX(4px); }

/* =============================================
   PADLET BOARD
   ============================================= */
.board-embed {
  margin-top: 48px;
  background: var(--card);
  border: 1px solid rgba(176,134,82,0.45);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.board-embed:hover {
  border-color: rgba(176,134,82,0.6);
  box-shadow: var(--shadow-md);
}

/* Only the "Open board" link lives here; the board supplies its own title. */
.board-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 14px 24px;
  background: rgba(176,134,82,0.08);
  border-bottom: 1px solid rgba(176,134,82,0.18);
}

.board-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  min-height: 44px;
  border: 1px solid rgba(176,134,82,0.5);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cyan);
  white-space: nowrap;
  transition: var(--transition);
}
.board-open:hover { background: var(--cyan); color: var(--white); }

.board-frame { background: var(--off-white); }
.board-frame iframe {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
}

.board-note {
  padding: 12px 24px 16px;
  font-size: 0.78rem;
  color: var(--ink-faint);
  border-top: 1px solid rgba(51,38,26,0.08);
}

body.hide-padlet .board-embed,
body.hide-padlet #trip-board {
  display: none !important;
}

/* =============================================
   CAPTAIN
   ============================================= */
.captain-section {
  padding: 100px 0;
  background: linear-gradient(180deg, var(--ocean-mid) 0%, var(--ocean-deep) 100%);
  overflow: hidden;
}

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

.captain-img-wrap {
  position: relative;
}
.captain-img {
  width: 100%;
  border-radius: var(--radius-xl);
  object-fit: cover;
  height: 520px;
  position: relative;
  z-index: 1;
}
.captain-img-decoration {
  position: absolute;
  top: -20px; right: -20px;
  bottom: 20px; left: 20px;
  border: 2px solid rgba(176,134,82,0.3);
  border-radius: var(--radius-xl);
  z-index: 0;
}

.captain-content { display: flex; flex-direction: column; gap: 20px; }

.captain-bio {
  font-size: 1rem;
  color: var(--ink-muted);
  line-height: 1.8;
}
.captain-bio strong { color: var(--cyan); }

.captain-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0;
}
.badge {
  background: rgba(176,134,82,0.12);
  border: 1px solid rgba(176,134,82,0.4);
  color: var(--cyan);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
}

/* =============================================
   COMMITMENT (inside the Captain section)
   ============================================= */
.commitment {
  margin-top: 90px;
}
.commitment-head {
  text-align: center;
}
.commitment .section-title { margin-bottom: 16px; }
/* Only the personal-practice cards hide; the two nature cards stay put. */
.sustainability-grid.is-collapsed .commitment-card { display: none; }
.badge-commitment {
  color: var(--white);
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  border-color: transparent;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}
.badge-commitment::after {
  content: '↓';
  font-size: 0.72rem;
  line-height: 1;
  transition: transform 0.3s ease;
}
.badge-commitment:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(160,122,73,0.28);
}
.badge-commitment[aria-expanded="true"]::after { transform: rotate(180deg); }
.sustainability-intro {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.98rem;
  line-height: 1.7;
}
.sustainability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.sustainability-card {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid rgba(176,134,82,0.45);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.sustainability-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition);
}
.sustainability-card:hover {
  border-color: rgba(176,134,82,0.6);
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.sustainability-card:hover::before { transform: scaleX(1); }
.sustainability-card h3 {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink);
  margin: 16px 0 8px;
}
.sustainability-card p {
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.7;
}
.sdg-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid rgba(176,134,82,0.5);
  border-radius: 999px;
  padding: 4px 12px;
}
.sdg-note {
  margin-top: 32px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
/* Tree-Nation Climate Action label (renders its own 167x58 iframe) */
.tree-nation-widget {
  margin-top: 18px;
  min-height: 58px;
  display: flex;
  align-items: center;
}
.tree-nation-widget iframe { display: block; border: none; }

/* =============================================
   REVIEWS
   ============================================= */
.reviews-section {
  padding: 100px 0;
  background: linear-gradient(180deg, var(--ocean-mid) 0%, var(--ocean-deep) 100%);
}

.reviews-stars-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}
.reviews-stars { color: var(--gold); font-size: 1.4rem; letter-spacing: 4px; }
.reviews-avg { color: var(--gray-500); font-size: 0.9rem; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* Mobile only: horizontal snap carousel instead of a 22-card column.
   Hidden on desktop, where the grid shows everything at once. */
.reviews-hint { display: none; }

.review-card {
  position: relative;
  background: var(--card);
  border: 1px solid rgba(176,134,82,0.45);
  border-radius: var(--radius-md);
  padding: 28px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.review-card:hover {
  border-color: rgba(176,134,82,0.6);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  background: rgba(176,134,82,0.04);
}

.review-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 16px;
  /* Keeps long names clear of the platform badge in the top-right corner. */
  padding-right: 44px;
}

/* Platform the review was posted on, top-right of the card like on Amanay.
   The modifier (--google / --airbnb) is set on each card in the HTML. */
.review-source {
  position: absolute;
  top: 26px;
  right: 26px;
  width: 22px;
  height: 22px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.review-source--google {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E");
}
.review-source--airbnb {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF5A5F' d='M12.001 18.275c-1.353-1.697-2.148-3.184-2.413-4.457-.263-1.027-.16-1.848.291-2.465.477-.71 1.188-1.056 2.121-1.056s1.643.345 2.12 1.063c.446.61.558 1.432.286 2.465-.291 1.298-1.085 2.785-2.412 4.458zm9.601 1.14c-.185 1.246-1.034 2.28-2.2 2.783-2.253.98-4.483-.583-6.392-2.704 3.157-3.951 3.74-7.028 2.385-9.018-.795-1.14-1.933-1.695-3.394-1.695-2.944 0-4.563 2.49-3.927 5.382.37 1.565 1.352 3.343 2.917 5.332-.98 1.085-1.91 1.856-2.732 2.333-.636.344-1.245.558-1.828.609-2.679.399-4.778-2.2-3.825-4.88.132-.345.395-.98.845-1.961l.025-.053c1.464-3.178 3.242-6.79 5.285-10.795l.053-.132.58-1.116c.45-.822.635-1.19 1.351-1.643.346-.21.77-.315 1.246-.315.954 0 1.698.558 2.016 1.007.158.239.345.557.582.953l.558 1.089.08.159c2.041 4.004 3.821 7.608 5.279 10.794l.026.025.533 1.22.318.764c.243.613.294 1.222.213 1.858zm1.22-2.39c-.186-.583-.505-1.271-.9-2.094v-.03c-1.889-4.006-3.642-7.608-5.307-10.844l-.111-.163C15.317 1.461 14.468 0 12.001 0c-2.44 0-3.476 1.695-4.535 3.898l-.081.16c-1.669 3.236-3.421 6.843-5.303 10.847v.053l-.559 1.22c-.21.504-.317.768-.345.847C-.172 20.74 2.611 24 5.98 24c.027 0 .132 0 .265-.027h.372c1.75-.213 3.554-1.325 5.384-3.317 1.829 1.989 3.635 3.104 5.382 3.317h.372c.133.027.239.027.265.027 3.37.003 6.152-3.261 4.802-6.975z'/%3E%3C/svg%3E");
}
.review-name { font-weight: 700; font-size: 0.95rem; }
/* Country reads as secondary context, not as part of the name. */
.review-country {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--gray-500);
}
.review-stars { color: var(--gold); font-size: 0.85rem; }

.review-text {
  font-size: 0.88rem;
  color: var(--ink-muted);
  line-height: 1.8;
  font-style: italic;
}

/* Long reviews collapse to four lines, matching the reference design. */
.review-text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Read more" row: quiet grey that firms up on hover, with a gold quote
   mark pinned to the right edge. */
.review-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 10px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 0.85rem;
  text-align: left;
  color: var(--ink-faint);
  transition: color 0.3s ease-out;
}
.review-more:hover,
.review-more:focus-visible {
  color: var(--ink);
}
.review-more::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 18px;
  background-color: var(--gold);
  -webkit-mask: var(--quote-mask) center / contain no-repeat;
  mask: var(--quote-mask) center / contain no-repeat;
}
.review-more[hidden] { display: none; }

/* The "show all" control only exists on desktop; the mobile swipe hint
   and this button are each shown in one place only. */
.reviews-more { display: none; }

/* Invitation to leave a review. Sits after the grid and shows on every
   breakpoint, since the form is the same on mobile and desktop. */
.reviews-cta {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.reviews-cta-text {
  max-width: 560px;
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* =============================================
   FAQ
   ============================================= */
.faq-section {
  padding: 100px 0;
  background: linear-gradient(180deg, var(--ocean-mid) 0%, var(--ocean-deep) 100%);
}

.faq-container { max-width: 800px; }

.faq-list { display: flex; flex-direction: column; gap: 12px; }

.faq-item {
  border: 1px solid rgba(176,134,82,0.45);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.faq-item:hover { border-color: rgba(176,134,82,0.6); }
.faq-item.open { border-color: rgba(176,134,82,0.6); }

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 24px;
  background: rgba(176,134,82,0.05);
  border: none;
  color: var(--ink);
  font-family: var(--font-main);
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
}
.faq-question:hover { background: rgba(176,134,82,0.06); }
.faq-item.open .faq-question { background: rgba(176,134,82,0.08); color: var(--cyan); }

.faq-icon {
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--cyan);
  transition: var(--transition);
  flex-shrink: 0;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
}
.faq-item.open .faq-answer { max-height: 300px; }

.faq-answer p {
  padding: 4px 24px 20px;
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.8;
}

/* =============================================
   BOOK A DISCOVERY CALL (HubSpot Meetings, modal)
   ============================================= */
.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.booking-modal.is-open { display: flex; }

.booking-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24,16,10,0.6);
  backdrop-filter: blur(4px);
}

.booking-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 960px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--card);
  border: 1px solid rgba(176,134,82,0.45);
  border-radius: var(--radius-lg);
  padding: 30px 24px 24px;
  box-shadow: var(--shadow-lg);
}

.booking-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(176,134,82,0.4);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}
.booking-modal-close:hover {
  background: rgba(176,134,82,0.14);
  color: var(--cyan);
}

.booking-modal-title {
  font-family: var(--font-display);
  font-size: clamp(1.62rem, 2.8vw, 2.26rem);
  text-align: center;
  margin: 2px 0 10px;
  color: var(--ink);
}

.booking-modal-intro {
  max-width: 560px;
  margin: 0 auto 22px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* — Discovery-call gallery: swipeable trip moments above the calendar — */
.booking-gallery {
  position: relative;
  margin: 0 0 12px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #120d07;
  border: 1px solid rgba(176,134,82,0.32);
  box-shadow: var(--shadow-sm);
}
.booking-gallery-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.booking-gallery-track::-webkit-scrollbar { display: none; }
.booking-gallery-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.booking-gallery-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: clamp(220px, 40vh, 420px);
  margin: 0;
  scroll-snap-align: center;
}
.booking-gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.booking-gallery-slide figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 46px 22px 30px;
  background: linear-gradient(180deg, rgba(18,13,7,0) 0%, rgba(18,13,7,0.82) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}
.booking-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  background: rgba(18,13,7,0.4);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: var(--transition);
}
.booking-gallery-nav:hover {
  background: rgba(18,13,7,0.62);
  border-color: rgba(255,255,255,0.6);
}
.booking-gallery-nav.is-prev { left: 14px; }
.booking-gallery-nav.is-next { right: 14px; }
@media (hover: hover) and (pointer: fine) {
  .booking-gallery-nav { display: flex; }
}
.booking-gallery-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.booking-gallery-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: var(--transition);
}
.booking-gallery-dot.is-active {
  width: 20px;
  background: #fff;
}
.booking-gallery-hint {
  margin: 0 0 14px;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.booking-gallery-cta {
  display: block;
  margin: 0 auto 20px;
  padding: 13px 30px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  color: #fff;
  font-family: var(--font-main);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.booking-gallery-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.booking-embed {
  background: var(--white);
  border: 1px solid rgba(176,134,82,0.3);
  border-radius: var(--radius-md);
  padding: 8px;
  overflow: hidden;
}
/* HubSpot injects its own iframe (min 312px wide) and resizes it by
   postMessage, so we only reserve room and round it. */
.booking-embed .meetings-iframe-container { min-height: 620px; }
.booking-embed iframe { width: 100% !important; min-height: 600px; border-radius: var(--radius-sm); }

body.booking-open,
body.review-open { overflow: hidden; }

/* — Leave-a-review modal: a slimmer dialog that reuses the booking shell — */
.review-modal-dialog { max-width: 620px; padding: 34px 26px 26px; }
.review-modal .booking-modal-intro { margin-bottom: 18px; }
.review-modal .review-form {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  gap: 16px;
}
.review-modal .review-form .form-note { margin-top: 0; }

/* =============================================
   CONTACT
   ============================================= */
.contact-section {
  padding: 100px 0;
  background: linear-gradient(180deg, var(--ocean-mid) 0%, var(--ocean-deep) 100%);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.contact-desc {
  color: var(--ink-muted);
  line-height: 1.8;
  margin-bottom: 32px;
  margin-top: -24px;
}

.contact-methods { display: flex; flex-direction: column; gap: 12px; }

.contact-method {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(176,134,82,0.45);
  border-radius: var(--radius-md);
  background: var(--card);
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.contact-method:hover {
  border-color: rgba(176,134,82,0.6);
  background: rgba(176,134,82,0.06);
  transform: translateX(6px);
}

.contact-method div { display: flex; flex-direction: column; }
.contact-method strong { font-size: 0.95rem; color: var(--ink); }
.contact-method span { font-size: 0.82rem; color: var(--gray-500); }

.contact-form {
  background: var(--card);
  border: 1px solid rgba(176,134,82,0.45);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--shadow-md);
}

.form-group { display: flex; flex-direction: column; gap: 8px; }

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.05em;
}

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--off-white);
  border: 1px solid rgba(176,134,82,0.4);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--ink);
  font-family: var(--font-main);
  font-size: 0.9rem;
  transition: var(--transition);
  outline: none;
  -webkit-appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(51,38,26,0.35); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--cyan);
  background: rgba(176,134,82,0.06);
  box-shadow: 0 0 0 3px rgba(176,134,82,0.1);
}
.form-group select option { background: var(--card); color: var(--ink); }
.form-group textarea { resize: vertical; min-height: 100px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-optional {
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0;
}
.form-note {
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: -6px;
}
.contact-direct-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin: 30px 0 14px;
}

.form-success {
  background: var(--card);
  border: 1px solid rgba(176,134,82,0.45);
  border-radius: var(--radius-lg);
  padding: 48px 36px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.form-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: rgba(176,134,82,0.14);
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-success h3 {
  font-family: var(--font-display);
  font-size: 1.72rem;
  margin-bottom: 12px;
}
.form-success p {
  color: var(--ink-muted);
  line-height: 1.7;
  max-width: 440px;
  margin: 0 auto 8px;
}
.form-success-sub { margin-top: 16px !important; font-size: 0.9rem; }
.form-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}
.form-success-actions .btn { font-size: 0.88rem; padding: 12px 22px; }

/* Feedback for the contact and newsletter forms. `notice` is the honest
   middle ground while nothing is wired to a mailbox; `error` only appears
   when a submission really failed. */
.form-message {
  border: 1px solid;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.form-message--notice {
  background: rgba(176,134,82,0.10);
  border-color: rgba(176,134,82,0.4);
  color: var(--ink-muted);
}
.form-message--error {
  background: rgba(160,60,44,0.08);
  border-color: rgba(160,60,44,0.35);
  color: #8d3527;
}

.form-legal {
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: -4px;
}

/* =============================================
   NEWSLETTER
   ============================================= */
.newsletter-section {
  padding: 80px 0;
  background: linear-gradient(135deg, rgba(176,134,82,0.12) 0%, rgba(245,158,11,0.08) 100%);
  border-top: 1px solid rgba(176,134,82,0.15);
  border-bottom: 1px solid rgba(176,134,82,0.15);
}

.newsletter-container {
  max-width: 620px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.newsletter-icon { font-size: 3rem; animation: float 3s ease-in-out infinite; }
.newsletter-icon-svg { 
  width: 48px; 
  height: 48px; 
  color: var(--cyan);
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

.newsletter-container h2 {
  font-size: clamp(1.72rem, 3.2vw, 2.35rem);
  font-weight: 500;
}

.newsletter-container p { color: var(--ink-muted); font-size: 0.95rem; }

.newsletter-form {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}
.newsletter-form input {
  flex: 1;
  background: var(--card);
  border: 1px solid rgba(176,134,82,0.4);
  border-radius: 999px;
  padding: 14px 20px;
  color: var(--ink);
  font-family: var(--font-main);
  font-size: 0.9rem;
  outline: none;
  transition: var(--transition);
}
.newsletter-form input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(176,134,82,0.1);
}
.newsletter-form input::placeholder { color: rgba(51,38,26,0.35); }

.newsletter-form button {
  background: linear-gradient(135deg, var(--cyan), #8a6437);
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 20px rgba(176,134,82,0.4);
  white-space: nowrap;
}
.newsletter-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(176,134,82,0.55);
}

.newsletter-success {
  color: var(--cyan);
  font-weight: 600;
  font-size: 0.95rem;
}

.newsletter-legal {
  font-size: 0.75rem !important;
  color: var(--ink-faint) !important;
}

/* =============================================
   FOOTER
   ============================================= */
.footer {
  background: var(--ocean-light);
  padding: 80px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
}

.footer-brand p {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-top: 16px;
  max-width: 300px;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.social-link {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid rgba(176,134,82,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  transition: var(--transition);
}
.social-link:hover {
  background: rgba(176,134,82,0.15);
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-3px);
}

.footer-links h4 {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.footer-links ul { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 0.88rem;
  color: var(--ink-muted);
  transition: var(--transition);
}
.footer-links a:hover { color: var(--cyan); padding-left: 4px; }

.footer-bottom {
  border-top: 1px solid rgba(51,38,26,0.1);
  padding: 24px 0;
}
.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--ink-faint);
}

/* =============================================
   BACK TO TOP
   ============================================= */
.back-to-top {
  position: fixed;
  bottom: 32px; right: 32px;
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--cyan), #8a6437);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: var(--transition);
  box-shadow: 0 4px 20px rgba(176,134,82,0.4);
  z-index: 900;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}
.back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(176,134,82,0.6);
}

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .captain-grid { grid-template-columns: 1fr; gap: 48px; }
  .captain-img { height: 360px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* =============================================
   DESKTOP REVIEWS COLLAPSE
   Above 768px the swipe strip does not apply, so instead of a tall
   wall of 22 cards the grid shows exactly one full row and the rest
   sit behind the "Show all reviews" button. The visible count tracks
   the column count: 2 columns between 769-1027px, 3 columns from
   1028px up (the container caps at 1200px, so it never reaches 4).
   ============================================= */
@media (min-width: 769px) and (max-width: 1027px) {
  .reviews-grid.is-collapsed .review-card:nth-child(n+3) { display: none; }
}

/* The nav font is wider than the body font, so the bar runs out of room
   just above the mobile breakpoint. Tighten it rather than let it wrap. */
@media (min-width: 769px) and (max-width: 960px) {
  .nav-container { gap: 16px; }
  .nav-links { gap: 2px; }
  .nav-link { padding: 8px 10px; }
  .nav-cta { padding: 10px 16px; }
}

@media (min-width: 1028px) {
  .reviews-grid.is-collapsed .review-card:nth-child(n+4) { display: none; }
}

/* The button belongs to every width where cards are hidden behind it,
   which is every desktop width. */
@media (min-width: 769px) {
  .reviews-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 32px auto 0;
    padding: 14px 32px;
    min-height: 48px;
    border: 1px solid rgba(176,134,82,0.5);
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cyan-light);
    cursor: pointer;
    transition: var(--transition);
  }
  .reviews-more:hover {
    background: var(--cyan);
    border-color: var(--cyan);
    color: var(--white);
  }
  .reviews-more .reviews-hint-arrow { width: 20px; }
  .reviews-more.is-open .reviews-hint-arrow { transform: rotate(90deg); }
  .reviews-more.is-open .reviews-hint-arrow::after { display: none; }
}

.reviews-more:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .nav-links { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 280px; background: rgba(24,16,10,0.98); backdrop-filter: blur(20px); flex-direction: column; justify-content: center; align-items: flex-start; padding: 80px 32px; gap: 16px; transform: translateX(100%); transition: var(--transition); z-index: 999; border-left: 1px solid rgba(176,134,82,0.2); }
  .nav-links.open { display: flex; transform: translateX(0); }
  .nav-link { font-size: 1.1rem; color: var(--white); padding: 10px 0; min-height: 44px; }
  .nav-cta { margin-top: 16px; }
  .burger-btn { display: flex; z-index: 1000; }

  .hero-content { padding: 110px 20px 60px; }

  .trips-grid { grid-template-columns: 1fr; }
  .calendar-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr 1fr; }

  /* Reviews become a swipeable strip: ~2.5 cards in view so it is
     obvious there is more to the right. Cards keep their own height. */
  .reviews-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 24px 20px;
    margin: 0 -24px;
  }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .review-card {
    flex: 0 0 78%;
    scroll-snap-align: center;
    align-self: flex-start;
  }
  .reviews-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
  }
  .reviews-hint-arrow {
    width: 22px; height: 2px;
    background: currentColor;
    position: relative;
  }
  .reviews-hint-arrow::after {
    content: '';
    position: absolute;
    right: 0; top: -3px;
    width: 8px; height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
  }
  .footer-grid { grid-template-columns: 1fr; }

  .trip-overlay { opacity: 1; background: rgba(24,16,10,0.15); }
  .trip-card-img-wrap { height: 200px; }
  .trip-meta { flex-wrap: wrap; gap: 4px 8px; }
  .trip-footer { flex-wrap: wrap; gap: 12px; }

  .captain-img { height: 320px; }

  /* Padlet apila el contenido en vertical dentro del iframe, necesita mas alto */
  .board-head { flex-wrap: wrap; padding: 16px 20px; }
  .board-frame iframe { height: 640px; }
  .board-note { padding: 12px 20px 14px; }

  .form-row { grid-template-columns: 1fr; }

  .form-group input,
  .form-group select,
  .form-group textarea,
  .newsletter-form input { font-size: 16px; }

  .contact-method { min-height: 56px; }

  .footer-bottom .container { flex-direction: column; gap: 8px; text-align: center; }

  .newsletter-form { flex-direction: column; }

  .hero-actions { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .features-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 2.05rem; }
  .section-title { font-size: 1.85rem; margin-bottom: 32px; }
  .hero-scroll-hint { display: none; }
  .contact-form { padding: 24px; }
  .contact-method { padding: 16px; }
  .faq-question { font-size: 0.9rem; padding: 18px; }
  .trip-footer { flex-direction: column; align-items: flex-start; gap: 10px; }
  .newsletter-form button { width: 100%; }
  .footer-grid { gap: 40px; }
  .captain-img { height: 260px; }

  .board-head { padding: 12px 20px; }
  .board-frame iframe { height: 560px; }

  /* Tighter cards so the strip still reads as cards, not banners. */
  .review-card { flex-basis: 82%; padding: 24px; }
  .review-text { font-size: 0.95rem; }
}

@media (hover: none) {
  .feature-card:hover,
  .trip-card:hover,
  .cal-month:hover,
  .review-card:hover,
  .contact-method:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .btn-outline:hover,
  .btn-social:hover { transform: none; }
  .trip-card:hover .trip-card-img { transform: none; }
  .cal-arrow { opacity: 1; }
  .trip-overlay { opacity: 1; }
}

/* =============================================
   LEGAL PAGES (privacy, terms, cookies)
   ============================================= */
.legal-page {
  padding: 150px 0 100px;
}
.legal-content {
  max-width: 820px;
}
.legal-content .legal-updated {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 2.5rem;
}
.legal-content h2 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.3;
  margin: 2.4rem 0 0.7rem;
  color: var(--ink);
}
.legal-content p {
  color: var(--ink-muted);
  margin-bottom: 0.9rem;
}
.legal-content ul {
  margin: 0 0 1.1rem 1.25rem;
}
.legal-content li {
  color: var(--ink-muted);
  margin-bottom: 0.4rem;
}
.legal-content strong { color: var(--ink); }
.legal-content a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-content a:hover { color: var(--gold); }

@media (max-width: 640px) {
  .legal-page { padding: 110px 0 70px; }
  .legal-content h2 { font-size: 1.25rem; }
}