/* ============================================================
   pages-v3.css — global overrides applied AFTER styles.css & pages-extra.css
   Goals:
   - Top social-proof strip with gold stars (all pages)
   - Fix the cramped icon-stat rows in subhero / boat / tour / day-trip headers
   - Pillify "view tour" CTAs, redesign tour cards
   - Redesign boat cards with prominent icon stats
   - Redesign "Why book with us"
   - Redesign FAQ + Contact homepage block with inline form
   - Strong mobile improvements (smaller type, single-col stats)
   ============================================================ */

/* ---------- Top trust ribbon (above sticky header) ---------- */
.top-ribbon {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 65;
  background: var(--slate);
  color: rgba(255,255,255,.92);
  font-family: var(--f-body);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.top-ribbon .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  height: 38px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.top-ribbon .rb-rating {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.top-ribbon .rb-stars {
  display: inline-flex; gap: 1px; color: #E8B23B;
}
.top-ribbon .rb-stars svg { width: 13px; height: 13px; }
.top-ribbon .rb-rating strong { font-weight: 700; color: #fff; }
.top-ribbon .rb-rating .sep { color: rgba(255,255,255,.3); margin: 0 4px; }
.top-ribbon .rb-rating .src { color: rgba(255,255,255,.65); }
.top-ribbon .rb-utility {
  display: inline-flex; align-items: center; gap: 18px;
  color: rgba(255,255,255,.7);
}
.top-ribbon .rb-utility a { color: rgba(255,255,255,.82); }
.top-ribbon .rb-utility a:hover { color: #fff; }
.top-ribbon .rb-utility .it { display: inline-flex; align-items: center; gap: 6px; }
.top-ribbon .rb-utility svg { width: 13px; height: 13px; color: var(--sand); }
@media (max-width: 880px) {
  .top-ribbon { font-size: 11.5px; }
  .top-ribbon .wrap { height: 34px; }
  .top-ribbon .rb-utility .it:nth-child(2) { display: none; }
}
@media (max-width: 560px) {
  .top-ribbon .rb-utility .it:not(.it-wa) { display: none; }
  .top-ribbon .rb-rating .src { display: none; }
}

/* push sticky header down for ribbon */
.site-header { top: 38px; }
@media (max-width: 880px) { .site-header { top: 34px; } }

/* re-tune hero top padding so content clears ribbon + header */
.hero-inner { padding-top: 150px; }
@media (max-width: 800px) { .hero-inner { padding-top: 130px; } }
.subhero .wrap { padding-top: 160px; }
@media (max-width: 800px) { .subhero .wrap { padding-top: 135px; padding-bottom: 48px; } }
.boat-gallery-top { padding-top: 130px; }
.tour-hero { padding-top: 130px; }
@media (max-width: 800px) {
  .boat-gallery-top { padding-top: 110px; }
  .tour-hero { padding-top: 110px; }
}

/* ============================================================
   Subhero stat-bar — fix cramped 4-up icon strip
   Handles BOTH structures:
   - With icon: .stat > .ic + .meta (used in newer headers)
   - Without icon: .stat > .v + .l (used on rent-a-boat, private-tours subhero)
   ============================================================ */
.subhero .stat-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(20,28,38,.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--r);
  padding: 0;
  margin-top: 30px;
  max-width: 920px;
}
.subhero .stat-bar .stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 22px;
  border-right: 1px solid rgba(255,255,255,.14);
  min-height: 80px;
  justify-content: center;
}
.subhero .stat-bar .stat:last-child { border-right: none; }
.subhero .stat-bar .stat .ic {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sand);
  margin-bottom: 2px;
}
.subhero .stat-bar .stat .ic svg { width: 24px; height: 24px; stroke-width: 1.5; }
.subhero .stat-bar .stat .meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.subhero .stat-bar .stat .v {
  font-family: var(--f-display);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 600;
  line-height: 1.05;
  color: #fff;
  letter-spacing: -0.02em;
  display: block;
  white-space: nowrap;
}
.subhero .stat-bar .stat .l {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
  display: block;
  font-weight: 600;
  margin-top: 0 !important;
}
@media (max-width: 900px) {
  .subhero .stat-bar { grid-template-columns: 1fr 1fr; max-width: 100%; }
  .subhero .stat-bar .stat { padding: 14px 18px; min-height: 72px; }
  .subhero .stat-bar .stat:nth-child(2) { border-right: none; }
  .subhero .stat-bar .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.14); }
}
@media (max-width: 520px) {
  .subhero .stat-bar .stat .v { font-size: 16px; }
}

/* ============================================================
   Boat card — keep CTA aligned to bottom across columns
   (image 3: Borna I had an extra "3 ensuite cabins" line pushing
    the Request Quote button lower than its neighbours)
   ============================================================ */
.boat-card { height: 100%; }
.boat-card .body { display: flex; flex-direction: column; flex: 1; }
.boat-card .features { margin-bottom: 0; }
.boat-card .ctas { margin-top: auto !important; padding-top: 22px; }
.boat-grid { align-items: stretch; }

/* Smaller hero & subhero typography; tighter top spacing */
.hero h1 { font-size: clamp(38px, 5.8vw, 78px) !important; }
.subhero h1 { font-size: clamp(36px, 4.8vw, 64px) !important; }
.hero-content { padding-top: 12px; }
.hero-inner { padding-top: 128px !important; }
.subhero .wrap { padding-top: 140px !important; padding-bottom: 56px !important; }
@media (max-width: 800px) {
  .hero-inner { padding-top: 100px !important; padding-bottom: 24px !important; }
  .subhero .wrap { padding-top: 110px !important; padding-bottom: 40px !important; }
  .hero h1 { font-size: clamp(32px, 8.5vw, 44px) !important; }
  .subhero h1 { font-size: clamp(30px, 8vw, 44px) !important; }
}

/* ============================================================
   Top-ribbon: still visible on mobile but compact
   ============================================================ */
@media (max-width: 560px) {
  .top-ribbon .rb-rating strong { font-size: 12px; }
  .top-ribbon .rb-rating .src { display: none; }
  .top-ribbon .rb-utility { display: none; }
}

/* ============================================================
   Heros — tighten and reduce padding-top so content sits higher
   (user feedback: "push texts and elements little bit up")
   ============================================================ */
