/* ============================================================
   theme-v7.css
   Palette refresh + Celebrate redesign + headerless-page nav fix.

   Brand primary:   #102c54  deep navy   (buttons, links, accents)
   Brand hover:     #1a4078
   Brand warm:      #C97A3F  warm terracotta (eyebrows + warm accents)
   Brand warm soft: #E2A876

   Card / body text is intentionally NEUTRAL dark — no more slate-blue.
   ============================================================ */

:root {
  --brand:        #102c54;
  --brand-hover:  #1a4078;
  --brand-soft:   rgba(16, 44, 84, .08);
  --brand-warm:   #C97A3F;
  --brand-warm-hover: #B16632;

  /* Neutral dark scale (warm-tinted grays, no blue cast) */
  --ink:        #1B1F26;
  --ink-2:      #2B313A;
  --ink-3:      #5C636C;
  --ink-soft:   #8A8F96;
  --hairline:   rgba(27, 31, 38, .12);
  --hairline-2: rgba(27, 31, 38, .22);
}

/* --------- Base text colors (override the slate-blue defaults) --------- */
body { color: var(--ink-2); }
h1, h2, h3, h4 { color: var(--ink); }
.lead { color: var(--ink-2); }
p { color: inherit; }

/* Eyebrows: warm accent (was mid-blue) */
.h-eyebrow { color: var(--brand-warm); }

/* --------- Cards: kill the blue-slate text tones --------- */
.service-card h3,
.tour-card h3,
.fleet-card-sec .body h3,
.transfer-card h3,
.why-item h3 { color: var(--ink); }

.service-card p,
.tour-card .hook,
.fleet-card-sec .body p,
.transfer-card p,
.why-item p,
.lead { color: var(--ink-3); }

.service-card .num,
.service-card .icon,
.fleet-card-sec .body .count,
.tour-card .price small,
.transfer-card .routes,
.transfer-card .ic { color: var(--ink-soft); }

.tour-card .price,
.fleet-card-sec .body .view { color: var(--ink); }
.fleet-card-sec .body .view { border-bottom-color: var(--brand); color: var(--brand); }
.fleet-card-sec .body .view:hover { color: var(--brand-warm); border-bottom-color: var(--brand-warm); }

.service-card .link-arrow { color: var(--brand); border-color: var(--brand); }
.service-card .link-arrow:hover { color: var(--brand-warm); border-color: var(--brand-warm); }

.tour-card .check { color: var(--brand); }
.tour-card .meta { color: var(--ink-soft); border-bottom-color: var(--hairline); }

/* Trust bar */
.trust-item .num { color: var(--ink); }
.trust-item .src strong { color: var(--ink); }
.trust-item .src { color: var(--ink-soft); }
.trust-item h2 { color: var(--ink); }

/* Footer-ish text spots */
.transfer-card .ic { color: var(--brand); }
.why-item .ic { color: var(--brand); }

