/* ============================================================
   pages-v6.css — navy palette, full-screen mobile headers,
   slider polish, trust-bar redesign, mobile spacing
   Loaded LAST after styles.css, pages-extra.css, pages-v3.css,
   pages-v4.css, pages-v5.css
   ============================================================ */

/* ============================================================
   1. PALETTE OVERRIDE — slate → navy #20477d
   ============================================================ */
:root {
  --slate:   #20477d !important;
  --slate-2: #2b5a99 !important;
  --slate-3: #4a6f9e !important;
  --mid:     #20477d !important;
  --ocean:   #4a86c8 !important;
  --sky:     #b3cce6 !important;
  --navy-deep: #16335c;
  --navy-mid:  #20477d;
  --navy-light: #d8e3f0;
  --gold: #c98f3c;
}

/* Light backgrounds tinted navy instead of warm grey */
body { color: var(--navy-deep); background: #f5f8fc; }
.transfers { background: #eaf0f7 !important; }
.trust-bar { background: #fff; border-top: 1px solid #dbe3ee !important; border-bottom: 1px solid #dbe3ee !important; }

/* btn-primary uses navy */
.btn-primary { background: var(--navy-mid) !important; color: #fff !important; border-color: var(--navy-mid) !important; }
.btn-primary:hover { background: var(--navy-deep) !important; border-color: var(--navy-deep) !important; }
.btn-outline { color: var(--navy-mid) !important; border-color: var(--navy-mid) !important; }
.btn-outline:hover { background: var(--navy-mid) !important; color: #fff !important; }

/* ============================================================
   2. MOBILE: FULL-SCREEN HEADERS — every subhero like homepage hero
   ============================================================ */
@media (max-width: 760px) {
  .subhero,
  .hero {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    width: 100%;
    overflow: hidden;
  }
  .subhero .wrap,
  .hero .hero-inner {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    padding-top: 86px !important;
    padding-bottom: 28px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
  }

  /* bigger mobile H1 */
  .subhero h1,
  .hero h1 {
    font-size: clamp(34px, 10vw, 50px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.03em !important;
    margin-top: 6px !important;
  }
  .subhero .sub,
  .hero-sub {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-top: 14px !important;
  }
  .subhero .crumbs {
    font-size: 11px !important;
    letter-spacing: .14em !important;
    margin-bottom: 8px !important;
  }

  /* hero CTAs sit just above the bottom anchored stat-bar */
  .subhero .hero-ctas,
  .hero .hero-ctas {
    margin-top: 22px !important;
    margin-bottom: 16px !important;
  }
  /* stat-bar / trust-strip anchored bottom */
  .subhero .stat-bar { margin-top: auto !important; }
  .hero-trust { margin-top: auto !important; }
}

/* ============================================================
   3. HOMEPAGE HERO — slightly darker overlay for legibility
   ============================================================ */
.hero .scrim {
  background:
    linear-gradient(180deg, rgba(15,28,50,.55) 0%, rgba(15,28,50,.35) 30%, rgba(15,28,50,.78) 100%),
    linear-gradient(90deg, rgba(15,28,50,.45) 0%, rgba(15,28,50,.05) 60%) !important;
}

/* ============================================================
   4. "WHAT ARE YOU LOOKING FOR" — NOT a slider on mobile
   ============================================================ */
@media (max-width: 760px) {
  .service-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 10px !important;
    border: none !important;
  }
  .service-grid > .service-card {
    flex: none !important;
    min-width: 0 !important;
    width: auto !important;
    background: #fff !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 10px !important;
    padding: 18px 14px 16px !important;
    scroll-snap-align: none !important;
  }
  .service-card .num {
    font-size: 10px !important;
    color: var(--navy-mid) !important;
    letter-spacing: .16em !important;
  }
  .service-card .icon { margin-bottom: 14px !important; color: var(--navy-mid) !important; }
  .service-card .icon svg { width: 52px !important; height: 52px !important; }
  .service-card h3 { font-size: 15px !important; line-height: 1.2 !important; }
  .service-card p {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: #4a6f9e !important;
    margin-bottom: 12px !important;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .service-card .link-arrow {
    font-size: 11.5px !important;
    color: var(--navy-mid) !important;
    border-color: var(--navy-mid) !important;
  }
}

/* ============================================================
   5. MOBILE SLIDERS — first card visible/breathing, not squashed
   We use scroll-padding + first-child margin so the card aligns
   nicely with the body text, with consistent edge breathing room.
   ============================================================ */
@media (max-width: 760px) {
  .tours-grid,
  .tour-grid,
  .events-grid,
  .blog-grid,
  .blog-feed-grid,
  .tm-examples-grid {
    margin: 0 -16px !important;
    padding: 6px 16px 22px !important;
    scroll-padding-left: 16px !important;
    scroll-padding-right: 16px !important;
    gap: 14px !important;
  }
  .tours-grid > *,
  .tour-grid > *,
  .events-grid > *,
  .blog-grid > *,
  .blog-feed-grid > *,
  .tm-examples-grid > * {
    flex: 0 0 86% !important;
    scroll-snap-align: start;
  }
  /* Add trailing padding so last card can scroll fully into view */
  .tours-grid::after,
  .tour-grid::after,
  .events-grid::after,
  .blog-grid::after,
  .blog-feed-grid::after,
  .tm-examples-grid::after {
    content: "";
    flex: 0 0 2px;
  }
}

/* ============================================================
   6. MOBILE — fill screen width, tighter edge gutters
   ============================================================ */
@media (max-width: 760px) {
  :root { --gutter: 16px !important; }
  .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }
  /* Section heads stretch fully */
  .section-head {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 22px !important;
  }
  .section-head h2 {
    font-size: clamp(28px, 7.5vw, 38px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
  }
  .section-head .lead {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  .h-eyebrow {
    font-size: 10.5px !important;
    letter-spacing: .2em !important;
    color: var(--navy-mid) !important;
  }
}

/* ============================================================
   7. MOBILE SECTION SPACING — let the site breathe
   ============================================================ */
@media (max-width: 760px) {
  section { padding: 72px 0 !important; }
  section.tight,
  .trust-bar { padding: 52px 0 !important; }
  /* keep hero / subhero unaffected (they set their own) */
  .hero,
  .subhero { padding: 0 !important; }
}

/* ============================================================
   8. TRUST-BAR REDESIGN — clean navy card grid
   ============================================================ */
.trust-bar {
  background: #fff;
  padding: 80px 0 !important;
}
.trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
.trust-heading {
  grid-column: 1 / -1;
  font-size: clamp(28px, 2.8vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  color: var(--navy-deep) !important;
  max-width: 24ch;
  margin-bottom: 48px;
}
.trust-heading em {
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--navy-mid) !important;
}
.trust-item {
  border-left: 1px solid #dbe3ee !important;
  padding: 8px 28px !important;
  min-height: 120px !important;
  justify-content: center;
}
.trust-item:first-of-type { border-left: none !important; padding-left: 0 !important; }
.trust-item .num {
  font-size: 56px !important;
  color: var(--navy-deep) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.trust-item .stars svg { width: 18px !important; height: 18px !important; color: var(--gold) !important; }
.trust-item .src {
  color: #4a6f9e !important;
  font-size: 13.5px !important;
}
.trust-item .src strong { color: var(--navy-deep) !important; font-size: 14.5px !important; }
.trust-item.badge-item .badge { height: 64px !important; }

@media (max-width: 1000px) {
  .trust-grid { grid-template-columns: 1fr 1fr; gap: 32px 0; }
  .trust-heading { margin-bottom: 12px; }
  .trust-item:nth-of-type(odd) { border-left: none !important; padding-left: 0 !important; }
  .trust-item:nth-of-type(even) { border-left: 1px solid #dbe3ee !important; }
}
@media (max-width: 600px) {
  .trust-bar { padding: 56px 0 !important; }
  .trust-grid { grid-template-columns: 1fr !important; gap: 24px 0; }
  .trust-heading {
    font-size: clamp(26px, 7.5vw, 36px) !important;
    margin-bottom: 4px;
  }
  .trust-item {
    border-left: none !important;
    border-top: 1px solid #dbe3ee !important;
    padding: 20px 0 0 !important;
    min-height: 0 !important;
  }
  .trust-item:first-of-type { border-top: none !important; padding-top: 8px !important; }
  .trust-item .num { font-size: 44px !important; }
  .trust-item.badge-item .badge { height: 52px !important; }
}

/* ============================================================
   9. SUBHERO COLOURING — replace cool grey shadows with navy
   ============================================================ */
.subhero .bg::after {
  background:
    linear-gradient(180deg, rgba(15,28,50,.55) 0%, rgba(15,28,50,.35) 30%, rgba(15,28,50,.85) 100%),
    linear-gradient(90deg, rgba(15,28,50,.45) 0%, rgba(15,28,50,.05) 60%) !important;
}
.contact-block-v2 {
  background: var(--navy-deep) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
}
.contact-block-v2 .form-side { background: var(--navy-deep) !important; }
.contact-block-v2 .info-side {
  background: linear-gradient(160deg, #1b3c6d 0%, #14305a 100%) !important;
  border-left-color: rgba(255,255,255,.06) !important;
}
.contact-block-v2 .form-side h2 em { color: var(--gold) !important; }
.contact-block-v2 .form-side .h-eyebrow { color: var(--gold) !important; }
.yacht-charter { background: var(--navy-deep) !important; }
.yacht-grid h2 em { color: var(--gold) !important; }
.fleet-card-feat,
.fleet-card-feat .body { background: var(--navy-deep) !important; }
.fleet-card-feat .body .type { color: var(--gold) !important; }
.fleet-card-feat .body .view {
  border-color: var(--gold) !important;
}
.fleet-card-feat .body .view:hover { color: var(--gold) !important; }

/* footer */
.site-footer { background: var(--navy-deep) !important; }
.about-intro,
.subhero {
  background: var(--navy-deep) !important;
}

/* heading em italics → gold (was sand) */
h1 em, h2 em, h3 em { color: var(--gold) !important; }
.hero h1 em, .subhero h1 em { color: var(--gold) !important; }

/* Section labels / eyebrows */
.h-eyebrow { color: var(--navy-mid) !important; }
.h-eyebrow span { background: var(--navy-mid) !important; }
section .h-eyebrow[style*="--sand"],
section [class] .h-eyebrow { color: inherit; }

/* WhatsApp FAB color is fine as green */

/* ============================================================
   10. Hero trust strip on mobile — bigger, anchored bottom
   ============================================================ */
@media (max-width: 760px) {
  .hero-trust {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 16px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(255,255,255,.18) !important;
  }
  .hero-trust-item { gap: 10px !important; }
  .hero-trust-item svg {
    width: 22px !important; height: 22px !important; flex: 0 0 22px !important;
    color: var(--gold) !important;
  }
  .hero-trust-item div { font-size: 12.5px !important; line-height: 1.3 !important; }
}

/* ============================================================
   11. CTA color tweaks — secondary outline gets navy
   ============================================================ */
.subhero .hero-ctas .btn-primary,
.hero-ctas .btn-primary {
  background: #fff !important;
  color: var(--navy-deep) !important;
  border-color: #fff !important;
}
.subhero .hero-ctas .btn-primary:hover,
.hero-ctas .btn-primary:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
}

/* Service card link-arrow */
.service-card .link-arrow { color: var(--navy-mid) !important; border-color: var(--navy-mid) !important; }
.link-arrow { color: var(--navy-mid); }
.link-arrow:hover { color: var(--gold) !important; }

/* eyebrow accent line */
.h-eyebrow span { background: currentColor !important; }

/* Sand-colored eyebrows on dark backgrounds → gold */
[style*="--sand"] { color: var(--gold) !important; }
.h-eyebrow[style*="color: var(--sand)"] { color: var(--gold) !important; }

/* Stars are gold */
.testi-platform .stars,
.trust-item .stars,
.about-badge-card .stars,
.rb-stars { color: var(--gold) !important; }

/* Sand wherever it's used as accent */
.subhero .stat-bar .stat .ic { color: var(--gold) !important; }
.duration-tag,
.review-tag svg { color: var(--gold) !important; }

/* Section foot CTA */
.section-foot .btn-outline { color: var(--navy-mid) !important; border-color: var(--navy-mid) !important; }
.section-foot .btn-outline:hover { background: var(--navy-mid) !important; color: #fff !important; }

/* badge-type pill on rent-a-boat */
.badge-type { background: var(--navy-mid) !important; color: #fff !important; }

/* ============================================================
   12. MOBILE — section heads & cards inside section breathe more
   ============================================================ */
@media (max-width: 760px) {
  /* tighter top-of-section so the breathing comes from `padding:72` */
  .featured, .services, .fleet, .why, .daytrips, .transfers,
  .celebrate, .testimonials, .faq-contact, .blog-feed {
    padding: 64px 0 !important;
  }
}

/* ============================================================
   13. Tablet — keep service grid as 2 columns (was already)
   ============================================================ */
@media (min-width: 761px) and (max-width: 1100px) {
  .service-grid { grid-template-columns: repeat(2, 1fr) !important; }
}