.boat-kpis-icon {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  margin-top: 32px;
  background: var(--white);
  overflow: hidden;
}
.boat-kpis-icon .kpi {
  display: grid !important;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 16px;
  padding: 22px 24px !important;
  border-right: 1px solid var(--line);
}
.boat-kpis-icon .kpi:last-child { border-right: none; }
.boat-kpis-icon .kpi .ic { width: 44px; height: 44px; flex: 0 0 44px; color: var(--olive); }
.boat-kpis-icon .kpi .ic svg { width: 36px; height: 36px; stroke-width: 1.4; }
.boat-kpis-icon .kpi .meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.boat-kpis-icon .kpi .v {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--slate);
  white-space: nowrap;
}
.boat-kpis-icon .kpi .l {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--slate-3);
  font-weight: 600;
  line-height: 1;
}
@media (max-width: 900px) {
  .boat-kpis-icon { grid-template-columns: 1fr 1fr; }
  .boat-kpis-icon .kpi { padding: 18px 18px !important; }
  .boat-kpis-icon .kpi:nth-child(odd) { border-right: 1px solid var(--line); }
  .boat-kpis-icon .kpi:nth-child(2),
  .boat-kpis-icon .kpi:nth-child(4) { border-right: none; }
  .boat-kpis-icon .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ============================================================
   Tour hero KPI strip — same redesign
   ============================================================ */
.tour-kpis {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  margin-top: 30px !important;
  background: var(--white);
  overflow: hidden;
}
.tour-kpis .kpi {
  display: grid !important;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 14px;
  padding: 20px 22px !important;
  border-right: 1px solid var(--line);
}
.tour-kpis .kpi:last-child { border-right: none; }
.tour-kpis .kpi .ic { flex: 0 0 40px; color: var(--olive); }
.tour-kpis .kpi .ic svg { width: 32px; height: 32px; stroke-width: 1.4; }
.tour-kpis .kpi .meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tour-kpis .kpi > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tour-kpis .kpi .v {
  display: block;
  font-family: var(--f-display); font-size: 16px; font-weight: 700;
  letter-spacing: -0.015em; color: var(--slate); line-height: 1.15;
  word-spacing: 0.02em;
  text-wrap: balance;
}
.tour-kpis .kpi .l {
  display: block;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--slate-3); font-weight: 600; line-height: 1;
  margin-top: 0 !important;
}
@media (max-width: 900px) {
  .tour-kpis { grid-template-columns: 1fr 1fr; }
  .tour-kpis .kpi:nth-child(odd) { border-right: 1px solid var(--line); }
  .tour-kpis .kpi:nth-child(2),
  .tour-kpis .kpi:nth-child(4) { border-right: none; }
  .tour-kpis .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ============================================================
   Tour listing card — pill "View tour" CTA + softer styling
   ============================================================ */
.tour-listing-card .foot {
  align-items: center;
}
.tour-listing-card .cta-lk {
  background: var(--slate-2);
  color: #fff !important;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background .2s ease, transform .15s ease;
}
.tour-listing-card .cta-lk:hover {
  background: var(--slate);
  transform: translateX(2px);
}
.tour-listing-card .cta-lk svg { stroke: #fff; }

/* ============================================================
   Boat card on rent-a-boat — primary CTA = Book Now (replace Request Quote)
   ============================================================ */
.boat-card .ctas .btn-outline { display: none; }
.boat-card .ctas .btn-primary { flex: 1; }

/* ============================================================
   Homepage header redesign: featured tours card (icon-rich)
   ============================================================ */
.home-featured-card {
  background: var(--white);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
  border: 1px solid var(--line);
  position: relative;
}
.home-featured-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px -30px rgba(20,30,46,.4);
  border-color: var(--line-2);
}
.home-featured-card .img {
  aspect-ratio: 4/3; overflow: hidden; position: relative;
}
.home-featured-card .img img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .8s;
}
.home-featured-card:hover .img img { transform: scale(1.05); }
.home-featured-card .duration-tag {
  position: absolute; top: 14px; left: 14px;
  background: rgba(255,255,255,.95);
  color: var(--slate);
  padding: 6px 11px;
  border-radius: 3px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
}
.home-featured-card .review-tag {
  position: absolute; top: 14px; right: 14px;
  background: rgba(20,28,38,.7);
  color: #fff;
  padding: 6px 10px;
  border-radius: 3px;
  font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
}
.home-featured-card .review-tag svg { width: 12px; height: 12px; color: #E8B23B; }
.home-featured-card .body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.home-featured-card h3 { font-size: 22px; letter-spacing: -0.02em; }
.home-featured-card p.hook {
  margin-top: 10px;
  font-size: 14px;
  color: var(--slate-3);
  line-height: 1.5;
  flex: 1;
}
.home-featured-card .icon-bar {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.home-featured-card .icon-bar .ib {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; padding: 4px 2px;
}
.home-featured-card .icon-bar svg { width: 20px; height: 20px; color: var(--olive); stroke-width: 1.5; }
.home-featured-card .icon-bar .k {
  font-family: var(--f-display);
  font-size: 13px; font-weight: 700; color: var(--slate); line-height: 1;
  letter-spacing: -0.01em;
}
.home-featured-card .icon-bar .l {
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--slate-3); font-weight: 600; line-height: 1;
}
.home-featured-card .cta {
  margin-top: 18px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--slate-2); color: #fff;
  padding: 13px 18px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  transition: background .2s ease;
}
.home-featured-card .cta:hover { background: var(--slate); }

/* ============================================================
   "Why book with us" — richer card layout
   ============================================================ */
.why-v2 { background: var(--off); }
.why-v2 .why-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.why-v2 .wcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 32px 28px 30px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  transition: border-color .2s ease, transform .2s ease;
}
.why-v2 .wcard:hover { border-color: var(--slate-2); transform: translateY(-3px); }
.why-v2 .wcard .ic-circle {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--sand-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--slate-2);
  margin-bottom: 6px;
}
.why-v2 .wcard .ic-circle svg { width: 32px; height: 32px; stroke-width: 1.5; }
.why-v2 .wcard h3 { font-size: 20px; letter-spacing: -0.02em; }
.why-v2 .wcard p { font-size: 14.5px; color: var(--slate-3); line-height: 1.55; }
.why-v2 .wcard .num {
  position: absolute; top: 22px; right: 24px;
  font-family: var(--f-display); font-size: 11px; letter-spacing: .22em;
  color: var(--slate-3); font-weight: 600;
}
@media (max-width: 1000px) { .why-v2 .why-grid-v2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .why-v2 .why-grid-v2 { grid-template-columns: 1fr; } }

/* ============================================================
   FAQ + Contact: add inline form below FAQs on homepage
   ============================================================ */
.faq-contact .combined-card .body {
  grid-template-columns: 1fr 1fr;
}
.faq-contact .contact-form-inline {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.faq-contact .contact-form-inline form.inquiry .row { grid-template-columns: 1fr 1fr; gap: 14px; }
.faq-contact .contact-form-inline form.inquiry input,
.faq-contact .contact-form-inline form.inquiry select,
.faq-contact .contact-form-inline form.inquiry textarea {
  padding: 10px 0 12px;
  font-size: 14.5px;
}
.faq-contact .contact-form-inline form.inquiry textarea { min-height: 72px; }
.faq-contact .contact-form-inline form.inquiry button[type=submit] {
  padding: 14px 22px; font-size: 13.5px;
}
.faq-contact .contact-form-inline .form-eyebrow {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sand); font-weight: 600;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.faq-contact .contact-form-inline .form-eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--sand);
}
.faq-contact .contact-form-inline h3 {
  color: #fff; font-size: 22px; letter-spacing: -0.02em; margin-bottom: 16px;
}

/* ============================================================
   Day Trips — vehicle fleet section
   ============================================================ */
