/* ============================================================
   pages-v5.css — header standardization, contact redesign,
   wider gutters, smaller mobile CTAs
   Loaded AFTER styles.css, pages-extra.css, pages-v3.css, pages-v4.css
   ============================================================ */

/* ============================================================
   1. KILL DUPLICATE STAT-BAR ICONS
   v3.css added ::before pseudo-icons in addition to the .ic SVGs
   already in HTML. Wipe the pseudo-icons.
   ============================================================ */
.subhero .stat-bar .stat::before { content: none !important; display: none !important; }

/* ============================================================
   2. SUBHERO LAYOUT — stat-bar BELOW CTAs at bottom of header
   ============================================================ */
.subhero {
  display: flex !important;
  flex-direction: column !important;
}
.subhero .wrap {
  display: flex !important;
  flex-direction: column !important;
  flex: 1;
  min-height: 100%;
  width: 100%;
}
.subhero .crumbs { order: 1; }
.subhero h1 { order: 2; }
.subhero .sub { order: 3; }
.subhero .hero-ctas { order: 4; }
.subhero .stat-bar {
  order: 5;
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

/* desktop: bigger stat-bar that fills more space */
@media (min-width: 1101px) {
  .subhero .stat-bar {
    margin-top: auto !important;
    padding: 6px 0 !important;
  }
  .subhero .stat-bar .stat {
    padding: 24px 28px !important;
    min-height: 108px !important;
    grid-template-columns: 44px 1fr !important;
    gap: 18px !important;
  }
  .subhero .stat-bar .stat .ic {
    width: 44px !important; height: 44px !important; flex: 0 0 44px !important;
  }
  .subhero .stat-bar .stat .ic svg {
    width: 40px !important; height: 40px !important;
  }
  .subhero .stat-bar .stat .v {
    font-size: clamp(22px, 1.8vw, 30px) !important;
  }
  .subhero .stat-bar .stat .l {
    font-size: 11.5px !important;
    letter-spacing: .24em !important;
  }
}

/* hide every legacy second-button block — was producing 4 CTAs */
.subhero .wrap > div[style*="margin-top:28px"][style*="display:flex"],
.subhero .wrap > div[style*="margin-top:34px"][style*="display:flex"],
.subhero .wrap > div[style*="margin-top:28px"][style*="flex-wrap"],
.subhero .wrap > div[style*="margin-top:34px"][style*="flex-wrap"] {
  display: none !important;
}

/* ============================================================
   3. DARK OVERLAY — slightly more readability on standard headers
   ============================================================ */
.subhero .bg::after {
  background:
    linear-gradient(180deg, rgba(15,22,32,.55) 0%, rgba(15,22,32,.4) 35%, rgba(15,22,32,.85) 100%),
    linear-gradient(90deg, rgba(15,22,32,.45) 0%, rgba(15,22,32,.05) 65%) !important;
}

/* ============================================================
   4. STANDARDIZE HEADER TYPE SIZES — match the homepage hero
   ============================================================ */
.subhero h1 {
  font-size: clamp(40px, 5vw, 72px) !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.025em !important;
}
.subhero .sub {
  font-size: clamp(17px, 1.25vw, 20px) !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.92) !important;
  line-height: 1.55 !important;
  max-width: 62ch !important;
  margin-top: 22px !important;
}

/* keep subhero a fixed/comfortable height */
.subhero { min-height: 100svh !important; }
@media (max-width: 760px) {
  /* match homepage hero height on mobile */
  .subhero { min-height: 92svh !important; display: flex !important; }
  .subhero .wrap {
    flex: 1;
    min-height: 100%;
    padding-top: 90px !important;
    padding-bottom: 24px !important;
  }
  .subhero h1 {
    font-size: clamp(30px, 8.5vw, 46px) !important;
  }
  .subhero .sub {
    font-size: 15.5px !important;
    margin-top: 14px !important;
  }
}

/* tablet — between phone and desktop */
@media (min-width: 761px) and (max-width: 1100px) {
  .subhero { min-height: 90svh !important; }
  .subhero .wrap { padding-top: 120px !important; padding-bottom: 48px !important; }
  .subhero h1 { font-size: clamp(36px, 5.5vw, 56px) !important; }
  .subhero .sub { font-size: 16px !important; max-width: 56ch !important; }
  .subhero .stat-bar { grid-template-columns: repeat(4, 1fr) !important; }
  .subhero .stat-bar .stat { padding: 16px 16px !important; min-height: 84px !important; }
  .subhero .stat-bar .stat:nth-child(2) { border-right: 1px solid rgba(255,255,255,.14) !important; }
  .subhero .stat-bar .stat:nth-child(-n+2) { border-bottom: none !important; }
}