/* --------- BUTTONS --------- */
.btn-primary {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
.btn-primary:hover {
  background: var(--brand-hover); border-color: var(--brand-hover);
}
.btn-outline { color: var(--brand); border-color: var(--brand); background: transparent; }
.btn-outline:hover { background: var(--brand); color: #fff; }
.btn-ghost { color: var(--brand); border-bottom-color: var(--brand); }
.btn-ghost:hover { color: var(--brand-warm); border-color: var(--brand-warm); }

.hero-ctas .btn-primary { background: #fff; color: var(--brand); border-color: #fff; }
.hero-ctas .btn-primary:hover { background: var(--brand-warm); color: #fff; border-color: var(--brand-warm); }

/* Header CTA */
.site-header.is-solid .header-cta {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
.site-header.is-solid .header-cta:hover {
  background: var(--brand-hover); border-color: var(--brand-hover);
}

/* --------- LINKS --------- */
.link-arrow { color: var(--brand); border-color: var(--brand); }
.link-arrow:hover { color: var(--brand-warm); border-color: var(--brand-warm); gap: 14px; }
a:hover { color: var(--brand); }

/* --------- DARK SURFACES — unify on brand navy --------- */
.fleet-card-feat,
.fleet-card-feat .body,
.yacht-charter { background: var(--brand); }
.fleet-card-feat .body .type,
.yacht-grid h2 em { color: var(--brand-warm) !important; }

/* Solid nav text — neutral dark */
.site-header.is-solid .brand .brand-text,
.site-header.is-solid .primary-nav a,
.site-header.is-solid .lang-switch a,
.site-header.is-solid .menu-toggle { color: var(--ink); }
.site-header.is-solid .primary-nav a:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* ============================================================
   HEADERLESS PAGES — pages whose first section after the header
   is a gallery (tour-gallery / boat-gallery-top) have no hero
   image behind the nav. Force the solid-state nav appearance so
   nav links don't disappear against the beige background.
   ============================================================ */
@supports selector(:has(*)) {
  body:has(> .site-header + .tour-gallery) .site-header,
  body:has(> .site-header + .boat-gallery-top) .site-header,
  body:has(> .site-header + section.tour-gallery) .site-header,
  body:has(> .site-header + section.boat-gallery-top) .site-header {
    background: rgba(247,244,239,.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hairline);
  }
  body:has(> .site-header + .tour-gallery) .site-header .brand img.mark,
  body:has(> .site-header + .boat-gallery-top) .site-header .brand img.mark {
    filter: none;
  }
  body:has(> .site-header + .tour-gallery) .site-header .brand .brand-text,
  body:has(> .site-header + .boat-gallery-top) .site-header .brand .brand-text,
  body:has(> .site-header + .tour-gallery) .site-header .primary-nav a,
  body:has(> .site-header + .boat-gallery-top) .site-header .primary-nav a,
  body:has(> .site-header + .tour-gallery) .site-header .lang-switch a,
  body:has(> .site-header + .boat-gallery-top) .site-header .lang-switch a,
  body:has(> .site-header + .tour-gallery) .site-header .menu-toggle,
  body:has(> .site-header + .boat-gallery-top) .site-header .menu-toggle {
    color: var(--ink);
  }
  body:has(> .site-header + .tour-gallery) .site-header .primary-nav a:hover,
  body:has(> .site-header + .boat-gallery-top) .site-header .primary-nav a:hover {
    color: var(--brand);
    border-bottom-color: var(--brand);
  }
  body:has(> .site-header + .tour-gallery) .site-header .header-cta,
  body:has(> .site-header + .boat-gallery-top) .site-header .header-cta {
    background: var(--brand); color: #fff; border-color: var(--brand);
  }
  body:has(> .site-header + .tour-gallery) .site-header .header-cta:hover,
  body:has(> .site-header + .boat-gallery-top) .site-header .header-cta:hover {
    background: var(--brand-hover); border-color: var(--brand-hover);
  }
  /* Push the first gallery section down a touch so it clears the now-solid header */
  body:has(> .site-header + .tour-gallery) .tour-gallery,
  body:has(> .site-header + .boat-gallery-top) .boat-gallery-top {
    padding-top: 110px !important;
  }
}

/* ============================================================
   CELEBRATE — redesigned section.
   Old version: full-bleed images with text overlaid on a dark
   gradient. On mobile the text fought with the photography and
   the gradient muddied both. The new version splits image and
   content into a clean editorial card: photo on top, copy on a
   warm cream panel below. Side-by-side on desktop, stacked on
   mobile with comfortable breathing room.
   ============================================================ */
.celebrate {
  background: var(--off);
  color: var(--ink) !important;
  padding: 96px 0 !important;
  border-top: 1px solid var(--hairline);
}

/* Optional intro headline above the cards */
.celebrate .wrap-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.celebrate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.celebrate-cell {
  position: relative;
  display: grid;
  grid-template-rows: 320px auto;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: 0 !important;
  min-height: 0 !important;
  justify-content: initial !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.celebrate-cell:hover {
  transform: translateY(-2px);
  border-color: var(--hairline-2);
  box-shadow: 0 22px 48px -28px rgba(16, 44, 84, .35);
}

.celebrate-cell .bg {
  position: relative !important;
  inset: auto !important;
  width: 100%; height: 100%;
  overflow: hidden;
}
.celebrate-cell .bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.celebrate-cell:hover .bg img { transform: scale(1.04); }
.celebrate-cell .bg::after { display: none !important; }

.celebrate-cell .content {
  position: relative !important;
  padding: 36px 40px 40px !important;
  max-width: none !important;
  background: #fff;
}

.celebrate-cell .h-eyebrow {
  color: var(--brand-warm) !important;
  font-size: 11px;
  letter-spacing: .22em;
}

.celebrate-cell h3 {
  color: var(--ink) !important;
  font-size: clamp(26px, 2.2vw, 32px) !important;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-top: 16px !important;
}

.celebrate-cell p {
  color: var(--ink-3) !important;
  margin-top: 16px;
  font-size: 15.5px;
  line-height: 1.6;
}

.celebrate-cell .link-arrow {
  margin-top: 28px !important;
  color: var(--brand) !important;
  border-color: var(--brand) !important;
  border-bottom-width: 1px;
  padding-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.celebrate-cell .link-arrow:hover {
  color: var(--brand-warm) !important;
  border-color: var(--brand-warm) !important;
  gap: 16px;
}
.celebrate-cell .link-arrow svg { stroke: currentColor; }

/* Mobile */
@media (max-width: 900px) {
  .celebrate { padding: 56px 0 !important; }
  .celebrate-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 18px;
  }
  .celebrate-cell { grid-template-rows: 240px auto; }
  .celebrate-cell .content { padding: 26px 24px 28px !important; }
  .celebrate-cell h3 { font-size: 24px !important; margin-top: 12px !important; }
  .celebrate-cell p { font-size: 15px; margin-top: 12px; }
  .celebrate-cell .link-arrow { margin-top: 22px !important; }
}
@media (max-width: 480px) {
  .celebrate-cell { grid-template-rows: 200px auto; }
  .celebrate-cell .content { padding: 22px 20px 24px !important; }
}

/* The h-eyebrow on the celebrate cells carried an inline `color: var(--sand)` —
   leave the inline style alone; the rule above wins via !important. */