.dt-fleet { background: var(--white); padding: 90px 0; }
.dt-fleet .vh-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 36px;
}
.dt-fleet .vh-card {
  background: var(--off);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
}
.dt-fleet .vh-card .img {
  height: 220px;
  background: var(--sand-2);
  background-image: linear-gradient(135deg, var(--sand-2) 0%, #E0D2BD 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--olive);
  position: relative;
}
.dt-fleet .vh-card .img svg { width: 120px; height: 120px; opacity: .55; }
.dt-fleet .vh-card .img .placeholder-note {
  position: absolute; bottom: 14px; left: 14px;
  font-family: 'Courier New', monospace;
  font-size: 10px; letter-spacing: .14em;
  color: var(--olive); opacity: .7;
  text-transform: uppercase;
}
.dt-fleet .vh-card .body { padding: 24px 26px 26px; }
.dt-fleet .vh-card h3 { font-size: 20px; letter-spacing: -0.02em; }
.dt-fleet .vh-card .row { margin-top: 14px; display: flex; gap: 18px; flex-wrap: wrap; }
.dt-fleet .vh-card .row span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--slate-2); font-weight: 500;
}
.dt-fleet .vh-card .row svg { width: 14px; height: 14px; color: var(--olive); }
.dt-fleet .vh-card p { margin-top: 12px; font-size: 14px; color: var(--slate-3); line-height: 1.5; }
@media (max-width: 900px) { .dt-fleet .vh-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Day Trip "Choose by time" card improvements (legibility fix)
   ============================================================ */
.dt-time-card {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  min-height: 360px;
  color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 36px 38px;
  background-size: cover; background-position: center;
  isolation: isolate;
}
.dt-time-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,28,38,0) 30%, rgba(20,28,38,.92) 100%);
  z-index: -1;
}
.dt-time-card .hours-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.96);
  color: var(--slate);
  padding: 10px 14px;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.01em;
  align-self: flex-start;
  margin-bottom: 14px;
}
.dt-time-card .hours-chip svg { width: 16px; height: 16px; color: var(--slate-2); stroke-width: 2; }
.dt-time-card h3 { color: #fff; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.03em; }
.dt-time-card p { color: rgba(255,255,255,.92); margin-top: 12px; font-size: 15px; line-height: 1.5; max-width: 38ch; }
.dt-time-card .lk {
  margin-top: 20px;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--sand);
  color: var(--slate);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  align-self: flex-start;
  letter-spacing: 0.02em;
  transition: background .2s ease;
}
.dt-time-card .lk:hover { background: #fff; }

/* ============================================================
   Yacht charter — "what you can see" cards (replaces image)
   ============================================================ */
.yc-destinations { background: var(--white); padding: 90px 0; }
.yc-dest-grid {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.yc-dest-card {
  background: var(--off);
  border-radius: var(--r);
  padding: 24px 22px 22px;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  transition: border-color .2s ease, transform .2s ease;
  position: relative;
}
.yc-dest-card:hover { border-color: var(--slate-2); transform: translateY(-3px); }
.yc-dest-card .day-tag {
  font-family: var(--f-display);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mid); font-weight: 700;
}
.yc-dest-card h4 { font-size: 22px; margin-top: 6px; letter-spacing: -0.02em; }
.yc-dest-card .ic-ill {
  margin-top: 14px; color: var(--olive); opacity: .85;
}
.yc-dest-card .ic-ill svg { width: 48px; height: 48px; stroke-width: 1.4; }
.yc-dest-card p { margin-top: 12px; font-size: 14px; color: var(--slate-3); line-height: 1.5; flex: 1; }
.yc-dest-card .stops {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.yc-dest-card .stops .pill {
  font-size: 11px; padding: 4px 9px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--slate-2); font-weight: 500;
}
@media (max-width: 1000px) { .yc-dest-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .yc-dest-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Individual tour page — illustrated detail grid (replaces cramped strip)
   ============================================================ */
.tour-detail-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 8px;
}
.tour-detail-grid .td-card {
  background: var(--off);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.tour-detail-grid .td-card .ic {
  color: var(--olive);
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tour-detail-grid .td-card .ic svg { width: 36px; height: 36px; stroke-width: 1.4; }
.tour-detail-grid .td-card .l {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--slate-3); font-weight: 600;
}
.tour-detail-grid .td-card .v {
  font-family: var(--f-display); font-size: 19px; font-weight: 700;
  letter-spacing: -0.015em; color: var(--slate); line-height: 1.15;
}
.tour-detail-grid .td-card .desc {
  font-size: 13.5px; color: var(--slate-3); line-height: 1.5;
  margin-top: 4px;
}
@media (max-width: 800px) { .tour-detail-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .tour-detail-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FAQ page — service grouping with icons
   ============================================================ */
.faq-group {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 36px 40px 32px;
  margin-bottom: 22px;
}
.faq-group-head {
  display: flex; align-items: center; gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.faq-group-head .ic {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--sand-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--slate-2);
}
.faq-group-head .ic svg { width: 30px; height: 30px; stroke-width: 1.5; }
.faq-group-head h2 {
  font-size: 24px !important;
  letter-spacing: -0.02em;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.faq-group-head .count {
  margin-left: auto;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--slate-3); font-weight: 600;
}
.faq-group .faq-item { padding: 22px 0; }
.faq-group .faq-item summary { font-size: 17px; font-weight: 600; }
@media (max-width: 700px) {
  .faq-group { padding: 24px 22px; }
  .faq-group-head .count { display: none; }
  .faq-group .faq-item summary { font-size: 15.5px; }
}

/* ============================================================
   Mobile typography tightening
   ============================================================ */
@media (max-width: 700px) {
  body { font-size: 16px; }
  h1 { font-size: clamp(34px, 9vw, 48px); }
  h2 { font-size: clamp(28px, 7vw, 38px); }
  h3 { font-size: clamp(20px, 5vw, 24px); }

  .lead { font-size: 16px; }

  section { padding: 64px 0; }
  section.tight { padding: 48px 0; }

  .hero h1 { font-size: clamp(36px, 9vw, 50px); }
  .hero-sub { font-size: 15px; margin-top: 18px; }
  .hero-trust { margin-top: 36px; padding-top: 18px; gap: 14px 24px; }
  .hero-trust-item { font-size: 12.5px; gap: 10px; }
  .hero-trust-item svg { width: 22px; height: 22px; flex: 0 0 22px; }

  .subhero h1 { font-size: clamp(34px, 8.5vw, 52px); }
  .subhero .sub { font-size: 15px; }

  .section-head { margin-bottom: 28px; }
  .section-head h2 { font-size: clamp(26px, 6.5vw, 36px) !important; }

  .btn { padding: 14px 20px; font-size: 14px; }
  .hero-ctas { gap: 10px; }
  .hero-ctas .btn { flex: 1; min-width: 0; padding: 14px 16px; font-size: 13.5px; }

  /* Tighter card grids on small screens */
  .tour-card h3 { font-size: 20px; }
  .home-featured-card h3 { font-size: 19px; }
  .home-featured-card .icon-bar .k { font-size: 12px; }
  .home-featured-card .icon-bar .l { font-size: 9px; }

  .why-v2 .wcard { padding: 26px 22px 24px; }
  .why-v2 .wcard h3 { font-size: 18px; }
  .why-v2 .wcard p { font-size: 14px; }

  /* Trust bar */
  .trust-heading { font-size: 22px !important; }
  .trust-item .num { font-size: 30px; }
  .trust-bar { padding: 44px 0; }
  .trust-grid { gap: 28px 24px; }

  /* Hero/sub-hero trust readability */
  .subhero .crumbs { font-size: 11px; letter-spacing: .16em; }
  .subhero .stat-bar { margin-top: 24px; }

  /* Service grid */
  .service-card { min-height: 280px; padding: 28px 22px 26px; }
  .service-card .icon svg { width: 64px; height: 64px; }
  .service-card h3 { font-size: 20px; }
  .service-card p { font-size: 14px; }

  /* Featured grid + day trips */
  .tour-grid, .tours-grid { gap: 14px; }
  .tour-card .img { aspect-ratio: 16/11; }

  /* Yacht charter band */
  .yacht-grid h2 { font-size: clamp(28px, 7vw, 40px); }
  .duration-chips a { padding: 18px 6px; font-size: 16px; }

  /* Transfers */
  .transfer-card .body { padding: 26px 24px; }
  .transfer-card h3 { font-size: 22px; }

  /* Celebrate */
  .celebrate-cell { min-height: 420px; padding: 32px 28px; }
  .celebrate-cell h3 { font-size: clamp(24px, 6.5vw, 32px); }

  /* Testimonials */
  .testi { padding: 28px 24px; }
  .testi blockquote { font-size: 18px; }

  /* Blog */
  .blog-card h3 { font-size: 20px; }

  /* FAQ + Contact */
  .faq-contact .top-banner { padding: 32px 24px !important; }
  .faq-contact .top-banner h2 { font-size: clamp(26px, 7vw, 36px) !important; }
  .faq-contact .body .faq-side,
  .faq-contact .body .info-side { padding: 32px 24px !important; }
  .faq-contact .faq-side .faq-item summary { font-size: 16px; }

  /* Footer */
  .site-footer { padding: 60px 0 24px; }
  .footer-grid { gap: 32px; padding-bottom: 36px; }

  /* WhatsApp FAB - smaller on mobile */
  .whatsapp-fab { right: 14px; bottom: 14px; padding: 12px; }

  /* Boat split & individual page */
  .boat-split { grid-template-columns: 1fr; gap: 36px; }
  .specs-table { padding: 22px 20px; }
  .specs-table dt, .specs-table dd { padding: 12px 0; font-size: 14px; }
  .specs-table dd { font-size: 15px; }

  /* Tour hero responsive */
  .tour-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .boat-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .quote-sticky { position: static; }

  /* Itinerary */
  .itin-list { padding-left: 24px; }
  .itin-item h4 { font-size: 19px; }
  .itin-item p { font-size: 14px; }

  /* Yacht charter grid */
  .duration-grid { gap: 14px; }
  .duration-card { padding: 28px 24px 26px; }
  .duration-card h3 { font-size: 28px; }

  /* TM examples */
  .tm-examples-grid { gap: 14px; }
  .tm-example h4 { font-size: 17px; }

  /* Boat card mobile */
  .boat-card .body { padding: 22px 22px; }
  .boat-card h3 { font-size: 21px; }

  /* Reduce huge nav buttons */
  .lang-switch { display: none !important; }
}

/* ============================================================
   Mobile menu — simple full-screen drawer
   ============================================================ */
.mobile-menu {
  position: fixed; inset: 0;
  background: var(--slate);
  z-index: 100;
  padding: 84px 24px 32px;
  display: none;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a {
  font-family: var(--f-display);
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.mobile-menu .mm-close {
  position: absolute; top: 22px; right: 22px;
  background: transparent; border: 0; color: #fff;
  padding: 8px; cursor: pointer;
}
.mobile-menu .mm-cta {
  margin-top: 28px;
  padding: 16px 22px;
  background: var(--sand);
  color: var(--slate);
  border-radius: var(--r);
  text-align: center;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 0;
}

/* ============================================================
   Booking-specific contact form variant (individual boat)
   ============================================================ */
.book-this-form {
  background: var(--off);
  border-radius: var(--r);
  padding: clamp(32px, 5vw, 56px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px;
  border: 1px solid var(--line);
}
.book-this-form .left h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.025em; }
.book-this-form .left p { margin-top: 18px; font-size: 16px; color: var(--slate-2); line-height: 1.55; max-width: 50ch; }
.book-this-form .left .specs-pill {
  margin-top: 28px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.book-this-form .left .specs-pill .pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  color: var(--slate-2);
}
.book-this-form .left .specs-pill svg { width: 14px; height: 14px; color: var(--olive); }
.book-this-form .left .badges {
  margin-top: 32px;
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.book-this-form .left .badge-row {
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; color: var(--slate-2);
}
.book-this-form .left .badge-row svg { color: var(--olive); flex: 0 0 18px; }
.book-this-form form.inquiry input,
.book-this-form form.inquiry select,
.book-this-form form.inquiry textarea {
  color: var(--slate); border-bottom-color: var(--line-2);
}
.book-this-form form.inquiry input::placeholder,
.book-this-form form.inquiry textarea::placeholder { color: var(--slate-3); }
.book-this-form form.inquiry input:focus,
.book-this-form form.inquiry select:focus,
.book-this-form form.inquiry textarea:focus { border-bottom-color: var(--olive); }
.book-this-form form.inquiry label { color: var(--slate-3); }
.book-this-form form.inquiry select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23475261' stroke-width='1.5'/></svg>");
}
.book-this-form form.inquiry button[type=submit] { background: var(--slate); color: #fff; }
.book-this-form form.inquiry button[type=submit]:hover { background: var(--olive); }
.book-this-form form.inquiry .alt { color: var(--slate-3); }
.book-this-form form.inquiry .alt a { color: var(--slate-2); }
.book-this-form .form-eyebrow {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mid); font-weight: 600;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.book-this-form .form-eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--mid);
}
.book-this-form h3 {
  font-size: 22px; margin-bottom: 22px;
}
@media (max-width: 900px) {
  .book-this-form { grid-template-columns: 1fr; gap: 32px; padding: 28px 22px; }
}

/* ============================================================
   Blog post (individual)
   ============================================================ */
.bp-hero {
  background: var(--white);
  padding: 130px 0 0;
}
.bp-hero .wrap { max-width: 1100px; }
.bp-hero .crumbs {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--slate-3); display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 22px;
}
.bp-hero .crumbs a { color: var(--slate-2); }
.bp-hero .crumbs span { opacity: .5; }
.bp-hero .cat-tag {
  display: inline-block;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mid); font-weight: 700; margin-bottom: 16px;
}
.bp-hero h1 {
  font-size: clamp(36px, 5vw, 64px);
  max-width: 22ch;
}
.bp-hero .deck {
  margin-top: 22px;
  font-size: clamp(17px, 1.4vw, 21px);
  color: var(--slate-2);
  line-height: 1.45;
  max-width: 70ch;
  font-weight: 400;
}
.bp-hero .author-row {
  margin-top: 32px;
  display: flex; align-items: center; gap: 22px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.bp-hero .author-row .avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--sand-2);
  color: var(--slate-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700; font-size: 18px;
}
.bp-hero .author-row .au .n { font-family: var(--f-display); font-weight: 600; color: var(--slate); font-size: 16px; }
.bp-hero .author-row .au .r { font-size: 13px; color: var(--slate-3); margin-top: 2px; }
.bp-hero .author-row .meta { margin-left: auto; display: flex; gap: 18px; font-size: 13px; color: var(--slate-3); }
.bp-hero .author-row .meta span { display: inline-flex; align-items: center; gap: 6px; }
.bp-hero .author-row .meta svg { width: 14px; height: 14px; color: var(--olive); }
.bp-hero .feature-img {
  margin-top: 36px;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--r);
}
.bp-hero .feature-img img { width: 100%; height: 100%; object-fit: cover; }

.bp-body { background: var(--white); padding: 64px 0 100px; }
.bp-body .wrap { max-width: 1100px; }
.bp-body .layout {
  display: grid; grid-template-columns: 1fr 280px; gap: 60px;
  align-items: start;
}
.bp-content {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--slate);
  max-width: 70ch;
}
.bp-content > p { margin: 0 0 22px; }
.bp-content > p.lede:first-of-type::first-letter {
  font-family: var(--f-display);
  font-size: 60px;
  float: left;
  line-height: .85;
  font-weight: 700;
  margin: 6px 12px 0 0;
  color: var(--slate);
}
.bp-content h2 {
  font-size: 32px;
  margin: 48px 0 18px;
  letter-spacing: -0.025em;
}
.bp-content h3 {
  font-size: 22px;
  margin: 36px 0 12px;
  letter-spacing: -0.015em;
}
.bp-content a {
  color: var(--mid);
  border-bottom: 1px solid currentColor;
}
.bp-content ul, .bp-content ol { margin: 0 0 22px; padding-left: 22px; }
.bp-content li { margin-bottom: 8px; }
.bp-content blockquote {
  margin: 32px 0;
  padding: 22px 28px;
  border-left: 3px solid var(--sand);
  background: var(--off);
  border-radius: 0 var(--r) var(--r) 0;
  font-family: var(--f-display);
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--slate);
  font-weight: 500;
}
.bp-content img, .bp-content figure img {
  width: 100%;
  border-radius: var(--r);
  margin: 16px 0;
}
.bp-content figure { margin: 28px 0; }
.bp-content figcaption {
  font-size: 13px; color: var(--slate-3);
  margin-top: 10px; font-style: italic;
}
.bp-content .pull {
  background: var(--off);
  padding: 24px 26px;
  border-radius: var(--r);
  margin: 28px 0;
}
.bp-content .pull h4 { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); margin-bottom: 10px; }
.bp-content .pull p { margin: 0; font-size: 15.5px; color: var(--slate-2); }