/* ============================================================
   5. CTA BUTTONS — smaller on mobile, tighter copy site-wide
   ============================================================ */
@media (max-width: 760px) {
  .subhero .hero-ctas { gap: 8px !important; margin-top: 18px !important; }
  .subhero .hero-ctas .btn {
    flex: 1 1 auto;
    padding: 11px 12px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    min-width: 0 !important;
    letter-spacing: 0 !important;
  }
  .subhero .hero-ctas .btn svg { width: 14px !important; height: 14px !important; }

  /* same for hero on homepage */
  .hero .hero-ctas { gap: 8px; }
  .hero .hero-ctas .btn {
    padding: 11px 12px !important;
    font-size: 12.5px !important;
    flex: 1 1 auto;
  }
  .hero .hero-ctas .btn svg { width: 14px !important; height: 14px !important; }

  /* tour-hero / boat-hero CTAs */
  .tour-hero .ctas .btn,
  .boat-hero .ctas .btn {
    padding: 11px 12px !important;
    font-size: 12.5px !important;
    flex: 1 1 auto;
  }
  .tour-hero .ctas .btn svg,
  .boat-hero .ctas .btn svg { width: 14px !important; height: 14px !important; }
}

/* ============================================================
   6. WIDER WRAP ON DESKTOP — less wasted edge space
   ============================================================ */
@media (min-width: 1200px) {
  .wrap { max-width: 1380px !important; padding-left: 40px; padding-right: 40px; }
}
@media (min-width: 1500px) {
  .wrap { max-width: 1480px !important; padding-left: 56px; padding-right: 56px; }
}
@media (min-width: 1700px) {
  .wrap { max-width: 1560px !important; padding-left: 64px; padding-right: 64px; }
}

/* ============================================================
   7. INDIVIDUAL-BOAT — make header visible on white background
   The .boat-gallery-top sits directly below the transparent header
   and renders white, so the navbar is invisible. Force solid here.
   ============================================================ */
body:has(.boat-gallery-top) .site-header,
body:has(.boat-hero:first-of-type) .site-header {
  background: rgba(247,244,239,.96) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line) !important;
}
body:has(.boat-gallery-top) .site-header .brand img.mark,
body:has(.boat-hero:first-of-type) .site-header .brand img.mark { filter: none !important; }
body:has(.boat-gallery-top) .site-header .menu-toggle,
body:has(.boat-hero:first-of-type) .site-header .menu-toggle { color: var(--slate-2) !important; }
/* push gallery down so it doesn't sit under the now-solid header */
.boat-gallery-top { padding-top: 130px !important; }
@media (max-width: 760px) { .boat-gallery-top { padding-top: 100px !important; } }

/* ============================================================
   8. CONTACT BLOCK — REMOVE TOPIMG entirely + cleaner layout
   ============================================================ */
.contact-block-v2 .topimg { display: none !important; }
.contact-block-v2 {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  background: var(--slate);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.5);
}
.contact-block-v2 .inner {
  display: contents;
}
.contact-block-v2 .form-side {
  padding: 56px 56px !important;
  background: var(--slate);
}
.contact-block-v2 .info-side {
  padding: 56px 48px !important;
  background: linear-gradient(160deg, #1d2734 0%, #131a23 100%);
  border-left: 1px solid rgba(255,255,255,.06);
}
.contact-block-v2 .form-side .h-eyebrow {
  color: var(--sand) !important;
  font-size: 11.5px !important;
  letter-spacing: .22em !important;
  font-weight: 700 !important;
}
.contact-block-v2 .form-side h2 {
  color: #fff;
  font-family: var(--f-display);
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-top: 14px;
  margin-bottom: 14px;
}
.contact-block-v2 .form-side h2 em {
  color: var(--sand);
  font-style: italic;
  font-weight: 500;
}
/* inject the headline if a page's form-side doesn't already have one — uses sub copy */
.contact-block-v2 .form-side .lead {
  color: rgba(255,255,255,.72) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin-top: 12px !important;
  margin-bottom: 28px !important;
  max-width: 48ch !important;
}

@media (max-width: 880px) {
  .contact-block-v2 { grid-template-columns: 1fr; }
  .contact-block-v2 .form-side { padding: 28px 22px !important; }
  .contact-block-v2 .info-side {
    padding: 28px 22px !important;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .contact-block-v2 .form-side h2 { font-size: 24px; }
}

/* ============================================================
   9. ABOUT PAGE — turn .about-intro into a subhero
   ============================================================ */
.about-intro {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--slate);
  color: #fff;
  padding: 0 !important;
  overflow: hidden;
}
.about-intro .bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.about-intro .bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,22,32,.55) 0%, rgba(15,22,32,.4) 35%, rgba(15,22,32,.85) 100%),
    linear-gradient(90deg, rgba(15,22,32,.45) 0%, rgba(15,22,32,.05) 65%);
}
.about-intro .wrap {
  position: relative;
  z-index: 2;
  padding-top: 130px !important;
  padding-bottom: 56px !important;
  width: 100%;
}
.about-intro .grid { display: block !important; }
.about-intro .side-img { display: none !important; }
.about-intro h1 {
  font-size: clamp(40px, 5vw, 72px) !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.025em !important;
  color: #fff !important;
  max-width: 18ch;
}
.about-intro h1 em {
  color: var(--sand);
  font-style: italic;
  font-weight: 500;
}
.about-intro .lede {
  color: rgba(255,255,255,.92) !important;
  font-size: clamp(17px, 1.25vw, 20px) !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  max-width: 62ch !important;
  margin-top: 22px !important;
}
.about-intro .since {
  color: rgba(255,255,255,.85);
  margin-top: 22px;
}
.about-intro .since svg { color: var(--sand); }
@media (max-width: 760px) {
  .about-intro { min-height: auto; }
  .about-intro .wrap { padding-top: 100px !important; padding-bottom: 40px !important; }
  .about-intro h1 { font-size: clamp(30px, 8.5vw, 46px) !important; }
  .about-intro .lede { font-size: 15.5px !important; }
}