.bp-aside { position: sticky; top: 110px; }
.bp-aside .toc-card {
  background: var(--off);
  border-radius: var(--r);
  padding: 24px 24px;
  border: 1px solid var(--line);
}
.bp-aside .toc-card h4 {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--slate-3); margin-bottom: 14px; font-weight: 600;
}
.bp-aside .toc-card ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.bp-aside .toc-card li {
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--slate-2);
  font-weight: 500;
  counter-increment: toc;
}
.bp-aside .toc-card li:first-child { border-top: none; }
.bp-aside .toc-card li::before {
  content: counter(toc, decimal-leading-zero) "  ";
  font-family: var(--f-display);
  color: var(--olive); font-weight: 700; margin-right: 6px;
}
.bp-aside .toc-card a { color: inherit; }
.bp-aside .toc-card a:hover { color: var(--mid); }
.bp-aside .book-card {
  margin-top: 18px;
  background: var(--slate);
  color: #fff;
  border-radius: var(--r);
  padding: 26px 24px;
}
.bp-aside .book-card .e {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sand); font-weight: 600;
}
.bp-aside .book-card h4 {
  margin-top: 10px;
  color: #fff;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.bp-aside .book-card p { font-size: 13.5px; color: rgba(255,255,255,.78); margin-top: 10px; line-height: 1.5; }
.bp-aside .book-card .btn {
  margin-top: 16px;
  width: 100%;
  justify-content: center;
  background: var(--sand); color: var(--slate); border-color: var(--sand);
  padding: 12px 16px;
  font-size: 13.5px;
}
.bp-aside .book-card .btn:hover { background: #fff; }
@media (max-width: 900px) {
  .bp-body .layout { grid-template-columns: 1fr; gap: 40px; }
  .bp-aside { position: static; }
  .bp-content { font-size: 16.5px; }
  .bp-content h2 { font-size: 26px; margin-top: 36px; }
}

/* Related posts at end of blog */
.bp-related { background: var(--off); padding: 80px 0; }
.bp-related .grid {
  margin-top: 36px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
@media (max-width: 900px) { .bp-related .grid { grid-template-columns: 1fr; } }

/* ============================================================
   About page
   ============================================================ */
.about-intro { background: var(--white); padding: 120px 0 90px; padding-top: 130px;}
.about-intro .grid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px;
  align-items: start;
}
.about-intro h1 { font-size: clamp(40px, 5.4vw, 72px); }
.about-intro h1 em { font-style: italic; color: var(--mid); font-weight: 300; }
.about-intro p.lede {
  margin-top: 24px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--slate-2);
  max-width: 56ch;
}
.about-intro .since {
  margin-top: 32px;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  background: var(--off);
  border-radius: var(--r);
  font-size: 14px;
  color: var(--slate-2);
}
.about-intro .since svg { color: var(--olive); }
.about-intro .since strong { color: var(--slate); font-weight: 700; }
.about-intro .side-img {
  aspect-ratio: 4/5;
  background-size: cover; background-position: center;
  border-radius: var(--r);
}
@media (max-width: 900px) {
  .about-intro .grid { grid-template-columns: 1fr; }
  .about-intro .side-img { aspect-ratio: 4/3; }
}

.about-story { background: var(--off); padding: 90px 0; }
.about-story .layout {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px;
  align-items: start;
}
.about-story h2 { letter-spacing: -0.025em; }
.about-story h2 em { font-style: italic; color: var(--sand); font-weight: 300; }
.about-story .body p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate-2);
  margin-bottom: 22px;
  max-width: 68ch;
}
@media (max-width: 900px) {
  .about-story .layout { grid-template-columns: 1fr; gap: 28px; }
}

.about-stats { background: var(--white); padding: 80px 0; }
.about-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.about-stats-grid .s {
  padding: 36px 28px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.about-stats-grid .s:last-child { border-right: none; }
.about-stats-grid .s .v {
  font-family: var(--f-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 600; line-height: 1;
  color: var(--slate); letter-spacing: -0.03em;
}
.about-stats-grid .s .l { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--slate-3); font-weight: 600; margin-top: 10px; }
@media (max-width: 900px) {
  .about-stats-grid { grid-template-columns: 1fr 1fr; }
  .about-stats-grid .s:nth-child(2) { border-right: none; }
  .about-stats-grid .s:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

.about-values { background: var(--off); padding: 90px 0; }
.values-grid {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.value-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.value-card .ic { color: var(--slate-2); }
.value-card .ic svg { width: 48px; height: 48px; stroke-width: 1.4; }
.value-card h3 { font-size: 20px; }
.value-card p { font-size: 14.5px; color: var(--slate-3); line-height: 1.55; }
@media (max-width: 900px) { .values-grid { grid-template-columns: 1fr; } }

.about-team { background: var(--white); padding: 90px 0; }
.team-grid {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.team-card {
  background: var(--off);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.team-card .img {
  aspect-ratio: 4/5;
  background-size: cover; background-position: center;
  background-color: var(--sand-2);
  background-image: repeating-linear-gradient(135deg, var(--sand-2) 0px, var(--sand-2) 12px, #E7DBC8 12px, #E7DBC8 24px);
}
.team-card .body { padding: 22px 22px 24px; }
.team-card h4 { font-size: 18px; }
.team-card .role { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--mid); font-weight: 600; margin-top: 4px; }
.team-card p { margin-top: 10px; font-size: 13.5px; color: var(--slate-3); line-height: 1.5; }
@media (max-width: 1000px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .team-grid { grid-template-columns: 1fr; } }

.about-timeline { background: var(--off); padding: 90px 0; }
.tl-list { margin-top: 40px; max-width: 800px; }
.tl-row {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.tl-row:last-child { border-bottom: 1px solid var(--line); }
.tl-row .y {
  font-family: var(--f-display);
  font-size: 28px; font-weight: 700;
  color: var(--mid);
  letter-spacing: -0.02em;
}
.tl-row h4 { font-size: 20px; }
.tl-row p { margin-top: 8px; font-size: 15px; color: var(--slate-2); line-height: 1.55; max-width: 56ch; }
@media (max-width: 700px) {
  .tl-row { grid-template-columns: 1fr; gap: 6px; }
  .tl-row .y { font-size: 22px; }
}

/* ============================================================
   How booking works — redesigned 4-step strip
   ============================================================ */
.how-v2 {
  background: var(--off);
  padding: 90px 0;
}
.how-v2 .h-grid {
  margin-top: 50px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.how-v2 .h-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px 26px 26px;
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
}
.how-v2 .h-card .n {
  font-family: var(--f-display);
  font-size: 14px; letter-spacing: .22em;
  color: var(--olive); font-weight: 700;
}
.how-v2 .h-card .ic-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--sand-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--slate-2);
  margin-top: 4px;
}
.how-v2 .h-card .ic-circle svg { width: 28px; height: 28px; stroke-width: 1.5; }
.how-v2 .h-card h4 { font-size: 18px; margin-top: 4px; }
.how-v2 .h-card p { font-size: 14px; color: var(--slate-3); line-height: 1.55; }
@media (max-width: 900px) { .how-v2 .h-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .how-v2 .h-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Day Trips — make .dt-seg-card hours chip much more visible
   ============================================================ */
.dt-seg-card .meta {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.96);
  color: var(--slate) !important;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  margin-bottom: 18px !important;
}
.dt-seg-card .meta::before {
  content: "";
  width: 16px; height: 16px;
  display: inline-block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>") no-repeat center / contain;
}
.dt-seg-card .lk {
  background: var(--sand);
  color: var(--slate);
  padding: 12px 22px;
  border-radius: 999px !important;
  border-bottom: none !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  margin-top: 24px !important;
  transition: background .2s ease;
}
.dt-seg-card .lk:hover { background: #fff !important; }

/* ============================================================
   Pages-v3: pages-extra .faq-block-light (used by day-trips)
   ============================================================ */
a.dt-view-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--slate-2);
  color: #fff;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 18px;
  transition: background .2s ease;
}
a.dt-view-pill:hover { background: var(--slate); }
a.dt-view-pill svg { width: 14px; height: 9px; }


/* ============================================================
   Private tours — editorial split (replaces tours-split heavy
   image cards). No pill chips, cleaner editorial layout.
   ============================================================ */
.tours-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding-bottom: 60px;
}
.split-editorial {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s ease, border-color .2s ease, box-shadow .25s ease;
}
.split-editorial:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: 0 22px 50px -30px rgba(20,30,46,.4);
}
.split-editorial .ed-img {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.split-editorial .ed-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s ease;
}
.split-editorial:hover .ed-img img { transform: scale(1.05); }
.split-editorial .ed-body {
  padding: 36px 38px 36px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
}
.split-editorial .ed-num {
  font-family: var(--f-display);
  font-size: 12px; letter-spacing: .22em;
  color: var(--slate-3);
  font-weight: 600;
  position: absolute;
  top: 24px; right: 32px;
}
.split-editorial .ed-body h2 {
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -0.025em;
  margin-bottom: 4px;
}
.split-editorial .ed-meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  padding: 8px 0 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.split-editorial .ed-meta span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--slate-2);
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}
.split-editorial .ed-meta svg {
  width: 16px; height: 16px;
  color: var(--olive);
}
.split-editorial .ed-body p {
  font-size: 15.5px;
  color: var(--slate-3);
  line-height: 1.55;
  max-width: 44ch;
}
.split-editorial .ed-lk {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--slate-2);
  font-size: 14px; font-weight: 600;
  border-bottom: 1px solid var(--slate-2);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: gap .2s ease, color .2s ease;
}
.split-editorial:hover .ed-lk { gap: 18px; color: var(--mid); border-color: var(--mid); }
@media (max-width: 800px) {
  .tours-split { grid-template-columns: 1fr; gap: 14px; }
  .split-editorial .ed-body { padding: 26px 26px 28px; }
  .split-editorial .ed-num { top: 20px; right: 22px; }
}

/* ============================================================
   Mobile fine-tuning — header push-down, contact form,
   ribbon hidden room, faster vertical flow on small screens
   ============================================================ */