/* ============================================================
   10. FAQ — stat-bar already in page via JS injection below
   ============================================================ */

/* ============================================================
   11. Trim section gutters less aggressively on mobile (was 18px ok)
   ============================================================ */

/* ============================================================
   12. Last touch — force the 2 CTAs side-by-side on desktop
   so visual rhythm is identical site-wide
   ============================================================ */
.subhero .hero-ctas {
  flex-wrap: nowrap !important;
}
@media (max-width: 480px) {
  .subhero .hero-ctas { flex-wrap: wrap !important; }
}
.subhero .hero-ctas .btn {
  white-space: nowrap;
}

/* ============================================================
   13. Final CTA section above contact — remove harsh dark gradient
   The "Plan your day / Questions, answered / Quote within hours"
   block at the top of the final CTA on FAQ was confusing because the
   contact-block-v2 topimg already covered it visually. Now that
   .topimg is hidden, the rest naturally reads as one card.
   ============================================================ */
.final .wrap > .contact-block-v2 { margin-top: 0; }

/* ============================================================
   14. TABLET OPTIMISATIONS (761px – 1100px)
   ============================================================ */
@media (min-width: 761px) and (max-width: 1100px) {
  .wrap { padding-left: 28px; padding-right: 28px; }

  /* Service / featured grids: 2 cols on tablet */
  .service-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; }
  .tour-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px; }
  .tour-card, .home-featured-card { min-width: 0; }
  .tours-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px; }
  .boat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px; }
  .events-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px; }
  .blog-grid, .blog-feed-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px; }
  .transfer-grid { grid-template-columns: 1fr !important; gap: 20px; }
  .celebrate-grid { grid-template-columns: 1fr !important; }
  .yacht-grid { grid-template-columns: 1fr !important; }
  .fleet-grid-3 { grid-template-columns: 1fr !important; }
  .fleet-row-2 { grid-template-columns: 1fr 1fr !important; }
  .why-grid-v2 { grid-template-columns: repeat(2, 1fr) !important; }
  .about-stats-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .about-badges-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 36px; }
  .faq-cats { grid-template-columns: repeat(2, 1fr) !important; }
  .contact-block-v2 { grid-template-columns: 1fr !important; }
  .contact-block-v2 .info-side { border-left: none !important; border-top: 1px solid rgba(255,255,255,.06) !important; }

  /* Section header */
  .section-head { grid-template-columns: 1fr 1fr; gap: 28px; }
  .section-head h2 { font-size: clamp(28px, 4vw, 44px) !important; }

  /* Hero on homepage */
  .hero h1 { font-size: clamp(38px, 6vw, 60px) !important; }
  .hero-sub { font-size: 16px; max-width: 56ch; }
  .hero-trust { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* Boat / tour heroes */
  .tour-hero-grid { grid-template-columns: 1fr !important; gap: 26px; }
  .boat-hero-grid { grid-template-columns: 1.4fr 1fr !important; gap: 28px; }
  .boat-gallery-top .gallery-grid {
    grid-template-columns: 2fr 1fr 1fr !important;
    grid-template-rows: 260px !important;
  }

  /* Visit us / footer nap col */
  .nap { grid-column: span 2; }
}

/* mid-large desktops (1101-1400) — bump stat-bar size slightly less */
@media (min-width: 1101px) and (max-width: 1400px) {
  .subhero .stat-bar .stat { padding: 20px 22px !important; min-height: 96px !important; }
}