@media (max-width: 760px) {
  /* Top ribbon — make taller hit area, single-row */
  .top-ribbon { font-size: 11px; }
  .top-ribbon .wrap { height: 32px; padding: 0 14px; }
  .site-header { top: 32px; }

  /* Header smaller height */
  .site-header { height: 58px; }
  .brand .brand-text { font-size: 13px; }
  .brand img.mark { width: 30px; }

  /* Hero / subhero — pull texts UP, smaller fonts */
  .hero-inner { padding-top: 86px !important; padding-bottom: 24px !important; }
  .subhero { min-height: auto !important; }
  .subhero .wrap { padding-top: 96px !important; padding-bottom: 36px !important; }
  .hero { min-height: 92svh; }
  .hero h1 { font-size: clamp(30px, 9vw, 42px) !important; line-height: 1.05; }
  .subhero h1 { font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.05; }
  .hero-sub { font-size: 14.5px; margin-top: 16px; }
  .subhero .sub { font-size: 14.5px; margin-top: 16px; }
  .subhero .crumbs { font-size: 10.5px; margin-bottom: 14px; letter-spacing: .14em; }

  /* Hero trust strip — vertical 2x2 */
  .hero-trust { margin-top: 26px; padding-top: 16px; gap: 14px 18px; }
  .hero-trust-item { font-size: 12px; gap: 8px; }
  .hero-trust-item svg { width: 20px; height: 20px; flex-basis: 20px; }

  /* Stat bar mobile — single column when 4 items */
  .subhero .stat-bar { margin-top: 22px; }
  .subhero .stat-bar .stat { padding: 14px 16px; min-height: 64px; }
  .subhero .stat-bar .stat .v { font-size: 16px; }
  .subhero .stat-bar .stat .l { font-size: 9.5px; letter-spacing: .18em; }

  /* Contact form on mobile */
  form.inquiry .row { grid-template-columns: 1fr !important; gap: 12px; }
  form.inquiry input, form.inquiry select, form.inquiry textarea { font-size: 15px; padding: 10px 0 12px; }
  form.inquiry label { font-size: 11px; }
  form.inquiry button[type=submit] { width: 100%; justify-content: center; padding: 14px 18px; font-size: 14px; }
  form.inquiry .submit-row { gap: 12px; }
  form.inquiry .submit-row .alt { font-size: 13px; }

  /* Contact block stacked, with less padding */
  .contact-block-v2 .topimg { height: 180px; }
  .contact-block-v2 .topimg .top-inner { left: 24px; right: 24px; bottom: 22px; }
  .contact-block-v2 .topimg h2 { font-size: clamp(22px, 6.5vw, 30px) !important; max-width: 100%; }
  .contact-block-v2 .topimg .reply { font-size: 11px; letter-spacing: .12em; }
  .contact-block-v2 .form-side,
  .contact-block-v2 .info-side { padding: 28px 22px !important; }

  /* FAQ + Contact (homepage combined) */
  .faq-contact .top-banner { padding: 26px 22px !important; gap: 16px; }
  .faq-contact .top-banner h2 { font-size: clamp(22px, 6.5vw, 30px) !important; }
  .faq-contact .top-banner .reply { padding: 10px 14px; font-size: 11px; }
  .faq-contact .body .faq-side,
  .faq-contact .body .info-side { padding: 26px 22px !important; }
  .faq-contact .contact-form-inline form.inquiry input { font-size: 14.5px; }

  /* Editorial split */
  .split-editorial .ed-body h2 { font-size: 24px; }

  /* Tour kpis stacked */
  .tour-kpis { margin-top: 22px !important; }
  .tour-kpis .kpi { padding: 16px 18px !important; }
  .tour-kpis .kpi .v { font-size: 15px; }

  /* Boat hero KPIs */
  .boat-kpis-icon .kpi { padding: 16px 16px !important; gap: 12px; }
  .boat-kpis-icon .kpi .v { font-size: 16px; }
  .boat-kpis-icon .kpi .ic svg { width: 28px; height: 28px; }

  /* Buttons smaller on mobile */
  .btn { padding: 13px 18px; font-size: 13.5px; gap: 10px; }

  /* Sections more compact */
  section { padding: 56px 0 !important; }
  .section-head { margin-bottom: 24px; gap: 14px; }
  .section-head h2 { font-size: clamp(24px, 6.5vw, 34px) !important; }
  .section-head .lead { font-size: 15px; }

  /* WhatsApp FAB tighter */
  .whatsapp-fab { padding: 11px; right: 12px; bottom: 12px; }

  /* Mobile menu — improved */
  .mobile-menu { padding: 72px 22px 28px; }
  .mobile-menu a { font-size: 20px; padding: 12px 0; }
  .mobile-menu .mm-close { top: 18px; right: 18px; }

  /* Yacht charter destination grid: 1 column */
  .yc-dest-grid { grid-template-columns: 1fr !important; }

  /* Day trips fleet */
  .dt-fleet .vh-grid { grid-template-columns: 1fr !important; }

  /* Service grid 1 column with smaller card */
  .service-grid { grid-template-columns: 1fr !important; }
  .service-card { min-height: 240px; }
  .service-card .icon svg { width: 56px; height: 56px; }

  /* About story */
  .about-story .layout { grid-template-columns: 1fr; gap: 22px; }
  .about-stats-grid .s { padding: 24px 20px; }
  .about-stats-grid .s .v { font-size: 32px; }
  .about-intro { padding: 90px 0 60px; padding-top: 110px; }
  .about-intro .grid { gap: 28px; }
  .about-intro h1 { font-size: clamp(30px, 8vw, 42px); }

  /* Blog post */
  .bp-hero { padding-top: 110px !important; }
  .bp-hero h1 { font-size: clamp(28px, 7.5vw, 40px); }
  .bp-hero .deck { font-size: 16px; }
  .bp-hero .feature-img { aspect-ratio: 4/3; }
  .bp-hero .author-row { gap: 14px; padding: 16px 0; }
  .bp-hero .author-row .meta { display: none; }
  .bp-content { font-size: 16px; }
  .bp-content h2 { font-size: 22px; margin-top: 28px; }
  .bp-content blockquote { font-size: 18px; padding: 16px 20px; }

  /* FAQ groups */
  .faq-cats { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .faq-cat { padding: 18px 14px; gap: 8px; }
  .faq-cat h3 { font-size: 13px; }
  .faq-cat .ic svg { width: 32px; height: 32px; }
  .faq-cat .count { display: none; }
  .faq-group { padding: 22px 18px; }
  .faq-group-head { gap: 14px; padding-bottom: 16px; margin-bottom: 6px; }
  .faq-group-head .ic { width: 44px; height: 44px; flex: 0 0 44px; }
  .faq-group-head .ic svg { width: 24px; height: 24px; }
  .faq-group-head h2 { font-size: 19px !important; }
}

@media (max-width: 420px) {
  .top-ribbon .rb-utility { display: none; }
  .top-ribbon .rb-rating .src { display: none; }
  .lang-switch { display: none; }
}


/* ============================================================
   USER FEEDBACK BATCH (m0031):
   - Remove subhero crumbs ("HOME / PRIVATE BOAT TOURS" line above h1)
   - Convert subhero stat-bar to icon-led strip, no pill container
   - Push hero/subhero content further up
   - Footer: gold social icons + background illustration
   - Nav: desktop dropdowns + mobile accordion menu
   ============================================================ */

/* Hide subhero crumbs */
.subhero .crumbs { display: none !important; }

/* Stat-bar -> icon strip (drop the pill container, lead with icons) */
.subhero .stat-bar {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid rgba(255,255,255,.2) !important;
  border-bottom: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 0 !important;
  padding: 22px 0 !important;
  margin-top: 28px !important;
  max-width: 100% !important;
}
.subhero .stat-bar .stat {
  border-right: 1px solid rgba(255,255,255,.15) !important;
  padding: 0 22px !important;
  min-height: 64px !important;
}
.subhero .stat-bar .stat:last-child { border-right: none !important; }

/* Add an icon BEFORE each stat using ::before pseudo */
.subhero .stat-bar .stat::before {
  content: "";
  display: block;
  width: 26px; height: 26px;
  background-color: var(--sand);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  margin-bottom: 8px;
}
.subhero .stat-bar .stat:nth-child(1)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
}
.subhero .stat-bar .stat:nth-child(2)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
}
.subhero .stat-bar .stat:nth-child(3)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='7' r='3'/><path d='M2 21v-1a6 6 0 0 1 12 0v1'/><circle cx='17' cy='9' r='2.5'/><path d='M16 21v-1a4 4 0 0 1 6-3'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='7' r='3'/><path d='M2 21v-1a6 6 0 0 1 12 0v1'/><circle cx='17' cy='9' r='2.5'/><path d='M16 21v-1a4 4 0 0 1 6-3'/></svg>");
}
.subhero .stat-bar .stat:nth-child(4)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21V10a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v11'/><path d='M11 21V14a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v7'/><path d='M3 21h18'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21V10a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v11'/><path d='M11 21V14a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v7'/><path d='M3 21h18'/></svg>");
}

/* Push hero/subhero content UP — tighter top padding */
.hero-inner { padding-top: 100px !important; padding-bottom: 28px !important; }
.subhero .wrap { padding-top: 108px !important; padding-bottom: 40px !important; }
.subhero { min-height: 78svh !important; align-items: flex-start !important; }
.subhero .wrap { align-self: flex-start; }

/* Aggressively reduce subhero h1 sizes */
.subhero h1 { font-size: clamp(34px, 4.4vw, 60px) !important; }

@media (max-width: 800px) {
  .hero-inner { padding-top: 76px !important; }
  .subhero .wrap { padding-top: 84px !important; padding-bottom: 28px !important; }
  .subhero { min-height: auto !important; padding-bottom: 28px !important; }
  .subhero .stat-bar { padding: 12px 0 !important; }
  .subhero .stat-bar .stat { min-height: 56px !important; padding: 12px 16px !important; }
  .subhero .stat-bar .stat::before { width: 22px; height: 22px; margin-bottom: 6px; }
}

/* ============================================================
   Header — desktop dropdowns on hover
   ============================================================ */
.primary-nav .has-drop { position: relative; }
.primary-nav .has-drop > .drop {
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, 8px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 22px 50px -22px rgba(20,30,46,.28);
  padding: 14px;
  min-width: 280px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events: none;
  margin-top: 6px;
  z-index: 50;
}
.primary-nav .has-drop:hover > .drop,
.primary-nav .has-drop:focus-within > .drop {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 6px);
  pointer-events: auto;
}
.primary-nav .has-drop > .drop a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: 4px;
  font-size: 13.5px !important;
  font-weight: 500;
  color: var(--slate-2) !important;
  letter-spacing: 0 !important;
  border-bottom: 0 !important;
  text-transform: none !important;
  transition: background .15s ease, color .15s ease;
}
.primary-nav .has-drop > .drop a:hover {
  background: var(--off);
  color: var(--slate) !important;
}
.primary-nav .has-drop > .drop a svg {
  width: 18px; height: 18px;
  color: var(--olive);
  flex: 0 0 18px;
}
.primary-nav .has-drop > .drop a small {
  display: block;
  font-size: 11px;
  color: var(--slate-3);
  font-weight: 400;
  margin-top: 2px;
}
.primary-nav .has-drop > .drop a strong {
  display: block;
  font-weight: 600;
}
.primary-nav .has-drop > a::after {
  content: "▾";
  display: inline-block;
  margin-left: 5px;
  font-size: 9px;
  opacity: .55;
  transform: translateY(-1px);
}
@media (max-width: 1080px) {
  .primary-nav { display: none; }
}

/* ============================================================
   Mobile menu — accordion dropdowns
   ============================================================ */
.mobile-menu .mm-section {
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.mobile-menu .mm-section > .mm-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: transparent; border: 0; padding: 16px 0;
  font-family: var(--f-display);
  color: #fff; font-size: 19px; font-weight: 500;
  cursor: pointer;
  text-align: left;
  letter-spacing: -0.005em;
}
.mobile-menu .mm-section > .mm-toggle::after {
  content: "+";
  font-family: var(--f-body);
  font-size: 22px; font-weight: 300;
  color: var(--sand);
  transition: transform .25s ease;
}
.mobile-menu .mm-section.open > .mm-toggle::after {
  content: "−";
  transform: rotate(0deg);
}
.mobile-menu .mm-section > .mm-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  display: flex;
  flex-direction: column;
}
.mobile-menu .mm-section.open > .mm-sub {
  max-height: 600px;
  padding-bottom: 10px;
}
.mobile-menu .mm-section > .mm-sub a {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px !important;
  font-family: var(--f-body) !important;
  font-weight: 400;
  color: rgba(255,255,255,.78) !important;
  padding: 9px 16px !important;
  border-bottom: 0 !important;
}
.mobile-menu .mm-section > .mm-sub a:hover { color: #fff !important; }
.mobile-menu .mm-section > .mm-sub a svg { width: 16px; height: 16px; color: var(--sand); flex: 0 0 16px; }
.mobile-menu .mm-flat {
  display: block;
  padding: 16px 0 !important;
  font-family: var(--f-display);
  color: #fff !important;
  font-size: 19px !important;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  text-decoration: none;
}

/* ============================================================
   Footer — gold socials + decorative wave illustration BG
   ============================================================ */
.site-footer {
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(159,143,110,.08) 0%, transparent 60%),
    radial-gradient(ellipse at 95% 80%, rgba(91,130,158,.08) 0%, transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 360' preserveAspectRatio='none'><path d='M0 200 Q 200 160 400 200 T 800 200 T 1200 200 T 1600 200' fill='none' stroke='%239f8f6e' stroke-width='1.4' opacity='0.07'/><path d='M0 240 Q 200 200 400 240 T 800 240 T 1200 240 T 1600 240' fill='none' stroke='%239f8f6e' stroke-width='1.4' opacity='0.05'/><path d='M0 280 Q 200 240 400 280 T 800 280 T 1200 280 T 1600 280' fill='none' stroke='%239f8f6e' stroke-width='1.4' opacity='0.04'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  pointer-events: none;
}
.site-footer .wrap { position: relative; z-index: 1; }

.socials a {
  color: var(--sand) !important;
}
.socials a:hover { color: #E8C99B !important; transform: translateY(-2px); }

/* Footer column polish */
.footer-grid .col h4 {
  position: relative;
  padding-bottom: 12px;
}
.footer-grid .col h4::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 28px; height: 1px;
  background: var(--sand);
}

/* Footer newsletter band (optional, decorative) */
.footer-cta {
  background: rgba(159,143,110,.08);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r);
  padding: 28px 32px;
  margin-bottom: 56px;
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 30px;
  align-items: center;
}
.footer-cta h3 {
  font-family: var(--f-display);
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.footer-cta p {
  color: rgba(255,255,255,.7);
  font-size: 14px;
  margin-top: 6px;
}
.footer-cta .cta-row {
  display: flex; gap: 10px;
}
.footer-cta .cta-row .btn {
  flex: 1;
  justify-content: center;
  padding: 14px 18px;
  font-size: 13.5px;
}
.footer-cta .cta-row .btn-primary {
  background: var(--sand);
  color: var(--slate);
  border-color: var(--sand);
}
.footer-cta .cta-row .btn-primary:hover {
  background: #E8C99B; border-color: #E8C99B;
}
.footer-cta .cta-row .btn-wa {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
}
@media (max-width: 800px) {
  .footer-cta { grid-template-columns: 1fr; padding: 22px 22px; gap: 18px; }
}

/* ============================================================
   About page — booking manager + tripadvisor badges row
   ============================================================ */
.about-badges {
  background: var(--white);
  padding: 30px 0 50px;
}
.about-badges .wrap { max-width: 1320px; }
.about-badges-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.about-badge-card {
  display: flex; gap: 20px; align-items: center;
  padding: 26px 28px;
  background: var(--off);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .2s ease, transform .2s ease;
}
.about-badge-card:hover { border-color: var(--slate-2); transform: translateY(-2px); }
.about-badge-card .logo {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
}
.about-badge-card .logo img { width: 100%; height: 100%; object-fit: contain; }
.about-badge-card .body { flex: 1; }
.about-badge-card h3 {
  font-size: 15px;
  letter-spacing: -0.005em;
  font-family: var(--f-display);
}
.about-badge-card .stars {
  display: inline-flex; gap: 2px;
  margin-top: 6px;
  color: #E8B23B;
}
.about-badge-card .stars svg { width: 14px; height: 14px; }
.about-badge-card .meta {
  font-size: 12.5px;
  color: var(--slate-3);
  margin-top: 6px;
  line-height: 1.4;
}
.about-badge-card .meta strong { color: var(--slate-2); font-weight: 600; }
@media (max-width: 900px) { .about-badges-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Hide remaining h-eyebrow with dash on all pages where user wants them gone
   The user asked to remove "small text with dash above every heading in headers"
   Keep on body sections but kill in heroes and section-heads (subhero only safe).
   ============================================================ */
.subhero .h-eyebrow,
.hero .h-eyebrow { display: none !important; }


/* ============================================================
   USER FEEDBACK BATCH (m0035):
   - Full-screen subhero like homepage
   - Transparent navbar over hero (becomes solid on scroll)
   - Push ribbon (stars/WhatsApp) BELOW hero (not above)
   - CTA buttons on every header
   - Bolder icon strokes + bolder small text
   - Push homepage headings UP
   - Mobile: burger to right + lang switchers + dropdowns
   - Desktop: keep dropdown open across the gap
   ============================================================ */

/* Ribbon sits ABOVE the header (fixed position handled in pages-v4.css). */
.top-ribbon {
  background: var(--slate);
  color: rgba(255,255,255,.92);
}
.top-ribbon .wrap { height: 40px; }
.top-ribbon .rb-rating strong { font-weight: 800 !important; font-size: 13.5px; color: #fff; }
.top-ribbon .rb-rating .src { font-weight: 600; color: rgba(255,255,255,.85); }
.top-ribbon .rb-stars svg { width: 14px; height: 14px; }
.top-ribbon .rb-utility { font-weight: 600; }
.top-ribbon .rb-utility .it { color: rgba(255,255,255,.88); }
.top-ribbon .rb-utility .it svg { color: var(--sand); }

/* Make subhero full-screen like hero */
.subhero {
  min-height: 100svh !important;
  align-items: flex-end !important;
}
.subhero .bg::after {
  background: linear-gradient(180deg, rgba(20,28,38,.55) 0%, rgba(20,28,38,.1) 35%, rgba(20,28,38,.85) 100%) !important;
}
.subhero .wrap {
  padding-top: 120px !important;
  padding-bottom: 56px !important;
  width: 100%;
}

/* Override .is-solid being set inline — subheros start transparent.
   The body script will toggle .is-solid based on scroll. */
.site-header:not(.is-solid) {
  background: transparent;
  border-bottom-color: transparent;
}
.site-header:not(.is-solid) .brand img.mark { filter: invert(1) brightness(1.4); }
.site-header:not(.is-solid) .brand .brand-text { color: #fff; }
.site-header:not(.is-solid) .primary-nav a { color: #fff; }
.site-header:not(.is-solid) .lang-switch a { color: #fff; }
.site-header:not(.is-solid) .header-cta {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.site-header:not(.is-solid) .header-cta:hover {
  background: #fff;
  color: var(--slate);
  border-color: #fff;
}
.site-header:not(.is-solid) .menu-toggle { color: #fff; }

/* Bolder primary nav text */
.primary-nav a,
.primary-nav .has-drop > a {
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.02em !important;
}

/* CTA row in subhero — give every page a hero CTA */
.subhero .hero-ctas {
  margin-top: 32px;
  display: flex; flex-wrap: wrap; gap: 14px;
}
.subhero .hero-ctas .btn-primary { background: #fff; color: var(--slate); border-color: #fff; }
.subhero .hero-ctas .btn-primary:hover { background: var(--sand); border-color: var(--sand); }

/* Push homepage headings UP */
.hero-inner { padding-top: 88px !important; padding-bottom: 32px !important; }
.hero-content { align-self: start !important; padding-top: 28px; }
.hero-trust { margin-top: 44px !important; padding-top: 22px !important; }
.hero h1 { font-size: clamp(38px, 6.4vw, 84px) !important; }

/* Icons across the site — bolder strokes */
svg[stroke-width="1.3"],
svg[stroke-width="1.4"],
svg[stroke-width="1.5"],
svg[stroke-width="1.6"] { stroke-width: 1.8 !important; }
.service-card .icon svg,
.why-v2 .wcard .ic-circle svg,
.transfer-card .ic svg,
.event-card .ic svg,
.tour-detail-grid .td-card .ic svg,
.tour-kpis .kpi .ic svg,
.boat-kpis-icon .kpi .ic svg,
.charter-value .vp .ic svg,
.faq-group-head .ic svg,
.subhero .stat-bar .stat::before {
  stroke-width: 2 !important;
}
.subhero .stat-bar .stat::before { width: 28px; height: 28px; }

/* Smaller "label" text bolder + slightly larger */
.h-eyebrow,
.subhero .stat-bar .stat .l,
.tour-kpis .kpi .l,
.boat-kpis-icon .kpi .l,
.testi-platform .src,
.tour-listing-card .meta-row,
.home-featured-card .icon-bar .l,
.charter-value .vp h4,
.values-grid .value-card .ic + h3,
.about-stats-grid .s .l {
  font-weight: 700 !important;
}
.h-eyebrow { color: var(--slate-2) !important; }
.subhero .stat-bar .stat .l { color: rgba(255,255,255,.82) !important; font-size: 11px !important; }

/* Push the stat-bar stickier to the bottom of the subhero */
.subhero .stat-bar { margin-top: 36px !important; }

/* ============================================================
   Desktop dropdown — close the gap so it doesn't disappear when
   user moves mouse toward an item
   ============================================================ */
.primary-nav .has-drop { display: inline-block; }
.primary-nav .has-drop > .drop {
  margin-top: 0 !important;
  transform: translate(-50%, 0) !important;
}
.primary-nav .has-drop:hover > .drop,
.primary-nav .has-drop:focus-within > .drop {
  transform: translate(-50%, 0) !important;
}
/* Bridge gap between trigger and dropdown */
.primary-nav .has-drop > .drop::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0; height: 16px;
}
/* Add padding above dropdown so there's no gap */
.primary-nav .has-drop > a { padding-bottom: 16px !important; }
.primary-nav .has-drop > .drop { top: calc(100% - 8px); }

/* Drop links — make them function as proper clickable anchors */
.primary-nav .has-drop > .drop a {
  display: flex !important;
  align-items: center; gap: 12px;
  padding: 12px 14px !important;
  text-decoration: none !important;
  cursor: pointer;
  pointer-events: auto;
}
.primary-nav .has-drop > .drop a:hover {
  background: var(--off);
  color: var(--slate) !important;
}

/* On transparent header the dropdown is still light/white so contrast works */
.site-header:not(.is-solid) .primary-nav .has-drop > .drop {
  background: var(--white);
}
.site-header:not(.is-solid) .primary-nav .has-drop > .drop a {
  color: var(--slate-2) !important;
}

/* ============================================================
   Mobile menu — burger right, lang switchers in panel, accordion
   ============================================================ */
.header-utils { margin-left: auto !important; }
.menu-toggle { order: 99; margin-left: 8px; }

@media (max-width: 1080px) {
  .header-utils { gap: 10px; }
}
@media (max-width: 720px) {
  .lang-switch { display: none !important; } /* hidden in header, but shown in mm-langs */
}

.mobile-menu .mm-langs {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.mobile-menu .mm-langs a {
  font-size: 14px !important;
  padding: 0 !important;
  font-family: var(--f-display) !important;
  font-weight: 600 !important;
  border: 0 !important;
}
.mobile-menu .mm-langs a.active { color: #fff !important; }
.mobile-menu .mm-langs a:not(.active) { color: rgba(255,255,255,.5) !important; }
.mobile-menu .mm-langs .sep { color: rgba(255,255,255,.25); }

.mobile-menu .mm-contact {
  margin-top: 26px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.7);
}
.mobile-menu .mm-contact a { color: rgba(255,255,255,.92) !important; font-size: 14px !important; padding: 0 !important; border: 0 !important; }
.mobile-menu .mm-contact .ic-row { display: flex; align-items: center; gap: 10px; }
.mobile-menu .mm-contact svg { width: 16px; height: 16px; color: var(--sand); flex: 0 0 16px; }

/* Mobile subhero — keep full screen but shrink padding so headline visible */
@media (max-width: 760px) {
  .subhero { min-height: 88svh !important; }
  .subhero .wrap { padding-top: 92px !important; padding-bottom: 28px !important; }
  .subhero h1 { font-size: clamp(28px, 8vw, 42px) !important; }
  .hero-inner { padding-top: 78px !important; padding-bottom: 22px !important; }
  .hero-content { padding-top: 16px; }
  .hero h1 { font-size: clamp(30px, 9vw, 44px) !important; }
}